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"