From 4755b0438cccd1da6fad2e22e2cd2c3ef1bae527 Mon Sep 17 00:00:00 2001
From: Andrey <andrey-git@users.noreply.github.com>
Date: Sun, 6 Aug 2017 19:31:07 +0300
Subject: [PATCH] Make sure graphs extend till the intended end time (#378)

---
 panels/history/ha-panel-history.html          | 14 +++++++++++---
 src/components/state-history-chart-line.html  | 11 ++++++++---
 .../state-history-chart-timeline.html         |  8 ++++++--
 src/components/state-history-charts.html      | 19 +++++++++++++++++--
 src/dialogs/more-info-dialog.html             |  7 +++++--
 5 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/panels/history/ha-panel-history.html b/panels/history/ha-panel-history.html
index 35474b325d..08a8618856 100644
--- a/panels/history/ha-panel-history.html
+++ b/panels/history/ha-panel-history.html
@@ -44,7 +44,7 @@
       hass='[[hass]]'
       filter-type='[[_filterType]]'
       start-time='[[_computeStartTime(_currentDate)]]'
-      end-time='[[_computeEndTime(_currentDate, _periodIndex)]]'
+      end-time='[[endTime]]'
       data='{{stateHistoryInput}}'
       is-loading='{{isLoadingData}}'
     ></ha-state-history-data>
@@ -80,8 +80,11 @@
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
-        <state-history-charts history-data="[[stateHistoryOutput]]"
-          is-loading-data="[[isLoadingData]]"></state-history-charts>
+        <state-history-charts
+          history-data="[[stateHistoryOutput]]"
+          is-loading-data="[[isLoadingData]]"
+          end-time="[[endTime]]">
+        </state-history-charts>
       </div>
     </app-header-layout>
   </template>
@@ -126,6 +129,11 @@ Polymer({
       value: false,
     },
 
+    endTime: {
+      type: Object,
+      computed: '_computeEndTime(_currentDate, _periodIndex)',
+    },
+
     // ISO8601 formatted date string
     _currentDate: {
       type: String,
diff --git a/src/components/state-history-chart-line.html b/src/components/state-history-chart-line.html
index c0d714f966..2396fa6046 100644
--- a/src/components/state-history-chart-line.html
+++ b/src/components/state-history-chart-line.html
@@ -44,6 +44,10 @@
         observer: 'dataChanged',
       },
 
+      endTime: {
+        type: Object,
+      },
+
       chartEngine: {
         type: Object,
       },
@@ -116,9 +120,10 @@
         return new Date(states[0].last_changed);
       })));
 
-      endTime = new Date(Math.max.apply(null, deviceStates.map(function (states) {
-        return new Date(states[states.length - 1].last_changed);
-      })));
+      endTime = this.endTime ||
+        new Date(Math.max.apply(null, deviceStates.map(states =>
+          new Date(states[states.length - 1].last_changed)
+        )));
       if (endTime > new Date()) {
         endTime = new Date();
       }
diff --git a/src/components/state-history-chart-timeline.html b/src/components/state-history-chart-timeline.html
index 4ed7c0f101..a586a5650e 100644
--- a/src/components/state-history-chart-timeline.html
+++ b/src/components/state-history-chart-timeline.html
@@ -17,6 +17,10 @@ Polymer({
       observer: 'dataChanged',
     },
 
+    endTime: {
+      type: Object,
+    },
+
     isAttached: {
       type: Boolean,
       value: false,
@@ -79,8 +83,8 @@ Polymer({
         }, new Date()));
 
     // end time is Math.max(startTime, last_event)
-    endTime = new Date(
-      stateHistory.reduce(
+    endTime = this.endTime ||
+      new Date(stateHistory.reduce(
         function (maxTime, stateInfo) {
           return Math.max(maxTime, new Date(stateInfo[stateInfo.length - 1].last_changed));
         }, startTime));
diff --git a/src/components/state-history-charts.html b/src/components/state-history-charts.html
index e32fa537c0..0c84e8eeb3 100644
--- a/src/components/state-history-charts.html
+++ b/src/components/state-history-charts.html
@@ -39,14 +39,16 @@
       </template>
 
       <state-history-chart-timeline
-        data='[[historyData.timeline]]'>
+        data='[[historyData.timeline]]'
+        end-time='[[_computeEndTime(endTime, upToNow)]]'>
       </state-history-chart-timeline>
 
       <template is='dom-repeat' items='[[historyData.line]]'>
         <state-history-chart-line
           unit='[[item.unit]]'
           data='[[item.data]]'
-          is-single-device='[[_computeIsSingleLineChart(historyData)]]'>
+          is-single-device='[[_computeIsSingleLineChart(historyData)]]'
+          end-time='[[_computeEndTime(endTime, upToNow)]]'>
         </state-history-chart-line>
       </template>
     </template>
@@ -68,6 +70,15 @@ Polymer({
       value: true,
     },
 
+    endTime: {
+      type: Object,
+    },
+
+    upToNow: {
+      type: Boolean,
+      value: false,
+    },
+
     _apiLoaded: {
       type: Boolean,
       value: false,
@@ -101,5 +112,9 @@ Polymer({
             historyData.timeline.length === 0 &&
             historyData.line.length === 0);
   },
+
+  _computeEndTime: function (endTime, upToNow) {
+    return upToNow ? new Date() : endTime;
+  },
 });
 </script>
diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index 862dc0ae72..04d17ce359 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -68,8 +68,11 @@
             data='{{stateHistory}}'
             is-loading='{{stateHistoryLoading}}'
           ></ha-state-history-data>
-          <state-history-charts history-data="[[stateHistory]]"
-            is-loading-data="[[isLoadingHistoryData]]"></state-history-charts>
+          <state-history-charts
+            history-data="[[stateHistory]]"
+            is-loading-data="[[isLoadingHistoryData]]"
+            up-to-now>
+          </state-history-charts>
         </div>
       </template>
       <paper-dialog-scrollable id='scrollable'>