Rename history chart to trend graph (#26854)

* Rename history chart to trend graph

* rename element and prettier

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/card-features/hui-trend-graph-card-feature.ts

@@ -11,11 +11,11 @@ import { coordinatesMinimalResponseCompressedState } from "../common/graph/coord
 import "../components/hui-graph-base";
 import type { LovelaceCardFeature } from "../types";
 import type {
-  HistoryChartCardFeatureConfig,
+  TrendGraphCardFeatureConfig,
   LovelaceCardFeatureContext,
 } from "./types";
 
-export const supportsHistoryChartCardFeature = (
+export const supportsTrendGraphCardFeature = (
   hass: HomeAssistant,
   context: LovelaceCardFeatureContext
 ) => {
@@ -27,7 +27,9 @@ export const supportsHistoryChartCardFeature = (
   return domain === "sensor" && isNumericFromAttributes(stateObj.attributes);
 };
 
-@customElement("hui-history-chart-card-feature")
+const DEFAULT_HOURS_TO_SHOW = 24;
+
+@customElement("hui-trend-graph-card-feature")
 class HuiHistoryChartCardFeature
   extends SubscribeMixin(LitElement)
   implements LovelaceCardFeature
@@ -37,20 +39,19 @@ class HuiHistoryChartCardFeature
 
   @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
 
-  @state() private _config?: HistoryChartCardFeatureConfig;
+  @state() private _config?: TrendGraphCardFeatureConfig;
 
   @state() private _coordinates?: [number, number][];
 
   private _interval?: number;
 
-  static getStubConfig(): HistoryChartCardFeatureConfig {
+  static getStubConfig(): TrendGraphCardFeatureConfig {
     return {
-      type: "history-chart",
+      type: "trend-graph",
-      hours_to_show: 24,
     };
   }
 
-  public setConfig(config: HistoryChartCardFeatureConfig): void {
+  public setConfig(config: TrendGraphCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");
     }
@@ -78,7 +79,7 @@ class HuiHistoryChartCardFeature
       !this._config ||
       !this.hass ||
       !this.context ||
-      !supportsHistoryChartCardFeature(this.hass, this.context)
+      !supportsTrendGraphCardFeature(this.hass, this.context)
     ) {
       return nothing;
     }
@@ -109,19 +110,22 @@ class HuiHistoryChartCardFeature
     ) {
       return () => Promise.resolve();
     }
+
+    const hourToShow = this._config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW;
+
     return subscribeHistoryStatesTimeWindow(
       this.hass!,
       (historyStates) => {
         this._coordinates =
           coordinatesMinimalResponseCompressedState(
             historyStates[this.context!.entity_id!],
-            this._config!.hours_to_show ?? 24,
+            hourToShow,
             500,
             2,
             undefined
           ) || [];
       },
-      this._config!.hours_to_show ?? 24,
+      hourToShow,
       [this.context!.entity_id!]
     );
   }
@@ -148,6 +152,6 @@ class HuiHistoryChartCardFeature
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-history-chart-card-feature": HuiHistoryChartCardFeature;
+    "hui-trend-graph-card-feature": HuiHistoryChartCardFeature;
   }
 }

src/panels/lovelace/card-features/types.ts

@@ -187,9 +187,9 @@ export interface UpdateActionsCardFeatureConfig {
   backup?: "yes" | "no" | "ask";
 }
 
-export interface HistoryChartCardFeatureConfig {
+export interface TrendGraphCardFeatureConfig {
-  type: "history-chart";
+  type: "trend-graph";
-  hours_to_show: number;
+  hours_to_show?: number;
 }
 
 export const AREA_CONTROLS = [
@@ -239,7 +239,7 @@ export type LovelaceCardFeatureConfig =
   | FanOscillateCardFeatureConfig
   | FanPresetModesCardFeatureConfig
   | FanSpeedCardFeatureConfig
-  | HistoryChartCardFeatureConfig
+  | TrendGraphCardFeatureConfig
   | HumidifierToggleCardFeatureConfig
   | HumidifierModesCardFeatureConfig
   | LawnMowerCommandsCardFeatureConfig
@@ -251,7 +251,7 @@ export type LovelaceCardFeatureConfig =
   | MediaPlayerVolumeSliderCardFeatureConfig
   | NumericInputCardFeatureConfig
   | SelectOptionsCardFeatureConfig
-  | HistoryChartCardFeatureConfig
+  | TrendGraphCardFeatureConfig
   | TargetHumidityCardFeatureConfig
   | TargetTemperatureCardFeatureConfig
   | ToggleCardFeatureConfig

src/panels/lovelace/create-element/create-card-feature-element.ts

@@ -36,7 +36,7 @@ import "../card-features/hui-valve-position-card-feature";
 import "../card-features/hui-water-heater-operation-modes-card-feature";
 import "../card-features/hui-area-controls-card-feature";
 import "../card-features/hui-bar-gauge-card-feature";
-import "../card-features/hui-history-chart-card-feature";
+import "../card-features/hui-trend-graph-card-feature";
 
 import type { LovelaceCardFeatureConfig } from "../card-features/types";
 import {
@@ -75,7 +75,7 @@ const TYPES = new Set<LovelaceCardFeatureConfig["type"]>([
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "history-chart",
+  "trend-graph",
   "target-humidity",
   "target-temperature",
   "toggle",

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -46,7 +46,7 @@ import { supportsMediaPlayerPlaybackCardFeature } from "../../card-features/hui-
 import { supportsMediaPlayerVolumeSliderCardFeature } from "../../card-features/hui-media-player-volume-slider-card-feature";
 import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
-import { supportsHistoryChartCardFeature } from "../../card-features/hui-history-chart-card-feature";
+import { supportsTrendGraphCardFeature } from "../../card-features/hui-trend-graph-card-feature";
 import { supportsTargetHumidityCardFeature } from "../../card-features/hui-target-humidity-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-feature";
@@ -100,7 +100,7 @@ const UI_FEATURE_TYPES = [
   "media-player-volume-slider",
   "numeric-input",
   "select-options",
-  "history-chart",
+  "trend-graph",
   "target-humidity",
   "target-temperature",
   "toggle",
@@ -168,7 +168,7 @@ const SUPPORTS_FEATURE_TYPES: Record<
   "media-player-volume-slider": supportsMediaPlayerVolumeSliderCardFeature,
   "numeric-input": supportsNumericInputCardFeature,
   "select-options": supportsSelectOptionsCardFeature,
-  "history-chart": supportsHistoryChartCardFeature,
+  "trend-graph": supportsTrendGraphCardFeature,
   "target-humidity": supportsTargetHumidityCardFeature,
   "target-temperature": supportsTargetTemperatureCardFeature,
   toggle: supportsToggleCardFeature,

src/panels/lovelace/strategies/home/home-climate-view-strategy.ts

@@ -48,13 +48,13 @@ const processAreasForClimate = (
       if (area.temperature_entity_id) {
         cards.push({
           ...computeTileCard(area.temperature_entity_id),
-          features: [{ type: "history-chart" }],
+          features: [{ type: "trend-graph" }],
         });
       }
       if (area.humidity_entity_id) {
         cards.push({
           ...computeTileCard(area.humidity_entity_id),
-          features: [{ type: "history-chart" }],
+          features: [{ type: "trend-graph" }],
         });
       }
 

src/translations/en.json

@@ -8206,8 +8206,8 @@
               "bar-gauge": {
                 "label": "Bar gauge"
               },
-              "history-chart": {
+              "trend-graph": {
-                "label": "History chart"
+                "label": "Trend graph"
               }
             }
           },