fix(in_header): after/before_now not working with offsetted series

.devcontainer/ui-lovelace.yaml

@@ -920,3 +920,26 @@ views:
                 offset: -1h
                 show:
                   offset_in_name: false
+          - type: custom:apexcharts-card
+            header:
+              show: true
+              title: Irradiance
+              show_states: true
+              colorize_states: true
+            now:
+              show: true
+            graph_span: 1d
+            span:
+              start: day
+            series:
+              - entity: sensor.random0_100
+                group_by:
+                  func: avg
+                  duration: 1h
+              - entity: sensor.random0_100
+                offset: -1d
+                group_by:
+                  func: avg
+                  duration: 1h
+                show:
+                  in_header: before_now

src/apexcharts-card.ts

@@ -555,6 +555,7 @@ class ChartsCard extends LitElement {
     if (!this._config || !this._apexChart || !this._graphs) return;
 
     const { start, end } = this._getSpanDates();
+    const now = new Date();
     const editMode = getLovelace()?.editMode;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const caching = editMode === true ? false : this._config!.cache;
@@ -585,7 +586,10 @@ class ChartsCard extends LitElement {
               this._headerState[index] = lastState;
             } else {
               // before_now / after_now
-              this._headerState[index] = graph.nowValue(inHeader === 'before_now');
+              this._headerState[index] = graph.nowValue(
+                now.getTime() + (this._seriesOffset[index] ? this._seriesOffset[index] : 0),
+                inHeader === 'before_now',
+              );
             }
           }
           if (!this._config?.series[index].show.in_chart && !this._config?.series[index].show.in_brush) {
@@ -605,7 +609,7 @@ class ChartsCard extends LitElement {
           if (this._config?.series[index].show.in_brush) brushData.series.push(result);
           return;
         });
-        graphData.annotations = this._computeAnnotations(start, end);
+        graphData.annotations = this._computeAnnotations(start, end, now);
         if (!this._apexBrush) {
           graphData.xaxis = {
             min: start.getTime(),
@@ -745,10 +749,10 @@ class ChartsCard extends LitElement {
     this._updating = false;
   }
 
-  private _computeAnnotations(start: Date, end: Date) {
+  private _computeAnnotations(start: Date, end: Date, now: Date) {
     return {
       ...this._computeMinMaxPointsAnnotations(start, end),
-      ...this._computeNowAnnotation(),
+      ...this._computeNowAnnotation(now),
     };
   }
 
@@ -849,14 +853,14 @@ class ChartsCard extends LitElement {
     return points;
   }
 
-  private _computeNowAnnotation() {
+  private _computeNowAnnotation(now: Date) {
     if (this._config?.now?.show) {
       const color = computeColor(this._config.now.color || 'var(--primary-color)');
       const textColor = computeTextColor(color);
       return {
         xaxis: [
           {
-            x: new Date().getTime(),
+            x: now.getTime(),
             strokeDashArray: 3,
             label: {
               text: this._config.now.label,

src/graphEntry.ts

@@ -108,9 +108,8 @@ export default class GraphEntry {
     this._cache = cache;
   }
 
-  public nowValue(before: boolean): number | null {
+  public nowValue(now: number, before: boolean): number | null {
     if (this.history.length === 0) return null;
-    const now = new Date().getTime();
     const index = this.history.findIndex((point, index, arr) => {
       if (!before && point[0] > now) return true;
       if (before && point[0] < now && arr[index + 1] && arr[index + 1][0] > now) return true;