jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 07:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix missing translatable energy texts (#10230)

Browse Source
This commit is contained in:
chriss158 2021-10-14 12:28:11 +02:00 committed by GitHub
parent a91d25b27d
commit bddb505b7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 434 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/panels/config/energy/components/ha-energy-battery-settings.ts
View File

@ -78,7 +78,11 @@ export class EnergyBatterySettings extends LitElement {
`
)}
<h3>Battery systems</h3>
<h3>
${this.hass.localize(
"ui.panel.config.energy.battery.battery_systems"
)}
</h3>
${batterySources.map((source) => {
const fromEntityState = this.hass.states[source.stat_energy_from];
const toEntityState = this.hass.states[source.stat_energy_to];
@ -113,7 +117,9 @@ export class EnergyBatterySettings extends LitElement {
<div class="row border-bottom">
<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
<mwc-button @click=${this._addSource}
>Add battery system</mwc-button
>${this.hass.localize(
"ui.panel.config.energy.battery.add_battery_system"
)}</mwc-button
>
</div>
</div>
@ -154,7 +160,7 @@ export class EnergyBatterySettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
title: "Are you sure you want to delete this source?",
title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;

14
src/panels/config/energy/components/ha-energy-device-settings.ts
View File

@ -69,7 +69,11 @@ export class EnergyDeviceSettings extends LitElement {
></ha-energy-validation-result>
`
)}
<h3>Devices</h3>
<h3>
${this.hass.localize(
"ui.panel.config.energy.device_consumption.devices"
)}
</h3>
${this.preferences.device_consumption.map((device) => {
const entityState = this.hass.states[device.stat_consumption];
return html`
@ -88,7 +92,11 @@ export class EnergyDeviceSettings extends LitElement {
})}
<div class="row">
<ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
<mwc-button @click=${this._addDevice}>Add device</mwc-button>
<mwc-button @click=${this._addDevice}
>${this.hass.localize(
"ui.panel.config.energy.device_consumption.add_device"
)}</mwc-button
>
</div>
</div>
</ha-card>
@ -113,7 +121,7 @@ export class EnergyDeviceSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
title: "Are you sure you want to delete this device?",
title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;

12
src/panels/config/energy/components/ha-energy-gas-settings.ts
View File

@ -75,7 +75,9 @@ export class EnergyGasSettings extends LitElement {
></ha-energy-validation-result>
`
)}
<h3>Gas consumption</h3>
<h3>
${this.hass.localize("ui.panel.config.energy.gas.gas_consumption")}
</h3>
${gasSources.map((source) => {
const entityState = this.hass.states[source.stat_energy_from];
return html`
@ -101,7 +103,11 @@ export class EnergyGasSettings extends LitElement {
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiFire}></ha-svg-icon>
<mwc-button @click=${this._addSource}>Add gas source</mwc-button>
<mwc-button @click=${this._addSource}
>${this.hass.localize(
"ui.panel.config.energy.gas.add_gas_source"
)}</mwc-button
>
</div>
</div>
</ha-card>
@ -143,7 +149,7 @@ export class EnergyGasSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
title: "Are you sure you want to delete this source?",
title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;

37
src/panels/config/energy/components/ha-energy-grid-settings.ts
View File

@ -109,7 +109,11 @@ export class EnergyGridSettings extends LitElement {
`
: ""}
<h3>Grid consumption</h3>
<h3>
${this.hass.localize(
"ui.panel.config.energy.grid.grid_consumption"
)}
</h3>
${gridSource.flow_from.map((flow) => {
const entityState = this.hass.states[flow.stat_energy_from];
return html`
@ -138,11 +142,15 @@ export class EnergyGridSettings extends LitElement {
<div class="row border-bottom">
<ha-svg-icon .path=${mdiHomeImportOutline}></ha-svg-icon>
<mwc-button @click=${this._addFromSource}
>Add consumption</mwc-button
>${this.hass.localize(
"ui.panel.config.energy.grid.add_consumption"
)}</mwc-button
>
</div>
<h3>Return to grid</h3>
<h3>
${this.hass.localize("ui.panel.config.energy.grid.return_to_grid")}
</h3>
${gridSource.flow_to.map((flow) => {
const entityState = this.hass.states[flow.stat_energy_to];
return html`
@ -170,10 +178,18 @@ export class EnergyGridSettings extends LitElement {
})}
<div class="row border-bottom">
<ha-svg-icon .path=${mdiHomeExportOutline}></ha-svg-icon>
<mwc-button @click=${this._addToSource}>Add return</mwc-button>
<mwc-button @click=${this._addToSource}
>${this.hass.localize(
"ui.panel.config.energy.grid.add_return"
)}</mwc-button
>
</div>
<h3>Grid carbon footprint</h3>
<h3>
${this.hass.localize(
"ui.panel.config.energy.grid.grid_carbon_footprint"
)}
</h3>
${this._configEntries?.map(
(entry) => html`<div class="row" .entry=${entry}>
<img
@ -207,7 +223,9 @@ export class EnergyGridSettings extends LitElement {
})}
/>
<mwc-button @click=${this._addCO2Sensor}>
Add CO2 signal integration
${this.hass.localize(
"ui.panel.config.energy.grid.add_co2_signal"
)}
</mwc-button>
</div>
`
@ -236,8 +254,7 @@ export class EnergyGridSettings extends LitElement {
const entryId = ev.currentTarget.closest(".row").entry.entry_id;
if (
!(await showConfirmationDialog(this, {
title:
"Are you sure you want to delete this integration? It will remove the entities it provides",
title: this.hass.localize("ui.panel.config.energy.delete_integration"),
}))
) {
return;
@ -374,7 +391,7 @@ export class EnergyGridSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
title: "Are you sure you want to delete this source?",
title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
@ -404,7 +421,7 @@ export class EnergyGridSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
title: "Are you sure you want to delete this source?",
title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;

12
src/panels/config/energy/components/ha-energy-solar-settings.ts
View File

@ -81,7 +81,11 @@ export class EnergySolarSettings extends LitElement {
`
)}
<h3>Solar production</h3>
<h3>
${this.hass.localize(
"ui.panel.config.energy.solar.solar_production"
)}
</h3>
${solarSources.map((source) => {
const entityState = this.hass.states[source.stat_energy_from];
return html`
@ -114,7 +118,9 @@ export class EnergySolarSettings extends LitElement {
<div class="row border-bottom">
<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
<mwc-button @click=${this._addSource}>
Add solar production
${this.hass.localize(
"ui.panel.config.energy.solar.add_solar_production"
)}
</mwc-button>
</div>
`
@ -159,7 +165,7 @@ export class EnergySolarSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
title: "Are you sure you want to delete this source?",
title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;

12
src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
View File

@ -58,7 +58,9 @@ export class DialogEnergyBatterySettings
.path=${mdiBatteryHigh}
style="--mdc-icon-size: 32px;"
></ha-svg-icon>
Configure battery system`}
${this.hass.localize(
"ui.panel.config.energy.battery.dialog.header"
)}`}
@closed=${this.closeDialog}
>
${this._error ? html`<p class="error">${this._error}</p>` : ""}
@ -68,7 +70,9 @@ export class DialogEnergyBatterySettings
.includeUnitOfMeasurement=${energyUnits}
.includeDeviceClasses=${energyDeviceClasses}
.value=${this._source.stat_energy_to}
.label=${`Energy going in to the battery (kWh)`}
.label=${this.hass.localize(
"ui.panel.config.energy.battery.dialog.energy_into_battery"
)}
entities-only
@value-changed=${this._statisticToChanged}
></ha-statistic-picker>
@ -78,7 +82,9 @@ export class DialogEnergyBatterySettings
.includeUnitOfMeasurement=${energyUnits}
.includeDeviceClasses=${energyDeviceClasses}
.value=${this._source.stat_energy_from}
.label=${`Energy coming out of the battery (kWh)`}
.label=${this.hass.localize(
"ui.panel.config.energy.battery.dialog.energy_out_of_battery"
)}
entities-only
@value-changed=${this._statisticFromChanged}
></ha-statistic-picker>

8
src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
View File

@ -55,7 +55,9 @@ export class DialogEnergyDeviceSettings
.path=${mdiDevices}
style="--mdc-icon-size: 32px;"
></ha-svg-icon>
Add a device`}
${this.hass.localize(
"ui.panel.config.energy.device_consumption.dialog.header"
)}`}
@closed=${this.closeDialog}
>
${this._error ? html`<p class="error">${this._error}</p>` : ""}
@ -69,7 +71,9 @@ export class DialogEnergyDeviceSettings
.hass=${this.hass}
.includeUnitOfMeasurement=${energyUnits}
.includeDeviceClasses=${energyDeviceClasses}
.label=${`Device consumption energy (kWh)`}
.label=${this.hass.localize(
"ui.panel.config.energy.device_consumption.dialog.device_consumption_energy"
)}
entities-only
@value-changed=${this._statisticChanged}
></ha-statistic-picker>

10
src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
View File

@ -82,7 +82,7 @@ export class DialogEnergyGasSettings
.path=${mdiFire}
style="--mdc-icon-size: 32px;"
></ha-svg-icon>
Configure Gas consumption`}
${this.hass.localize("ui.panel.config.energy.gas.dialog.header")}`}
@closed=${this.closeDialog}
>
${this._error ? html`<p class="error">${this._error}</p>` : ""}
@ -95,9 +95,13 @@ export class DialogEnergyGasSettings
? ENERGY_GAS_ENERGY_UNITS
: ENERGY_GAS_VOLUME_UNITS}
.value=${this._source.stat_energy_from}
.label=${`Gas usage (${
.label=${`${this.hass.localize(
"ui.panel.config.energy.gas.dialog.gas_usage"
)} (${
this._params.unit === undefined
? "m³ or kWh"
? this.hass.localize(
"ui.panel.config.energy.gas.dialog.m3_or_kWh"
)
: this._params.unit === "energy"
? "kWh"
: "m³"

33
src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
View File

@ -72,7 +72,7 @@ export class DialogEnergySolarSettings
.path=${mdiSolarPower}
style="--mdc-icon-size: 32px;"
></ha-svg-icon>
Configure solar panels`}
${this.hass.localize("ui.panel.config.energy.solar.dialog.header")}`}
@closed=${this.closeDialog}
>
${this._error ? html`<p class="error">${this._error}</p>` : ""}
@ -82,18 +82,29 @@ export class DialogEnergySolarSettings
.includeUnitOfMeasurement=${energyUnits}
.includeDeviceClasses=${energyDeviceClasses}
.value=${this._source.stat_energy_from}
.label=${`Solar production energy (kWh)`}
.label=${this.hass.localize(
"ui.panel.config.energy.solar.dialog.solar_production_energy"
)}
entities-only
@value-changed=${this._statisticChanged}
></ha-statistic-picker>
<h3>Solar production forecast</h3>
<h3>
${this.hass.localize(
"ui.panel.config.energy.solar.dialog.solar_production_forecast"
)}
</h3>
<p>
Adding solar production forecast information will allow you to quickly
see your expected production for today.
${this.hass.localize(
"ui.panel.config.energy.solar.dialog.solar_production_forecast_description"
)}
</p>
<ha-formfield label="Don't forecast production">
<ha-formfield
label=${this.hass.localize(
"ui.panel.config.energy.solar.dialog.dont_forecast_production"
)}
>
<ha-radio
value="false"
name="forecast"
@ -101,7 +112,11 @@ export class DialogEnergySolarSettings
@change=${this._handleForecastChanged}
></ha-radio>
</ha-formfield>
<ha-formfield label="Forecast Production">
<ha-formfield
label=${this.hass.localize(
"ui.panel.config.energy.solar.dialog.forecast_production"
)}
>
<ha-radio
value="true"
name="forecast"
@ -138,7 +153,9 @@ export class DialogEnergySolarSettings
</ha-formfield>`
)}
<mwc-button @click=${this._addForecast}>
Add forecast
${this.hass.localize(
"ui.panel.config.energy.solar.dialog.add_forecast"
)}
</mwc-button>
</div>`
: ""}

3
src/panels/config/energy/ha-config-energy.ts
View File

@ -79,8 +79,7 @@ class HaConfigEnergy extends LitElement {
.tabs=${configSections.experiences}
>
<ha-alert>
After setting up a new device, it can take up to 2 hours for new data
to arrive in your energy dashboard.
${this.hass.localize("ui.panel.config.energy.new_device_info")}
</ha-alert>
<div class="container">
<ha-energy-grid-settings

16
src/panels/energy/strategies/energy-strategy.ts
View File

@ -63,7 +63,7 @@ export class EnergyStrategy {
// Only include if we have a grid source.
if (hasGrid) {
view.cards!.push({
title: "Energy usage",
title: hass.localize("ui.panel.energy.cards.energy_usage_graph_title"),
type: "energy-usage-graph",
collection_key: "energy_dashboard",
});
@ -72,7 +72,7 @@ export class EnergyStrategy {
// Only include if we have a solar source.
if (hasSolar) {
view.cards!.push({
title: "Solar production",
title: hass.localize("ui.panel.energy.cards.energy_solar_graph_title"),
type: "energy-solar-graph",
collection_key: "energy_dashboard",
});
@ -81,7 +81,7 @@ export class EnergyStrategy {
// Only include if we have a gas source.
if (hasGas) {
view.cards!.push({
title: "Gas consumption",
title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
type: "energy-gas-graph",
collection_key: "energy_dashboard",
});
@ -90,7 +90,7 @@ export class EnergyStrategy {
// Only include if we have a grid.
if (hasGrid) {
view.cards!.push({
title: "Energy distribution",
title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
type: "energy-distribution",
view_layout: { position: "sidebar" },
collection_key: "energy_dashboard",
@ -99,7 +99,9 @@ export class EnergyStrategy {
if (hasGrid || hasSolar) {
view.cards!.push({
title: "Sources",
title: hass.localize(
"ui.panel.energy.cards.energy_sources_table_title"
),
type: "energy-sources-table",
collection_key: "energy_dashboard",
});
@ -135,7 +137,9 @@ export class EnergyStrategy {
// Only include if we have at least 1 device in the config.
if (prefs.device_consumption.length) {
view.cards!.push({
title: "Monitor individual devices",
title: hass.localize(
"ui.panel.energy.cards.energy_devices_graph_title"
),
type: "energy-devices-graph",
collection_key: "energy_dashboard",
});

20
src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
View File

@ -59,7 +59,9 @@ class HuiEnergyCarbonGaugeCard
}
if (!this._data) {
return html`Loading...`;
return html`${this.hass.localize(
"ui.panel.lovelace.cards.energy.loading"
)}`;
}
if (!this._data.co2SignalEntity) {
@ -129,9 +131,9 @@ class HuiEnergyCarbonGaugeCard
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
<span>
This card indicates how much of the energy consumed by your
home was generated using non-fossil fuels like solar, wind and
nuclear. The higher, the better!
${this.hass.localize(
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
)}
</span>
</paper-tooltip>
<ha-gauge
@ -144,9 +146,15 @@ class HuiEnergyCarbonGaugeCard
"--gauge-color": this._computeSeverity(value),
})}
></ha-gauge>
<div class="name">Non-fossil energy consumed</div>
<div class="name">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.non_fossil_energy_consumed"
)}
</div>
`
: html`Consumed non-fossil energy couldn't be calculated`}
: html`${this.hass.localize(
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.non_fossil_energy_not_calculated"
)}`}
</ha-card>
`;
}

4
src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
View File

@ -170,7 +170,9 @@ export class HuiEnergyDevicesGraphCard
const datasets: ChartDataset<"bar", ParsedDataType<"bar">[]>[] = [
{
label: "Energy usage",
label: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_devices_graph.energy_usage"
),
borderColor,
backgroundColor,
data,

46
src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
View File

@ -70,7 +70,9 @@ class HuiEnergyDistrubutionCard
}
if (!this._data) {
return html`Loading…`;
return html`${this.hass.localize(
"ui.panel.lovelace.cards.energy.loading"
)}`;
}
const prefs = this._data.prefs;
@ -267,7 +269,11 @@ class HuiEnergyDistrubutionCard
${lowCarbonEnergy === undefined
? html`<div class="spacer"></div>`
: html`<div class="circle-container low-carbon">
<span class="label">Non-fossil</span>
<span class="label"
>${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.non_fossil"
)}</span
>
<a
class="circle"
href=${electricityMapUrl}
@ -288,7 +294,11 @@ class HuiEnergyDistrubutionCard
</div>`}
${hasSolarProduction
? html`<div class="circle-container solar">
<span class="label">Solar</span>
<span class="label"
>${this.hass.localize(
"ui.panel.lovelace.cards.energy.distribution.solar"
)}</span
>
<div class="circle">
<ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
${formatNumber(
@ -304,7 +314,11 @@ class HuiEnergyDistrubutionCard
: ""}
${hasGas
? html`<div class="circle-container gas">
<span class="label">Gas</span>
<span class="label"
>${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.gas"
)}</span
>
<div class="circle">
<ha-svg-icon .path=${mdiFire}></ha-svg-icon>
${formatNumber(gasUsage || 0, this.hass.locale, {
@ -362,7 +376,11 @@ class HuiEnergyDistrubutionCard
kWh
</span>
</div>
<span class="label">Grid</span>
<span class="label"
>${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.grid"
)}</span
>
</div>
<div class="circle-container home">
<div
@ -449,7 +467,11 @@ class HuiEnergyDistrubutionCard
</svg>`
: ""}
</div>
<span class="label">Home</span>
<span class="label"
>${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.home"
)}</span
>
</div>
</div>
${hasBattery
@ -479,7 +501,11 @@ class HuiEnergyDistrubutionCard
kWh</span
>
</div>
<span class="label">Battery</span>
<span class="label"
>${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.battery"
)}</span
>
</div>
<div class="spacer"></div>
</div>`
@ -659,7 +685,11 @@ class HuiEnergyDistrubutionCard
? html`
<div class="card-actions">
<a href="/energy"
><mwc-button> Go to the energy dashboard </mwc-button></a
><mwc-button>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard"
)}
</mwc-button></a
>
</div>
`

6
src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
View File

@ -110,8 +110,10 @@ export class HuiEnergyGasGraphCard
${!this._chartData.datasets.length
? html`<div class="no-data">
${isToday(this._start)
? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard."
: "There is no data for this period."}
? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
: this.hass.localize(
"ui.panel.lovelace.cards.energy.no_data_period"
)}
</div>`
: ""}
</div>

26
src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
View File

@ -61,7 +61,9 @@ class HuiEnergyGridGaugeCard
}
if (!this._data) {
return html`Loading...`;
return html`${this.hass.localize(
"ui.panel.lovelace.cards.energy.loading"
)}`;
}
const prefs = this._data.prefs;
@ -102,11 +104,13 @@ class HuiEnergyGridGaugeCard
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
<span>
This card represents your energy dependency.
${this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
)}
<br /><br />
If it's green, it means you produced more energy than that you
consumed from the grid. If it's in the red, it means that you
relied on the grid for part of your home's energy consumption.
${this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.red_green_color_explain"
)}
</span>
</paper-tooltip>
@ -126,11 +130,17 @@ class HuiEnergyGridGaugeCard
></ha-gauge>
<div class="name">
${returnedToGrid! >= consumedFromGrid!
? "Net returned to the grid"
: "Net consumed from the grid"}
? this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.net_returned_grid"
)
: this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.net_consumed_grid"
)}
</div>
`
: "Grid neutrality could not be calculated"}
: this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.grid_neutrality_not_calculated"
)}
</ha-card>
`;
}

30
src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
View File

@ -54,7 +54,9 @@ class HuiEnergySolarGaugeCard
}
if (!this._data) {
return html`Loading...`;
return html`${this.hass.localize(
"ui.panel.lovelace.cards.energy.loading"
)}`;
}
const prefs = this._data.prefs;
@ -91,13 +93,13 @@ class HuiEnergySolarGaugeCard
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
<span>
This card indicates how much of the solar energy you produced
was used by your home instead of being returned to the grid.
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
)}
<br /><br />
If this number is typically very low, indicating excess solar
production, you might want to consider charging a home battery
or electric car from your solar panels at times of high solar
production.
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
)}
</span>
</paper-tooltip>
<ha-gauge
@ -110,11 +112,19 @@ class HuiEnergySolarGaugeCard
"--gauge-color": this._computeSeverity(value),
})}
></ha-gauge>
<div class="name">Self-consumed solar energy</div>
<div class="name">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_energy"
)}
</div>
`
: totalSolarProduction === 0
? "You have not produced any solar energy"
: "Self-consumed solar energy couldn't be calculated"}
? this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.not_produced_solar_energy"
)
: this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_could_not_calc"
)}
</ha-card>
`;
}

26
src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
View File

@ -108,8 +108,10 @@ export class HuiEnergySolarGraphCard
${!this._chartData.datasets.length
? html`<div class="no-data">
${isToday(this._start)
? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard."
: "There is no data for this period."}
? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
: this.hass.localize(
"ui.panel.lovelace.cards.energy.no_data_period"
)}
</div>`
: ""}
</div>
@ -306,9 +308,12 @@ export class HuiEnergySolarGraphCard
if (solarProductionData.length) {
data.push({
label: `Production ${
entity ? computeStateName(entity) : source.stat_energy_from
}`,
label: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_solar_graph.production",
{
name: entity ? computeStateName(entity) : source.stat_energy_from,
}
),
borderColor,
backgroundColor: borderColor + "7F",
data: solarProductionData,
@ -361,9 +366,14 @@ export class HuiEnergySolarGraphCard
if (solarForecastData.length) {
data.push({
type: "line",
label: `Forecast ${
entity ? computeStateName(entity) : source.stat_energy_from
}`,
label: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_solar_graph.forecast",
{
name: entity
? computeStateName(entity)
: source.stat_energy_from,
}
),
fill: false,
stepped: false,
borderColor: computedStyles.getPropertyValue(

30
src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
View File

@ -69,7 +69,9 @@ export class HuiEnergySourcesTableCard
}
if (!this._data) {
return html`Loading...`;
return html`${this.hass.localize(
"ui.panel.lovelace.cards.energy.loading"
)}`;
}
let totalGrid = 0;
@ -134,14 +136,18 @@ export class HuiEnergySourcesTableCard
role="columnheader"
scope="col"
>
Source
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_sources_table.source"
)}
</th>
<th
class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric"
role="columnheader"
scope="col"
>
Energy
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_sources_table.energy"
)}
</th>
${showCosts
? html` <th
@ -149,7 +155,9 @@ export class HuiEnergySourcesTableCard
role="columnheader"
scope="col"
>
Cost
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_sources_table.cost"
)}
</th>`
: ""}
</tr>
@ -290,7 +298,9 @@ export class HuiEnergySourcesTableCard
? 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
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_sources_table.battery_total"
)}
</th>
<td
class="mdc-data-table__cell mdc-data-table__cell--numeric"
@ -423,7 +433,11 @@ export class HuiEnergySourcesTableCard
${types.grid
? html` <tr class="mdc-data-table__row total">
<td class="mdc-data-table__cell"></td>
<th class="mdc-data-table__cell" scope="row">Grid total</th>
<th class="mdc-data-table__cell" scope="row">
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_sources_table.grid_total"
)}
</th>
<td
class="mdc-data-table__cell mdc-data-table__cell--numeric"
>
@ -524,7 +538,9 @@ export class HuiEnergySourcesTableCard
? html`<tr class="mdc-data-table__row total">
<td class="mdc-data-table__cell"></td>
<th class="mdc-data-table__cell" scope="row">
Total costs
${this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_sources_table.total_costs"
)}
</th>
<td class="mdc-data-table__cell"></td>
<td

34
src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
View File

@ -98,8 +98,10 @@ export class HuiEnergyUsageGraphCard
${!this._chartData.datasets.some((dataset) => dataset.data.length)
? html`<div class="no-data">
${isToday(this._start)
? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard."
: "There is no data for this period."}
? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
: this.hass.localize(
"ui.panel.lovelace.cards.energy.no_data_period"
)}
</div>`
: ""}
</div>
@ -204,16 +206,16 @@ export class HuiEnergyUsageGraphCard
}
return [
totalConsumed
? `Total consumed: ${formatNumber(
totalConsumed,
locale
)} kWh`
? this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_usage_graph.total_consumed",
{ num: formatNumber(totalConsumed, locale) }
)
: "",
totalReturned
? `Total returned: ${formatNumber(
totalReturned,
locale
)} kWh`
? this.hass.localize(
"ui.panel.lovelace.cards.energyenergy_usage_graph.total_returned",
{ num: formatNumber(totalReturned, locale) }
)
: "",
].filter(Boolean);
},
@ -344,9 +346,15 @@ export class HuiEnergyUsageGraphCard
.trim(),
};
const labels = {
used_grid: "Combined from grid",
used_solar: "Consumed solar",
used_battery: "Consumed battery",
used_grid: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_usage_graph.combined_from_grid"
),
used_solar: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_usage_graph.consumed_solar"
),
used_battery: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_usage_graph.consumed_battery"
),
};
const backgroundColor = computedStyles

52
src/panels/lovelace/components/hui-energy-period-selector.ts
View File

@ -35,13 +35,6 @@ import "@material/mwc-button/mwc-button";
import "../../../components/ha-button-toggle-group";
import { toggleAttribute } from "../../../common/dom/toggle_attribute";
const viewButtons: ToggleButton[] = [
{ label: "Day", value: "day" },
{ label: "Week", value: "week" },
{ label: "Month", value: "month" },
{ label: "Year", value: "year" },
];
@customElement("hui-energy-period-selector")
export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -72,6 +65,33 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
return html``;
}
const viewButtons: ToggleButton[] = [
{
label: this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.day"
),
value: "day",
},
{
label: this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.week"
),
value: "week",
},
{
label: this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.month"
),
value: "month",
},
{
label: this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.year"
),
value: "year",
},
];
return html`
<div class="row">
<div class="label">
@ -88,14 +108,26 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
this._endDate || new Date(),
this.hass.locale
)}`}
<mwc-icon-button label="Previous" @click=${this._pickPrevious}>
<mwc-icon-button
.label=${this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.previous"
)}
@click=${this._pickPrevious}
>
<ha-svg-icon .path=${mdiChevronLeft}></ha-svg-icon>
</mwc-icon-button>
<mwc-icon-button label="Next" @click=${this._pickNext}>
<mwc-icon-button
.label=${this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.next"
)}
@click=${this._pickNext}
>
<ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
</mwc-icon-button>
<mwc-button dense outlined @click=${this._pickToday}>
Today
${this.hass.localize(
"ui.panel.lovelace.components.energy_period_selector.today"
)}
</mwc-button>
</div>
<div class="period">

113
src/translations/en.json
View File

@ -986,10 +986,19 @@
"energy": {
"caption": "Energy",
"description": "Monitor your energy production and consumption",
"new_device_info": "After setting up a new device, it can take up to 2 hours for new data to arrive in your energy dashboard.",
"delete_source": "Are you sure you want to delete this source?",
"delete_integration": "Are you sure you want to delete this integration? It will remove the entities it provides",
"grid": {
"title": "Electricity grid",
"sub": "Configure the amount of energy that you consume from the grid and, if you produce energy, give back to the grid. This allows Home Assistant to track your whole home energy usage.",
"learn_more": "More information on how to get started.",
"grid_consumption": "Grid consumption",
"add_consumption": "Add consumption",
"return_to_grid": "Return to grid",
"add_return": "Add return",
"grid_carbon_footprint": "Grid carbon footprint",
"add_co2_signal": "Add CO2 signal integration",
"flow_dialog": {
"from": {
"header": "Configure grid consumption",
@ -1025,19 +1034,39 @@
"title": "Solar Panels",
"sub": "Let Home Assistant monitor your solar panels and give you insight on their performance.",
"learn_more": "More information on how to get started.",
"solar_production": "Solar production",
"add_solar_production": "Add solar production",
"stat_production": "Your solar energy production",
"stat_return_to_grid": "Solar energy returned to the grid",
"stat_predicted_production": "Prediction of your solar energy production"
"stat_predicted_production": "Prediction of your solar energy production",
"dialog": {
"header": "Configure solar panels",
"solar_production_energy": "Solar production energy (kWh)",
"solar_production_forecast": "Solar production forecast",
"solar_production_forecast_description": "Adding solar production forecast information will allow you to quickly see your expected production for today.",
"dont_forecast_production": "Don't forecast production",
"forecast_production": "Forecast Production",
"add_forecast": "Add forecast"
}
},
"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."
"learn_more": "More information on how to get started.",
"battery_systems": "Battery systems",
"add_battery_system": "Add battery system",
"dialog": {
"header": "Configure battery system",
"energy_into_battery": "Energy going in to the battery (kWh)",
"energy_out_of_battery": "Energy coming out of the battery (kWh)"
}
},
"gas": {
"title": "Gas Consumption",
"sub": "Let Home Assistant monitor your gas usage.",
"learn_more": "More information on how to get started.",
"gas_consumption": "Gas consumption",
"add_gas_source": "Add gas source",
"dialog": {
"header": "Configure gas consumption",
"paragraph": "Gas consumption is the volume of gas that flows to your home.",
@ -1049,7 +1078,9 @@
"cost_entity": "Use an entity with current price",
"cost_entity_input": "Entity with the current price per {unit}",
"cost_number": "Use a static price",
"cost_number_input": "Price per {unit}"
"cost_number_input": "Price per {unit}",
"gas_usage": "Gas usage",
"m3_or_kWh": "m³ or kWh"
}
},
"device_consumption": {
@ -1058,7 +1089,11 @@
"learn_more": "More information on how to get started.",
"add_stat": "Pick entity to track energy of",
"selected_stat": "Tracking energy for",
"devices": "Devices",
"add_device": "Add device",
"dialog": {
"header": "Add a device",
"device_consumption_energy": "Device consumption energy (kWh)",
"selected_stat_intro": "Select the entity that represents the device energy usage."
}
},
@ -2928,6 +2963,61 @@
},
"starting": {
"description": "Home Assistant is starting, please wait…"
},
"energy": {
"loading": "Loading...",
"no_data": "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard.",
"no_data_period": "There is no data for this period.",
"energy_usage_graph": {
"total_consumed": "Total consumed {num} kWh",
"total_returned": "Total returned {num} kWh",
"combined_from_grid": "Combined from grid",
"consumed_solar": "Consumed solar",
"consumed_battery": "Consumed battery"
},
"energy_sources_table": {
"grid_total": "Grid total",
"source": "Source",
"energy": "Energy",
"cost": "Cost",
"battery_total": "Battery total",
"total_costs": "Total costs"
},
"energy_solar_graph": {
"production": "Production {name}",
"forecast": "Forecast {name}"
},
"solar_consumed_gauge": {
"card_indicates_solar_energy_used": "This card indicates how much of the solar energy you produced was used by your home instead of being returned to the grid.",
"card_indicates_solar_energy_used_charge_home_bat": "If this number is typically very low, indicating excess solar production, you might want to consider charging a home battery or electric car from your solar panels at times of high solar production.",
"self_consumed_solar_energy": "Self-consumed solar energy",
"not_produced_solar_energy": "You have not produced any solar energy",
"self_consumed_solar_could_not_calc": "Self-consumed solar energy couldn't be calculated"
},
"grid_neutrality_gauge": {
"energy_dependency": "This card represents your energy dependency.",
"red_green_color_explain": "If it's green, it means you produced more energy than that you consumed from the grid. If it's in the red, it means that you relied on the grid for part of your home's energy consumption.",
"net_returned_grid": "Net returned to the grid",
"net_consumed_grid": "Net consumed from the grid",
"grid_neutrality_not_calculated": "Grid neutrality could not be calculated"
},
"energy_distribution": {
"grid": "Grid",
"gas": "Gas",
"solar": "Solar",
"non_fossil": "Non-fossil",
"home": "Home",
"battery": "Battery",
"go_to_energy_dashboard": "Go to the energy dashboard"
},
"energy_devices_graph": {
"energy_usage": "Energy usage"
},
"carbon_consumed_gauge": {
"card_indicates_energy_used": "This card indicates how much of the energy consumed by your home was generated using non-fossil fuels like solar, wind and nuclear. The higher, the better!",
"non_fossil_energy_consumed": "Non-fossil energy consumed",
"non_fossil_energy_not_calculated": "Consumed non-fossil energy couldn't be calculated"
}
}
},
"unused_entities": {
@ -3362,6 +3452,15 @@
"timestamp-display": {
"invalid": "Invalid timestamp",
"invalid_format": "Invalid display format"
},
"energy_period_selector": {
"today": "Today",
"day": "Day",
"week": "Week",
"month": "Month",
"year": "Year",
"previous": "Previous",
"next": "Next"
}
},
"reload_lovelace": "Reload UI"
@ -3823,6 +3922,14 @@
"stat_house_energy_meter": "Total energy consumption",
"solar": "Solar",
"by_device": "Consumption by device"
},
"cards": {
"energy_usage_graph_title": "Energy usage",
"energy_solar_graph_title": "Solar production",
"energy_gas_graph_title": "Gas consumption",
"energy_distribution_title": "Energy distribution",
"energy_sources_table_title": "Sources",
"energy_devices_graph_title": "Monitor individual devices"
}
}
}