Clean charts and persist hidden lines (#970)

This commit is contained in:
Andrey 2018-03-05 23:40:53 +02:00 committed by Paulus Schoutsen
parent e41b5238c2
commit 710139bf4b
5 changed files with 31 additions and 22 deletions

View File

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

View File

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

View File

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

View File

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

View File

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