Make sure graphs extend till the intended end time (#378)

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]]"
+        <state-history-charts
-          is-loading-data="[[isLoadingData]]"></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,

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) {
+      endTime = this.endTime ||
-        return new Date(states[states.length - 1].last_changed);
+        new Date(Math.max.apply(null, deviceStates.map(states =>
-      })));
+          new Date(states[states.length - 1].last_changed)
+        )));
       if (endTime > new Date()) {
         endTime = new Date();
       }

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(
+    endTime = this.endTime ||
-      stateHistory.reduce(
+      new Date(stateHistory.reduce(
         function (maxTime, stateInfo) {
           return Math.max(maxTime, new Date(stateInfo[stateInfo.length - 1].last_changed));
         }, startTime));

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>

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]]"
+          <state-history-charts
-            is-loading-data="[[isLoadingHistoryData]]"></state-history-charts>
+            history-data="[[stateHistory]]"
+            is-loading-data="[[isLoadingHistoryData]]"
+            up-to-now>
+          </state-history-charts>
         </div>
       </template>
       <paper-dialog-scrollable id='scrollable'>