Add period option to statistics card (#10982)

Co-authored-by: Zack Barett <zackbarett@hey.com>

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

@@ -117,7 +117,8 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
 
     if (
       oldConfig?.entities !== this._config.entities ||
-      oldConfig?.days_to_show !== this._config.days_to_show
+      oldConfig?.days_to_show !== this._config.days_to_show ||
+      oldConfig?.period !== this._config.period
     ) {
       this._getStatistics();
       // statistics are created every hour
@@ -169,7 +170,8 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
         this.hass!,
         startDate,
         undefined,
-        this._entities
+        this._entities,
+        this._config!.period
       );
     } finally {
       this._fetching = false;

src/panels/lovelace/cards/types.ts

@@ -283,6 +283,7 @@ export interface StatisticsGraphCardConfig extends LovelaceCardConfig {
   title?: string;
   entities: Array<EntityConfig | string>;
   days_to_show?: number;
+  period?: "5minute" | "hour" | "day" | "month";
   stat_types?: StatisticType | StatisticType[];
   chart_type?: "line" | "bar";
 }

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

@@ -4,7 +4,16 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, assign, number, object, optional, string } from "superstruct";
+import {
+  assert,
+  assign,
+  literal,
+  number,
+  object,
+  optional,
+  string,
+  union,
+} from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
@@ -26,7 +35,7 @@ const cardConfigStruct = assign(
     entity: optional(string()),
     name: optional(string()),
     icon: optional(string()),
-    graph: optional(string()),
+    graph: optional(union([literal("line"), literal("none")])),
     unit: optional(string()),
     detail: optional(number()),
     theme: optional(string()),

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

@@ -27,6 +27,7 @@ import { StatisticType } from "../../../../data/history";
 import "../../../../components/ha-radio";
 import type { HaRadio } from "../../../../components/ha-radio";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 
 const statTypeStruct = union([
   literal("sum"),
@@ -41,11 +42,21 @@ const cardConfigStruct = assign(
     entities: array(entitiesConfigStruct),
     title: optional(string()),
     days_to_show: optional(number()),
+    period: optional(
+      union([
+        literal("5minute"),
+        literal("hour"),
+        literal("day"),
+        literal("month"),
+      ])
+    ),
     chart_type: optional(union([literal("bar"), literal("line")])),
     stat_types: optional(union([array(statTypeStruct), statTypeStruct])),
   })
 );
 
+const periods = ["5minute", "hour", "day", "month"];
+
 @customElement("hui-statistics-graph-card-editor")
 export class HuiStatisticsGraphCardEditor
   extends LitElement
@@ -73,6 +84,10 @@ export class HuiStatisticsGraphCardEditor
     return this._config!.days_to_show || 30;
   }
 
+  get _period(): string {
+    return this._config!.period || "hour";
+  }
+
   get _chart_type(): StatisticsGraphCardConfig["chart_type"] {
     return this._config!.chart_type || "line";
   }
@@ -102,18 +117,44 @@ export class HuiStatisticsGraphCardEditor
           .configValue=${"title"}
           @value-changed=${this._valueChanged}
         ></paper-input>
-        <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 class="side-by-side">
+          <paper-dropdown-menu
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.statistics-graph.period"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .configValue=${"period"}
+            @iron-select=${this._periodSelected}
+          >
+            <paper-listbox
+              slot="dropdown-content"
+              attr-for-selected="period"
+              .selected=${this._period}
+            >
+              ${periods.map(
+                (period) =>
+                  html`<paper-item .period=${period}>
+                    ${this.hass!.localize(
+                      `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
+                    )}
+                  </paper-item>`
+              )}
+            </paper-listbox>
+          </paper-dropdown-menu>
+          <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">
@@ -201,10 +242,22 @@ export class HuiStatisticsGraphCardEditor
     });
   }
 
+  private _periodSelected(ev: CustomEvent) {
+    const newPeriod = ev.detail.item
+      .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) {
       return;
     }
+
     const target = ev.target! as EditorTarget;
 
     const newValue = ev.detail?.value || target.value;

src/translations/en.json

@@ -3424,7 +3424,14 @@
             },
             "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."
+              "description": "The Statistics Graph card allows you to display a graph of the statistics for each of the entities listed.",
+              "period": "Period",
+              "periods": {
+                "hour": "Hour",
+                "day": "Day",
+                "month": "Month",
+                "5minute": "5 Minutes"
+              }
             },
             "horizontal-stack": {
               "name": "Horizontal Stack",