From f396c9acde1b728a048583dea7c0d6ed90cbb689 Mon Sep 17 00:00:00 2001 From: Andrey Date: Wed, 15 Feb 2017 07:34:30 +0200 Subject: [PATCH] Support multi-day history charts (#207) * Support multi-day history charts * Fix lint * Reduce the periods to 1/3/7 days. * Switch to end_time param instead of days * Move async waiting from history-data to panel-history --- panels/history/ha-panel-history.html | 78 +++++++++++++++---- src/components/state-history-chart-line.html | 15 +++- .../state-history-chart-timeline.html | 23 +++++- 3 files changed, 94 insertions(+), 22 deletions(-) diff --git a/panels/history/ha-panel-history.html b/panels/history/ha-panel-history.html index ae0c46db91..ce3eaacacf 100644 --- a/panels/history/ha-panel-history.html +++ b/panels/history/ha-panel-history.html @@ -1,7 +1,9 @@ - + + + @@ -21,17 +23,20 @@ paper-input { max-width: 200px; + margin-right: 16px; + } + paper-dropdown-menu { + max-width: 100px; } - @@ -41,14 +46,22 @@
- - - + + + + 1 day + 3 days + 1 week + + +
+
@@ -73,9 +86,20 @@ Polymer({ value: false, }, - stateHistory: { + stateHistoryInput: { type: Object, value: null, + observer: 'stateHistoryObserver' + }, + + stateHistoryOutput: { + type: Object, + value: null, + }, + + _periodIndex: { + type: Number, + value: 0, }, isLoadingData: { @@ -124,8 +148,30 @@ Polymer({ return window.hassUtil.formatDate(new Date(date)); }, - _computeFilterDate: function (_selectedDate) { - return _selectedDate.toISOString(); + _computeFilterDate: function (selectedDate, periodIndex) { + var endTime = new Date(selectedDate); + endTime.setDate( + selectedDate.getDate() + this._computeFilterDays(periodIndex)); + return selectedDate.toISOString() + '?end_time=' + endTime.toISOString(); + }, + + _computeFilterDays: function (periodIndex) { + switch (periodIndex) { + case 1: + return 3; + case 2: + return 7; + default: return 1; + } + }, + + stateHistoryObserver: function (newVal) { + this.async(function () { + if (newVal === this.stateHistoryInput) { + // Input didn't change + this.stateHistoryOutput = newVal; + } + }.bind(this), 1); }, }); diff --git a/src/components/state-history-chart-line.html b/src/components/state-history-chart-line.html index d4d09defb8..33fb60198e 100644 --- a/src/components/state-history-chart-line.html +++ b/src/components/state-history-chart-line.html @@ -69,6 +69,7 @@ var endTime; var dataTables; var finalDataTable; + var daysDelta; if (!this.isAttached) { return; @@ -115,12 +116,22 @@ return new Date(states[0].last_changed); }))); - endTime = new Date(startTime); - endTime.setDate(endTime.getDate() + 1); + endTime = new Date(Math.max.apply(null, deviceStates.map(function (states) { + return new Date(states[states.length - 1].last_changed); + }))); if (endTime > new Date()) { endTime = new Date(); } + daysDelta = (endTime - startTime) / (24 * 3600 * 1000); + if (daysDelta > 30) { + options.hAxis.format = 'MMM d'; + } else if (daysDelta > 3) { + options.hAxis.format = 'EEE, MMM d'; + } else if (daysDelta > 1) { + options.hAxis.format = 'EEE, MMM d, H:mm'; + } + dataTables = deviceStates.map(function (states) { var last = states[states.length - 1]; var domain = window.hassUtil.computeDomain(last); diff --git a/src/components/state-history-chart-timeline.html b/src/components/state-history-chart-timeline.html index 99c6c1947b..b7767b60a4 100644 --- a/src/components/state-history-chart-timeline.html +++ b/src/components/state-history-chart-timeline.html @@ -44,6 +44,8 @@ Polymer({ var startTime; var endTime; var numTimelines; + var format; + var daysDelta; if (!this.isAttached) { return; @@ -76,12 +78,25 @@ Polymer({ return Math.min(minTime, new Date(stateInfo[0].last_changed)); }, new Date())); - // end time is Math.min(curTime, start time + 1 day) - endTime = new Date(startTime); - endTime.setDate(endTime.getDate() + 1); + // end time is Math.max(startTime, last_event) + endTime = new Date( + stateHistory.reduce( + function (maxTime, stateInfo) { + return Math.max(maxTime, new Date(stateInfo[stateInfo.length - 1].last_changed)); + }, startTime)); + if (endTime > new Date()) { endTime = new Date(); } + format = 'H:mm'; + daysDelta = (endTime - startTime) / (24 * 3600 * 1000); + if (daysDelta > 30) { + format = 'MMM d'; + } else if (daysDelta > 3) { + format = 'EEE, MMM d'; + } else if (daysDelta > 1) { + format = 'EEE, MMM d, H:mm'; + } numTimelines = 0; // stateHistory is a list of lists of sorted state objects @@ -121,7 +136,7 @@ Polymer({ }, hAxis: { - format: 'H:mm', + format: format }, }); },