UI editor for history-graph (#3782)

* UI editor for history-graph

* add translations

src/panels/lovelace/cards/hui-history-graph-card.js

@@ -8,6 +8,11 @@ import "../../../data/ha-state-history-data";
 import { processConfigEntities } from "../common/process-config-entities";
 
 class HuiHistoryGraphCard extends PolymerElement {
+  static async getConfigElement() {
+    await import(/* webpackChunkName: "hui-history-graph-card-editor" */ "../editor/config-elements/hui-history-graph-card-editor");
+    return document.createElement("hui-history-graph-card-editor");
+  }
+
   static getStubConfig() {
     return { entities: [] };
   }

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

@@ -0,0 +1,156 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+} from "lit-element";
+import "@polymer/paper-input/paper-input";
+
+import "../../components/hui-entity-editor";
+
+import { struct } from "../../common/structs/struct";
+import { EntitiesEditorEvent, EditorTarget } from "../types";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCardEditor } from "../../types";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { HistoryGraphCardConfig } from "../../cards/hui-history-graph-card";
+import { EntityConfig } from "../../entity-rows/types";
+import { processEditorEntities } from "../process-editor-entities";
+import { configElementStyle } from "./config-elements-style";
+
+const entitiesConfigStruct = struct.union([
+  {
+    entity: "entity-id",
+    name: "string?",
+  },
+  "entity-id",
+]);
+
+const cardConfigStruct = struct({
+  type: "string",
+  entities: [entitiesConfigStruct],
+  title: "string?",
+  hours_to_show: "number?",
+  refresh_interval: "number?",
+});
+
+@customElement("hui-history-graph-card-editor")
+export class HuiHistoryGraphCardEditor extends LitElement
+  implements LovelaceCardEditor {
+  @property() public hass?: HomeAssistant;
+
+  @property() private _config?: HistoryGraphCardConfig;
+
+  @property() private _configEntities?: EntityConfig[];
+
+  public setConfig(config: HistoryGraphCardConfig): void {
+    config = cardConfigStruct(config);
+    this._config = config;
+    this._configEntities = processEditorEntities(config.entities);
+  }
+
+  get _entity(): string {
+    return this._config!.entity || "";
+  }
+
+  get _title(): string {
+    return this._config!.title || "";
+  }
+
+  get _hours_to_show(): number {
+    return this._config!.number || 24;
+  }
+
+  get _refresh_interval(): number {
+    return this._config!.number || 0;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      ${configElementStyle}
+      <div class="card-config">
+        <paper-input
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.title"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
+          .value="${this._title}"
+          .configValue="${"title"}"
+          @value-changed="${this._valueChanged}"
+        ></paper-input>
+        <div class="side-by-side">
+          <paper-input
+            type="number"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hours_to_show"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value="${this._hours_to_show}"
+            .configValue=${"hours_to_show"}
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+          <paper-input
+            type="number"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.refresh_interval"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value="${this._refresh_interval}"
+            .configValue=${"refresh_interval"}
+            @value-changed="${this._valueChanged}"
+          ></paper-input>
+        </div>
+        <hui-entity-editor
+          .hass="${this.hass}"
+          .entities="${this._configEntities}"
+          @entities-changed="${this._valueChanged}"
+        ></hui-entity-editor>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: EntitiesEditorEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target! as EditorTarget;
+
+    if (!ev.detail && this[`_${target.configValue}`] === target.value) {
+      return;
+    }
+
+    if (ev.detail && ev.detail.entities) {
+      this._config.entities = ev.detail.entities;
+      this._configEntities = processEditorEntities(this._config.entities);
+    } else if (target.configValue) {
+      if (target.value === "") {
+        delete this._config[target.configValue!];
+      } else {
+        let value: any = target.value;
+        if (target.type === "number") {
+          value = Number(value);
+        }
+        this._config = {
+          ...this._config,
+          [target.configValue!]: value,
+        };
+      }
+    }
+
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-history-graph-card-editor": HuiHistoryGraphCardEditor;
+  }
+}

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

@@ -174,7 +174,7 @@ export class HuiSensorCardEditor extends LitElement
           ></hui-theme-select-editor>
           <paper-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.sensor.hours_to_show"
+              "ui.panel.lovelace.editor.card.generic.hours_to_show"
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"

src/translations/en.json

@@ -1158,12 +1158,14 @@
               "entities": "Entities",
               "entity": "Entity",
               "hold_action": "Hold Action",
+              "hours_to_show": "Hours to Show",
               "icon": "Icon",
               "icon_height": "Icon Height",
               "image": "Image Path",
               "maximum": "Maximum",
               "minimum": "Minimum",
               "name": "Name",
+              "refresh_interval": "Refresh Interval",
               "show_icon": "Show Icon?",
               "show_name": "Show Name?",
               "show_state": "Show State?",
@@ -1184,8 +1186,7 @@
             },
             "sensor": {
               "graph_detail": "Graph Detail",
-              "graph_type": "Graph Type",
-              "hours_to_show": "Hours to Show"
+              "graph_type": "Graph Type"
             }
           }
         },