Improve responsive support for history graph feature (#26851)

src/data/graph.ts

@@ -1 +1 @@
-export const strokeWidth = 5;
+export const strokeWidth = 2;

src/panels/lovelace/card-features/hui-history-chart-card-feature.ts

@@ -1,19 +1,19 @@
 import { css, html, LitElement, nothing } from "lit";
-import "../../../components/ha-spinner";
 import { customElement, property, state } from "lit/decorators";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
-import type { HomeAssistant } from "../../../types";
-import type { LovelaceCardFeature } from "../types";
-import type {
-  LovelaceCardFeatureContext,
-  HistoryChartCardFeatureConfig,
-} from "./types";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { isNumericFromAttributes } from "../../../common/number/format_number";
+import "../../../components/ha-spinner";
+import { subscribeHistoryStatesTimeWindow } from "../../../data/history";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../types";
 import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates";
 import "../components/hui-graph-base";
-import { isNumericFromAttributes } from "../../../common/number/format_number";
+import type { LovelaceCardFeature } from "../types";
+import type {
+  HistoryChartCardFeatureConfig,
+  LovelaceCardFeatureContext,
+} from "./types";
 
 export const supportsHistoryChartCardFeature = (
   hass: HomeAssistant,
@@ -39,7 +39,7 @@ class HuiHistoryChartCardFeature
 
   @state() private _config?: HistoryChartCardFeatureConfig;
 
-  @state() private _coordinates?: number[][];
+  @state() private _coordinates?: [number, number][];
 
   private _interval?: number;
 
@@ -139,6 +139,9 @@ class HuiHistoryChartCardFeature
     hui-graph-base {
       width: 100%;
       --accent-color: var(--feature-color);
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      overflow: hidden;
     }
   `;
 }

src/panels/lovelace/common/graph/coordinates.ts

@@ -14,8 +14,8 @@ const calcPoints = (
   detail: number,
   min: number,
   max: number
-): number[][] => {
-  const coords = [] as number[][];
+): [number, number][] => {
+  const coords = [] as [number, number][];
   const height = 80;
   let yRatio = (max - min) / height;
   yRatio = yRatio !== 0 ? yRatio : height;
@@ -61,7 +61,7 @@ export const coordinates = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): number[][] | undefined => {
+): [number, number][] | undefined => {
   history.forEach((item) => {
     item.state = Number(item.state);
   });
@@ -119,7 +119,7 @@ export const coordinatesMinimalResponseCompressedState = (
   width: number,
   detail: number,
   limits?: { min?: number; max?: number }
-): number[][] | undefined => {
+): [number, number][] | undefined => {
   if (!history) {
     return undefined;
   }

src/panels/lovelace/components/hui-graph-base.ts

@@ -13,7 +13,7 @@ export class HuiGraphBase extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this._path
-        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100">
+        ? svg`<svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="none">
           <g>
             <mask id="fill">
               <path
@@ -25,6 +25,7 @@ export class HuiGraphBase extends LitElement {
             <rect height="100%" width="100%" id="fill-rect" fill="var(--accent-color)" mask="url(#fill)"></rect>
             <mask id="line">
               <path
+                vector-effect="non-scaling-stroke"
                 class='line'
                 fill="none"
                 stroke="white"
@@ -55,6 +56,7 @@ export class HuiGraphBase extends LitElement {
     :host {
       display: flex;
       width: 100%;
+      height: 100%;
     }
     .line {
       opacity: 0.8;

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -61,7 +61,7 @@ export class HuiGraphHeaderFooter
 
   @state() protected _config?: GraphHeaderFooterConfig;
 
-  @state() private _coordinates?: number[][];
+  @state() private _coordinates?: [number, number][];
 
   private _error?: string;