mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Add statistics card to card picker (#9631)
Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
This commit is contained in:
parent
0d9d0aa18b
commit
2e04a55d5c
@ -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;
|
||||
|
@ -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 || "";
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -33,6 +33,10 @@ export const coreCards: Card[] = [
|
||||
type: "history-graph",
|
||||
showElement: true,
|
||||
},
|
||||
{
|
||||
type: "statistics-graph",
|
||||
showElement: false,
|
||||
},
|
||||
{
|
||||
type: "humidifier",
|
||||
showElement: true,
|
||||
|
@ -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",
|
||||
|
Loading…
x
Reference in New Issue
Block a user