diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts index d7dc0d5cfa..fb2b49ca1b 100644 --- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts @@ -1,3 +1,4 @@ +import memoizeOne from "memoize-one"; import type { CSSResultGroup } from "lit"; import { html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -11,6 +12,7 @@ import { string, union, } from "superstruct"; +import type { LocalizeFunc } from "../../../../common/translations/localize"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-form/ha-form"; import type { SchemaUnion } from "../../../../components/ha-form/types"; @@ -41,70 +43,6 @@ const cardConfigStruct = assign( }) ); -const SCHEMA = [ - { - name: "entity", - selector: { - entity: { domain: ["counter", "input_number", "number", "sensor"] }, - }, - }, - { name: "name", selector: { text: {} } }, - { - type: "grid", - name: "", - schema: [ - { - name: "icon", - selector: { - icon: {}, - }, - context: { - icon_entity: "entity", - }, - }, - { - name: "graph", - selector: { - select: { - options: [ - { - value: "none", - label: "None", - }, - { - value: "line", - label: "Line", - }, - ], - }, - }, - }, - { name: "unit", selector: { text: {} } }, - { name: "detail", selector: { boolean: {} } }, - { name: "theme", selector: { theme: {} } }, - { - name: "hours_to_show", - default: DEFAULT_HOURS_TO_SHOW, - selector: { number: { min: 1, mode: "box" } }, - }, - ], - }, - { - type: "grid", - name: "limits", - schema: [ - { - name: "min", - selector: { number: { mode: "box" } }, - }, - { - name: "max", - selector: { number: { mode: "box" } }, - }, - ], - }, -] as const; - @customElement("hui-sensor-card-editor") export class HuiSensorCardEditor extends LitElement @@ -119,6 +57,69 @@ export class HuiSensorCardEditor this._config = config; } + private _schema = memoizeOne( + (localize: LocalizeFunc) => + [ + { + name: "entity", + selector: { + entity: { domain: ["counter", "input_number", "number", "sensor"] }, + }, + }, + { name: "name", selector: { text: {} } }, + { + type: "grid", + name: "", + schema: [ + { + name: "icon", + selector: { + icon: {}, + }, + context: { + icon_entity: "entity", + }, + }, + { + name: "graph", + selector: { + select: { + options: ["none", "line"].map((value) => ({ + value, + label: localize( + `ui.panel.lovelace.editor.card.sensor.graph_options.${value}` + ), + })), + }, + }, + }, + { name: "unit", selector: { text: {} } }, + { name: "detail", selector: { boolean: {} } }, + { name: "theme", selector: { theme: {} } }, + { + name: "hours_to_show", + default: DEFAULT_HOURS_TO_SHOW, + selector: { number: { min: 1, mode: "box" } }, + }, + ], + }, + { + type: "grid", + name: "limits", + schema: [ + { + name: "min", + selector: { number: { mode: "box" } }, + }, + { + name: "max", + selector: { number: { mode: "box" } }, + }, + ], + }, + ] as const + ); + protected render() { if (!this.hass || !this._config) { return nothing; @@ -134,7 +135,7 @@ export class HuiSensorCardEditor @@ -147,7 +148,9 @@ export class HuiSensorCardEditor fireEvent(this, "config-changed", { config }); } - private _computeLabelCallback = (schema: SchemaUnion) => { + private _computeLabelCallback = ( + schema: SchemaUnion> + ) => { switch (schema.name) { case "theme": return `${this.hass!.localize( diff --git a/src/translations/en.json b/src/translations/en.json index 774adb572d..8ffd5093eb 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -7367,6 +7367,10 @@ "name": "Sensor", "show_more_detail": "Show more detail", "graph_type": "Graph type", + "graph_options": { + "none": "None", + "line": "Line" + }, "description": "The Sensor card gives you a quick overview of your sensors state with an optional graph to visualize change over time.", "limit_min": "Minimum value", "limit_max": "Maximum value"