From ff2fa9a78cbe5788e71aba2e7c60fc952935b1c4 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 12 Jan 2022 17:35:10 +0100 Subject: [PATCH] Add period option to statistics card (#10982) Co-authored-by: Zack Barett --- .../cards/hui-statistics-graph-card.ts | 6 +- src/panels/lovelace/cards/types.ts | 1 + .../config-elements/hui-sensor-card-editor.ts | 13 +++- .../hui-statistics-graph-card-editor.ts | 77 ++++++++++++++++--- src/translations/en.json | 9 ++- 5 files changed, 89 insertions(+), 17 deletions(-) diff --git a/src/panels/lovelace/cards/hui-statistics-graph-card.ts b/src/panels/lovelace/cards/hui-statistics-graph-card.ts index f82b650394..370857f9f0 100644 --- a/src/panels/lovelace/cards/hui-statistics-graph-card.ts +++ b/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; diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 9762d85845..2a2b5e0fd9 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -283,6 +283,7 @@ export interface StatisticsGraphCardConfig extends LovelaceCardConfig { title?: string; entities: Array; days_to_show?: number; + period?: "5minute" | "hour" | "day" | "month"; stat_types?: StatisticType | StatisticType[]; chart_type?: "line" | "bar"; } diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts index 811d4a8150..7a39bc15ad 100644 --- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts +++ b/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()), diff --git a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts index 962d548981..163ea01bd3 100644 --- a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts +++ b/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} > - +
+ + + ${periods.map( + (period) => + html` + ${this.hass!.localize( + `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}` + )} + ` + )} + + + +

Show stat types:

@@ -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; diff --git a/src/translations/en.json b/src/translations/en.json index 6896311e4d..96b9b6804e 100755 --- a/src/translations/en.json +++ b/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",