Fix device energy graph height (#9666)

* Fix device energy graph height

* Update state-history-chart-timeline.ts

* Update hui-energy-devices-graph-card.ts

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

@@ -29,9 +29,11 @@ export default class HaChartBase extends LitElement {
 
   @property({ attribute: false }) public plugins?: any[];
 
-  @state() private _tooltip?: Tooltip;
+  @property({ type: Number }) public height?: number;
 
-  @state() private _height?: string;
+  @state() private _chartHeight?: number;
+
+  @state() private _tooltip?: Tooltip;
 
   @state() private _hiddenDatasets: Set<number> = new Set();
 
@@ -96,11 +98,8 @@ export default class HaChartBase extends LitElement {
       <div
         class="chartContainer"
         style=${styleMap({
-          height:
+          height: `${this.height ?? this._chartHeight}px`,
-            this.chartType === "timeline"
+          overflow: this._chartHeight ? "initial" : "hidden",
-              ? `${this.data.datasets.length * 30 + 30}px`
-              : this._height,
-          overflow: this._height ? "initial" : "hidden",
         })}
       >
         <canvas></canvas>
@@ -194,7 +193,7 @@ export default class HaChartBase extends LitElement {
       {
         id: "afterRenderHook",
         afterRender: (chart) => {
-          this._height = `${chart.height}px`;
+          this._chartHeight = chart.height;
         },
         legend: {
           ...this.options?.plugins?.legend,
@@ -255,8 +254,8 @@ export default class HaChartBase extends LitElement {
         height: 0;
         transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
       }
-      :host(:not([chart-type="timeline"])) canvas {
+      canvas {
-        max-height: 400px;
+        max-height: var(--chart-max-height, 400px);
       }
       .chartLegend {
         text-align: center;

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

@@ -1,6 +1,6 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { getColorByIndex } from "../../common/color/colors";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -99,6 +99,7 @@ export class StateHistoryChartTimeline extends LitElement {
       <ha-chart-base
         .data=${this._chartData}
         .options=${this._chartOptions}
+        .height=${this.data.length * 30 + 30}
         chart-type="timeline"
       ></ha-chart-base>
     `;
@@ -304,6 +305,14 @@ export class StateHistoryChartTimeline extends LitElement {
       datasets: datasets,
     };
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-chart-base {
+        --chart-max-height: none;
+      }
+    `;
+  }
 }
 
 declare global {

src/data/energy.ts

@@ -219,7 +219,6 @@ export interface EnergyCollection extends Collection<EnergyData> {
   prefs?: EnergyPreferences;
   clearPrefs(): void;
   setPeriod(newStart: Date, newEnd?: Date): void;
-  getDeviceStatIds(): string[];
 }
 
 export const getEnergyDataCollection = (
@@ -261,9 +260,5 @@ export const getEnergyDataCollection = (
     collection.start = newStart;
     collection.end = newEnd;
   };
-  collection.getDeviceStatIds = () =>
-    collection.state.prefs.device_consumption.map(
-      (device) => device.stat_consumption
-    );
   return collection;
 };

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -79,6 +79,10 @@ class HuiEnergyCarbonGaugeCard
 
     let value: number | undefined;
 
+    if (totalGridConsumption === 0) {
+      value = 100;
+    }
+
     if (
       this._data.co2SignalEntity in this._data.stats &&
       totalGridConsumption
@@ -97,17 +101,18 @@ class HuiEnergyCarbonGaugeCard
         ? calculateStatisticsSumGrowth(
             this._data.stats,
             types.solar.map((source) => source.stat_energy_from)
-          )
+          ) || 0
-        : undefined;
+        : 0;
 
-      const totalGridReturned = calculateStatisticsSumGrowth(
+      const totalGridReturned =
-        this._data.stats,
+        calculateStatisticsSumGrowth(
-        types.grid![0].flow_to.map((flow) => flow.stat_energy_to)
+          this._data.stats,
-      );
+          types.grid![0].flow_to.map((flow) => flow.stat_energy_to)
+        ) || 0;
 
       const totalEnergyConsumed =
         totalGridConsumption +
-        Math.max(0, (totalSolarProduction || 0) - (totalGridReturned || 0));
+        Math.max(0, totalSolarProduction - totalGridReturned);
 
       value = round((1 - highCarbonEnergy / totalEnergyConsumed) * 100);
     }

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -40,7 +40,7 @@ export class HuiEnergyDevicesGraphCard
 
   @state() private _data?: Statistics;
 
-  @state() private _chartData?: ChartData;
+  @state() private _chartData: ChartData = { datasets: [] };
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -73,13 +73,13 @@ export class HuiEnergyDevicesGraphCard
             "has-header": !!this._config.title,
           })}"
         >
-          ${this._chartData
+          <ha-chart-base
-            ? html`<ha-chart-base
+            .data=${this._chartData}
-                .data=${this._chartData}
+            .options=${this._createOptions(this.hass.locale)}
-                .options=${this._createOptions(this.hass.locale)}
+            .height=${(this._chartData?.datasets[0]?.data.length || 0) * 28 +
-                chart-type="bar"
+            50}
-              ></ha-chart-base>`
+            chart-type="bar"
-            : ""}
+          ></ha-chart-base>
         </div>
       </ha-card>
     `;
@@ -90,8 +90,13 @@ export class HuiEnergyDevicesGraphCard
       parsing: false,
       animation: false,
       responsive: true,
+      maintainAspectRatio: false,
       indexAxis: "y",
       scales: {
+        y: {
+          type: "category",
+          ticks: { autoSkip: false },
+        },
         x: {
           title: {
             display: true,
@@ -118,12 +123,13 @@ export class HuiEnergyDevicesGraphCard
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
-    const energyCollection = getEnergyDataCollection(this.hass);
     this._data = await fetchStatistics(
       this.hass,
-      energyCollection.start,
+      energyData.start,
-      energyCollection.end,
+      energyData.end,
-      energyCollection.getDeviceStatIds()
+      energyData.prefs.device_consumption.map(
+        (device) => device.stat_consumption
+      )
     );
 
     const statisticsData = Object.values(this._data!);
@@ -151,6 +157,7 @@ export class HuiEnergyDevicesGraphCard
         borderColor,
         backgroundColor,
         data,
+        barThickness: 20,
       },
     ];
 
@@ -166,12 +173,14 @@ export class HuiEnergyDevicesGraphCard
 
       const value =
         device.stat_consumption in this._data
-          ? calculateStatisticSumGrowth(this._data[device.stat_consumption])
+          ? calculateStatisticSumGrowth(this._data[device.stat_consumption]) ||
+            0
           : 0;
+
       data.push({
         // @ts-expect-error
         y: label,
-        x: value || 0,
+        x: value,
       });
     }
 
@@ -184,9 +193,6 @@ export class HuiEnergyDevicesGraphCard
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-card {
-        height: 100%;
-      }
       .card-header {
         padding-bottom: 0;
       }
@@ -196,6 +202,9 @@ export class HuiEnergyDevicesGraphCard
       .has-header {
         padding-top: 0;
       }
+      ha-chart-base {
+        --chart-max-height: none;
+      }
     `;
   }
 }