Fix history chart fetching changes

src/data/cached-history.ts

@@ -10,7 +10,6 @@ import {
 } from "./history";
 
 export interface CacheConfig {
-  refresh: number;
   cacheKey: string;
   hoursToShow: number;
 }

src/dialogs/more-info/ha-more-info-history.ts

@@ -78,7 +78,6 @@ export class MoreInfoHistory extends LitElement {
       this.hass!,
       this.entityId,
       {
-        refresh: 60,
         cacheKey: `more_info.${this.entityId}`,
         hoursToShow: 24,
       },

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -21,6 +21,7 @@ import { LovelaceCard } from "../types";
 import { HistoryGraphCardConfig } from "./types";
 import { HistoryResult } from "../../../data/history";
 import { hasConfigOrEntitiesChanged } from "../common/has-changed";
+import { throttle } from "../../../common/util/throttle";
 
 @customElement("hui-history-graph-card")
 export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
@@ -63,7 +64,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   private _fetching = false;
 
-  private _date?: Date;
+  private _throttleGetStateHistory?: () => void;
 
   public getCardSize(): number {
     return 4;
@@ -92,10 +93,13 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       }
     });
 
+    this._throttleGetStateHistory = throttle(() => {
+      this._getStateHistory();
+    }, config.refresh_interval || 10 * 1000);
+
     this._cacheConfig = {
       cacheKey: _entities.join(),
       hoursToShow: config.hours_to_show || 24,
-      refresh: config.refresh_interval || 0,
     };
   }
 
@@ -105,23 +109,32 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
-    if (!this._config || !this.hass || !this._cacheConfig) {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this._throttleGetStateHistory ||
+      !this._cacheConfig
+    ) {
       return;
     }
 
     if (!changedProps.has("_config") && !changedProps.has("hass")) {
       return;
     }
 
-    const oldConfig = changedProps.get("_config") as HistoryGraphCardConfig;
+    const oldConfig = changedProps.get("_config") as
+      | HistoryGraphCardConfig
+      | undefined;
 
-    if (changedProps.has("_config") && oldConfig !== this._config) {
-      this._getStateHistory();
-    } else if (
-      this._cacheConfig.refresh &&
-      Date.now() - this._date!.getTime() >= this._cacheConfig.refresh * 100
+    if (
+      changedProps.has("_config") &&
+      (oldConfig?.entities !== this._config.entities ||
+        oldConfig?.hours_to_show !== this._config.hours_to_show)
     ) {
-      this._getStateHistory();
+      this._throttleGetStateHistory();
+    } else if (changedProps.has("hass")) {
+      // wait for commit of data (we only account for the default setting of 1 sec)
+      setTimeout(this._throttleGetStateHistory, 1000);
     }
   }
 
@@ -154,7 +167,6 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     if (this._fetching) {
       return;
     }
-    this._date = new Date();
     this._fetching = true;
     try {
       this._stateHistory = {