Statistics Graph Editor to Ha Form (#11820)

src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts

@@ -1,7 +1,7 @@
-import "@material/mwc-list/mwc-list-item";
+import "../../../../components/ha-form/ha-form";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import {
   array,
   assert,
@@ -14,22 +14,15 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/entity/ha-statistics-picker";
-import "../../../../components/ha-checkbox";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
-import "../../../../components/ha-formfield";
+import type { HomeAssistant } from "../../../../types";
-import "../../../../components/ha-radio";
+import type { StatisticsGraphCardConfig } from "../../cards/types";
-import type { HaRadio } from "../../../../components/ha-radio";
-import "../../../../components/ha-select";
-import { StatisticType } from "../../../../data/history";
-import { HomeAssistant } from "../../../../types";
-import { StatisticsGraphCardConfig } from "../../cards/types";
 import { processConfigEntities } from "../../common/process-config-entities";
-import { LovelaceCardEditor } from "../../types";
+import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { entitiesConfigStruct } from "../structs/entities-struct";
-import { EditorTarget } from "../types";
-import { configElementStyle } from "./config-elements-style";
 
 const statTypeStruct = union([
   literal("sum"),
@@ -78,133 +71,82 @@ export class HuiStatisticsGraphCardEditor
       : [];
   }
 
-  get _title(): string {
+  private _schema = memoizeOne((localize: LocalizeFunc) => [
-    return this._config!.title || "";
+    { name: "title", selector: { text: {} } },
-  }
+    {
-
+      name: "",
-  get _days_to_show(): number {
+      type: "grid",
-    return this._config!.days_to_show || 30;
+      schema: [
-  }
+        {
-
+          name: "period",
-  get _period(): string {
+          required: true,
-    return this._config!.period || "hour";
+          selector: {
-  }
+            select: {
-
+              options: periods.map((period) => ({
-  get _chart_type(): StatisticsGraphCardConfig["chart_type"] {
+                value: period,
-    return this._config!.chart_type || "line";
+                label: localize(
-  }
+                  `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
-
+                ),
-  get _stat_types(): StatisticType[] {
+              })),
-    return this._config!.stat_types
+            },
-      ? Array.isArray(this._config!.stat_types)
+          },
-        ? this._config!.stat_types
+        },
-        : [this._config!.stat_types]
+        {
-      : ["mean", "min", "max", "sum"];
+          name: "days_to_show",
-  }
+          required: true,
+          selector: { number: { min: 1, mode: "box" } },
+        },
+        {
+          name: "stat_types",
+          required: true,
+          type: "multi_select",
+          options: [
+            ["mean", "Mean"],
+            ["min", "Min"],
+            ["max", "Max"],
+            ["sum", "Sum"],
+          ],
+        },
+        {
+          name: "chart_type",
+          required: true,
+          type: "select",
+          options: [
+            ["line", "Line"],
+            ["bar", "Bar"],
+          ],
+        },
+      ],
+    },
+  ]);
 
   protected render(): TemplateResult {
     if (!this.hass || !this._config) {
       return html``;
     }
 
+    const schema = this._schema(this.hass.localize);
+    const stat_types = this._config!.stat_types
+      ? Array.isArray(this._config!.stat_types)
+        ? this._config!.stat_types
+        : [this._config!.stat_types]
+      : ["mean", "min", "max", "sum"];
+    const data = {
+      chart_type: "line",
+      period: "hour",
+      days_to_show: 30,
+      ...this._config,
+      stat_types,
+    };
+
     return html`
-      <div class="card-config">
+      <ha-form
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .data=${data}
-            "ui.panel.lovelace.editor.card.generic.title"
+        .schema=${schema}
-          )} (${this.hass.localize(
+        .computeLabel=${this._computeLabelCallback}
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._title}
-          .configValue=${"title"}
         @value-changed=${this._valueChanged}
-        ></paper-input>
+      ></ha-form>
-        <div class="side-by-side">
-          <ha-select
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.statistics-graph.period"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .configValue=${"period"}
-            @selected=${this._periodSelected}
-            @closed=${stopPropagation}
-            fixedMenuPosition
-            naturalMenuWidth
-            .value=${this._period}
-          >
-            ${periods.map(
-              (period) =>
-                html`<mwc-list-item .value=${period}>
-                  ${this.hass!.localize(
-                    `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
-                  )}
-                </mwc-list-item>`
-            )}
-          </ha-select>
-          <paper-input
-            type="number"
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.days_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._days_to_show}
-            min="1"
-            .configValue=${"days_to_show"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-        </div>
-        <p>Show stat types:</p>
-        <div class="side-by-side">
-          <ha-formfield label="Sum">
-            <ha-checkbox
-              .checked=${this._stat_types.includes("sum")}
-              name="sum"
-              @change=${this._statTypesChanged}
-            ></ha-checkbox>
-          </ha-formfield>
-          <ha-formfield label="Mean">
-            <ha-checkbox
-              .checked=${this._stat_types.includes("mean")}
-              name="mean"
-              @change=${this._statTypesChanged}
-            ></ha-checkbox>
-          </ha-formfield>
-          <ha-formfield label="Min">
-            <ha-checkbox
-              .checked=${this._stat_types.includes("min")}
-              name="min"
-              @change=${this._statTypesChanged}
-            ></ha-checkbox>
-          </ha-formfield>
-          <ha-formfield label="Max">
-            <ha-checkbox
-              .checked=${this._stat_types.includes("max")}
-              name="max"
-              @change=${this._statTypesChanged}
-            ></ha-checkbox>
-          </ha-formfield>
-        </div>
-        <div class="side-by-side">
-          <p>Chart type:</p>
-          <ha-formfield label="Line">
-            <ha-radio
-              .checked=${this._chart_type === "line"}
-              value="line"
-              name="chart_type"
-              @change=${this._chartTypeChanged}
-            ></ha-radio>
-          </ha-formfield>
-          <ha-formfield label="Bar">
-            <ha-radio
-              .checked=${this._chart_type === "bar"}
-              value="bar"
-              name="chart_type"
-              @change=${this._chartTypeChanged}
-            ></ha-radio>
-          </ha-formfield>
-        </div>
         <ha-statistics-picker
           .hass=${this.hass}
           .pickStatisticLabel=${`Add a statistic`}
@@ -217,82 +159,23 @@ export class HuiStatisticsGraphCardEditor
     `;
   }
 
-  private _chartTypeChanged(ev: CustomEvent) {
-    const input = ev.currentTarget as HaRadio;
-    fireEvent(this, "config-changed", {
-      config: { ...this._config!, chart_type: input.value },
-    });
-  }
-
-  private _statTypesChanged(ev) {
-    const name = ev.currentTarget.name;
-    const checked = ev.currentTarget.checked;
-    if (checked) {
-      fireEvent(this, "config-changed", {
-        config: { ...this._config!, stat_types: [...this._stat_types, name] },
-      });
-      return;
-    }
-    const statTypes = [...this._stat_types];
-    fireEvent(this, "config-changed", {
-      config: {
-        ...this._config!,
-        stat_types: statTypes.filter((stat) => stat !== name),
-      },
-    });
-  }
-
-  private _periodSelected(ev) {
-    const newPeriod = ev.target.value
-      .period as StatisticsGraphCardConfig["period"];
-    if (newPeriod === this._period) {
-      return;
-    }
-    fireEvent(this, "config-changed", {
-      config: { ...this._config!, period: newPeriod },
-    });
-  }
-
   private _valueChanged(ev: CustomEvent): void {
-    if (!this._config || !this.hass) {
+    fireEvent(this, "config-changed", { config: ev.detail.value });
-      return;
   }
 
-    const target = ev.target! as EditorTarget;
+  private _computeLabelCallback = (schema: HaFormSchema) =>
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.card.generic.${schema.name}`
+    ) ||
+    this.hass!.localize(
+      `ui.panel.lovelace.editor.card.statistics-graph.${schema.name}`
+    );
 
-    const newValue = ev.detail?.value || target.value;
+  static styles: CSSResultGroup = css`
-
-    if (this[`_${target.configValue}`] === newValue) {
-      return;
-    }
-
-    if (newValue === "") {
-      this._config = { ...this._config };
-      delete this._config[target.configValue!];
-    } else {
-      let value: any = newValue;
-      if (target.type === "number") {
-        value = Number(value);
-      }
-      this._config = {
-        ...this._config,
-        [target.configValue!]: value,
-      };
-    }
-
-    fireEvent(this, "config-changed", { config: this._config });
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      configElementStyle,
-      css`
     ha-statistics-picker {
       width: 100%;
     }
-      `,
+  `;
-    ];
-  }
 }
 
 declare global {

src/translations/en.json

@@ -3554,6 +3554,8 @@
               "name": "Statistics Graph",
               "description": "The Statistics Graph card allows you to display a graph of the statistics for each of the entities listed.",
               "period": "Period",
+              "stat_types": "Show stat types",
+              "chart_type": "Chart type",
               "periods": {
                 "hour": "Hour",
                 "day": "Day",