fix(xasis): Better handling of graph end time if everything is `colum…

…n` and `group_by` is enabled

.devcontainer/ui-lovelace.yaml

@@ -2,6 +2,18 @@ views:
   - title: Main
     cards:
       - type: custom:apexcharts-card
+        apex_config:
+          chart:
+            toolbar:
+              show: true
+              tools:
+                zoom: true
+                zoomin: true
+                zoomout: true
+                pan: true
+                reset: true
+            zoom:
+              enabled: true
         update_interval: 5sec
         stacked: true
         series:
@@ -168,20 +180,37 @@ views:
             enabled: true
             dropShadow:
               enabled: true
+          yaxis:
+            - title:
+                text: test1
+              show: true
+              opposite: true
+              decimalsInFloat: 1
+            - title:
+                text: Test2
+              show: true
+              # opposite: true
+              decimalsInFloat: 1
         series:
           - entity: sensor.random0_100
             extend_to_end: false
             type: column
             invert: true
             group_by:
               func: avg
-              fill: 'null'
+              fill: 'last'
           - entity: sensor.random0_100
             extend_to_end: false
             type: column
             group_by:
               func: avg
-              fill: 'null'
+              fill: 'last'
+          - entity: sensor.random0_100
+            extend_to_end: false
+            type: column
+            group_by:
+              func: avg
+              fill: 'last'
 
       - type: custom:apexcharts-card
         span:

src/apexcharts-card.ts

@@ -32,6 +32,7 @@ import {
   DEFAULT_SERIE_TYPE,
   HOUR_24,
 } from './const';
+import parse from 'parse-duration';
 
 /* eslint no-console: 0 */
 console.info(
@@ -370,7 +371,7 @@ class ChartsCard extends LitElement {
         }),
         xaxis: {
           min: start.getTime(),
-          max: end.getTime(),
+          max: this._findEndOfChart(end),
         },
         colors: computeColors(this._colors),
       };
@@ -382,6 +383,29 @@ class ChartsCard extends LitElement {
     this._updating = false;
   }
 
+  /*
+    Makes the chart end at the last timestamp of the data when everything displayed is a
+    column and group_by is enabled for every serie
+  */
+  private _findEndOfChart(end: Date): number {
+    const localEnd = new Date(end);
+    let offsetEnd: number | undefined = 0;
+    const onlyBars = this._config?.series.reduce((acc, serie) => {
+      return acc && serie.type === 'column' && serie.group_by.func !== 'raw';
+    }, this._config?.series.length > 0);
+    if (onlyBars) {
+      offsetEnd = this._config?.series.reduce((acc, serie) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const dur = parse(serie.group_by.duration)!;
+        if (acc === -1 || dur < acc) {
+          return dur;
+        }
+        return acc;
+      }, -1);
+    }
+    return new Date(localEnd.getTime() - (offsetEnd ? offsetEnd : 0)).getTime();
+  }
+
   private _invertData(data: (number | null)[][]): (number | null)[][] {
     return data.map((item) => {
       if (item[1] === null) return item;

src/graphEntry.ts

@@ -198,7 +198,10 @@ export default class GraphEntry {
       }
     }
 
-    if (!history || history.data.length === 0) return false;
+    if (!history || history.data.length === 0) {
+      this._updating = false;
+      return false;
+    }
     this._history = history;
     if (this._config.group_by.func !== 'raw') {
       this._computedHistory = this._dataBucketer().map((bucket) => {