Charts fixes (#742)

src/cards/ha-history_graph-card.html

@@ -32,7 +32,7 @@
       entity-id='[[computeHistoryEntities(stateObj)]]'
       data='{{stateHistory}}'
       is-loading='{{stateHistoryLoading}}'
-      cache-config='[[computeCacheConfig(stateObj)]]'
+      cache-config='[[cacheConfig]]'
     ></ha-state-history-data>
     <paper-card dialog$='[[inDialog]]'
         on-tap='cardTapped'
@@ -56,16 +56,40 @@ class HaHistoryGraphCard extends window.hassMixins.EventsMixin(Polymer.Element)
   static get properties() {
     return {
       hass: Object,
-      stateObj: Object,
+      stateObj: {
+        type: Object,
+        observer: 'stateObjObserver',
+      },
       inDialog: {
         type: Boolean,
         value: false,
       },
       stateHistory: Object,
       stateHistoryLoading: Boolean,
+      cacheConfig: {
+        type: Object,
+        value: {
+          refresh: 0,
+          cacheKey: null,
+          hoursToShow: 24,
+        },
+      },
     };
   }
 
+  stateObjObserver(stateObj) {
+    if (!stateObj) return;
+    if (this.cacheConfig.cacheKey !== stateObj.entity_id ||
+        this.cacheConfig.refresh !== (stateObj.attributes.refresh || 0) ||
+        this.cacheConfig.hoursToShow !== (stateObj.attributes.hours_to_show || 24)) {
+      this.cacheConfig = Object.assign({}, {
+        refresh: stateObj.attributes.refresh || 0,
+        cacheKey: stateObj.entity_id,
+        hoursToShow: stateObj.attributes.hours_to_show || 24
+      });
+    }
+  }
+
   computeTitle(stateObj) {
     return window.hassUtil.computeStateName(stateObj);
   }
@@ -78,14 +102,6 @@ class HaHistoryGraphCard extends window.hassMixins.EventsMixin(Polymer.Element)
     return stateObj.attributes.entity_id;
   }
 
-  computeCacheConfig(stateObj) {
-    return {
-      refresh: stateObj.attributes.refresh || 0,
-      cacheKey: stateObj.entity_id,
-      hoursToShow: (stateObj && stateObj.attributes.hours_to_show) || 24,
-    };
-  }
-
   computeElevation(inDialog) {
     return inDialog ? 0 : 1;
   }

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

@@ -58,7 +58,7 @@
               state: state.state,
               last_changed: state.last_changed,
             };
-            if (DOMAINS_USE_LAST_UPDATED.indexOf(domain) !== -1) {
+            if (DOMAINS_USE_LAST_UPDATED.includes(domain)) {
               result.last_changed = state.last_updated;
             }
             LINE_ATTRIBUTES_TO_KEEP.forEach((attr) => {
@@ -68,6 +68,17 @@
               }
             });
             return result;
+          }).filter((element, index, arr) => {
+            // Remove data point if it is equal to previous point and next point.
+            if (index === 0 || index === (arr.length - 1)) return true;
+            function compare(obj1, obj2) {
+              if (obj1.state !== obj2.state) return false;
+              if (!obj1.attributes && !obj2.attributes) return true;
+              if (!obj1.attributes || !obj2.attributes) return false;
+              return LINE_ATTRIBUTES_TO_KEEP.every(attr =>
+                obj1.attributes[attr] === obj2.attributes[attr]);
+            }
+            return !compare(element, arr[index - 1]) || !compare(element, arr[index + 1]);
           })
         };
       }),
@@ -191,7 +202,7 @@
             const oldEntity =
                 oldLine.data.find(cacheEntity => entity.entity_id === cacheEntity.entity_id);
             if (oldEntity) {
-              oldEntity.states = oldEntity.state.concat(entity.states);
+              oldEntity.states = oldEntity.states.concat(entity.states);
             } else {
               oldLine.data.push(entity);
             }

src/dialogs/more-info-dialog.html

@@ -2,13 +2,10 @@
 
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
-<!-- <link rel="import" href="../../bower_components/neon-animation/animations/slide-up-animation.html">
-<link rel="import" href="../../bower_components/neon-animation/animations/slide-down-animation.html">
- -->
-<link rel="import" href="../state-summary/state-card-content.html">
 <link rel="import" href="../components/state-history-charts.html">
-<link rel="import" href="../more-infos/more-info-content.html">
 <link rel="import" href="../data/ha-state-history-data.html">
+<link rel="import" href="../more-infos/more-info-content.html">
+<link rel="import" href="../state-summary/state-card-content.html">
 <link rel='import' href='../util/hass-mixins.html'>
 
 <dom-module id="more-info-dialog">
@@ -61,11 +58,6 @@
           width: 100%;
         }
       }
-
-      dom-if {
-        display: none;
-      }
-
     </style>
 
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
@@ -83,7 +75,7 @@
             entity-id='[[stateObj.entity_id]]'
             data='{{stateHistory}}'
             is-loading='{{stateHistoryLoading}}'
-            cache-config='[[computeCacheConfig(stateObj)]]'
+            cache-config='[[cacheConfig]]'
           ></ha-state-history-data>
           <state-history-charts
             history-data="[[stateHistory]]"
@@ -143,6 +135,15 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
         type: Boolean,
         value: false,
       },
+
+      cacheConfig: {
+        type: Object,
+        value: {
+          refresh: 60,
+          cacheKey: null,
+          hoursToShow: 24,
+        },
+      },
     };
   }
 
@@ -159,14 +160,6 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
     return hass.states[hass.moreInfoEntityId] || null;
   }
 
-  computeCacheConfig(stateObj) {
-    return {
-      refresh: 60,
-      cacheKey: 'more_info.' + stateObj.entity_id,
-      hoursToShow: 24,
-    };
-  }
-
   /**
    * We depend on a delayed dialogOpen value to tell the chart component
    * that the data is there. Otherwise the chart component will render
@@ -198,6 +191,12 @@ class MoreInfoDialog extends window.hassMixins.EventsMixin(Polymer.Element) {
       // positioned correctly.
       this.dialogOpen = true;
     }, 10);
+    if (this.cacheConfig.cacheKey !== `more_info.${newVal.entity_id}`) {
+      this.cacheConfig = Object.assign(
+        {}, this.cacheConfig,
+        { cacheKey: `more_info.${newVal.entity_id}` }
+      );
+    }
   }
 
   dialogOpenChanged(newVal) {