From f8af66d31054160c5929d181f3b48e1972aa2fc4 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 1 Jun 2022 21:57:23 +0200
Subject: [PATCH] 20220601.0 (#12843)

---
 pyproject.toml                                |  2 +-
 .../chart/state-history-chart-timeline.ts     | 10 ++++----
 src/components/chart/state-history-charts.ts  | 25 ++++++++++---------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index 0de1e8d8da..7ece90691f 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20220531.0"
+version      = "20220601.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index 00f7f5cadc..519ae60b5b 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -93,7 +93,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ type: Boolean }) public isSingleDevice = false;
 
-  @property({ type: Boolean }) public dataHasMultipleRows = false;
+  @property({ type: Boolean }) public chunked = false;
 
   @property({ attribute: false }) public startTime!: Date;
 
@@ -117,7 +117,6 @@ export class StateHistoryChartTimeline extends LitElement {
   public willUpdate(changedProps: PropertyValues) {
     if (!this.hasUpdated) {
       const narrow = this.narrow;
-      const multipleRows = this.data.length !== 1 || this.dataHasMultipleRows;
       this._chartOptions = {
         maintainAspectRatio: false,
         parsing: false,
@@ -163,13 +162,14 @@ export class StateHistoryChartTimeline extends LitElement {
               drawTicks: false,
             },
             ticks: {
-              display: multipleRows,
+              display:
+                this.chunked || !this.isSingleDevice || this.data.length !== 1,
             },
             afterSetDimensions: (y) => {
               y.maxWidth = y.chart.width * 0.18;
             },
-            afterFit: function (scaleInstance) {
-              if (multipleRows) {
+            afterFit: (scaleInstance) => {
+              if (this.chunked) {
                 // ensure all the chart labels are the same width
                 scaleInstance.width = narrow ? 105 : 185;
               }
diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts
index 58cb0b321d..b00fb19cdf 100644
--- a/src/components/chart/state-history-charts.ts
+++ b/src/components/chart/state-history-charts.ts
@@ -62,19 +62,19 @@ class StateHistoryCharts extends LitElement {
   @eventOptions({ passive: true })
   protected render(): TemplateResult {
     if (!isComponentLoaded(this.hass, "history")) {
-      return html` <div class="info">
+      return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.history_disabled")}
       </div>`;
     }
 
     if (this.isLoadingData && !this.historyData) {
-      return html` <div class="info">
+      return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.loading_history")}
       </div>`;
     }
 
     if (this._isHistoryEmpty()) {
-      return html` <div class="info">
+      return html`<div class="info">
         ${this.hass.localize("ui.components.history_charts.no_history_found")}
       </div>`;
     }
@@ -92,10 +92,12 @@ class StateHistoryCharts extends LitElement {
       )
     );
 
-    const combinedItems = chunkData(
-      this.historyData.timeline,
-      CANVAS_TIMELINE_ROWS_CHUNK
-    ).concat(this.historyData.line);
+    const combinedItems = this.historyData.timeline.length
+      ? (this.virtualize
+          ? chunkData(this.historyData.timeline, CANVAS_TIMELINE_ROWS_CHUNK)
+          : [this.historyData.timeline]
+        ).concat(this.historyData.line)
+      : this.historyData.line;
 
     return this.virtualize
       ? html`<div class="container ha-scrollbar" @scroll=${this._saveScrollPos}>
@@ -127,8 +129,7 @@ class StateHistoryCharts extends LitElement {
           .data=${item.data}
           .identifier=${item.identifier}
           .isSingleDevice=${!this.noSingle &&
-          this.historyData.line &&
-          this.historyData.line.length === 1}
+          this.historyData.line?.length === 1}
           .endTime=${this._computedEndTime}
           .names=${this.names}
         ></state-history-chart-line>
@@ -140,11 +141,11 @@ class StateHistoryCharts extends LitElement {
         .data=${item}
         .startTime=${this._computedStartTime}
         .endTime=${this._computedEndTime}
-        .noSingle=${this.noSingle}
+        .isSingleDevice=${!this.noSingle &&
+        this.historyData.timeline?.length === 1}
         .names=${this.names}
         .narrow=${this.narrow}
-        .dataHasMultipleRows=${this.historyData.timeline.length &&
-        this.historyData.timeline.length > 1}
+        .chunked=${this.virtualize}
       ></state-history-chart-timeline>
     </div> `;
   };