fix: Last computed history data shouldn't be null

ka0n · Jan 24, 2021 · ec875d5 · ec875d5
1 parent 13dfd89
commit ec875d5
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -52,7 +52,7 @@ views:
 
 
       - type: custom:apexcharts-card
-        stacked: true
+        stacked: false
         series:
           - entity: sensor.random_0_1000
             name: test1
@@ -66,6 +66,7 @@ views:
         hours_to_show: 200
         series:
           - entity: sensor.humidity
+            curve: straight
 
       - type: custom:apexcharts-card
         hours_to_show: 24

diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts
@@ -7,7 +7,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
   const def = {
     chart: {
       stacked: config?.stacked,
-      type: 'line',
+      // type: 'line',
       foreColor: 'var(--primary-text-color)',
       width: '100%',
       zoom: {
@@ -20,6 +20,11 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
     grid: {
       strokeDashArray: 3,
     },
+    // plotOptions: {
+    //   bar: {
+    //     distributed: true,
+    //   },
+    // },
     series: config?.series.map((serie, index) => {
       return {
         name: computeName(index, config, hass?.states),
@@ -73,6 +78,9 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
       }),
       lineCap: 'butt',
     },
+    markers: {
+      showNullDataPoints: false,
+    },
     noData: {
       text: 'Loading...',
     },

diff --git a/src/graphEntry.ts b/src/graphEntry.ts
@@ -38,6 +38,8 @@ export default class GraphEntry {
 
   private _realEnd: Date;
 
+  private _groupByDurationMs: number;
+
   constructor(entity: string, index: number, hoursToShow: number, cache: boolean, config: ChartCardSeriesConfig) {
     const aggregateFuncMap = {
       avg: this._average,
@@ -55,6 +57,9 @@ export default class GraphEntry {
     this._timeRange = moment.range(now, now2);
     this._realEnd = new Date();
     this._realStart = new Date();
+    // Valid because tested during init;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this._groupByDurationMs = parse(this._config.group_by.duration)!;
   }
 
   set hass(hass: HomeAssistant) {
@@ -97,10 +102,9 @@ export default class GraphEntry {
 
     let startHistory = start;
     if (this._config.group_by.func !== 'raw') {
-      const dur = parse(this._config.group_by.duration)!;
       const range = end.getTime() - start.getTime();
-      const nbBuckets = Math.abs(range / dur) + (range % dur > 0 ? 1 : 0);
-      startHistory = new Date(end.getTime() - nbBuckets * dur);
+      const nbBuckets = Math.abs(range / this._groupByDurationMs) + (range % this._groupByDurationMs > 0 ? 1 : 0);
+      startHistory = new Date(end.getTime() - nbBuckets * this._groupByDurationMs);
     }
     if (!this._entityState || this._updating) return false;
     this._updating = true;
@@ -168,7 +172,7 @@ export default class GraphEntry {
     this._history = history;
     if (this._config.group_by.func !== 'raw') {
       this._computedHistory = this._dataBucketer().map((bucket) => {
-        return [bucket.timestamp, this._func(bucket.data)];
+        return [(new Date(bucket.timestamp) as any) as number, this._func(bucket.data)];
       });
     }
     this._updating = false;
@@ -190,10 +194,7 @@ export default class GraphEntry {
   }
 
   private _dataBucketer(): HistoryBuckets {
-    const groupBy = parse(this._config.group_by.duration);
-    // groupBy is valid, it has been tester during init;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ranges = Array.from(this._timeRange.reverseBy('milliseconds', { step: groupBy! })).reverse();
+    const ranges = Array.from(this._timeRange.reverseBy('milliseconds', { step: this._groupByDurationMs })).reverse();
     // const res: EntityCachePoints[] = [[]];
     const buckets: HistoryBuckets = [];
     ranges.forEach((range) => {
@@ -206,6 +207,7 @@ export default class GraphEntry {
         }
       });
     });
+    buckets.pop();
     return buckets;
   }