Add battery to energy dashboard (#9757)
Bram Kragten
GitHub
parent
44548fdc33
commit
19e4c0657a
|
|
@ -44,6 +44,11 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
|
|||
stat_energy_from: "sensor.solar_production",
|
||||
config_entry_solar_forecast: ["solar_forecast"],
|
||||
},
|
||||
{
|
||||
type: "battery",
|
||||
stat_energy_from: "sensor.battery_output",
|
||||
stat_energy_to: "sensor.battery_input",
|
||||
},
|
||||
],
|
||||
device_consumption: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -18,6 +18,24 @@ export const energyEntities = () =>
|
|||
unit_of_measurement: "kWh",
|
||||
},
|
||||
},
|
||||
"sensor.battery_input": {
|
||||
entity_id: "sensor.battery_input",
|
||||
state: "4",
|
||||
attributes: {
|
||||
last_reset: "1970-01-01T00:00:00:00+00",
|
||||
friendly_name: "Battery Input",
|
||||
unit_of_measurement: "kWh",
|
||||
},
|
||||
},
|
||||
"sensor.battery_output": {
|
||||
entity_id: "sensor.battery_output",
|
||||
state: "3",
|
||||
attributes: {
|
||||
last_reset: "1970-01-01T00:00:00:00+00",
|
||||
friendly_name: "Battery Output",
|
||||
unit_of_measurement: "kWh",
|
||||
},
|
||||
},
|
||||
"sensor.energy_consumption_tarif_1": {
|
||||
entity_id: "sensor.energy_consumption_tarif_1 ",
|
||||
state: "88.6",
|
||||
|
|
|
|||
|
|
@ -47,6 +47,13 @@ export const emptySolarEnergyPreference =
|
|||
config_entry_solar_forecast: null,
|
||||
});
|
||||
|
||||
export const emptyBatteryEnergyPreference =
|
||||
(): BatterySourceTypeEnergyPreference => ({
|
||||
type: "battery",
|
||||
stat_energy_from: "",
|
||||
stat_energy_to: "",
|
||||
});
|
||||
|
||||
export interface DeviceConsumptionEnergyPreference {
|
||||
// This is an ever increasing value
|
||||
stat_consumption: string;
|
||||
|
|
@ -94,9 +101,16 @@ export interface SolarSourceTypeEnergyPreference {
|
|||
config_entry_solar_forecast: string[] | null;
|
||||
}
|
||||
|
||||
export interface BatterySourceTypeEnergyPreference {
|
||||
type: "battery";
|
||||
stat_energy_from: string;
|
||||
stat_energy_to: string;
|
||||
}
|
||||
|
||||
type EnergySource =
|
||||
| SolarSourceTypeEnergyPreference
|
||||
| GridSourceTypeEnergyPreference;
|
||||
| GridSourceTypeEnergyPreference
|
||||
| BatterySourceTypeEnergyPreference;
|
||||
|
||||
export interface EnergyPreferences {
|
||||
energy_sources: EnergySource[];
|
||||
|
|
@ -132,6 +146,7 @@ export const saveEnergyPreferences = async (
|
|||
interface EnergySourceByType {
|
||||
grid?: GridSourceTypeEnergyPreference[];
|
||||
solar?: SolarSourceTypeEnergyPreference[];
|
||||
battery?: BatterySourceTypeEnergyPreference[];
|
||||
}
|
||||
|
||||
export const energySourcesByType = (prefs: EnergyPreferences) => {
|
||||
|
|
@ -203,6 +218,12 @@ const getEnergyData = async (
|
|||
continue;
|
||||
}
|
||||
|
||||
if (source.type === "battery") {
|
||||
statIDs.push(source.stat_energy_from);
|
||||
statIDs.push(source.stat_energy_to);
|
||||
continue;
|
||||
}
|
||||
|
||||
// grid source
|
||||
for (const flowFrom of source.flow_from) {
|
||||
statIDs.push(flowFrom.stat_energy_from);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiBatteryHigh, mdiDelete, mdiPencil } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../../common/entity/compute_state_name";
|
||||
import "../../../../components/entity/ha-statistic-picker";
|
||||
import "../../../../components/ha-card";
|
||||
import "../../../../components/ha-settings-row";
|
||||
import {
|
||||
BatterySourceTypeEnergyPreference,
|
||||
EnergyPreferences,
|
||||
energySourcesByType,
|
||||
saveEnergyPreferences,
|
||||
} from "../../../../data/energy";
|
||||
import {
|
||||
showConfirmationDialog,
|
||||
showAlertDialog,
|
||||
} from "../../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { documentationUrl } from "../../../../util/documentation-url";
|
||||
import { showEnergySettingsBatteryDialog } from "../dialogs/show-dialogs-energy";
|
||||
import { energyCardStyles } from "./styles";
|
||||
|
||||
@customElement("ha-energy-battery-settings")
|
||||
export class EnergyBatterySettings extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false })
|
||||
public preferences!: EnergyPreferences;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const types = energySourcesByType(this.preferences);
|
||||
|
||||
const batterySources = types.battery || [];
|
||||
|
||||
return html`
|
||||
<ha-card>
|
||||
<h1 class="card-header">
|
||||
<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
|
||||
${this.hass.localize("ui.panel.config.energy.battery.title")}
|
||||
</h1>
|
||||
|
||||
<div class="card-content">
|
||||
<p>
|
||||
${this.hass.localize("ui.panel.config.energy.battery.sub")}
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="${documentationUrl(this.hass, "/docs/energy/battery/")}"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.energy.battery.learn_more"
|
||||
)}</a
|
||||
>
|
||||
</p>
|
||||
<h3>Battery systems</h3>
|
||||
${batterySources.map((source) => {
|
||||
const fromEntityState = this.hass.states[source.stat_energy_from];
|
||||
const toEntityState = this.hass.states[source.stat_energy_to];
|
||||
return html`
|
||||
<div class="row" .source=${source}>
|
||||
${toEntityState?.attributes.icon
|
||||
? html`<ha-icon
|
||||
.icon=${toEntityState.attributes.icon}
|
||||
></ha-icon>`
|
||||
: html`<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>`}
|
||||
<div class="content">
|
||||
<span
|
||||
>${toEntityState
|
||||
? computeStateName(toEntityState)
|
||||
: source.stat_energy_from}</span
|
||||
>
|
||||
<span
|
||||
>${fromEntityState
|
||||
? computeStateName(fromEntityState)
|
||||
: source.stat_energy_to}</span
|
||||
>
|
||||
</div>
|
||||
<mwc-icon-button @click=${this._editSource}>
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button @click=${this._deleteSource}>
|
||||
<ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<div class="row border-bottom">
|
||||
<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
|
||||
<mwc-button @click=${this._addSource}
|
||||
>Add battery system</mwc-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
private _addSource() {
|
||||
showEnergySettingsBatteryDialog(this, {
|
||||
saveCallback: async (source) => {
|
||||
await this._savePreferences({
|
||||
...this.preferences,
|
||||
energy_sources: this.preferences.energy_sources.concat(source),
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private _editSource(ev) {
|
||||
const origSource: BatterySourceTypeEnergyPreference =
|
||||
ev.currentTarget.closest(".row").source;
|
||||
showEnergySettingsBatteryDialog(this, {
|
||||
source: { ...origSource },
|
||||
saveCallback: async (newSource) => {
|
||||
await this._savePreferences({
|
||||
...this.preferences,
|
||||
energy_sources: this.preferences.energy_sources.map((src) =>
|
||||
src === origSource ? newSource : src
|
||||
),
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private async _deleteSource(ev) {
|
||||
const sourceToDelete: BatterySourceTypeEnergyPreference =
|
||||
ev.currentTarget.closest(".row").source;
|
||||
|
||||
if (
|
||||
!(await showConfirmationDialog(this, {
|
||||
title: "Are you sure you want to delete this source?",
|
||||
}))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this._savePreferences({
|
||||
...this.preferences,
|
||||
energy_sources: this.preferences.energy_sources.filter(
|
||||
(source) => source !== sourceToDelete
|
||||
),
|
||||
});
|
||||
} catch (err) {
|
||||
showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
|
||||
}
|
||||
}
|
||||
|
||||
private async _savePreferences(preferences: EnergyPreferences) {
|
||||
const result = await saveEnergyPreferences(this.hass, preferences);
|
||||
fireEvent(this, "value-changed", { value: result });
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
energyCardStyles,
|
||||
css`
|
||||
.row {
|
||||
height: 58px;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-energy-battery-settings": EnergyBatterySettings;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import { mdiBatteryHigh } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-dialog";
|
||||
import {
|
||||
BatterySourceTypeEnergyPreference,
|
||||
emptyBatteryEnergyPreference,
|
||||
} from "../../../../data/energy";
|
||||
import { HassDialog } from "../../../../dialogs/make-dialog-manager";
|
||||
import { haStyle, haStyleDialog } from "../../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
|
||||
import "@material/mwc-button/mwc-button";
|
||||
import "../../../../components/entity/ha-statistic-picker";
|
||||
|
||||
const energyUnits = ["kWh"];
|
||||
|
||||
@customElement("dialog-energy-battery-settings")
|
||||
export class DialogEnergyBatterySettings
|
||||
extends LitElement
|
||||
implements HassDialog<EnergySettingsBatteryDialogParams>
|
||||
{
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@state() private _params?: EnergySettingsBatteryDialogParams;
|
||||
|
||||
@state() private _source?: BatterySourceTypeEnergyPreference;
|
||||
|
||||
@state() private _error?: string;
|
||||
|
||||
public async showDialog(
|
||||
params: EnergySettingsBatteryDialogParams
|
||||
): Promise<void> {
|
||||
this._params = params;
|
||||
this._source = params.source
|
||||
? { ...params.source }
|
||||
: (this._source = emptyBatteryEnergyPreference());
|
||||
}
|
||||
|
||||
public closeDialog(): void {
|
||||
this._params = undefined;
|
||||
this._source = undefined;
|
||||
this._error = undefined;
|
||||
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._params || !this._source) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-dialog
|
||||
open
|
||||
.heading=${html`<ha-svg-icon
|
||||
.path=${mdiBatteryHigh}
|
||||
style="--mdc-icon-size: 32px;"
|
||||
></ha-svg-icon>
|
||||
Configure battery system`}
|
||||
@closed=${this.closeDialog}
|
||||
>
|
||||
${this._error ? html`<p class="error">${this._error}</p>` : ""}
|
||||
|
||||
<ha-statistic-picker
|
||||
.hass=${this.hass}
|
||||
.includeUnitOfMeasurement=${energyUnits}
|
||||
.value=${this._source.stat_energy_to}
|
||||
.label=${`Energy going in to the battery (kWh)`}
|
||||
entities-only
|
||||
@value-changed=${this._statisticToChanged}
|
||||
></ha-statistic-picker>
|
||||
|
||||
<ha-statistic-picker
|
||||
.hass=${this.hass}
|
||||
.includeUnitOfMeasurement=${energyUnits}
|
||||
.value=${this._source.stat_energy_from}
|
||||
.label=${`Energy coming out of the battery (kWh)`}
|
||||
entities-only
|
||||
@value-changed=${this._statisticFromChanged}
|
||||
></ha-statistic-picker>
|
||||
|
||||
<mwc-button @click=${this.closeDialog} slot="secondaryAction">
|
||||
${this.hass.localize("ui.common.cancel")}
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
@click=${this._save}
|
||||
.disabled=${!this._source.stat_energy_from ||
|
||||
!this._source.stat_energy_to}
|
||||
slot="primaryAction"
|
||||
>
|
||||
${this.hass.localize("ui.common.save")}
|
||||
</mwc-button>
|
||||
</ha-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
private _statisticToChanged(ev: CustomEvent<{ value: string }>) {
|
||||
this._source = { ...this._source!, stat_energy_to: ev.detail.value };
|
||||
}
|
||||
|
||||
private _statisticFromChanged(ev: CustomEvent<{ value: string }>) {
|
||||
this._source = { ...this._source!, stat_energy_from: ev.detail.value };
|
||||
}
|
||||
|
||||
private async _save() {
|
||||
try {
|
||||
await this._params!.saveCallback(this._source!);
|
||||
this.closeDialog();
|
||||
} catch (e) {
|
||||
this._error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
haStyleDialog,
|
||||
css`
|
||||
ha-dialog {
|
||||
--mdc-dialog-max-width: 430px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"dialog-energy-battery-settings": DialogEnergyBatterySettings;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,6 @@ import "../../../../components/ha-radio";
|
|||
import "../../../../components/ha-checkbox";
|
||||
import type { HaCheckbox } from "../../../../components/ha-checkbox";
|
||||
import "../../../../components/ha-formfield";
|
||||
import "../../../../components/entity/ha-entity-picker";
|
||||
import type { HaRadio } from "../../../../components/ha-radio";
|
||||
import { showConfigFlowDialog } from "../../../../dialogs/config-flow/show-dialog-config-flow";
|
||||
import { ConfigEntry, getConfigEntries } from "../../../../data/config_entries";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import {
|
||||
BatterySourceTypeEnergyPreference,
|
||||
DeviceConsumptionEnergyPreference,
|
||||
FlowFromGridSourceEnergyPreference,
|
||||
FlowToGridSourceEnergyPreference,
|
||||
|
|
@ -33,6 +34,11 @@ export interface EnergySettingsSolarDialogParams {
|
|||
saveCallback: (source: SolarSourceTypeEnergyPreference) => Promise<void>;
|
||||
}
|
||||
|
||||
export interface EnergySettingsBatteryDialogParams {
|
||||
source?: BatterySourceTypeEnergyPreference;
|
||||
saveCallback: (source: BatterySourceTypeEnergyPreference) => Promise<void>;
|
||||
}
|
||||
|
||||
export interface EnergySettingsDeviceDialogParams {
|
||||
saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise<void>;
|
||||
}
|
||||
|
|
@ -48,6 +54,17 @@ export const showEnergySettingsDeviceDialog = (
|
|||
});
|
||||
};
|
||||
|
||||
export const showEnergySettingsBatteryDialog = (
|
||||
element: HTMLElement,
|
||||
dialogParams: EnergySettingsBatteryDialogParams
|
||||
): void => {
|
||||
fireEvent(element, "show-dialog", {
|
||||
dialogTag: "dialog-energy-battery-settings",
|
||||
dialogImport: () => import("./dialog-energy-battery-settings"),
|
||||
dialogParams: dialogParams,
|
||||
});
|
||||
};
|
||||
|
||||
export const showEnergySettingsSolarDialog = (
|
||||
element: HTMLElement,
|
||||
dialogParams: EnergySettingsSolarDialogParams
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { configSections } from "../ha-panel-config";
|
|||
import "./components/ha-energy-device-settings";
|
||||
import "./components/ha-energy-grid-settings";
|
||||
import "./components/ha-energy-solar-settings";
|
||||
import "./components/ha-energy-battery-settings";
|
||||
|
||||
const INITIAL_CONFIG: EnergyPreferences = {
|
||||
energy_sources: [],
|
||||
|
|
@ -81,6 +82,11 @@ class HaConfigEnergy extends LitElement {
|
|||
.preferences=${this._preferences!}
|
||||
@value-changed=${this._prefsChanged}
|
||||
></ha-energy-solar-settings>
|
||||
<ha-energy-battery-settings
|
||||
.hass=${this.hass}
|
||||
.preferences=${this._preferences!}
|
||||
@value-changed=${this._prefsChanged}
|
||||
></ha-energy-battery-settings>
|
||||
<ha-energy-device-settings
|
||||
.hass=${this.hass}
|
||||
.preferences=${this._preferences!}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { LovelaceCard, Lovelace } from "../../lovelace/types";
|
|||
import "@material/mwc-button/mwc-button";
|
||||
import "../../config/energy/components/ha-energy-grid-settings";
|
||||
import "../../config/energy/components/ha-energy-solar-settings";
|
||||
import "../../config/energy/components/ha-energy-battery-settings";
|
||||
import "../../config/energy/components/ha-energy-device-settings";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
|
|
@ -43,18 +44,24 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
|
|||
return html`
|
||||
<p>Step ${this._step + 1} of 3</p>
|
||||
${this._step === 0
|
||||
? html` <ha-energy-grid-settings
|
||||
? html`<ha-energy-grid-settings
|
||||
.hass=${this.hass}
|
||||
.preferences=${this._preferences}
|
||||
@value-changed=${this._prefsChanged}
|
||||
></ha-energy-grid-settings>`
|
||||
: this._step === 1
|
||||
? html` <ha-energy-solar-settings
|
||||
? html`<ha-energy-solar-settings
|
||||
.hass=${this.hass}
|
||||
.preferences=${this._preferences}
|
||||
@value-changed=${this._prefsChanged}
|
||||
></ha-energy-solar-settings>`
|
||||
: html` <ha-energy-device-settings
|
||||
: this._step === 2
|
||||
? html`<ha-energy-battery-settings
|
||||
.hass=${this.hass}
|
||||
.preferences=${this._preferences}
|
||||
@value-changed=${this._prefsChanged}
|
||||
></ha-energy-battery-settings>`
|
||||
: html`<ha-energy-device-settings
|
||||
.hass=${this.hass}
|
||||
.preferences=${this._preferences}
|
||||
@value-changed=${this._prefsChanged}
|
||||
|
|
@ -65,7 +72,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
|
|||
>${this.hass.localize("ui.panel.energy.setup.back")}</mwc-button
|
||||
>`
|
||||
: html`<div></div>`}
|
||||
${this._step < 2
|
||||
${this._step < 3
|
||||
? html`<mwc-button unelevated @click=${this._next}
|
||||
>${this.hass.localize("ui.panel.energy.setup.next")}</mwc-button
|
||||
>`
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import {
|
||||
mdiArrowDown,
|
||||
mdiArrowLeft,
|
||||
mdiArrowRight,
|
||||
mdiArrowUp,
|
||||
mdiBatteryHigh,
|
||||
mdiHome,
|
||||
mdiLeaf,
|
||||
mdiSolarPower,
|
||||
|
|
@ -75,9 +78,10 @@ class HuiEnergyDistrubutionCard
|
|||
const hasConsumption = true;
|
||||
|
||||
const hasSolarProduction = types.solar !== undefined;
|
||||
const hasBattery = types.battery !== undefined;
|
||||
const hasReturnToGrid = hasConsumption && types.grid![0].flow_to.length > 0;
|
||||
|
||||
const totalGridConsumption =
|
||||
const totalFromGrid =
|
||||
calculateStatisticsSumGrowth(
|
||||
this._data.stats,
|
||||
types.grid![0].flow_from.map((flow) => flow.stat_energy_from)
|
||||
|
|
@ -93,30 +97,97 @@ class HuiEnergyDistrubutionCard
|
|||
) || 0;
|
||||
}
|
||||
|
||||
let productionReturnedToGrid: number | null = null;
|
||||
let totalBatteryIn: number | null = null;
|
||||
let totalBatteryOut: number | null = null;
|
||||
|
||||
if (hasBattery) {
|
||||
totalBatteryIn =
|
||||
calculateStatisticsSumGrowth(
|
||||
this._data.stats,
|
||||
types.battery!.map((source) => source.stat_energy_to)
|
||||
) || 0;
|
||||
totalBatteryOut =
|
||||
calculateStatisticsSumGrowth(
|
||||
this._data.stats,
|
||||
types.battery!.map((source) => source.stat_energy_from)
|
||||
) || 0;
|
||||
}
|
||||
|
||||
let returnedToGrid: number | null = null;
|
||||
|
||||
if (hasReturnToGrid) {
|
||||
productionReturnedToGrid =
|
||||
returnedToGrid =
|
||||
calculateStatisticsSumGrowth(
|
||||
this._data.stats,
|
||||
types.grid![0].flow_to.map((flow) => flow.stat_energy_to)
|
||||
) || 0;
|
||||
}
|
||||
|
||||
const solarConsumption = Math.max(
|
||||
0,
|
||||
(totalSolarProduction || 0) - (productionReturnedToGrid || 0)
|
||||
);
|
||||
let solarConsumption: number | null = null;
|
||||
if (hasSolarProduction) {
|
||||
solarConsumption =
|
||||
(totalSolarProduction || 0) -
|
||||
(returnedToGrid || 0) -
|
||||
(totalBatteryIn || 0);
|
||||
}
|
||||
|
||||
const totalHomeConsumption = totalGridConsumption + solarConsumption;
|
||||
let batteryFromGrid: null | number = null;
|
||||
let batteryToGrid: null | number = null;
|
||||
if (solarConsumption !== null && solarConsumption < 0) {
|
||||
// What we returned to the grid and what went in to the battery is more than produced,
|
||||
// so we have used grid energy to fill the battery
|
||||
// or returned battery energy to the grid
|
||||
if (hasBattery) {
|
||||
batteryFromGrid = solarConsumption * -1;
|
||||
if (batteryFromGrid > totalFromGrid) {
|
||||
batteryToGrid = Math.min(0, batteryFromGrid - totalFromGrid);
|
||||
batteryFromGrid = totalFromGrid;
|
||||
}
|
||||
}
|
||||
solarConsumption = 0;
|
||||
}
|
||||
|
||||
let solarToBattery: null | number = null;
|
||||
if (hasSolarProduction && hasBattery) {
|
||||
if (!batteryToGrid) {
|
||||
batteryToGrid = Math.max(
|
||||
0,
|
||||
(returnedToGrid || 0) -
|
||||
(totalSolarProduction || 0) -
|
||||
(totalBatteryIn || 0) -
|
||||
(batteryFromGrid || 0)
|
||||
);
|
||||
}
|
||||
solarToBattery = totalBatteryIn! - (batteryFromGrid || 0);
|
||||
} else if (!hasSolarProduction && hasBattery) {
|
||||
batteryToGrid = returnedToGrid;
|
||||
}
|
||||
|
||||
let batteryConsumption: number | null = null;
|
||||
if (hasBattery) {
|
||||
batteryConsumption = (totalBatteryOut || 0) - (batteryToGrid || 0);
|
||||
}
|
||||
|
||||
const gridConsumption = Math.max(0, totalFromGrid - (batteryFromGrid || 0));
|
||||
|
||||
const totalHomeConsumption = Math.max(
|
||||
0,
|
||||
gridConsumption + (solarConsumption || 0) + (batteryConsumption || 0)
|
||||
);
|
||||
|
||||
let homeSolarCircumference: number | undefined;
|
||||
if (hasSolarProduction) {
|
||||
homeSolarCircumference =
|
||||
CIRCLE_CIRCUMFERENCE * (solarConsumption / totalHomeConsumption);
|
||||
CIRCLE_CIRCUMFERENCE * (solarConsumption! / totalHomeConsumption);
|
||||
}
|
||||
|
||||
let lowCarbonConsumption: number | undefined;
|
||||
let homeBatteryCircumference: number | undefined;
|
||||
if (batteryConsumption) {
|
||||
homeBatteryCircumference =
|
||||
CIRCLE_CIRCUMFERENCE * (batteryConsumption / totalHomeConsumption);
|
||||
}
|
||||
|
||||
let lowCarbonEnergy: number | undefined;
|
||||
|
||||
let homeLowCarbonCircumference: number | undefined;
|
||||
let homeHighCarbonCircumference: number | undefined;
|
||||
|
|
@ -129,7 +200,7 @@ class HuiEnergyDistrubutionCard
|
|||
this._data.co2SignalEntity in this._data.stats
|
||||
) {
|
||||
// Calculate high carbon consumption
|
||||
const highCarbonConsumption = calculateStatisticsSumGrowthWithPercentage(
|
||||
const highCarbonEnergy = calculateStatisticsSumGrowthWithPercentage(
|
||||
this._data.stats[this._data.co2SignalEntity],
|
||||
types
|
||||
.grid![0].flow_from.map(
|
||||
|
|
@ -144,8 +215,17 @@ class HuiEnergyDistrubutionCard
|
|||
electricityMapUrl += `/zone/${co2State.attributes.country_code}`;
|
||||
}
|
||||
|
||||
if (highCarbonConsumption !== null) {
|
||||
lowCarbonConsumption = totalGridConsumption - highCarbonConsumption;
|
||||
if (highCarbonEnergy !== null) {
|
||||
lowCarbonEnergy = totalFromGrid - highCarbonEnergy;
|
||||
|
||||
let highCarbonConsumption: number;
|
||||
if (gridConsumption !== totalFromGrid) {
|
||||
// Only get the part that was used for consumption and not the battery
|
||||
highCarbonConsumption =
|
||||
highCarbonEnergy * (gridConsumption / totalFromGrid);
|
||||
} else {
|
||||
highCarbonConsumption = highCarbonEnergy;
|
||||
}
|
||||
|
||||
homeHighCarbonCircumference =
|
||||
CIRCLE_CIRCUMFERENCE * (highCarbonConsumption / totalHomeConsumption);
|
||||
|
|
@ -153,16 +233,26 @@ class HuiEnergyDistrubutionCard
|
|||
homeLowCarbonCircumference =
|
||||
CIRCLE_CIRCUMFERENCE -
|
||||
(homeSolarCircumference || 0) -
|
||||
(homeBatteryCircumference || 0) -
|
||||
homeHighCarbonCircumference;
|
||||
}
|
||||
}
|
||||
|
||||
const totalLines =
|
||||
gridConsumption +
|
||||
(solarConsumption || 0) +
|
||||
(returnedToGrid ? returnedToGrid - (batteryToGrid || 0) : 0) +
|
||||
(solarToBattery || 0) +
|
||||
(batteryConsumption || 0) +
|
||||
(batteryFromGrid || 0) +
|
||||
(batteryToGrid || 0);
|
||||
|
||||
return html`
|
||||
<ha-card .header=${this._config.title}>
|
||||
<div class="card-content">
|
||||
${lowCarbonConsumption !== undefined || hasSolarProduction
|
||||
${lowCarbonEnergy !== undefined || hasSolarProduction
|
||||
? html`<div class="row">
|
||||
${lowCarbonConsumption === undefined
|
||||
${lowCarbonEnergy === undefined
|
||||
? html`<div class="spacer"></div>`
|
||||
: html`<div class="circle-container low-carbon">
|
||||
<span class="label">Non-fossil</span>
|
||||
|
|
@ -173,12 +263,10 @@ class HuiEnergyDistrubutionCard
|
|||
rel="noopener no referrer"
|
||||
>
|
||||
<ha-svg-icon .path="${mdiLeaf}"></ha-svg-icon>
|
||||
${lowCarbonConsumption
|
||||
? formatNumber(
|
||||
lowCarbonConsumption,
|
||||
this.hass.locale,
|
||||
{ maximumFractionDigits: 1 }
|
||||
)
|
||||
${lowCarbonEnergy
|
||||
? formatNumber(lowCarbonEnergy, this.hass.locale, {
|
||||
maximumFractionDigits: 1,
|
||||
})
|
||||
: "-"}
|
||||
kWh
|
||||
</a>
|
||||
|
|
@ -207,33 +295,29 @@ class HuiEnergyDistrubutionCard
|
|||
<div class="circle-container grid">
|
||||
<div class="circle">
|
||||
<ha-svg-icon .path="${mdiTransmissionTower}"></ha-svg-icon>
|
||||
${returnedToGrid !== null
|
||||
? html`<span class="return">
|
||||
<ha-svg-icon
|
||||
class="small"
|
||||
.path=${mdiArrowLeft}
|
||||
></ha-svg-icon
|
||||
>${formatNumber(returnedToGrid, this.hass.locale, {
|
||||
maximumFractionDigits: 1,
|
||||
})}
|
||||
kWh
|
||||
</span>`
|
||||
: ""}
|
||||
<span class="consumption">
|
||||
${hasReturnToGrid
|
||||
? html`<ha-svg-icon
|
||||
class="small"
|
||||
.path=${mdiArrowRight}
|
||||
></ha-svg-icon>`
|
||||
: ""}${formatNumber(
|
||||
totalGridConsumption,
|
||||
this.hass.locale,
|
||||
{ maximumFractionDigits: 1 }
|
||||
)}
|
||||
: ""}${formatNumber(totalFromGrid, this.hass.locale, {
|
||||
maximumFractionDigits: 1,
|
||||
})}
|
||||
kWh
|
||||
</span>
|
||||
${productionReturnedToGrid !== null
|
||||
? html`<span class="return">
|
||||
<ha-svg-icon
|
||||
class="small"
|
||||
.path=${mdiArrowLeft}
|
||||
></ha-svg-icon
|
||||
>${formatNumber(
|
||||
productionReturnedToGrid,
|
||||
this.hass.locale,
|
||||
{ maximumFractionDigits: 1 }
|
||||
)}
|
||||
kWh
|
||||
</span>`
|
||||
: ""}
|
||||
</div>
|
||||
<span class="label">Grid</span>
|
||||
</div>
|
||||
|
|
@ -268,6 +352,23 @@ class HuiEnergyDistrubutionCard
|
|||
}"
|
||||
/>`
|
||||
: ""}
|
||||
${homeBatteryCircumference
|
||||
? svg`<circle
|
||||
class="battery"
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="38"
|
||||
stroke-dasharray="${homeBatteryCircumference} ${
|
||||
CIRCLE_CIRCUMFERENCE - homeBatteryCircumference
|
||||
}"
|
||||
stroke-dashoffset="-${
|
||||
CIRCLE_CIRCUMFERENCE -
|
||||
homeBatteryCircumference -
|
||||
(homeSolarCircumference || 0)
|
||||
}"
|
||||
shape-rendering="geometricPrecision"
|
||||
/>`
|
||||
: ""}
|
||||
${homeLowCarbonCircumference
|
||||
? svg`<circle
|
||||
class="low-carbon"
|
||||
|
|
@ -280,6 +381,7 @@ class HuiEnergyDistrubutionCard
|
|||
stroke-dashoffset="-${
|
||||
CIRCLE_CIRCUMFERENCE -
|
||||
homeLowCarbonCircumference -
|
||||
(homeBatteryCircumference || 0) -
|
||||
(homeSolarCircumference || 0)
|
||||
}"
|
||||
shape-rendering="geometricPrecision"
|
||||
|
|
@ -292,10 +394,12 @@ class HuiEnergyDistrubutionCard
|
|||
r="38"
|
||||
stroke-dasharray="${homeHighCarbonCircumference ??
|
||||
CIRCLE_CIRCUMFERENCE -
|
||||
homeSolarCircumference!} ${homeHighCarbonCircumference !==
|
||||
undefined
|
||||
homeSolarCircumference! -
|
||||
(homeBatteryCircumference ||
|
||||
0)} ${homeHighCarbonCircumference !== undefined
|
||||
? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
|
||||
: homeSolarCircumference}"
|
||||
: homeSolarCircumference! +
|
||||
(homeBatteryCircumference || 0)}"
|
||||
stroke-dashoffset="0"
|
||||
shape-rendering="geometricPrecision"
|
||||
/>
|
||||
|
|
@ -305,7 +409,39 @@ class HuiEnergyDistrubutionCard
|
|||
<span class="label">Home</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lines">
|
||||
${hasBattery
|
||||
? html`<div class="row">
|
||||
<div class="spacer"></div>
|
||||
<div class="circle-container battery">
|
||||
<div class="circle">
|
||||
<ha-svg-icon .path="${mdiBatteryHigh}"></ha-svg-icon>
|
||||
<span class="battery-in">
|
||||
<ha-svg-icon
|
||||
class="small"
|
||||
.path=${mdiArrowDown}
|
||||
></ha-svg-icon
|
||||
>${formatNumber(totalBatteryIn || 0, this.hass.locale, {
|
||||
maximumFractionDigits: 1,
|
||||
})}
|
||||
kWh</span
|
||||
>
|
||||
<span class="battery-out">
|
||||
<ha-svg-icon
|
||||
class="small"
|
||||
.path=${mdiArrowUp}
|
||||
></ha-svg-icon>
|
||||
${formatNumber(totalBatteryOut || 0, this.hass.locale, {
|
||||
maximumFractionDigits: 1,
|
||||
})}
|
||||
kWh</span
|
||||
>
|
||||
</div>
|
||||
<span class="label">Battery</span>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
</div>`
|
||||
: ""}
|
||||
<div class="lines ${classMap({ battery: hasBattery })}">
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -315,7 +451,9 @@ class HuiEnergyDistrubutionCard
|
|||
? svg`<path
|
||||
id="return"
|
||||
class="return"
|
||||
d="M47,0 v15 c0,40 -10,35 -30,35 h-20"
|
||||
d="M${hasBattery ? 45 : 47},0 v15 c0,${
|
||||
hasBattery ? "35 -10,30 -30,30" : "40 -10,35 -30,35"
|
||||
} h-20"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path> `
|
||||
: ""}
|
||||
|
|
@ -323,19 +461,45 @@ class HuiEnergyDistrubutionCard
|
|||
? svg`<path
|
||||
id="solar"
|
||||
class="solar"
|
||||
d="M${
|
||||
hasReturnToGrid ? 53 : 50
|
||||
},0 v15 c0,40 10,35 30,35 h20"
|
||||
d="M${hasBattery ? 55 : 53},0 v15 c0,${
|
||||
hasBattery ? "35 10,30 30,30" : "40 10,35 30,35"
|
||||
} h20"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>`
|
||||
: ""}
|
||||
${hasBattery
|
||||
? svg`<path
|
||||
id="battery-house"
|
||||
class="battery-house"
|
||||
d="M55,100 v-15 c0,-35 10,-30 30,-30 h20"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>
|
||||
<path
|
||||
id="battery-grid"
|
||||
class=${classMap({
|
||||
"battery-from-grid": Boolean(batteryFromGrid),
|
||||
"battery-to-grid": Boolean(batteryToGrid),
|
||||
})}
|
||||
d="M45,100 v-15 c0,-35 -10,-30 -30,-30 h-20"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>
|
||||
`
|
||||
: ""}
|
||||
${hasBattery && hasSolarProduction
|
||||
? svg`<path
|
||||
id="battery-solar"
|
||||
class="battery-solar"
|
||||
d="M50,0 V100"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>`
|
||||
: ""}
|
||||
<path
|
||||
class="grid"
|
||||
id="grid"
|
||||
d="M0,${hasSolarProduction ? 56 : 53} H100"
|
||||
d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>
|
||||
${productionReturnedToGrid && hasSolarProduction
|
||||
${returnedToGrid && hasSolarProduction
|
||||
? svg`<circle
|
||||
r="1"
|
||||
class="return"
|
||||
|
|
@ -344,61 +508,107 @@ class HuiEnergyDistrubutionCard
|
|||
<animateMotion
|
||||
dur="${
|
||||
6 -
|
||||
(productionReturnedToGrid /
|
||||
(totalGridConsumption +
|
||||
(totalSolarProduction || 0))) *
|
||||
5
|
||||
((returnedToGrid - (batteryToGrid || 0)) / totalLines) *
|
||||
6
|
||||
}s"
|
||||
repeatCount="indefinite"
|
||||
rotate="auto"
|
||||
calcMode="linear"
|
||||
>
|
||||
<mpath xlink:href="#return" />
|
||||
</animateMotion>
|
||||
</circle>`
|
||||
: ""}
|
||||
${totalSolarProduction
|
||||
${solarConsumption
|
||||
? svg`<circle
|
||||
r="1"
|
||||
class="solar"
|
||||
vector-effect="non-scaling-stroke"
|
||||
>
|
||||
<animateMotion
|
||||
dur="${
|
||||
6 -
|
||||
((totalSolarProduction -
|
||||
(productionReturnedToGrid || 0)) /
|
||||
(totalGridConsumption +
|
||||
(totalSolarProduction || 0))) *
|
||||
5
|
||||
}s"
|
||||
dur="${6 - (solarConsumption / totalLines) * 5}s"
|
||||
repeatCount="indefinite"
|
||||
rotate="auto"
|
||||
calcMode="linear"
|
||||
>
|
||||
<mpath xlink:href="#solar" />
|
||||
</animateMotion>
|
||||
</circle>`
|
||||
: ""}
|
||||
${totalGridConsumption
|
||||
${gridConsumption
|
||||
? svg`<circle
|
||||
r="1"
|
||||
class="grid"
|
||||
vector-effect="non-scaling-stroke"
|
||||
>
|
||||
<animateMotion
|
||||
dur="${
|
||||
6 -
|
||||
(totalGridConsumption /
|
||||
(totalGridConsumption +
|
||||
(totalSolarProduction || 0))) *
|
||||
5
|
||||
}s"
|
||||
dur="${6 - (gridConsumption / totalLines) * 5}s"
|
||||
repeatCount="indefinite"
|
||||
rotate="auto"
|
||||
calcMode="linear"
|
||||
>
|
||||
<mpath xlink:href="#grid" />
|
||||
</animateMotion>
|
||||
</circle>`
|
||||
: ""}
|
||||
${solarToBattery
|
||||
? svg`<circle
|
||||
r="1"
|
||||
class="battery-solar"
|
||||
vector-effect="non-scaling-stroke"
|
||||
>
|
||||
<animateMotion
|
||||
dur="${6 - (solarToBattery / totalLines) * 5}s"
|
||||
repeatCount="indefinite"
|
||||
calcMode="linear"
|
||||
>
|
||||
<mpath xlink:href="#battery-solar" />
|
||||
</animateMotion>
|
||||
</circle>`
|
||||
: ""}
|
||||
${batteryConsumption
|
||||
? svg`<circle
|
||||
r="1"
|
||||
class="battery-house"
|
||||
vector-effect="non-scaling-stroke"
|
||||
>
|
||||
<animateMotion
|
||||
dur="${6 - (batteryConsumption / totalLines) * 5}s"
|
||||
repeatCount="indefinite"
|
||||
calcMode="linear"
|
||||
>
|
||||
<mpath xlink:href="#battery-house" />
|
||||
</animateMotion>
|
||||
</circle>`
|
||||
: ""}
|
||||
${batteryFromGrid
|
||||
? svg`<circle
|
||||
r="1"
|
||||
class="battery-from-grid"
|
||||
vector-effect="non-scaling-stroke"
|
||||
>
|
||||
<animateMotion
|
||||
dur="${6 - (batteryFromGrid / totalLines) * 5}s"
|
||||
repeatCount="indefinite"
|
||||
keyPoints="1;0" keyTimes="0;1"
|
||||
calcMode="linear"
|
||||
>
|
||||
<mpath xlink:href="#battery-grid" />
|
||||
</animateMotion>
|
||||
</circle>`
|
||||
: ""}
|
||||
${batteryToGrid
|
||||
? svg`<circle
|
||||
r="1"
|
||||
class="battery-to-grid"
|
||||
vector-effect="non-scaling-stroke"
|
||||
>
|
||||
<animateMotion
|
||||
dur="${6 - (batteryToGrid / totalLines) * 5}s"
|
||||
repeatCount="indefinite"
|
||||
calcMode="linear"
|
||||
>
|
||||
<mpath xlink:href="#battery-grid" />
|
||||
</animateMotion>
|
||||
</circle>`
|
||||
: ""}
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -433,6 +643,10 @@ class HuiEnergyDistrubutionCard
|
|||
padding: 0 16px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.lines.battery {
|
||||
bottom: 100px;
|
||||
height: 156px;
|
||||
}
|
||||
.lines svg {
|
||||
width: calc(100% - 160px);
|
||||
height: 100%;
|
||||
|
|
@ -456,6 +670,10 @@ class HuiEnergyDistrubutionCard
|
|||
margin-left: 4px;
|
||||
height: 130px;
|
||||
}
|
||||
.circle-container.battery {
|
||||
height: 110px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.spacer {
|
||||
width: 84px;
|
||||
}
|
||||
|
|
@ -523,11 +741,48 @@ class HuiEnergyDistrubutionCard
|
|||
stroke-width: 4;
|
||||
fill: var(--energy-solar-color);
|
||||
}
|
||||
path.return,
|
||||
circle.return {
|
||||
.battery .circle {
|
||||
border-color: var(--energy-battery-in-color);
|
||||
}
|
||||
circle.battery,
|
||||
path.battery {
|
||||
stroke: var(--energy-battery-out-color);
|
||||
}
|
||||
path.battery-house,
|
||||
circle.battery-house {
|
||||
stroke: var(--energy-battery-out-color);
|
||||
}
|
||||
circle.battery-house {
|
||||
stroke-width: 4;
|
||||
fill: var(--energy-battery-out-color);
|
||||
}
|
||||
path.battery-solar,
|
||||
circle.battery-solar {
|
||||
stroke: var(--energy-battery-in-color);
|
||||
}
|
||||
circle.battery-solar {
|
||||
stroke-width: 4;
|
||||
fill: var(--energy-battery-in-color);
|
||||
}
|
||||
.battery-in {
|
||||
color: var(--energy-battery-in-color);
|
||||
}
|
||||
.battery-out {
|
||||
color: var(--energy-battery-out-color);
|
||||
}
|
||||
path.battery-from-grid {
|
||||
stroke: var(--energy-grid-consumption-color);
|
||||
}
|
||||
path.battery-to-grid {
|
||||
stroke: var(--energy-grid-return-color);
|
||||
}
|
||||
circle.return {
|
||||
path.return,
|
||||
circle.return,
|
||||
circle.battery-to-grid {
|
||||
stroke: var(--energy-grid-return-color);
|
||||
}
|
||||
circle.return,
|
||||
circle.battery-to-grid {
|
||||
stroke-width: 4;
|
||||
fill: var(--energy-grid-return-color);
|
||||
}
|
||||
|
|
@ -541,10 +796,12 @@ class HuiEnergyDistrubutionCard
|
|||
color: var(--energy-grid-consumption-color);
|
||||
}
|
||||
circle.grid,
|
||||
circle.battery-from-grid,
|
||||
path.grid {
|
||||
stroke: var(--energy-grid-consumption-color);
|
||||
}
|
||||
circle.grid {
|
||||
circle.grid,
|
||||
circle.battery-from-grid {
|
||||
stroke-width: 4;
|
||||
fill: var(--energy-grid-consumption-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ export class HuiEnergySourcesTableCard
|
|||
|
||||
let totalGrid = 0;
|
||||
let totalSolar = 0;
|
||||
let totalBattery = 0;
|
||||
let totalCost = 0;
|
||||
|
||||
const types = energySourcesByType(this._data.prefs);
|
||||
|
|
@ -81,6 +82,12 @@ export class HuiEnergySourcesTableCard
|
|||
const solarColor = computedStyles
|
||||
.getPropertyValue("--energy-solar-color")
|
||||
.trim();
|
||||
const batteryFromColor = computedStyles
|
||||
.getPropertyValue("--energy-battery-out-color")
|
||||
.trim();
|
||||
const batteryToColor = computedStyles
|
||||
.getPropertyValue("--energy-battery-in-color")
|
||||
.trim();
|
||||
const returnColor = computedStyles
|
||||
.getPropertyValue("--energy-grid-return-color")
|
||||
.trim();
|
||||
|
|
@ -190,6 +197,99 @@ export class HuiEnergySourcesTableCard
|
|||
: ""}
|
||||
</tr>`
|
||||
: ""}
|
||||
${types.battery?.map((source, idx) => {
|
||||
const entityFrom = this.hass.states[source.stat_energy_from];
|
||||
const entityTo = this.hass.states[source.stat_energy_to];
|
||||
const energyFrom =
|
||||
calculateStatisticSumGrowth(
|
||||
this._data!.stats[source.stat_energy_from]
|
||||
) || 0;
|
||||
const energyTo =
|
||||
calculateStatisticSumGrowth(
|
||||
this._data!.stats[source.stat_energy_to]
|
||||
) || 0;
|
||||
totalBattery += energyFrom - energyTo;
|
||||
const fromColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(
|
||||
labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
|
||||
)
|
||||
)
|
||||
: batteryFromColor;
|
||||
const toColor =
|
||||
idx > 0
|
||||
? rgb2hex(
|
||||
lab2rgb(
|
||||
labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
|
||||
)
|
||||
)
|
||||
: batteryToColor;
|
||||
return html`<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell cell-bullet">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: fromColor,
|
||||
backgroundColor: fromColor + "7F",
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
<th class="mdc-data-table__cell" scope="row">
|
||||
${entityFrom
|
||||
? computeStateName(entityFrom)
|
||||
: source.stat_energy_from}
|
||||
</th>
|
||||
<td
|
||||
class="mdc-data-table__cell mdc-data-table__cell--numeric"
|
||||
>
|
||||
${formatNumber(energyFrom, this.hass.locale)} kWh
|
||||
</td>
|
||||
${showCosts
|
||||
? html`<td class="mdc-data-table__cell"></td>`
|
||||
: ""}
|
||||
</tr>
|
||||
<tr class="mdc-data-table__row">
|
||||
<td class="mdc-data-table__cell cell-bullet">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: toColor,
|
||||
backgroundColor: toColor + "7F",
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
<th class="mdc-data-table__cell" scope="row">
|
||||
${entityTo
|
||||
? computeStateName(entityTo)
|
||||
: source.stat_energy_from}
|
||||
</th>
|
||||
<td
|
||||
class="mdc-data-table__cell mdc-data-table__cell--numeric"
|
||||
>
|
||||
${formatNumber(energyTo * -1, this.hass.locale)} kWh
|
||||
</td>
|
||||
${showCosts
|
||||
? html`<td class="mdc-data-table__cell"></td>`
|
||||
: ""}
|
||||
</tr>`;
|
||||
})}
|
||||
${types.battery
|
||||
? html`<tr class="mdc-data-table__row total">
|
||||
<td class="mdc-data-table__cell"></td>
|
||||
<th class="mdc-data-table__cell" scope="row">
|
||||
Battery total
|
||||
</th>
|
||||
<td
|
||||
class="mdc-data-table__cell mdc-data-table__cell--numeric"
|
||||
>
|
||||
${formatNumber(totalBattery, this.hass.locale)} kWh
|
||||
</td>
|
||||
${showCosts
|
||||
? html`<td class="mdc-data-table__cell"></td>`
|
||||
: ""}
|
||||
</tr>`
|
||||
: ""}
|
||||
${types.grid?.map(
|
||||
(source) => html`${source.flow_from.map((flow, idx) => {
|
||||
const entity = this.hass.states[flow.stat_energy_from];
|
||||
|
|
|
|||
|
|
@ -244,6 +244,8 @@ export class HuiEnergyUsageGraphCard
|
|||
to_grid?: string[];
|
||||
from_grid?: string[];
|
||||
solar?: string[];
|
||||
to_battery?: string[];
|
||||
from_battery?: string[];
|
||||
} = {};
|
||||
|
||||
for (const source of energyData.prefs.energy_sources) {
|
||||
|
|
@ -256,6 +258,17 @@ export class HuiEnergyUsageGraphCard
|
|||
continue;
|
||||
}
|
||||
|
||||
if (source.type === "battery") {
|
||||
if (statistics.to_battery) {
|
||||
statistics.to_battery.push(source.stat_energy_to);
|
||||
statistics.from_battery!.push(source.stat_energy_from);
|
||||
} else {
|
||||
statistics.to_battery = [source.stat_energy_to];
|
||||
statistics.from_battery = [source.stat_energy_from];
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// grid source
|
||||
for (const flowFrom of source.flow_from) {
|
||||
if (statistics.from_grid) {
|
||||
|
|
@ -306,21 +319,47 @@ export class HuiEnergyUsageGraphCard
|
|||
}
|
||||
|
||||
const combinedData: {
|
||||
[key: string]: { [statId: string]: { [start: string]: number } };
|
||||
to_grid?: { [statId: string]: { [start: string]: number } };
|
||||
to_battery?: { [statId: string]: { [start: string]: number } };
|
||||
from_grid?: { [statId: string]: { [start: string]: number } };
|
||||
used_grid?: { [statId: string]: { [start: string]: number } };
|
||||
used_solar?: { [statId: string]: { [start: string]: number } };
|
||||
used_battery?: { [statId: string]: { [start: string]: number } };
|
||||
} = {};
|
||||
|
||||
const summedData: {
|
||||
to_grid?: { [start: string]: number };
|
||||
from_grid?: { [start: string]: number };
|
||||
to_battery?: { [start: string]: number };
|
||||
from_battery?: { [start: string]: number };
|
||||
solar?: { [start: string]: number };
|
||||
} = {};
|
||||
const summedData: { [key: string]: { [start: string]: number } } = {};
|
||||
|
||||
const computedStyles = getComputedStyle(this);
|
||||
const colors = {
|
||||
to_grid: computedStyles
|
||||
.getPropertyValue("--energy-grid-return-color")
|
||||
.trim(),
|
||||
to_battery: computedStyles
|
||||
.getPropertyValue("--energy-battery-in-color")
|
||||
.trim(),
|
||||
from_grid: computedStyles
|
||||
.getPropertyValue("--energy-grid-consumption-color")
|
||||
.trim(),
|
||||
used_grid: computedStyles
|
||||
.getPropertyValue("--energy-grid-consumption-color")
|
||||
.trim(),
|
||||
used_solar: computedStyles
|
||||
.getPropertyValue("--energy-solar-color")
|
||||
.trim(),
|
||||
used_battery: computedStyles
|
||||
.getPropertyValue("--energy-battery-out-color")
|
||||
.trim(),
|
||||
};
|
||||
const labels = {
|
||||
used_grid: "Combined from grid",
|
||||
used_solar: "Consumed solar",
|
||||
used_battery: "Consumed battery",
|
||||
};
|
||||
|
||||
const backgroundColor = computedStyles
|
||||
|
|
@ -328,8 +367,14 @@ export class HuiEnergyUsageGraphCard
|
|||
.trim();
|
||||
|
||||
Object.entries(statistics).forEach(([key, statIds]) => {
|
||||
const sum = ["solar", "to_grid"].includes(key);
|
||||
const add = key !== "solar";
|
||||
const sum = [
|
||||
"solar",
|
||||
"to_grid",
|
||||
"from_grid",
|
||||
"to_battery",
|
||||
"from_battery",
|
||||
].includes(key);
|
||||
const add = !["solar", "from_battery"].includes(key);
|
||||
const totalStats: { [start: string]: number } = {};
|
||||
const sets: { [statId: string]: { [start: string]: number } } = {};
|
||||
statIds!.forEach((id) => {
|
||||
|
|
@ -374,15 +419,72 @@ export class HuiEnergyUsageGraphCard
|
|||
}
|
||||
});
|
||||
|
||||
if (summedData.to_grid && summedData.solar) {
|
||||
const grid_to_battery = {};
|
||||
const battery_to_grid = {};
|
||||
if ((summedData.to_grid || summedData.to_battery) && summedData.solar) {
|
||||
const used_solar = {};
|
||||
for (const start of Object.keys(summedData.solar)) {
|
||||
used_solar[start] = Math.max(
|
||||
(summedData.solar[start] || 0) - (summedData.to_grid[start] || 0),
|
||||
0
|
||||
);
|
||||
used_solar[start] =
|
||||
(summedData.solar[start] || 0) -
|
||||
(summedData.to_grid?.[start] || 0) -
|
||||
(summedData.to_battery?.[start] || 0);
|
||||
if (used_solar[start] < 0) {
|
||||
if (summedData.to_battery) {
|
||||
grid_to_battery[start] = used_solar[start] * -1;
|
||||
if (grid_to_battery[start] > (summedData.from_grid?.[start] || 0)) {
|
||||
battery_to_grid[start] = Math.min(
|
||||
0,
|
||||
grid_to_battery[start] - (summedData.from_grid?.[start] || 0)
|
||||
);
|
||||
grid_to_battery[start] = summedData.from_grid?.[start];
|
||||
}
|
||||
}
|
||||
used_solar[start] = 0;
|
||||
}
|
||||
}
|
||||
combinedData.used_solar = { used_solar: used_solar };
|
||||
combinedData.used_solar = { used_solar };
|
||||
}
|
||||
|
||||
if (summedData.from_battery) {
|
||||
if (summedData.to_grid) {
|
||||
const used_battery = {};
|
||||
for (const start of Object.keys(summedData.from_battery)) {
|
||||
used_battery[start] =
|
||||
(summedData.from_battery![start] || 0) -
|
||||
(battery_to_grid[start] || 0);
|
||||
}
|
||||
combinedData.used_battery = { used_battery };
|
||||
} else {
|
||||
combinedData.used_battery = { used_battery: summedData.from_battery };
|
||||
}
|
||||
}
|
||||
|
||||
if (combinedData.from_grid && summedData.to_battery) {
|
||||
const used_grid = {};
|
||||
for (const start of Object.keys(grid_to_battery)) {
|
||||
let noOfSources = 0;
|
||||
let source: string;
|
||||
for (const [key, stats] of Object.entries(combinedData.from_grid)) {
|
||||
if (stats[start]) {
|
||||
source = key;
|
||||
noOfSources++;
|
||||
}
|
||||
if (noOfSources > 1) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (noOfSources === 1) {
|
||||
combinedData.from_grid[source!][start] -= grid_to_battery[start] || 0;
|
||||
} else {
|
||||
let total_from_grid = 0;
|
||||
Object.values(combinedData.from_grid).forEach((stats) => {
|
||||
total_from_grid += stats[start] || 0;
|
||||
delete stats[start];
|
||||
});
|
||||
used_grid[start] = total_from_grid - (grid_to_battery[start] || 0);
|
||||
}
|
||||
}
|
||||
combinedData.used_grid = { used_grid };
|
||||
}
|
||||
|
||||
let allKeys: string[] = [];
|
||||
|
|
@ -406,12 +508,17 @@ export class HuiEnergyUsageGraphCard
|
|||
|
||||
data.push({
|
||||
label:
|
||||
type === "used_solar"
|
||||
? "Consumed solar"
|
||||
type in labels
|
||||
? labels[type]
|
||||
: entity
|
||||
? computeStateName(entity)
|
||||
: statId,
|
||||
order: type === "used_solar" ? 0 : idx + 1,
|
||||
order:
|
||||
type === "used_solar"
|
||||
? 0
|
||||
: type === "to_battery"
|
||||
? Object.keys(combinedData).length
|
||||
: idx + 1,
|
||||
borderColor,
|
||||
backgroundColor: hexBlend(borderColor, backgroundColor, 50),
|
||||
stack: "stack",
|
||||
|
|
@ -425,7 +532,10 @@ export class HuiEnergyUsageGraphCard
|
|||
// @ts-expect-error
|
||||
data[0].data.push({
|
||||
x: date.getTime(),
|
||||
y: value && type === "to_grid" ? -1 * value : value,
|
||||
y:
|
||||
value && ["to_grid", "to_battery"].includes(type)
|
||||
? -1 * value
|
||||
: value,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,8 @@ documentContainer.innerHTML = `<custom-style>
|
|||
--energy-grid-return-color: #673ab7;
|
||||
--energy-solar-color: #ff9800;
|
||||
--energy-non-fossil-color: #0f9d58;
|
||||
--energy-battery-out-color: #4db6ac;
|
||||
--energy-battery-in-color: #f06292;
|
||||
|
||||
/* opacity for dark text on a light background */
|
||||
--dark-divider-opacity: 0.12;
|
||||
|
|
|
|||
|
|
@ -1046,6 +1046,11 @@
|
|||
"stat_return_to_grid": "Solar energy returned to the grid",
|
||||
"stat_predicted_production": "Prediction of your solar energy production"
|
||||
},
|
||||
"battery": {
|
||||
"title": "Home Battery Storage",
|
||||
"sub": "If you have a battery system, you can configure it to monitor how much energy was stored and used from your battery.",
|
||||
"learn_more": "More information on how to get started."
|
||||
},
|
||||
"device_consumption": {
|
||||
"title": "Individual devices",
|
||||
"sub": "Tracking the energy usage of individual devices allows Home Assistant to break down your energy usage by device.",
|
||||
|
|
|
|||
Loading…
Reference in New Issue