mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-14 12:56:37 +00:00
Improve chart loading behaviour and some other chart fixes (#1042)
* show is loading and animate chart display * let tooltip overflow in more-info * graph chart tooltip overflow * style toopltip a bit more like material design guidelines * smoother tooltip appearing * timeline transition time * max-widht -> width
This commit is contained in:
NovapaX
Paulus Schoutsen
parent
fb8fb09c73
commit
0790cd1ac9
@ -11,8 +11,14 @@
|
||||
paper-card:not([dialog]) .content {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
paper-card[dialog] {
|
||||
padding-top: 16px;
|
||||
background-color: transparent;
|
||||
}
|
||||
paper-card {
|
||||
width: 100%;
|
||||
/* prevent new stacking context, chart tooltip needs to overflow */
|
||||
position: static;
|
||||
}
|
||||
.header {
|
||||
@apply --paper-font-headline;
|
||||
|
||||
@ -5,10 +5,14 @@
|
||||
<dom-module id="ha-chart-base">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.chartHeader {
|
||||
display: flex;
|
||||
padding: 6px 0 0 0;
|
||||
width: 100%
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.chartHeader > div {
|
||||
vertical-align: top;
|
||||
@ -16,9 +20,12 @@
|
||||
}
|
||||
.chartHeader > div.chartTitle {
|
||||
padding-top: 8px;
|
||||
flex: 0 0 0;
|
||||
max-width: 30%;
|
||||
}
|
||||
.chartHeader > div.chartLegend {
|
||||
flex: auto;
|
||||
flex: 1 1 1;
|
||||
min-width: 70%;
|
||||
}
|
||||
:root{
|
||||
user-select: none;
|
||||
@ -27,15 +34,17 @@
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.chartTooltip {
|
||||
font-size: 90%;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
background: rgba(80, 80, 80, .9);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 5px);
|
||||
z-index: 1000;
|
||||
width: 200px;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
}
|
||||
.chartLegend ul,
|
||||
.chartTooltip ul {
|
||||
@ -54,17 +63,17 @@
|
||||
.chartLegend li {
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
max-width: 49%;
|
||||
width: 49%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chartLegend li:nth-child(odd):last-of-type {
|
||||
/* Make last item take full width if it is add-numbered. */
|
||||
max-width: 100%;
|
||||
/* Make last item take full width if it is odd-numbered. */
|
||||
width: 100%;
|
||||
}
|
||||
.chartLegend li.hidden {
|
||||
.chartLegend li[data-hidden] {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.chartLegend em,
|
||||
@ -85,7 +94,7 @@
|
||||
<div class="chartLegend">
|
||||
<ul>
|
||||
<template is="dom-repeat" items="[[metas]]">
|
||||
<li on-click="_legendClick" class$="[[item.hidden]]">
|
||||
<li on-click="_legendClick" data-hidden$="[[item.hidden]]">
|
||||
<em style$="background-color:[[item.bgColor]]"></em>
|
||||
[[item.label]]
|
||||
</li>
|
||||
@ -136,6 +145,12 @@
|
||||
data: Object,
|
||||
identifier: String,
|
||||
isZoomable: Boolean,
|
||||
rendered: {
|
||||
type: Boolean,
|
||||
notify: true,
|
||||
value: false,
|
||||
readOnly: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -153,9 +168,7 @@
|
||||
xPadding: '0',
|
||||
yPadding: '0'
|
||||
});
|
||||
if (!this._chart) {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => this.onPropsChange()));
|
||||
}
|
||||
this.onPropsChange();
|
||||
this._resizeListener = () => {
|
||||
this._debouncer = Polymer.Debouncer.debounce(
|
||||
this._debouncer,
|
||||
@ -271,8 +284,9 @@
|
||||
|
||||
_legendClick(event) {
|
||||
event = event || window.event;
|
||||
event.stopPropagation();
|
||||
let target = event.target || event.srcElement;
|
||||
while (target.nodeName !== 'LI') {
|
||||
while (target.nodeName !== 'LI') { // user clicked child, find parent LI
|
||||
target = target.parentElement;
|
||||
}
|
||||
const index = event.model.itemsIndex;
|
||||
@ -345,6 +359,9 @@
|
||||
return;
|
||||
}
|
||||
this._customTooltips({ opacity: 0 });
|
||||
const plugins = [
|
||||
{ afterRender: () => this._setRendered(true) }
|
||||
];
|
||||
let options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
@ -419,7 +436,8 @@
|
||||
const chartData = {
|
||||
type: this.data.type,
|
||||
data: this.data.data,
|
||||
options: options
|
||||
options: options,
|
||||
plugins: plugins,
|
||||
};
|
||||
// Async resize after dom update
|
||||
this._chart = new Chart(ctx, chartData);
|
||||
|
||||
@ -4,11 +4,21 @@
|
||||
|
||||
<dom-module id='state-history-chart-line'>
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
<ha-chart-base
|
||||
id='chart'
|
||||
data="[[chartData]]"
|
||||
is-zoomable="[[isZoomable]]"
|
||||
identifier="[[identifier]]">
|
||||
</ha-chart-base>
|
||||
identifier="[[identifier]]"
|
||||
rendered="{{rendered}}"
|
||||
></ha-chart-base>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
@ -27,6 +37,11 @@ class StateHistoryChartLine extends Polymer.Element {
|
||||
},
|
||||
|
||||
endTime: Object,
|
||||
rendered: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: '_onRenderedChanged'
|
||||
}
|
||||
};
|
||||
}
|
||||
static get observers() {
|
||||
@ -43,6 +58,16 @@ class StateHistoryChartLine extends Polymer.Element {
|
||||
this.drawChart();
|
||||
}
|
||||
|
||||
_onRenderedChanged(rendered) {
|
||||
if (rendered) this.animateHeight();
|
||||
}
|
||||
|
||||
animateHeight() {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
this.style.height = this.$.chart.scrollHeight + 'px';
|
||||
}));
|
||||
}
|
||||
|
||||
drawChart() {
|
||||
const unit = this.unit;
|
||||
const deviceStates = this.data;
|
||||
|
||||
@ -4,7 +4,21 @@
|
||||
|
||||
<dom-module id='state-history-chart-timeline'>
|
||||
<template>
|
||||
<ha-chart-base data="[[chartData]]"></ha-chart-base>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
:host([rendered]) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
<ha-chart-base
|
||||
data="[[chartData]]"
|
||||
rendered="{{rendered}}"
|
||||
></ha-chart-base>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
@ -23,6 +37,11 @@ class StateHistoryChartTimeline extends Polymer.Element {
|
||||
},
|
||||
noSingle: Boolean,
|
||||
endTime: Date,
|
||||
rendered: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -9,11 +9,21 @@
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
/* height of single timeline chart = 58px */
|
||||
min-height: 58px;
|
||||
}
|
||||
.info {
|
||||
text-align: center;
|
||||
line-height: 58px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
</style>
|
||||
<template is='dom-if' class='info' if='[[_computeIsLoading(isLoadingData)]]'>
|
||||
<div class='info'>Loading state history...</div>
|
||||
</template>
|
||||
|
||||
<template is='dom-if' if='[[_computeIsEmpty(historyData)]]'>
|
||||
No state history found.
|
||||
<template is='dom-if' class='info' if='[[_computeIsEmpty(isLoadingData, historyData)]]'>
|
||||
<div class='info'>No state history found.</div>
|
||||
</template>
|
||||
|
||||
<template is='dom-if' if='[[historyData.timeline.length]]'>
|
||||
@ -48,10 +58,7 @@ class StateHistoryCharts extends Polymer.Element {
|
||||
value: null,
|
||||
},
|
||||
|
||||
isLoadingData: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
isLoading: Boolean,
|
||||
|
||||
endTime: {
|
||||
type: Object,
|
||||
@ -67,12 +74,18 @@ class StateHistoryCharts extends Polymer.Element {
|
||||
return !noSingle && data && data.length === 1;
|
||||
}
|
||||
|
||||
_computeIsEmpty(historyData) {
|
||||
return !historyData || !historyData.timeline || !historyData.line ||
|
||||
_computeIsEmpty(isLoadingData, historyData) {
|
||||
const historyDataEmpty = (!historyData || !historyData.timeline || !historyData.line ||
|
||||
(historyData.timeline.length === 0 &&
|
||||
historyData.line.length === 0);
|
||||
historyData.line.length === 0));
|
||||
return !isLoadingData && historyDataEmpty;
|
||||
}
|
||||
|
||||
_computeIsLoading(isLoading) {
|
||||
return isLoading && !this.historyData;
|
||||
}
|
||||
|
||||
|
||||
_computeEndTime(endTime, upToNow) {
|
||||
// We don't really care about the value of historyData, but if it change we want to update
|
||||
// endTime.
|
||||
|
||||
@ -27,8 +27,6 @@
|
||||
}
|
||||
|
||||
state-history-charts {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user