From e2fd155e1b8847a3f11ad8a5ff23c3bea90bb0bc Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 24 Aug 2020 17:03:42 +0200
Subject: [PATCH] Fix updating history card + only update when entity changed
 (#6647)

---
 .../lovelace/cards/hui-history-graph-card.ts  | 53 +++++++++----------
 src/panels/lovelace/common/has-changed.ts     | 39 ++++++++++++--
 2 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
index ab74d1cf0a..e49ebc1ed2 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.ts
+++ b/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 {
-    super.disconnectedCallback();
-    this._clearInterval();
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntitiesChanged(this, changedProps);
   }
 
   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();
+    } else if (
+      this._cacheConfig.refresh &&
+      Date.now() - this._date!.getTime() >= this._cacheConfig.refresh * 100
+    ) {
       this._getStateHistory();
-      this._clearInterval();
-
-      if (!this._interval && this._cacheConfig.refresh) {
-        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.hass!,
-        this._cacheConfig!.cacheKey,
-        this._cacheConfig!,
-        this.hass!.localize,
-        this.hass!.language
-      );
+      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 {
diff --git a/src/panels/lovelace/common/has-changed.ts b/src/panels/lovelace/common/has-changed.ts
index 49eb8df4c7..44f35709a4 100644
--- a/src/panels/lovelace/common/has-changed.ts
+++ b/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
-export function hasConfigOrEntityChanged(
-  element: any,
-  changedProps: PropertyValues
-): boolean {
+function hasConfigChanged(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]
+  );
+}