Improve chart height and narrow option in grid section (#24046)

* Fix chart size in grid * Set minimal height to 2 for history chart * Update history chart
home-assistant · Feb 3, 2025 · 67b970f · 67b970f
1 parent 38bcdaa
commit 67b970f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
@@ -65,7 +65,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     return {
       columns: 12,
       min_columns: 6,
-      min_rows: this._config?.entities?.length || 1,
+      min_rows: 2,
     };
   }
 
@@ -244,7 +244,8 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     })}`;
 
     const columns = this._config.grid_options?.columns ?? 12;
-    const narrow = Number.isNaN(columns) || Number(columns) <= 12;
+    const narrow = typeof columns === "number" && columns <= 12;
+    const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
 
     return html`
       <ha-card>
@@ -284,9 +285,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
                   .minYAxis=${this._config.min_y_axis}
                   .maxYAxis=${this._config.max_y_axis}
                   .fitYData=${this._config.fit_y_data || false}
-                  .height=${this._config.grid_options?.rows
-                    ? "100%"
-                    : undefined}
+                  .height=${hasFixedHeight ? "100%" : undefined}
                   .narrow=${narrow}
                 ></state-history-charts>
               `}

diff --git a/src/panels/lovelace/cards/hui-statistics-graph-card.ts b/src/panels/lovelace/cards/hui-statistics-graph-card.ts
@@ -258,6 +258,8 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
+    const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
+
     return html`
       <ha-card .header=${this._config.title}>
         <div
@@ -290,7 +292,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
             .daysToShow=${this._energyStart && this._energyEnd
               ? differenceInDays(this._energyEnd, this._energyStart)
               : this._config.days_to_show || DEFAULT_DAYS_TO_SHOW}
-            .height=${this._config.grid_options?.rows ? "100%" : undefined}
+            .height=${hasFixedHeight ? "100%" : undefined}
           ></statistics-chart>
         </div>
       </ha-card>