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 803f5d8fe4..273447beb7 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 @@ -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 { + 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"); diff --git a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts index 11183d9dc6..f18485644f 100644 --- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts @@ -128,6 +128,7 @@ const EDITABLES_FEATURE_TYPES = new Set([ "lawn-mower-commands", "numeric-input", "select-options", + "trend-graph", "update-actions", "vacuum-commands", "water-heater-operation-modes", 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 new file mode 100644 index 0000000000..f0f917d5d3 --- /dev/null +++ b/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` + + `; + } + + private _valueChanged(ev: CustomEvent): void { + fireEvent(this, "config-changed", { config: ev.detail.value }); + } + + private _computeLabelCallback = (schema: SchemaUnion) => { + 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; + } +}