Sensor card: Graph types options translated (#25118)

* Sensor card: Graph types options translated

* Clean up

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
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${SCHEMA}
+        .schema=${this._schema(this.hass.localize)}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
@@ -147,7 +148,9 @@ export class HuiSensorCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
-  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ) => {
     switch (schema.name) {
       case "theme":
         return `${this.hass!.localize(

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"