Fix more-info chart rendering (#23619)

* Fix more-info chart rendering

* lint fix

* remove animation-container & _chartHeight

* don't change height on resize

* handle default height in ha-chart-base

* fix chart height in energy panel

* lint

* lint

src/components/chart/ha-chart-base.ts

@@ -4,6 +4,7 @@ import type {
   ChartData,
   ChartOptions,
   TooltipModel,
+  UpdateMode,
 } from "chart.js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, nothing, LitElement } from "lit";
@@ -20,12 +21,6 @@ import "../ha-icon-button";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 
-export interface ChartResizeOptions {
-  aspectRatio?: number;
-  height?: number;
-  width?: number;
-}
-
 interface Tooltip
   extends Omit<TooltipModel<any>, "tooltipPosition" | "hasValue" | "getProps"> {
   top: string;
@@ -61,8 +56,6 @@ export class HaChartBase extends LitElement {
   @property({ attribute: "external-hidden", type: Boolean })
   public externalHidden = false;
 
-  @state() private _chartHeight?: number;
-
   @state() private _legendHeight?: number;
 
   @state() private _tooltip?: Tooltip;
@@ -96,36 +89,10 @@ export class HaChartBase extends LitElement {
     }
   }
 
-  public updateChart = (
-    mode:
-      | "resize"
-      | "reset"
-      | "none"
-      | "hide"
-      | "show"
-      | "default"
-      | "active"
-      | undefined
-  ): void => {
+  public updateChart = (mode?: UpdateMode): void => {
     this.chart?.update(mode);
   };
 
-  public resize = (options?: ChartResizeOptions): void => {
-    if (options?.aspectRatio && !options.height) {
-      options.height = Math.round(
-        (options.width ?? this.clientWidth) / options.aspectRatio
-      );
-    } else if (options?.aspectRatio && !options.width) {
-      options.width = Math.round(
-        (options.height ?? this.clientHeight) * options.aspectRatio
-      );
-    }
-    this.chart?.resize(
-      options?.width ?? this.clientWidth,
-      options?.height ?? this.clientHeight
-    );
-  };
-
   protected firstUpdated() {
     this._setupChart();
     this.data.datasets.forEach((dataset, index) => {
@@ -267,96 +234,84 @@ export class HaChartBase extends LitElement {
           </div>`
         : ""}
       <div
-        class="animation-container"
+        class="chart-container"
         style=${styleMap({
-          height: `${this.height || this._chartHeight || 0}px`,
-          overflow: this._chartHeight ? "initial" : "hidden",
+          height: `${this.height ?? this._getDefaultHeight()}px`,
+          "padding-left": `${this._paddingYAxisInternal}px`,
+          "padding-right": 0,
+          "padding-inline-start": `${this._paddingYAxisInternal}px`,
+          "padding-inline-end": 0,
         })}
+        @wheel=${this._handleChartScroll}
       >
-        <div
-          class="chart-container"
-          style=${styleMap({
-            height: `${
-              this.height ?? this._chartHeight ?? this.clientWidth / 2
-            }px`,
-            "padding-left": `${this._paddingYAxisInternal}px`,
-            "padding-right": 0,
-            "padding-inline-start": `${this._paddingYAxisInternal}px`,
-            "padding-inline-end": 0,
+        <canvas
+          class=${classMap({
+            "not-zoomed": !this._isZoomed,
           })}
-          @wheel=${this._handleChartScroll}
+        ></canvas>
+        <div
+          class="zoom-hint ${classMap({
+            visible: this._showZoomHint,
+          })}"
         >
-          <canvas
-            class=${classMap({
-              "not-zoomed": !this._isZoomed,
-            })}
-          ></canvas>
-          <div
-            class="zoom-hint ${classMap({
-              visible: this._showZoomHint,
-            })}"
-          >
-            <div>
-              ${isMac
-                ? this.hass.localize(
-                    "ui.components.history_charts.zoom_hint_mac"
-                  )
-                : this.hass.localize("ui.components.history_charts.zoom_hint")}
-            </div>
+          <div>
+            ${isMac
+              ? this.hass.localize("ui.components.history_charts.zoom_hint_mac")
+              : this.hass.localize("ui.components.history_charts.zoom_hint")}
           </div>
-          ${this._isZoomed && this.chartType !== "timeline"
-            ? html`<ha-icon-button
-                class="zoom-reset"
-                .path=${mdiRestart}
-                @click=${this._handleZoomReset}
-                title=${this.hass.localize(
-                  "ui.components.history_charts.zoom_reset"
-                )}
-              ></ha-icon-button>`
-            : nothing}
-          ${this._tooltip
-            ? html`<div
-                class="chart-tooltip ${classMap({
-                  [this._tooltip.yAlign]: true,
-                })}"
-                style=${styleMap({
-                  top: this._tooltip.top,
-                  left: this._tooltip.left,
-                })}
-              >
-                <div class="title">${this._tooltip.title}</div>
-                ${this._tooltip.beforeBody
-                  ? html`<div class="before-body">
-                      ${this._tooltip.beforeBody}
-                    </div>`
-                  : ""}
-                <div>
-                  <ul>
-                    ${this._tooltip.body.map(
-                      (item, i) =>
-                        html`<li>
-                          <div
-                            class="bullet"
-                            style=${styleMap({
-                              backgroundColor: this._tooltip!.labelColors[i]
-                                .backgroundColor as string,
-                              borderColor: this._tooltip!.labelColors[i]
-                                .borderColor as string,
-                            })}
-                          ></div>
-                          ${item.lines.join("\n")}
-                        </li>`
-                    )}
-                  </ul>
-                </div>
-                ${this._tooltip.footer.length
-                  ? html`<div class="footer">
-                      ${this._tooltip.footer.map((item) => html`${item}<br />`)}
-                    </div>`
-                  : ""}
-              </div>`
-            : ""}
         </div>
+        ${this._isZoomed && this.chartType !== "timeline"
+          ? html`<ha-icon-button
+              class="zoom-reset"
+              .path=${mdiRestart}
+              @click=${this._handleZoomReset}
+              title=${this.hass.localize(
+                "ui.components.history_charts.zoom_reset"
+              )}
+            ></ha-icon-button>`
+          : nothing}
+        ${this._tooltip
+          ? html`<div
+              class="chart-tooltip ${classMap({
+                [this._tooltip.yAlign]: true,
+              })}"
+              style=${styleMap({
+                top: this._tooltip.top,
+                left: this._tooltip.left,
+              })}
+            >
+              <div class="title">${this._tooltip.title}</div>
+              ${this._tooltip.beforeBody
+                ? html`<div class="before-body">
+                    ${this._tooltip.beforeBody}
+                  </div>`
+                : ""}
+              <div>
+                <ul>
+                  ${this._tooltip.body.map(
+                    (item, i) =>
+                      html`<li>
+                        <div
+                          class="bullet"
+                          style=${styleMap({
+                            backgroundColor: this._tooltip!.labelColors[i]
+                              .backgroundColor as string,
+                            borderColor: this._tooltip!.labelColors[i]
+                              .borderColor as string,
+                          })}
+                        ></div>
+                        ${item.lines.join("\n")}
+                      </li>`
+                  )}
+                </ul>
+              </div>
+              ${this._tooltip.footer.length
+                ? html`<div class="footer">
+                    ${this._tooltip.footer.map((item) => html`${item}<br />`)}
+                  </div>`
+                : ""}
+            </div>`
+          : ""}
       </div>
     `;
   }
