Fix history charts not auto refreshing with cached history (#12873)

* Fix history charts refreshing with cached history

Fixes #12859

* return a new array

* Revert "return a new array"

This reverts commit 2b0e265185ffd8f6901da6920ee0abb599955d21.

src/components/chart/ha-chart-base.ts

@@ -11,6 +11,8 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { clamp } from "../../common/number/clamp";
 
+export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
+
 interface Tooltip extends TooltipModel<any> {
   top: string;
   left: string;

src/components/chart/state-history-chart-line.ts

@@ -8,7 +8,7 @@ import {
 } from "../../common/number/format_number";
 import { LineChartEntity, LineChartState } from "../../data/history";
 import { HomeAssistant } from "../../types";
-import "./ha-chart-base";
+import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 
 const safeParseFloat = (value) => {
   const parsed = parseFloat(value);
@@ -34,6 +34,8 @@ class StateHistoryChartLine extends LitElement {
 
   @state() private _chartOptions?: ChartOptions;
 
+  private _chartTime: Date = new Date();
+
   protected render() {
     return html`
       <ha-chart-base
@@ -121,7 +123,13 @@ class StateHistoryChartLine extends LitElement {
         locale: numberFormatToLocale(this.hass.locale),
       };
     }
-    if (changedProps.has("data")) {
+    if (
+      changedProps.has("data") ||
+      this._chartTime <
+        new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
+    ) {
+      // If the line is more than 5 minutes old, re-gen it
+      // so the X axis grows even if there is no new data
       this._generateData();
     }
   }
@@ -135,6 +143,7 @@ class StateHistoryChartLine extends LitElement {
       return;
     }
 
+    this._chartTime = new Date();
     const endTime = this.endTime;
     const names = this.names || {};
     entityStates.forEach((states) => {

src/components/chart/state-history-chart-timeline.ts

@@ -9,7 +9,7 @@ import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { TimelineEntity } from "../../data/history";
 import { HomeAssistant } from "../../types";
-import "./ha-chart-base";
+import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import type { TimeLineData } from "./timeline-chart/const";
 
 /** Binary sensor device classes for which the static colors for on/off are NOT inverted.
@@ -103,6 +103,8 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @state() private _chartOptions?: ChartOptions<"timeline">;
 
+  private _chartTime: Date = new Date();
+
   protected render() {
     return html`
       <ha-chart-base
@@ -211,7 +213,13 @@ export class StateHistoryChartTimeline extends LitElement {
         locale: numberFormatToLocale(this.hass.locale),
       };
     }
-    if (changedProps.has("data")) {
+    if (
+      changedProps.has("data") ||
+      this._chartTime <
+        new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
+    ) {
+      // If the line is more than 5 minutes old, re-gen it
+      // so the X axis grows even if there is no new data
       this._generateData();
     }
   }
@@ -224,6 +232,7 @@ export class StateHistoryChartTimeline extends LitElement {
       stateHistory = [];
     }
 
+    this._chartTime = new Date();
     const startTime = this.startTime;
     const endTime = this.endTime;
     const labels: string[] = [];

src/data/cached-history.ts

@@ -158,8 +158,14 @@ export const getRecentWithCache = (
     }
     const stateHistory = computeHistory(hass, fetchedHistory, localize);
     if (appendingToCache) {
-      mergeLine(stateHistory.line, cache.data.line);
+      if (stateHistory.line.length) {
-      mergeTimeline(stateHistory.timeline, cache.data.timeline);
+        mergeLine(stateHistory.line, cache.data.line);
+      }
+      if (stateHistory.timeline.length) {
+        mergeTimeline(stateHistory.timeline, cache.data.timeline);
+        // Replace the timeline array to force an update
+        cache.data.timeline = [...cache.data.timeline];
+      }
       pruneStartTime(startTime, cache.data);
     } else {
       cache.data = stateHistory;
@@ -191,6 +197,8 @@ const mergeLine = (
           oldLine.data.push(entity);
         }
       });
+      // Replace the cached line data to force an update
+      oldLine.data = [...oldLine.data];
     } else {
       cacheLines.push(line);
     }