From 259f4421dbf03213d6bcc5f6aff4e1fd68233f54 Mon Sep 17 00:00:00 2001
From: Petar Petrov <MindFreeze@users.noreply.github.com>
Date: Wed, 19 Nov 2025 16:17:03 +0200
Subject: [PATCH] Add detail option to trend card feature (#27993)

---
 .../card-features/hui-trend-graph-card-feature.ts    | 10 +++++++++-
 src/panels/lovelace/card-features/types.ts           |  1 +
 .../hui-trend-graph-card-feature-editor.ts           | 12 ++++++++++++
 src/translations/en.json                             |  3 ++-
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts b/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts
index af74e9408f..138dba4eff 100644
--- a/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts
@@ -124,16 +124,24 @@ class HuiHistoryChartCardFeature
     }
 
     const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW;
+    const detail = this._config.detail !== false; // default to true (high detail)
 
     return subscribeHistoryStatesTimeWindow(
       this.hass!,
       (historyStates) => {
+        // sample to 1 point per hour for low detail or 1 point per 5 pixels for high detail
+        const maxDetails = detail
+          ? Math.max(10, this.clientWidth / 5, hourToShow)
+          : Math.max(10, hourToShow);
+        const useMean = !detail;
         const { points, yAxisOrigin } =
           coordinatesMinimalResponseCompressedState(
             historyStates[this.context!.entity_id!],
             this.clientWidth,
             this.clientHeight,
-            this.clientWidth / 5 // sample to 1 point per 5 pixels
+            maxDetails,
+            undefined,
+            useMean
           );
         this._coordinates = points;
         this._yAxisOrigin = yAxisOrigin;
diff --git a/src/panels/lovelace/card-features/types.ts b/src/panels/lovelace/card-features/types.ts
index b61372468d..99bcf19ec7 100644
--- a/src/panels/lovelace/card-features/types.ts
+++ b/src/panels/lovelace/card-features/types.ts
@@ -199,6 +199,7 @@ export interface UpdateActionsCardFeatureConfig {
 export interface TrendGraphCardFeatureConfig {
   type: "trend-graph";
   hours_to_show?: number;
+  detail?: boolean;
 }
 
 export const AREA_CONTROLS = [
diff --git a/src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts b/src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts
index f0f917d5d3..5d5387c138 100644
--- a/src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts
@@ -20,6 +20,10 @@ const SCHEMA = [
     default: DEFAULT_HOURS_TO_SHOW,
     selector: { number: { min: 1, mode: "box" } },
   },
+  {
+    name: "detail",
+    selector: { boolean: {} },
+  },
 ] as const satisfies HaFormSchema[];
 
 @customElement("hui-trend-graph-card-feature-editor")
@@ -48,6 +52,10 @@ export class HuiTrendGraphCardFeatureEditor
       data.hours_to_show = DEFAULT_HOURS_TO_SHOW;
     }
 
+    if (this._config.detail === undefined) {
+      data.detail = true;
+    }
+
     return html`
       <ha-form
         .hass=${this.hass}
@@ -69,6 +77,10 @@ export class HuiTrendGraphCardFeatureEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.generic.${schema.name}`
         );
+      case "detail":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.features.types.trend-graph.detail"
+        );
       default:
         return "";
     }
diff --git a/src/translations/en.json b/src/translations/en.json
index 309526cf08..6eb31eada6 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -8434,7 +8434,8 @@
                 "max": "Maximum value"
               },
               "trend-graph": {
-                "label": "Trend graph"
+                "label": "Trend graph",
+                "detail": "Show more detail"
               }
             }
           },