mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
More support for no-grid energy dashboard (#25644)
* More support for no-grid energy dashboard * Update src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com> * lint --------- Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>
This commit is contained in:
karwosts
GitHub
parent
9d6a7e7e6f
commit
b3f0a6328e
@ -64,7 +64,9 @@ export class EnergyViewStrategy extends ReactiveElement {
|
||||
(source) => source.type === "solar"
|
||||
);
|
||||
const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
|
||||
|
||||
const hasBattery = prefs.energy_sources.some(
|
||||
(source) => source.type === "battery"
|
||||
);
|
||||
const hasWater = prefs.energy_sources.some(
|
||||
(source) => source.type === "water"
|
||||
);
|
||||
@ -74,8 +76,8 @@ export class EnergyViewStrategy extends ReactiveElement {
|
||||
collection_key: "energy_dashboard",
|
||||
});
|
||||
|
||||
// Only include if we have a grid source.
|
||||
if (hasGrid) {
|
||||
// Only include if we have a grid or battery.
|
||||
if (hasGrid || hasBattery) {
|
||||
view.cards!.push({
|
||||
title: hass.localize("ui.panel.energy.cards.energy_usage_graph_title"),
|
||||
type: "energy-usage-graph",
|
||||
@ -110,8 +112,8 @@ export class EnergyViewStrategy extends ReactiveElement {
|
||||
});
|
||||
}
|
||||
|
||||
// Only include if we have a grid.
|
||||
if (hasGrid) {
|
||||
// Only include if we have a grid or battery.
|
||||
if (hasGrid || hasBattery) {
|
||||
view.cards!.push({
|
||||
title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
|
||||
type: "energy-distribution",
|
||||
@ -120,7 +122,7 @@ export class EnergyViewStrategy extends ReactiveElement {
|
||||
});
|
||||
}
|
||||
|
||||
if (hasGrid || hasSolar || hasGas || hasWater) {
|
||||
if (hasGrid || hasSolar || hasGas || hasWater || hasBattery) {
|
||||
view.cards!.push({
|
||||
title: hass.localize(
|
||||
"ui.panel.energy.cards.energy_sources_table_title"
|
||||
|
||||
@ -102,14 +102,13 @@ class HuiEnergyDistrubutionCard
|
||||
const prefs = this._data.prefs;
|
||||
const types = energySourcesByType(prefs);
|
||||
|
||||
// The strategy only includes this card if we have a grid.
|
||||
const hasConsumption = true;
|
||||
|
||||
const hasGrid =
|
||||
!!types.grid?.[0].flow_from.length || !!types.grid?.[0].flow_to.length;
|
||||
const hasSolarProduction = types.solar !== undefined;
|
||||
const hasBattery = types.battery !== undefined;
|
||||
const hasGas = types.gas !== undefined;
|
||||
const hasWater = types.water !== undefined;
|
||||
const hasReturnToGrid = hasConsumption && types.grid![0].flow_to.length > 0;
|
||||
const hasReturnToGrid = !!types.grid?.[0].flow_to.length;
|
||||
|
||||
const { summedData, compareSummedData: _ } = getSummedData(this._data);
|
||||
const { consumption, compareConsumption: __ } = computeConsumptionData(
|
||||
@ -163,14 +162,14 @@ class HuiEnergyDistrubutionCard
|
||||
}
|
||||
let batteryFromGrid: null | number = null;
|
||||
let batteryToGrid: null | number = null;
|
||||
if (hasBattery) {
|
||||
if (hasBattery && hasGrid) {
|
||||
batteryToGrid = consumption.total.battery_to_grid;
|
||||
batteryFromGrid = consumption.total.grid_to_battery;
|
||||
}
|
||||
|
||||
let solarToBattery: null | number = null;
|
||||
let solarToGrid: null | number = null;
|
||||
if (hasSolarProduction) {
|
||||
if (hasSolarProduction && hasGrid) {
|
||||
solarToGrid = consumption.total.solar_to_grid;
|
||||
}
|
||||
if (hasSolarProduction && hasBattery) {
|
||||
@ -182,7 +181,9 @@ class HuiEnergyDistrubutionCard
|
||||
batteryConsumption = Math.max(consumption.total.used_battery, 0);
|
||||
}
|
||||
|
||||
const gridConsumption = Math.max(consumption.total.used_grid, 0);
|
||||
const gridConsumption = hasGrid
|
||||
? Math.max(consumption.total.used_grid, 0)
|
||||
: 0;
|
||||
|
||||
const totalHomeConsumption = Math.max(0, consumption.total.used_total);
|
||||
|
||||
@ -206,7 +207,11 @@ class HuiEnergyDistrubutionCard
|
||||
// This fallback is used in the demo
|
||||
let electricityMapUrl = "https://app.electricitymap.org";
|
||||
|
||||
if (this._data.co2SignalEntity && this._data.fossilEnergyConsumption) {
|
||||
if (
|
||||
hasGrid &&
|
||||
this._data.co2SignalEntity &&
|
||||
this._data.fossilEnergyConsumption
|
||||
) {
|
||||
// Calculate high carbon consumption
|
||||
const highCarbonEnergy = Object.values(
|
||||
this._data.fossilEnergyConsumption
|
||||
@ -225,7 +230,7 @@ class HuiEnergyDistrubutionCard
|
||||
if (gridConsumption !== totalFromGrid) {
|
||||
// Only get the part that was used for consumption and not the battery
|
||||
highCarbonConsumption =
|
||||
highCarbonEnergy * (gridConsumption / totalFromGrid);
|
||||
highCarbonEnergy * (gridConsumption! / totalFromGrid);
|
||||
} else {
|
||||
highCarbonConsumption = highCarbonEnergy;
|
||||
}
|
||||
@ -378,41 +383,43 @@ class HuiEnergyDistrubutionCard
|
||||
</div>`
|
||||
: ""}
|
||||
<div class="row">
|
||||
<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
|
||||
>${formatConsumptionShort(
|
||||
${hasGrid
|
||||
? html`<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
|
||||
>${formatConsumptionShort(
|
||||
this.hass,
|
||||
returnedToGrid,
|
||||
"kWh"
|
||||
)}
|
||||
</span>`
|
||||
: ""}
|
||||
<span class="consumption">
|
||||
${hasReturnToGrid
|
||||
? html`<ha-svg-icon
|
||||
class="small"
|
||||
.path=${mdiArrowRight}
|
||||
></ha-svg-icon>`
|
||||
: ""}${formatConsumptionShort(
|
||||
this.hass,
|
||||
returnedToGrid,
|
||||
totalFromGrid,
|
||||
"kWh"
|
||||
)}
|
||||
</span>`
|
||||
: ""}
|
||||
<span class="consumption">
|
||||
${hasReturnToGrid
|
||||
? html`<ha-svg-icon
|
||||
class="small"
|
||||
.path=${mdiArrowRight}
|
||||
></ha-svg-icon>`
|
||||
: ""}${formatConsumptionShort(
|
||||
this.hass,
|
||||
totalFromGrid,
|
||||
"kWh"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<span class="label"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.lovelace.cards.energy.energy_distribution.grid"
|
||||
)}</span
|
||||
>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<span class="label"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.lovelace.cards.energy.energy_distribution.grid"
|
||||
)}</span
|
||||
>
|
||||
</div> `
|
||||
: html`<div class="grid-spacer"></div>`}
|
||||
<div class="circle-container home">
|
||||
<div
|
||||
class="circle ${classMap({
|
||||
@ -480,22 +487,27 @@ class HuiEnergyDistrubutionCard
|
||||
shape-rendering="geometricPrecision"
|
||||
/>`
|
||||
: ""}
|
||||
<circle
|
||||
${hasGrid
|
||||
? svg`<circle
|
||||
class="grid"
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="38"
|
||||
stroke-dasharray="${homeHighCarbonCircumference ??
|
||||
CIRCLE_CIRCUMFERENCE -
|
||||
homeSolarCircumference! -
|
||||
(homeBatteryCircumference ||
|
||||
0)} ${homeHighCarbonCircumference !== undefined
|
||||
? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
|
||||
: homeSolarCircumference! +
|
||||
(homeBatteryCircumference || 0)}"
|
||||
stroke-dasharray="${
|
||||
homeHighCarbonCircumference ??
|
||||
CIRCLE_CIRCUMFERENCE -
|
||||
homeSolarCircumference! -
|
||||
(homeBatteryCircumference || 0)
|
||||
} ${
|
||||
homeHighCarbonCircumference !== undefined
|
||||
? CIRCLE_CIRCUMFERENCE - homeHighCarbonCircumference
|
||||
: homeSolarCircumference! +
|
||||
(homeBatteryCircumference || 0)
|
||||
}"
|
||||
stroke-dashoffset="0"
|
||||
shape-rendering="geometricPrecision"
|
||||
/>
|
||||
/>`
|
||||
: nothing}
|
||||
</svg>`
|
||||
: ""}
|
||||
</div>
|
||||
@ -619,15 +631,19 @@ class HuiEnergyDistrubutionCard
|
||||
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>
|
||||
${
|
||||
hasGrid
|
||||
? svg`<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>`
|
||||
: nothing
|
||||
}
|
||||
`
|
||||
: ""}
|
||||
${hasBattery && hasSolarProduction
|
||||
@ -638,12 +654,14 @@ class HuiEnergyDistrubutionCard
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>`
|
||||
: ""}
|
||||
<path
|
||||
class="grid"
|
||||
id="grid"
|
||||
d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>
|
||||
${hasGrid
|
||||
? svg`<path
|
||||
class="grid"
|
||||
id="grid"
|
||||
d="M0,${hasBattery ? 50 : hasSolarProduction ? 56 : 53} H100"
|
||||
vector-effect="non-scaling-stroke"
|
||||
></path>`
|
||||
: nothing}
|
||||
${solarToGrid && this._animate
|
||||
? svg`<circle
|
||||
r="1"
|
||||
@ -839,6 +857,10 @@ class HuiEnergyDistrubutionCard
|
||||
.spacer {
|
||||
width: 84px;
|
||||
}
|
||||
.grid-spacer {
|
||||
width: 84px;
|
||||
height: 100px;
|
||||
}
|
||||
.circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user