Show sankey chart in vertical layout on mobile (#26439)

* Show sankey chart in vertical layout on mobile

* ts fix

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

@@ -387,8 +387,9 @@ export class HaChartBase extends LitElement {
           lastTipX = e.x;
           lastTipY = e.y;
           this.chart?.setOption({
-            xAxis: ensureArray(this.chart?.getOption().xAxis as any).map(
-              (axis: XAXisOption) =>
+            xAxis: ensureArray(
+              (this.chart?.getOption().xAxis as any) ?? []
+            ).map((axis: XAXisOption) =>
               axis.show
                 ? {
                     ...axis,
@@ -417,8 +418,9 @@ export class HaChartBase extends LitElement {
               return;
             }
             this.chart?.setOption({
-              xAxis: ensureArray(this.chart?.getOption().xAxis as any).map(
-                (axis: XAXisOption) =>
+              xAxis: ensureArray(
+                (this.chart?.getOption().xAxis as any) ?? []
+              ).map((axis: XAXisOption) =>
                 axis.show
                   ? {
                       ...axis,

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

@@ -186,14 +186,16 @@ export class HaSankeyChart extends LitElement {
               ""
             );
           const wordWidth = measureTextWidth(longestWord, FONT_SIZE);
+          const availableWidth = params.rect.width + 6;
           const fontSize = Math.min(
             FONT_SIZE,
-            (params.rect.width / wordWidth) * FONT_SIZE
+            (availableWidth / wordWidth) * FONT_SIZE
           );
           return {
             fontSize: fontSize > 1 ? fontSize : 0,
-            width: params.rect.width,
+            width: availableWidth,
             align: "center",
+            dy: -2, // shift up or the lowest row labels may be cut off
           };
         }
 

src/mixins/mobile-aware-mixin.ts

@@ -0,0 +1,34 @@
+import type { LitElement } from "lit";
+import { state } from "lit/decorators";
+import type { Constructor } from "../types";
+import { isMobileClient } from "../util/is_mobile";
+import { listenMediaQuery } from "../common/dom/media_query";
+
+export const MobileAwareMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+) => {
+  class MobileAwareClass extends superClass {
+    @state() protected _isMobileSize = false;
+
+    protected _isMobileClient = isMobileClient;
+
+    private _unsubMql?: () => void;
+
+    public connectedCallback() {
+      super.connectedCallback();
+      this._unsubMql = listenMediaQuery(
+        "all and (max-width: 450px), all and (max-height: 500px)",
+        (matches) => {
+          this._isMobileSize = matches;
+        }
+      );
+    }
+
+    public disconnectedCallback() {
+      super.disconnectedCallback();
+      this._unsubMql?.();
+      this._unsubMql = undefined;
+    }
+  }
+  return MobileAwareClass;
+};

src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts

@@ -23,6 +23,7 @@ import type { Link, Node } from "../../../../components/chart/ha-sankey-chart";
 import { getGraphColorByIndex } from "../../../../common/color/colors";
 import { formatNumber } from "../../../../common/number/format_number";
 import { getEntityContext } from "../../../../common/entity/context/get_entity_context";
+import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
 
 const DEFAULT_CONFIG: Partial<EnergySankeyCardConfig> = {
   group_by_floor: true,
@@ -31,7 +32,7 @@ const DEFAULT_CONFIG: Partial<EnergySankeyCardConfig> = {
 
 @customElement("hui-energy-sankey-card")
 class HuiEnergySankeyCard
-  extends SubscribeMixin(LitElement)
+  extends SubscribeMixin(MobileAwareMixin(LitElement))
   implements LovelaceCard
 {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -70,7 +71,11 @@ class HuiEnergySankeyCard
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    return changedProps.has("_config") || changedProps.has("_data");
+    return (
+      changedProps.has("_config") ||
+      changedProps.has("_data") ||
+      changedProps.has("_isMobileSize")
+    );
   }
 
   protected render() {
@@ -373,13 +378,17 @@ class HuiEnergySankeyCard
 
     const hasData = nodes.some((node) => node.value > 0);
 
+    const vertical =
+      this._config.layout === "vertical" ||
+      (this._config.layout !== "horizontal" && this._isMobileSize);
+
     return html`
       <ha-card .header=${this._config.title}>
         <div class="card-content">
           ${hasData
             ? html`<ha-sankey-chart
                 .data=${{ nodes, links }}
-                .vertical=${this._config.layout === "vertical"}
+                .vertical=${vertical}
                 .valueFormatter=${this._valueFormatter}
               ></ha-sankey-chart>`
             : html`${this.hass.localize(

src/panels/lovelace/cards/types.ts

@@ -213,7 +213,7 @@ export interface EnergyCarbonGaugeCardConfig extends EnergyCardBaseConfig {
 export interface EnergySankeyCardConfig extends EnergyCardBaseConfig {
   type: "energy-sankey";
   title?: string;
-  layout?: "vertical" | "horizontal";
+  layout?: "vertical" | "horizontal" | "auto";
   group_by_floor?: boolean;
   group_by_area?: boolean;
 }