History graph should start at requested time even if sensor is unavailable (#16850)

History graph should start at consistent time if sensor is unavailable

src/components/chart/state-history-chart-line.ts

@@ -30,6 +30,8 @@ class StateHistoryChartLine extends LitElement {
 
   @property({ type: Boolean }) public showNames = true;
 
+  @property({ attribute: false }) public startTime!: Date;
+
   @property({ attribute: false }) public endTime!: Date;
 
   @property({ type: Number }) public paddingYAxis = 0;
@@ -57,7 +59,12 @@ class StateHistoryChartLine extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues) {
-    if (!this.hasUpdated || changedProps.has("showNames")) {
+    if (
+      !this.hasUpdated ||
+      changedProps.has("showNames") ||
+      changedProps.has("startTime") ||
+      changedProps.has("endTime")
+    ) {
       this._chartOptions = {
         parsing: false,
         animation: false,
@@ -74,6 +81,7 @@ class StateHistoryChartLine extends LitElement {
                 config: this.hass.config,
               },
             },
+            suggestedMin: this.startTime,
             suggestedMax: this.endTime,
             ticks: {
               maxRotation: 0,
@@ -146,6 +154,8 @@ class StateHistoryChartLine extends LitElement {
     }
     if (
       changedProps.has("data") ||
+      changedProps.has("startTime") ||
+      changedProps.has("endTime") ||
       this._chartTime <
         new Date(this.endTime.getTime() - MIN_TIME_BETWEEN_UPDATES)
     ) {

src/components/chart/state-history-charts.ts

@@ -52,8 +52,12 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ attribute: false }) public endTime?: Date;
 
+  @property({ attribute: false }) public startTime?: Date;
+
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
 
+  @property() public hoursToShow?: number;
+
   @property({ type: Boolean }) public showNames = true;
 
   @property({ type: Boolean }) public isLoadingData = false;
@@ -95,13 +99,24 @@ export class StateHistoryCharts extends LitElement {
     this._computedEndTime =
       this.upToNow || !this.endTime || this.endTime > now ? now : this.endTime;
 
-    this._computedStartTime = new Date(
+    if (this.startTime) {
-      this.historyData.timeline.reduce(
+      this._computedStartTime = this.startTime;
-        (minTime, stateInfo) =>
+    } else if (this.hoursToShow) {
-          Math.min(minTime, new Date(stateInfo.data[0].last_changed).getTime()),
+      this._computedStartTime = new Date(
-        new Date().getTime()
+        new Date().getTime() - 60 * 60 * this.hoursToShow * 1000
-      )
+      );
-    );
+    } else {
+      this._computedStartTime = new Date(
+        this.historyData.timeline.reduce(
+          (minTime, stateInfo) =>
+            Math.min(
+              minTime,
+              new Date(stateInfo.data[0].last_changed).getTime()
+            ),
+          new Date().getTime()
+        )
+      );
+    }
 
     const combinedItems = this.historyData.timeline.length
       ? (this.virtualize
@@ -142,6 +157,7 @@ export class StateHistoryCharts extends LitElement {
           .data=${item.data}
           .identifier=${item.identifier}
           .showNames=${this.showNames}
+          .startTime=${this._computedStartTime}
           .endTime=${this._computedEndTime}
           .paddingYAxis=${this._maxYWidth}
           .names=${this.names}

src/panels/history/ha-panel-history.ts

@@ -190,6 +190,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
                 <state-history-charts
                   .hass=${this.hass}
                   .historyData=${this._stateHistory}
+                  .startTime=${this._startDate}
                   .endTime=${this._endDate}
                 >
                 </state-history-charts>

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -205,6 +205,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
                   .historyData=${this._stateHistory}
                   .names=${this._names}
                   up-to-now
+                  .hoursToShow=${this._hoursToShow}
                   .showNames=${this._config.show_names !== undefined
                     ? this._config.show_names
                     : true}