Fix history data processing (#951)

* don't call filterchanged twice. it's already an observer.

* fix data comparison
Compare new data from ha-state-history-data to existing data and replace
if changed

* remove unnecessary styles

* prevent multiple updates of chart-data

* remove console

* remove another console

* directly binding because debouncing in history-data element
shortening debounce time, works fine at 0

* remove inacurate comment

panels/history/ha-panel-history.html

@@ -46,7 +46,7 @@
       filter-type='[[_filterType]]'
       start-time='[[_computeStartTime(_currentDate)]]'
       end-time='[[endTime]]'
-      data='{{stateHistoryInput}}'
+      data='{{stateHistory}}'
       is-loading='{{isLoadingData}}'
     ></ha-state-history-data>
     <app-header-layout has-scrolling-region>
@@ -83,7 +83,7 @@
         </div>
         <state-history-charts
           hass='[[hass]]'
-          history-data="[[stateHistoryOutput]]"
+          history-data="[[stateHistory]]"
           is-loading-data="[[isLoadingData]]"
           end-time="[[endTime]]"
           no-single>
@@ -115,13 +115,7 @@ class HaPanelHistory extends window.hassMixins.LocalizeMixin(Polymer.Element) {
         value: false,
       },
 
-      stateHistoryInput: {
-        type: Object,
-        value: null,
-        observer: 'stateHistoryObserver'
-      },
-
-      stateHistoryOutput: {
+      stateHistory: {
         type: Object,
         value: null,
       },
@@ -199,15 +193,6 @@ class HaPanelHistory extends window.hassMixins.LocalizeMixin(Polymer.Element) {
       default: return 1;
     }
   }
-
-  stateHistoryObserver(newVal) {
-    setTimeout(() => {
-      if (newVal === this.stateHistoryInput) {
-        // Input didn't change
-        this.stateHistoryOutput = newVal;
-      }
-    }, 1);
-  }
 }
 
 customElements.define(HaPanelHistory.is, HaPanelHistory);

src/components/state-history-charts.html

@@ -10,16 +10,6 @@
     :host {
       display: block;
     }
-
-    .loading-container {
-      text-align: center;
-      padding: 8px;
-    }
-
-    .loading {
-      height: 0px;
-      overflow: hidden;
-    }
     </style>
 
     <template is='dom-if' if='[[_computeIsEmpty(historyData)]]'>

src/data/ha-state-history-data.html

@@ -134,18 +134,10 @@
 
     static get observers() {
       return [
-        'filterChanged(filterType, entityId, startTime, endTime, cacheConfig, localize, language)',
+        'filterChangedDebouncer(filterType, entityId, startTime, endTime, cacheConfig, localize, language)',
       ];
     }
 
-    connectedCallback() {
-      super.connectedCallback();
-      this.filterChanged(
-        this.filterType, this.entityId, this.startTime, this.endTime,
-        this.cacheConfig, this.localize, this.language
-      );
-    }
-
     disconnectedCallback() {
       if (this._refreshTimeoutId) {
         window.clearInterval(this._refreshTimeoutId);
@@ -156,13 +148,23 @@
 
     hassChanged(newHass, oldHass) {
       if (!oldHass && !this._madeFirstCall) {
-        this.filterChanged(
+        this.filterChangedDebouncer(
           this.filterType, this.entityId, this.startTime, this.endTime,
           this.cacheConfig, this.localize, this.language
         );
       }
     }
 
+    filterChangedDebouncer(...args) {
+      this._debounceFilterChanged = Polymer.Debouncer.debounce(
+        this._debounceFilterChanged,
+        Polymer.Async.timeOut.after(0),
+        () => {
+          this.filterChanged(...args);
+        }
+      );
+    }
+
     filterChanged(filterType, entityId, startTime, endTime, cacheConfig, localize, language) {
       if (!this.hass) return;
       if (cacheConfig && !cacheConfig.cacheKey) return;
@@ -183,7 +185,6 @@
       } else {
         return;
       }
-
       this._setIsLoading(true);
 
       data.then((stateHistory) => {