Add statistics card to card picker (#9631)

Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
This commit is contained in:
Bram Kragten 2021-07-28 17:41:18 +02:00 committed by GitHub
parent 0d9d0aa18b
commit 2e04a55d5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 148 additions and 4 deletions

View File

@ -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;

View File

@ -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 || "";
}

View File

@ -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;
}
}

View File

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

View File

@ -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",