Add UI editor for trend graph feature (#26872)

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

@@ -9,7 +9,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../types";
 import { coordinatesMinimalResponseCompressedState } from "../common/graph/coordinates";
 import "../components/hui-graph-base";
-import type { LovelaceCardFeature } from "../types";
+import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
 import type {
   TrendGraphCardFeatureConfig,
   LovelaceCardFeatureContext,
@@ -27,7 +27,7 @@ export const supportsTrendGraphCardFeature = (
   return domain === "sensor" && isNumericFromAttributes(stateObj.attributes);
 };
 
-const DEFAULT_HOURS_TO_SHOW = 24;
+export const DEFAULT_HOURS_TO_SHOW = 24;
 
 @customElement("hui-trend-graph-card-feature")
 class HuiHistoryChartCardFeature
@@ -51,6 +51,13 @@ class HuiHistoryChartCardFeature
     };
   }
 
+  public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
+    await import(
+      "../editor/config-elements/hui-trend-graph-card-feature-editor"
+    );
+    return document.createElement("hui-trend-graph-card-feature-editor");
+  }
+
   public setConfig(config: TrendGraphCardFeatureConfig): void {
     if (!config) {
       throw new Error("Invalid configuration");

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

@@ -128,6 +128,7 @@ const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "lawn-mower-commands",
   "numeric-input",
   "select-options",
+  "trend-graph",
   "update-actions",
   "vacuum-commands",
   "water-heater-operation-modes",

src/panels/lovelace/editor/config-elements/hui-trend-graph-card-feature-editor.ts

@@ -0,0 +1,82 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-form/ha-form";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../types";
+import { DEFAULT_HOURS_TO_SHOW } from "../../card-features/hui-trend-graph-card-feature";
+import type {
+  LovelaceCardFeatureContext,
+  TrendGraphCardFeatureConfig,
+} from "../../card-features/types";
+import type { LovelaceCardFeatureEditor } from "../../types";
+
+const SCHEMA = [
+  {
+    name: "hours_to_show",
+    default: DEFAULT_HOURS_TO_SHOW,
+    selector: { number: { min: 1, mode: "box" } },
+  },
+] as const satisfies HaFormSchema[];
+
+@customElement("hui-trend-graph-card-feature-editor")
+export class HuiTrendGraphCardFeatureEditor
+  extends LitElement
+  implements LovelaceCardFeatureEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public context?: LovelaceCardFeatureContext;
+
+  @state() private _config?: TrendGraphCardFeatureConfig;
+
+  public setConfig(config: TrendGraphCardFeatureConfig): void {
+    this._config = config;
+  }
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    const data = { ...this._config };
+
+    if (!this._config.hours_to_show) {
+      data.hours_to_show = DEFAULT_HOURS_TO_SHOW;
+    }
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
+  }
+
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    switch (schema.name) {
+      case "hours_to_show":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+      default:
+        return "";
+    }
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-trend-graph-card-feature-editor": HuiTrendGraphCardFeatureEditor;
+  }
+}