Fix updating history card + only update when entity changed (#6647)

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

@@ -19,6 +19,8 @@ import { processConfigEntities } from "../common/process-config-entities";
 import { EntityConfig } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
 import { HistoryGraphCardConfig } from "./types";
+import { HistoryResult } from "../../../data/history";
+import { hasConfigOrEntitiesChanged } from "../common/has-changed";
 
 @customElement("hui-history-graph-card")
 export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
@@ -49,7 +51,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _stateHistory?: any;
+  @internalProperty() private _stateHistory?: HistoryResult;
 
   @internalProperty() private _config?: HistoryGraphCardConfig;
 
@@ -59,10 +61,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   private _cacheConfig?: CacheConfig;
 
-  private _interval?: number;
-
   private _fetching = false;
 
+  private _date?: Date;
+
   public getCardSize(): number {
     return 4;
   }
@@ -97,9 +99,8 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     };
   }
 
-  public disconnectedCallback(): void {
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    super.disconnectedCallback();
+    return hasConfigOrEntitiesChanged(this, changedProps);
-    this._clearInterval();
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -108,21 +109,19 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    if (!changedProps.has("_config")) {
+    if (!changedProps.has("_config") && !changedProps.has("hass")) {
       return;
     }
 
     const oldConfig = changedProps.get("_config") as HistoryGraphCardConfig;
 
-    if (oldConfig !== this._config) {
+    if (changedProps.has("_config") && oldConfig !== this._config) {
       this._getStateHistory();
-      this._clearInterval();
+    } else if (
-
+      this._cacheConfig.refresh &&
-      if (!this._interval && this._cacheConfig.refresh) {
+      Date.now() - this._date!.getTime() >= this._cacheConfig.refresh * 100
-        this._interval = window.setInterval(() => {
+    ) {
       this._getStateHistory();
-        }, this._cacheConfig.refresh * 1000);
-      }
     }
   }
 
@@ -155,27 +154,23 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     if (this._fetching) {
       return;
     }
+    this._date = new Date();
     this._fetching = true;
     try {
-      this._stateHistory = await getRecentWithCache(
+      this._stateHistory = {
+        ...(await getRecentWithCache(
           this.hass!,
           this._cacheConfig!.cacheKey,
           this._cacheConfig!,
           this.hass!.localize,
           this.hass!.language
-      );
+        )),
+      };
     } finally {
       this._fetching = false;
     }
   }
 
-  private _clearInterval(): void {
-    if (this._interval) {
-      window.clearInterval(this._interval);
-      this._interval = undefined;
-    }
-  }
-
   static get styles(): CSSResult {
     return css`
       .content {

src/panels/lovelace/common/has-changed.ts

@@ -1,11 +1,8 @@
 import { PropertyValues } from "lit-element";
 import { HomeAssistant } from "../../../types";
+import { processConfigEntities } from "./process-config-entities";
 
-// Check if config or Entity changed
+function hasConfigChanged(element: any, changedProps: PropertyValues): boolean {
-export function hasConfigOrEntityChanged(
-  element: any,
-  changedProps: PropertyValues
-): boolean {
   if (changedProps.has("_config")) {
     return true;
   }
@@ -23,9 +20,41 @@ export function hasConfigOrEntityChanged(
   ) {
     return true;
   }
+  return false;
+}
+
+// Check if config or Entity changed
+export function hasConfigOrEntityChanged(
+  element: any,
+  changedProps: PropertyValues
+): boolean {
+  if (hasConfigChanged(element, changedProps)) {
+    return true;
+  }
+
+  const oldHass = changedProps.get("hass") as HomeAssistant;
 
   return (
     oldHass.states[element._config!.entity] !==
     element.hass!.states[element._config!.entity]
   );
 }
+
+// Check if config or Entities changed
+export function hasConfigOrEntitiesChanged(
+  element: any,
+  changedProps: PropertyValues
+): boolean {
+  if (hasConfigChanged(element, changedProps)) {
+    return true;
+  }
+
+  const oldHass = changedProps.get("hass") as HomeAssistant;
+
+  const entities = processConfigEntities(element._config!.entities);
+
+  return entities.some(
+    (entity) =>
+      oldHass.states[entity.entity] !== element.hass!.states[entity.entity]
+  );
+}