mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 16:56:35 +00:00
Clean charts and persist hidden lines (#970)
This commit is contained in:
parent
e41b5238c2
commit
710139bf4b
@ -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();
|
||||||
|
@ -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() {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user