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,7 +43,23 @@ const cardConfigStruct = assign(
   })
 );
 
-const SCHEMA = [
+@customElement("hui-sensor-card-editor")
+export class HuiSensorCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: SensorCardConfig;
+
+  public setConfig(config: SensorCardConfig): void {
+    assert(config, cardConfigStruct);
+    this._config = config;
+  }
+
+  private _schema = memoizeOne(
+    (localize: LocalizeFunc) =>
+      [
         {
           name: "entity",
           selector: {
@@ -66,16 +84,12 @@ const SCHEMA = [
               name: "graph",
               selector: {
                 select: {
-            options: [
-              {
-                value: "none",
-                label: "None",
-              },
-              {
-                value: "line",
-                label: "Line",
-              },
-            ],
+                  options: ["none", "line"].map((value) => ({
+                    value,
+                    label: localize(
+                      `ui.panel.lovelace.editor.card.sensor.graph_options.${value}`
+                    ),
+                  })),
                 },
               },
             },
@@ -103,21 +117,8 @@ const SCHEMA = [
             },
           ],
         },
-] as const;
-
-@customElement("hui-sensor-card-editor")
-export class HuiSensorCardEditor
-  extends LitElement
-  implements LovelaceCardEditor
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() private _config?: SensorCardConfig;
-
-  public setConfig(config: SensorCardConfig): void {
-    assert(config, cardConfigStruct);
-    this._config = config;
-  }
+      ] as const
+  );
 
   protected render() {
     if (!this.hass || !this._config) {
@@ -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"