@@ -471,11 +426,11 @@ export class HaChartBase extends LitElement {
       ...(this.plugins || []),
       {
         id: "resizeHook",
-        resize: (chart) => {
-          const change = chart.height - (this._chartHeight ?? 0);
-          if (!this._chartHeight || change > 12 || change < -12) {
-            // hysteresis to prevent infinite render loops
-            this._chartHeight = chart.height;
+        resize: (chart: Chart) => {
+          if (!this.height) {
+            // lock the height
+            // this removes empty space below the chart
+            this.height = chart.height;
           }
         },
         legend: {
@@ -486,6 +441,10 @@ export class HaChartBase extends LitElement {
     ];
   }
 
+  private _getDefaultHeight() {
+    return this.clientWidth / 2;
+  }
+
   private _handleChartScroll(ev: MouseEvent) {
     const modifier = isMac ? "metaKey" : "ctrlKey";
     this._tooltip = undefined;
@@ -573,11 +532,6 @@ export class HaChartBase extends LitElement {
         display: block;
         position: relative;
       }
-      .animation-container {
-        overflow: hidden;
-        height: 0;
-        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
-      }
       .chart-container {
         position: relative;
       }

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

@@ -1,7 +1,7 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { property, query, state } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -12,7 +12,6 @@ import {
 } from "../../common/number/format_number";
 import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
-import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { clickIsTouch } from "./click_is_touch";
 
@@ -67,12 +66,6 @@ export class StateHistoryChartLine extends LitElement {
 
   private _chartTime: Date = new Date();
 
-  @query("ha-chart-base") private _chart?: HaChartBase;
-
-  public resize = (options?: ChartResizeOptions): void => {
-    this._chart?.resize(options);
-  };
-
   protected render() {
     return html`
       <ha-chart-base

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

@@ -2,7 +2,7 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { getRelativePosition } from "chart.js/helpers";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import millisecondsToDuration from "../../common/datetime/milliseconds_to_duration";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -10,7 +10,6 @@ import { numberFormatToLocale } from "../../common/number/format_number";
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
-import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import type { TimeLineData } from "./timeline-chart/const";
 import { computeTimelineColor } from "./timeline-chart/timeline-color";
@@ -53,12 +52,6 @@ export class StateHistoryChartTimeline extends LitElement {
 
   private _chartTime: Date = new Date();
 
-  @query("ha-chart-base") private _chart?: HaChartBase;
-
-  public resize = (options?: ChartResizeOptions): void => {
-    this._chart?.resize(options);
-  };
-
   protected render() {
     return html`
       <ha-chart-base

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

@@ -1,12 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, eventOptions, property, state } from "lit/decorators";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
@@ -19,9 +13,6 @@ import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";
-import type { StateHistoryChartLine } from "./state-history-chart-line";
-import type { StateHistoryChartTimeline } from "./state-history-chart-timeline";
-import type { ChartResizeOptions } from "./ha-chart-base";
 
 const CANVAS_TIMELINE_ROWS_CHUNK = 10; // Split up the canvases to avoid hitting the render limit
 
@@ -91,16 +82,6 @@ export class StateHistoryCharts extends LitElement {
   // @ts-ignore
   @restoreScroll(".container") private _savedScrollPos?: number;
 
-  @queryAll("state-history-chart-line")
-  private _charts?: StateHistoryChartLine[];
-
-  public resize = (options?: ChartResizeOptions): void => {
-    this._charts?.forEach(
-      (chart: StateHistoryChartLine | StateHistoryChartTimeline) =>
-        chart.resize(options)
-    );
-  };
-
   protected render() {
     if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">

src/components/chart/statistics-chart.ts

@@ -6,7 +6,7 @@ import type {
 } from "chart.js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@@ -30,11 +30,7 @@ import {
 } from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
-import type {
-  ChartResizeOptions,
-  ChartDatasetExtra,
-  HaChartBase,
-} from "./ha-chart-base";
+import type { ChartDatasetExtra } from "./ha-chart-base";
 import { clickIsTouch } from "./click_is_touch";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
@@ -98,14 +94,8 @@ export class StatisticsChart extends LitElement {
 
   @state() private _hiddenStats = new Set<string>();
 
-  @query("ha-chart-base") private _chart?: HaChartBase;
-
   private _computedStyle?: CSSStyleDeclaration;
 
-  public resize = (options?: ChartResizeOptions): void => {
-    this._chart?.resize(options);
-  };
-
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     return changedProps.size > 1 || !changedProps.has("hass");
   }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -12,7 +12,7 @@ import {
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -47,9 +47,7 @@ import {
 } from "./const";
 import "./controls/more-info-default";
 import "./ha-more-info-history-and-logbook";
-import type { MoreInfoHistoryAndLogbook } from "./ha-more-info-history-and-logbook";
 import "./ha-more-info-info";
-import type { MoreInfoInfo } from "./ha-more-info-info";
 import "./ha-more-info-settings";
 import "./more-info-content";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
@@ -99,9 +97,6 @@ export class MoreInfoDialog extends LitElement {
 
   @state() private _infoEditMode = false;
 
-  @query("ha-more-info-info, ha-more-info-history-and-logbook")
-  private _history?: MoreInfoInfo | MoreInfoHistoryAndLogbook;
-
   @state() private _sensorNumericDeviceClasses?: string[] = [];
 
   public showDialog(params: MoreInfoDialogParams) {
@@ -295,7 +290,6 @@ export class MoreInfoDialog extends LitElement {
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        @opened=${this._handleOpened}
         .heading=${title}
         hideActions
         flexContent
@@ -546,10 +540,6 @@ export class MoreInfoDialog extends LitElement {
     this.large = !this.large;
   }
 
-  private _handleOpened() {
-    this._history?.resize({ aspectRatio: 2 });
-  }
-
   static get styles() {
     return [
       haStyleDialog,

src/dialogs/more-info/ha-more-info-history-and-logbook.ts

@@ -1,14 +1,12 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
+import { customElement, property, state } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
 import {
   computeShowHistoryComponent,
   computeShowLogBookComponent,
 } from "./const";
 import "./ha-more-info-history";
-import type { MoreInfoHistory } from "./ha-more-info-history";
 import "./ha-more-info-logbook";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
 
@@ -18,9 +16,6 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
 
   @property({ attribute: false }) public entityId!: string;
 
-  @query("ha-more-info-history")
-  private _history?: MoreInfoHistory;
-
   @state() private _sensorNumericDeviceClasses?: string[] = [];
 
   private async _loadNumericDeviceClasses() {
@@ -33,10 +28,6 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
     this._loadNumericDeviceClasses();
   }
 
-  public resize(options?: ChartResizeOptions) {
-    this._history?.resize(options);
-  }
-
   protected render() {
     return html`
       ${computeShowHistoryComponent(this.hass, this.entityId)

src/dialogs/more-info/ha-more-info-history.ts

@@ -1,15 +1,12 @@
 import { startOfYesterday, subHours } from "date-fns";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { createSearchParam } from "../../common/url/search-params";
-import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
 import "../../components/chart/state-history-charts";
-import type { StateHistoryCharts } from "../../components/chart/state-history-charts";
 import "../../components/chart/statistics-chart";
-import type { StatisticsChart } from "../../components/chart/statistics-chart";
 import type { HistoryResult } from "../../data/history";
 import {
   computeHistory,
@@ -54,16 +51,6 @@ export class MoreInfoHistory extends LitElement {
 
   private _metadata?: Record<string, StatisticsMetaData>;
 
-  @query("statistics-chart, state-history-charts") private _chart?:
-    | StateHistoryCharts
-    | StatisticsChart;
-
-  public resize = (options?: ChartResizeOptions): void => {
-    if (this._chart) {
-      this._chart.resize(options);
-    }
-  };
-
   protected render() {
     if (!this.entityId) {
       return nothing;

src/dialogs/more-info/ha-more-info-info.ts

@@ -1,8 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../common/entity/compute_domain";
-import type { ChartResizeOptions } from "../../components/chart/ha-chart-base";
 import type { ExtEntityRegistryEntry } from "../../data/entity_registry";
 import type { HomeAssistant } from "../../types";
 import {
@@ -14,7 +13,6 @@ import {
   DOMAINS_WITH_MORE_INFO,
 } from "./const";
 import "./ha-more-info-history";
-import type { MoreInfoHistory } from "./ha-more-info-history";
 import "./ha-more-info-logbook";
 import "./more-info-content";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
@@ -31,9 +29,6 @@ export class MoreInfoInfo extends LitElement {
 
   @state() private _sensorNumericDeviceClasses?: string[] = [];
 
-  @query("ha-more-info-history")
-  private _history?: MoreInfoHistory;
-
   private async _loadNumericDeviceClasses() {
     const deviceClasses = await getSensorNumericDeviceClasses(this.hass);
     this._sensorNumericDeviceClasses = deviceClasses.numeric_device_classes;
@@ -44,10 +39,6 @@ export class MoreInfoInfo extends LitElement {
     this._loadNumericDeviceClasses();
   }
 
-  public resize(options?: ChartResizeOptions) {
-    this._history?.resize(options);
-  }
-
   protected render() {
     const entityId = this.entityId;
     const stateObj = this.hass.states[entityId] as HassEntity | undefined;