Clean charts and persist hidden lines (#970)

src/components/entity/ha-chart-base.html

@@ -80,7 +80,7 @@
         <div class="chartLegend">
           <ul>
             <template is="dom-repeat" items="[[metas]]">
-              <li data-lid$="[[itemsIndex]]" on-click="_legendClick" class$="[[item.hidden]]">
+              <li on-click="_legendClick" class$="[[item.hidden]]">
                 <em style$="background-color:[[item.bgColor]]"></em>
                 [[item.label]]
               </li>
@@ -126,14 +126,11 @@
     static get is() { return 'ha-chart-base'; }
     static get properties() {
       return {
-        publish: {
-          type: Boolean,
-          observer: 'onPropsChange'
-        },
         data: {
           type: Object,
           observer: 'onPropsChange'
         },
+        identifier: String,
       };
     }
     connectedCallback() {
@@ -183,7 +180,7 @@
       }
     }
     onPropsChange() {
-      if (!this._isAttached || !SCRIPT_LOADED || !this.publish || !this.data) {
+      if (!this._isAttached || !SCRIPT_LOADED || !this.data) {
         return;
       }
       this.drawChart();
@@ -246,13 +243,14 @@
       this.set(['tooltip', 'yPadding'], tooltip.yPadding);
       this.set(['tooltip', 'xPadding'], tooltip.xPadding);
     }
+
     _legendClick(event) {
       event = event || window.event;
       let target = event.target || event.srcElement;
       while (target.nodeName !== 'LI') {
         target = target.parentElement;
       }
-      const index = target.getAttribute('data-lid');
+      const index = event.model.itemsIndex;
 
       const meta = this._chart.getDatasetMeta(index);
       meta.hidden = meta.hidden === null ? !this._chart.data.datasets[index].hidden : null;
@@ -261,12 +259,28 @@
     }
     _drawLegend() {
       const chart = this._chart;
+      // New data for old graph. Keep metadata.
+      const preserveVisibility =
+          this._oldIdentifier && this.identifier === this._oldIdentifier;
+      this._oldIdentifier = this.identifier;
       this.set('metas', this._chart.data.datasets.map((x, i) => ({
         label: x.label,
         color: x.color,
         bgColor: x.backgroundColor,
-        hidden: chart.isDatasetVisible(i)
+        hidden: preserveVisibility && i < this.metas.length ?
+          this.metas[i].hidden : !chart.isDatasetVisible(i),
       })));
+      let updateNeeded = false;
+      if (preserveVisibility) {
+        for (let i = 0; i < this.metas.length; i++) {
+          const meta = chart.getDatasetMeta(i);
+          if (!!meta.hidden !== !!this.metas[i].hidden) updateNeeded = true;
+          meta.hidden = this.metas[i].hidden ? true : null;
+        }
+      }
+      if (updateNeeded) {
+        chart.update();
+      }
       this.set('unit', this.data.unit);
     }
     _formatTickValue(value, index, values) {
@@ -284,8 +298,7 @@
         return;
       }
       if (this.data.type !== 'timeline' && data.datasets.length > 0) {
-        let cnt = 0;
-        cnt = data.datasets.length;
+        const cnt = data.datasets.length;
         const colors = this.constructor.getColorList(cnt);
         for (let loopI = 0; loopI < cnt; loopI++) {
           data.datasets[loopI].borderColor = colors[loopI].rgbString();

src/components/state-history-chart-line.html

@@ -4,7 +4,7 @@
 
 <dom-module id='state-history-chart-line'>
   <template>
-      <ha-chart-base publish data="[[chartData]]"></ha-chart-base>
+      <ha-chart-base data="[[chartData]]" identifier="[[identifier]]"></ha-chart-base>
   </template>
 </dom-module>
 <script>
@@ -12,22 +12,16 @@ class StateHistoryChartLine extends Polymer.Element {
   static get is() { return 'state-history-chart-line'; }
   static get properties() {
     return {
-      data: {
-        type: Object,
-      },
-
-      unit: {
-        type: String,
-      },
+      data: Object,
+      unit: String,
+      identifier: String,
 
       isSingleDevice: {
         type: Boolean,
         value: false,
       },
 
-      endTime: {
-        type: Object,
-      },
+      endTime: Object,
     };
   }
   static get observers() {

src/components/state-history-chart-timeline.html

@@ -4,7 +4,7 @@
 
 <dom-module id='state-history-chart-timeline'>
   <template>
-      <ha-chart-base publish data="[[chartData]]"></ha-chart-base>
+      <ha-chart-base data="[[chartData]]"></ha-chart-base>
   </template>
 </dom-module>
 <script>

src/components/state-history-charts.html

@@ -28,6 +28,7 @@
       <state-history-chart-line
         unit='[[item.unit]]'
         data='[[item.data]]'
+        identifier='[[item.identifier]]'
         is-single-device='[[_computeIsSingleLineChart(item.data, noSingle)]]'
         end-time='[[_computeEndTime(endTime, upToNow, historyData)]]'>
       </state-history-chart-line>

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

@@ -54,6 +54,7 @@
 
     const unitStates = Object.keys(lineChartDevices).map(unit => ({
       unit: unit,
+      identifier: lineChartDevices[unit].map(states => states[0].entity_id).join(''),
       data: lineChartDevices[unit].map((states) => {
         const last = states[states.length - 1];
         const domain = window.hassUtil.computeDomain(last);