Add statistics card to card picker (#9631)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>

src/panels/lovelace/cards/hui-statistics-graph-card.ts

@@ -19,6 +19,15 @@ import { fetchStatistics, Statistics } from "../../../data/history";
 
 @customElement("hui-statistics-graph-card")
 export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
+  public static async getConfigElement() {
+    await import("../editor/config-elements/hui-statistics-graph-card-editor");
+    return document.createElement("hui-statistics-graph-card-editor");
+  }
+
+  public static getStubConfig(): StatisticsGraphCardConfig {
+    return { type: "statistics-graph", entities: [] };
+  }
+
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @state() private _statistics?: Statistics;

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

@@ -38,10 +38,6 @@ export class HuiHistoryGraphCardEditor
     this._configEntities = processEditorEntities(config.entities);
   }
 
-  get _entity(): string {
-    return this._config!.entity || "";
-  }
-
   get _title(): string {
     return this._config!.title || "";
   }

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

@@ -0,0 +1,130 @@
+import "@polymer/paper-input/paper-input";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { array, assert, number, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { HomeAssistant } from "../../../../types";
+import { StatisticsGraphCardConfig } from "../../cards/types";
+import { LovelaceCardEditor } from "../../types";
+import { entitiesConfigStruct } from "../structs/entities-struct";
+import { EditorTarget } from "../types";
+import { configElementStyle } from "./config-elements-style";
+import "../../../../components/entity/ha-statistics-picker";
+import { processConfigEntities } from "../../common/process-config-entities";
+
+const cardConfigStruct = object({
+  type: string(),
+  entities: array(entitiesConfigStruct),
+  title: optional(string()),
+  days_to_show: optional(number()),
+});
+
+@customElement("hui-statistics-graph-card-editor")
+export class HuiStatisticsGraphCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: StatisticsGraphCardConfig;
+
+  @state() private _configEntities?: string[];
+
+  public setConfig(config: StatisticsGraphCardConfig): void {
+    assert(config, cardConfigStruct);
+    this._config = config;
+    this._configEntities = config.entities
+      ? processConfigEntities(config.entities).map((cfg) => cfg.entity)
+      : [];
+  }
+
+  get _title(): string {
+    return this._config!.title || "";
+  }
+
+  get _days_to_show(): number {
+    return this._config!.days_to_show || 30;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    return html`
+      <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.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>
+        <ha-statistics-picker
+          .hass=${this.hass}
+          .pickStatisticLabel=${`Add a statistic`}
+          .pickedStatisticLabel=${`Statistic`}
+          .value=${this._configEntities}
+          .configValue=${"entities"}
+          @value-changed=${this._valueChanged}
+        ></ha-statistics-picker>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target! as EditorTarget;
+
+    const newValue = ev.detail?.value || target.value;
+
+    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;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-statistics-graph-card-editor": HuiStatisticsGraphCardEditor;
+  }
+}

src/panels/lovelace/editor/lovelace-cards.ts

@@ -33,6 +33,10 @@ export const coreCards: Card[] = [
     type: "history-graph",
     showElement: true,
   },
+  {
+    type: "statistics-graph",
+    showElement: false,
+  },
   {
     type: "humidifier",
     showElement: true,

src/translations/en.json

@@ -3109,6 +3109,10 @@
               "name": "History Graph",
               "description": "The History Graph card allows you to display a graph for each of the entities listed."
             },
+            "statistics-graph": {
+              "name": "Statistics Graph",
+              "description": "The Statistics Graph card allows you to display a graph of the statistics for each of the entities listed."
+            },
             "horizontal-stack": {
               "name": "Horizontal Stack",
               "description": "The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column."
@@ -3135,6 +3139,7 @@
               "entity": "Entity",
               "hold_action": "Hold Action",
               "hours_to_show": "Hours to Show",
+              "days_to_show": "Days to Show",
               "icon": "Icon",
               "icon_height": "Icon Height",
               "image": "Image Path",