Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable Statistics Graph card to integrate with Energy Dashboard #21105

Closed
wants to merge 6 commits into from
Closed

Enable Statistics Graph card to integrate with Energy Dashboard #21105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4b7048b
Simplify date subtraction
madsciencetist Jun 17, 2024
8bfa3ad
Enable Statistics Graph card to integrate with Energy Dashboard
madsciencetist Jun 17, 2024
17d20ef
Revert UI addition
madsciencetist Jun 24, 2024
95cebdb
Remove boolean param energy_date_selection
madsciencetist Jun 24, 2024
9ee2d01
Revert "Remove boolean param energy_date_selection"
madsciencetist Jun 26, 2024
7458a88
Don't assume !20903 has merged
madsciencetist Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 36 additions & 13 deletions src/panels/lovelace/cards/hui-statistics-graph-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { subHours } from "date-fns";
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved
import {
css,
CSSResultGroup,
Expand All @@ -10,6 +11,7 @@ import {
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import "../../../components/ha-card";
import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
import {
fetchStatistics,
getDisplayUnit,
Expand All @@ -18,6 +20,7 @@ import {
StatisticsMetaData,
StatisticType,
} from "../../../data/recorder";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { HomeAssistant } from "../../../types";
import { findEntities } from "../common/find-entities";
import { hasConfigOrEntitiesChanged } from "../common/has-changed";
Expand All @@ -28,7 +31,10 @@ import { StatisticsGraphCardConfig } from "./types";
export const DEFAULT_DAYS_TO_SHOW = 30;

@customElement("hui-statistics-graph-card")
export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
export class HuiStatisticsGraphCard
extends SubscribeMixin(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");
Expand Down Expand Up @@ -73,6 +79,20 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {

private _statTypes?: Array<StatisticType>;

public hassSubscribe() {
if (!this._config?.energy_date_selection) {
return [];
}
Comment on lines +82 to +85
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the config changes, the subscriptions are now not updated, so behaviour in the editor will be wrong.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain more? Are you saying that if a user uses the editor to uncheck energy_date_selection, nothing will force the plot to be redrawn with the now-static time period?

Is this moot now that I reverted the editor changes?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The subscription is created on init of the element, so if some one enables the energy_date_selection option after the element was initialised, it will not add the subscription and thus miss data/not work.

This is not just for the visible editor, but also for the YAML editor.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still think we can not use hassSubscribe here, it will not work in the card editor.

madsciencetist marked this conversation as resolved.
Show resolved Hide resolved

return [
getEnergyDataCollection(this.hass!, {
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved
key: this._config?.collection_key,
}).subscribe((data) => {
this._setFetchStatisticsTimer(data);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should not pass the data to this function, as the function is also called in other places, save the data you need (the dates) in the class and then call the _setFetchStatisticsTimer function.

}),
];
}
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved

public disconnectedCallback() {
super.disconnectedCallback();
if (this._interval) {
Expand Down Expand Up @@ -167,8 +187,8 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
}
}

private _setFetchStatisticsTimer() {
this._getStatistics();
private _setFetchStatisticsTimer(data?) {
this._getStatistics(data);
// statistics are created every hour
clearInterval(this._interval);
this._interval = window.setInterval(
Expand Down Expand Up @@ -223,15 +243,18 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
this._metadata = statisticsMetaData;
}

private async _getStatistics(): Promise<void> {
const startDate = new Date();
startDate.setTime(
startDate.getTime() -
1000 *
60 *
60 *
(24 * (this._config!.days_to_show || DEFAULT_DAYS_TO_SHOW) + 1)
);
private async _getStatistics(energyData?: EnergyData): Promise<void> {
let startDate: Date;

if (energyData) {
startDate = energyData.start;
} else {
startDate = subHours(
new Date(),
24 * (this._config!.days_to_show || DEFAULT_DAYS_TO_SHOW) + 1
);
}
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved
const endDate = energyData ? energyData.end : undefined;
try {
let unitClass;
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved
if (this._config!.unit && this._metadata) {
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -257,7 +280,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
const statistics = await fetchStatistics(
this.hass!,
startDate,
undefined,
endDate,
this._entities,
this._config!.period,
madsciencetist marked this conversation as resolved.
Show resolved Hide resolved
unitconfig,
Expand Down
3 changes: 2 additions & 1 deletion src/panels/lovelace/cards/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ export interface HistoryGraphCardConfig extends LovelaceCardConfig {
split_device_classes?: boolean;
}

export interface StatisticsGraphCardConfig extends LovelaceCardConfig {
export interface StatisticsGraphCardConfig extends EnergyCardBaseConfig {
title?: string;
entities: Array<EntityConfig | string>;
unit?: string;
Expand All @@ -345,6 +345,7 @@ export interface StatisticsGraphCardConfig extends LovelaceCardConfig {
chart_type?: "line" | "bar";
hide_legend?: boolean;
logarithmic_scale?: boolean;
energy_date_selection?: boolean;
}

export interface StatisticCardConfig extends LovelaceCardConfig {
Expand Down
Loading