fix(series.offset): Fix bug introduced by RomRider#19

Fixes RomRider#18

src/apexcharts-card.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, customElement, property, TemplateResult, CSSResult, PropertyValues } from 'lit-element';
 import { ClassInfo, classMap } from 'lit-html/directives/class-map';
-import { ChartCardConfig, EntityEntryCache } from './types';
+import { ChartCardConfig, EntityCachePoints, EntityEntryCache } from './types';
 import { HomeAssistant } from 'custom-card-helpers';
 import localForage from 'localforage';
 import * as pjson from '../package.json';
@@ -11,6 +11,7 @@ import {
   decompress,
   log,
   mergeDeep,
+  offsetData,
   validateInterval,
   validateOffset,
 } from './utils';
@@ -238,7 +239,6 @@ class ChartsCard extends LitElement {
             this._config!.cache,
             serie,
             this._config?.span,
-            this._seriesOffset[index] || 0,
           );
         }
         return undefined;
@@ -352,7 +352,12 @@ class ChartsCard extends LitElement {
 
     const { start, end } = this._getSpanDates();
     try {
-      const promise = this._graphs.map((graph) => graph?._updateHistory(start, end));
+      const promise = this._graphs.map((graph, index) =>
+        graph?._updateHistory(
+          this._seriesOffset[index] ? new Date(start.getTime() + this._seriesOffset[index]) : start,
+          this._seriesOffset[index] ? new Date(end.getTime() + this._seriesOffset[index]) : end,
+        ),
+      );
       await Promise.all(promise);
       const graphData = {
         series: this._graphs.map((graph) => {
@@ -373,13 +378,14 @@ class ChartsCard extends LitElement {
               this._lastState[index] = (this._lastState[index] as number).toFixed(precision);
             }
           }
-          let data: (number | null)[][] = [];
+          let data: EntityCachePoints = [];
           if (this._config?.series[index].extend_to_end && this._config?.series[index].type !== 'column') {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            data = [...graph.history, ...[[end.getTime(), graph.history.slice(-1)[0]![1]]]];
+            data = [...graph.history, ...([[end.getTime(), graph.history.slice(-1)[0]![1]]] as EntityCachePoints)];
           } else {
             data = graph.history;
           }
+          data = offsetData(data, this._seriesOffset[index]);
           return this._config?.series[index].invert ? { data: this._invertData(data) } : { data };
         }),
         xaxis: {
@@ -419,7 +425,7 @@ class ChartsCard extends LitElement {
     return new Date(localEnd.getTime() - (offsetEnd ? offsetEnd : 0)).getTime();
   }
 
-  private _invertData(data: (number | null)[][]): (number | null)[][] {
+  private _invertData(data: EntityCachePoints): EntityCachePoints {
     return data.map((item) => {
       if (item[1] === null) return item;
       return [item[0], -item[1]];

src/graphEntry.ts

@@ -1,7 +1,7 @@
 import { HomeAssistant } from 'custom-card-helpers';
 import { ChartCardSeriesConfig, EntityCachePoints, EntityEntryCache, HassHistory, HistoryBuckets } from './types';
 import { compress, decompress, log } from './utils';
-import localForage, { config } from 'localforage';
+import localForage from 'localforage';
 import { HassEntity } from 'home-assistant-js-websocket';
 import { DateRange } from 'moment-range';
 import { HOUR_24, moment } from './const';
@@ -47,15 +47,12 @@ export default class GraphEntry {
 
   private _md5Config: string;
 
-  private _offset = 0;
-
   constructor(
     index: number,
     graphSpan: number,
     cache: boolean,
     config: ChartCardSeriesConfig,
     span: ChartCardSpanExtConfig | undefined,
-    offset = 0,
   ) {
     const aggregateFuncMap = {
       avg: this._average,
@@ -73,7 +70,6 @@ export default class GraphEntry {
     this._history = undefined;
     this._graphSpan = graphSpan;
     this._config = config;
-    this._offset = offset;
     const now = new Date();
     const now2 = new Date(now);
     this._func = aggregateFuncMap[config.group_by.func];
@@ -93,7 +89,7 @@ export default class GraphEntry {
   }
 
   get history(): EntityCachePoints {
-    return this._offsetData(this._computedHistory || this._history?.data || []);
+    return this._computedHistory || this._history?.data || [];
   }
 
   get index(): number {
@@ -108,17 +104,6 @@ export default class GraphEntry {
     return this._realEnd;
   }
 
-  private _offsetData(data: EntityCachePoints) {
-    if (this._offset) {
-      const lData = JSON.parse(JSON.stringify(data));
-      lData.forEach((entry) => {
-        entry[0] = entry[0] - this._offset;
-      });
-      return lData;
-    }
-    return data;
-  }
-
   private async _getCache(key: string, compressed: boolean): Promise<EntityEntryCache | undefined> {
     const data: EntityEntryCache | undefined | null = await localForage.getItem(
       `${key}_${this._md5Config}${compressed ? '' : '-raw'}`,
@@ -153,12 +138,6 @@ export default class GraphEntry {
     } else {
       this._realStart = new Date(start);
       this._realEnd = new Date(end);
-      const endHistory = new Date(end);
-
-      if (this._offset) {
-        startHistory.setTime(startHistory.getTime() + this._offset);
-        endHistory.setTime(endHistory.getTime() + this._offset);
-      }
 
       let skipInitialState = false;
 
@@ -186,7 +165,7 @@ export default class GraphEntry {
           ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             new Date(history.data.slice(-1)[0]![0] + 1)
           : startHistory,
-        endHistory,
+        end,
         skipInitialState,
       );
       if (newHistory && newHistory[0] && newHistory[0].length > 0) {

src/utils.ts

@@ -1,6 +1,6 @@
 import { HassEntities, HassEntity } from 'home-assistant-js-websocket';
 import { compress as lzStringCompress, decompress as lzStringDecompress } from 'lz-string';
-import { ChartCardConfig } from './types';
+import { ChartCardConfig, EntityCachePoints } from './types';
 import { TinyColor } from '@ctrl/tinycolor';
 import parse from 'parse-duration';
 
@@ -124,3 +124,14 @@ export function validateOffset(interval: string, prefix: string): number {
   }
   return validateInterval(interval, prefix);
 }
+
+export function offsetData(data: EntityCachePoints, offset: number | undefined): EntityCachePoints {
+  if (offset) {
+    const lData = JSON.parse(JSON.stringify(data));
+    lData.forEach((entry) => {
+      entry[0] = entry[0] - offset;
+    });
+    return lData;
+  }
+  return data;
+}