mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-25 13:57:21 +00:00
Statistics Graph Editor to Ha Form (#11820)
This commit is contained in:
Zack Barett
GitHub
parent
976fd4b32d
commit
75e8e17073
@ -1,7 +1,7 @@
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "@polymer/paper-input/paper-input";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
array,
|
||||
assert,
|
||||
@ -14,22 +14,15 @@ import {
|
||||
union,
|
||||
} from "superstruct";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { stopPropagation } from "../../../../common/dom/stop_propagation";
|
||||
import type { LocalizeFunc } from "../../../../common/translations/localize";
|
||||
import "../../../../components/entity/ha-statistics-picker";
|
||||
import "../../../../components/ha-checkbox";
|
||||
import "../../../../components/ha-formfield";
|
||||
import "../../../../components/ha-radio";
|
||||
import type { HaRadio } from "../../../../components/ha-radio";
|
||||
import "../../../../components/ha-select";
|
||||
import { StatisticType } from "../../../../data/history";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { StatisticsGraphCardConfig } from "../../cards/types";
|
||||
import type { HaFormSchema } from "../../../../components/ha-form/types";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { StatisticsGraphCardConfig } from "../../cards/types";
|
||||
import { processConfigEntities } from "../../common/process-config-entities";
|
||||
import { LovelaceCardEditor } from "../../types";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import { entitiesConfigStruct } from "../structs/entities-struct";
|
||||
import { EditorTarget } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
|
||||
const statTypeStruct = union([
|
||||
literal("sum"),
|
||||
@ -78,133 +71,82 @@ export class HuiStatisticsGraphCardEditor
|
||||
: [];
|
||||
}
|
||||
|
||||
get _title(): string {
|
||||
return this._config!.title || "";
|
||||
}
|
||||
|
||||
get _days_to_show(): number {
|
||||
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";
|
||||
}
|
||||
|
||||
get _stat_types(): StatisticType[] {
|
||||
return this._config!.stat_types
|
||||
? Array.isArray(this._config!.stat_types)
|
||||
? this._config!.stat_types
|
||||
: [this._config!.stat_types]
|
||||
: ["mean", "min", "max", "sum"];
|
||||
}
|
||||
private _schema = memoizeOne((localize: LocalizeFunc) => [
|
||||
{ name: "title", selector: { text: {} } },
|
||||
{
|
||||
name: "",
|
||||
type: "grid",
|
||||
schema: [
|
||||
{
|
||||
name: "period",
|
||||
required: true,
|
||||
selector: {
|
||||
select: {
|
||||
options: periods.map((period) => ({
|
||||
value: period,
|
||||
label: localize(
|
||||
`ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
|
||||
),
|
||||
})),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "days_to_show",
|
||||
required: true,
|
||||
selector: { number: { min: 1, mode: "box" } },
|
||||
},
|
||||
{
|
||||
name: "stat_types",
|
||||
required: true,
|
||||
type: "multi_select",
|
||||
options: [
|
||||
["mean", "Mean"],
|
||||
["min", "Min"],
|
||||
["max", "Max"],
|
||||
["sum", "Sum"],
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "chart_type",
|
||||
required: true,
|
||||
type: "select",
|
||||
options: [
|
||||
["line", "Line"],
|
||||
["bar", "Bar"],
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const schema = this._schema(this.hass.localize);
|
||||
const stat_types = this._config!.stat_types
|
||||
? Array.isArray(this._config!.stat_types)
|
||||
? this._config!.stat_types
|
||||
: [this._config!.stat_types]
|
||||
: ["mean", "min", "max", "sum"];
|
||||
const data = {
|
||||
chart_type: "line",
|
||||
period: "hour",
|
||||
days_to_show: 30,
|
||||
...this._config,
|
||||
stat_types,
|
||||
};
|
||||
|
||||
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">
|
||||
<ha-select
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.statistics-graph.period"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.configValue=${"period"}
|
||||
@selected=${this._periodSelected}
|
||||
@closed=${stopPropagation}
|
||||
fixedMenuPosition
|
||||
naturalMenuWidth
|
||||
.value=${this._period}
|
||||
>
|
||||
${periods.map(
|
||||
(period) =>
|
||||
html`<mwc-list-item .value=${period}>
|
||||
${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
|
||||
)}
|
||||
</mwc-list-item>`
|
||||
)}
|
||||
</ha-select>
|
||||
<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">
|
||||
<ha-checkbox
|
||||
.checked=${this._stat_types.includes("sum")}
|
||||
name="sum"
|
||||
@change=${this._statTypesChanged}
|
||||
></ha-checkbox>
|
||||
</ha-formfield>
|
||||
<ha-formfield label="Mean">
|
||||
<ha-checkbox
|
||||
.checked=${this._stat_types.includes("mean")}
|
||||
name="mean"
|
||||
@change=${this._statTypesChanged}
|
||||
></ha-checkbox>
|
||||
</ha-formfield>
|
||||
<ha-formfield label="Min">
|
||||
<ha-checkbox
|
||||
.checked=${this._stat_types.includes("min")}
|
||||
name="min"
|
||||
@change=${this._statTypesChanged}
|
||||
></ha-checkbox>
|
||||
</ha-formfield>
|
||||
<ha-formfield label="Max">
|
||||
<ha-checkbox
|
||||
.checked=${this._stat_types.includes("max")}
|
||||
name="max"
|
||||
@change=${this._statTypesChanged}
|
||||
></ha-checkbox>
|
||||
</ha-formfield>
|
||||
</div>
|
||||
<div class="side-by-side">
|
||||
<p>Chart type:</p>
|
||||
<ha-formfield label="Line">
|
||||
<ha-radio
|
||||
.checked=${this._chart_type === "line"}
|
||||
value="line"
|
||||
name="chart_type"
|
||||
@change=${this._chartTypeChanged}
|
||||
></ha-radio>
|
||||
</ha-formfield>
|
||||
<ha-formfield label="Bar">
|
||||
<ha-radio
|
||||
.checked=${this._chart_type === "bar"}
|
||||
value="bar"
|
||||
name="chart_type"
|
||||
@change=${this._chartTypeChanged}
|
||||
></ha-radio>
|
||||
</ha-formfield>
|
||||
</div>
|
||||
<ha-form
|
||||
.hass=${this.hass}
|
||||
.data=${data}
|
||||
.schema=${schema}
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<ha-statistics-picker
|
||||
.hass=${this.hass}
|
||||
.pickStatisticLabel=${`Add a statistic`}
|
||||
@ -217,82 +159,23 @@ export class HuiStatisticsGraphCardEditor
|
||||
`;
|
||||
}
|
||||
|
||||
private _chartTypeChanged(ev: CustomEvent) {
|
||||
const input = ev.currentTarget as HaRadio;
|
||||
fireEvent(this, "config-changed", {
|
||||
config: { ...this._config!, chart_type: input.value },
|
||||
});
|
||||
}
|
||||
|
||||
private _statTypesChanged(ev) {
|
||||
const name = ev.currentTarget.name;
|
||||
const checked = ev.currentTarget.checked;
|
||||
if (checked) {
|
||||
fireEvent(this, "config-changed", {
|
||||
config: { ...this._config!, stat_types: [...this._stat_types, name] },
|
||||
});
|
||||
return;
|
||||
}
|
||||
const statTypes = [...this._stat_types];
|
||||
fireEvent(this, "config-changed", {
|
||||
config: {
|
||||
...this._config!,
|
||||
stat_types: statTypes.filter((stat) => stat !== name),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private _periodSelected(ev) {
|
||||
const newPeriod = ev.target.value
|
||||
.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;
|
||||
|
||||
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 });
|
||||
fireEvent(this, "config-changed", { config: ev.detail.value });
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
configElementStyle,
|
||||
css`
|
||||
ha-statistics-picker {
|
||||
width: 100%;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
private _computeLabelCallback = (schema: HaFormSchema) =>
|
||||
this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
) ||
|
||||
this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.statistics-graph.${schema.name}`
|
||||
);
|
||||
|
||||
static styles: CSSResultGroup = css`
|
||||
ha-statistics-picker {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
@ -3554,6 +3554,8 @@
|
||||
"name": "Statistics Graph",
|
||||
"description": "The Statistics Graph card allows you to display a graph of the statistics for each of the entities listed.",
|
||||
"period": "Period",
|
||||
"stat_types": "Show stat types",
|
||||
"chart_type": "Chart type",
|
||||
"periods": {
|
||||
"hour": "Hour",
|
||||
"day": "Day",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user