Fix missing translatable energy texts (#10230)

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

@@ -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;

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

@@ -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;

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

@@ -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;

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

@@ -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:
+        title: this.hass.localize("ui.panel.config.energy.delete_integration"),
-          "Are you sure you want to delete this integration? It will remove the entities it provides",
       }))
     ) {
       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;

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

@@ -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;

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

@@ -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>

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

@@ -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>

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

@@ -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³"

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

@@ -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
+          ${this.hass.localize(
-          see your expected production for today.
+            "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>`
           : ""}

src/panels/config/energy/ha-config-energy.ts

@@ -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
+          ${this.hass.localize("ui.panel.config.energy.new_device_info")}
-          to arrive in your energy dashboard.
         </ha-alert>
         <div class="container">
           <ha-energy-grid-settings

src/panels/energy/strategies/energy-strategy.ts

@@ -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",
       });

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

@@ -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
+                  ${this.hass.localize(
-                  home was generated using non-fossil fuels like solar, wind and
+                    "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
-                  nuclear. The higher, the better!
+                  )}
                 </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>
     `;
   }

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

@@ -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,

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

@@ -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>
             `

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

@@ -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."
+                  ? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
-                  : "There is no data for this period."}
+                  : this.hass.localize(
+                      "ui.panel.lovelace.cards.energy.no_data_period"
+                    )}
               </div>`
             : ""}
         </div>

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

@@ -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
+                  ${this.hass.localize(
-                  consumed from the grid. If it's in the red, it means that you
+                    "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.red_green_color_explain"
-                  relied on the grid for part of your home's energy consumption.
+                  )}
                 </span>
               </paper-tooltip>
 
@@ -126,11 +130,17 @@ class HuiEnergyGridGaugeCard
               ></ha-gauge>
               <div class="name">
                 ${returnedToGrid! >= consumedFromGrid!
-                  ? "Net returned to the grid"
+                  ? this.hass.localize(
-                  : "Net consumed from the grid"}
+                      "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>
     `;
   }

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

@@ -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
+                  ${this.hass.localize(
-                  was used by your home instead of being returned to the grid.
+                    "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
+                  ${this.hass.localize(
-                  production, you might want to consider charging a home battery
+                    "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
-                  or electric car from your solar panels at times of high solar
+                  )}
-                  production.
                 </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"
+          ? this.hass.localize(
-          : "Self-consumed solar energy couldn't be calculated"}
+              "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>
     `;
   }

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

@@ -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."
+                  ? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
-                  : "There is no data for this period."}
+                  : 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 ${
+          label: this.hass.localize(
-            entity ? computeStateName(entity) : source.stat_energy_from
+            "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 ${
+              label: this.hass.localize(
-                entity ? computeStateName(entity) : source.stat_energy_from
+                "ui.panel.lovelace.cards.energy.energy_solar_graph.forecast",
-              }`,
+                {
+                  name: entity
+                    ? computeStateName(entity)
+                    : source.stat_energy_from,
+                }
+              ),
               fill: false,
               stepped: false,
               borderColor: computedStyles.getPropertyValue(

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

@@ -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

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

@@ -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."
+                  ? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
-                  : "There is no data for this period."}
+                  : 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(
+                    ? this.hass.localize(
-                        totalConsumed,
+                        "ui.panel.lovelace.cards.energy.energy_usage_graph.total_consumed",
-                        locale
+                        { num: formatNumber(totalConsumed, locale) }
-                      )} kWh`
+                      )
                     : "",
                   totalReturned
-                    ? `Total returned: ${formatNumber(
+                    ? this.hass.localize(
-                        totalReturned,
+                        "ui.panel.lovelace.cards.energyenergy_usage_graph.total_returned",
-                        locale
+                        { num: formatNumber(totalReturned, locale) }
-                      )} kWh`
+                      )
                     : "",
                 ].filter(Boolean);
               },
@@ -344,9 +346,15 @@ export class HuiEnergyUsageGraphCard
         .trim(),
     };
     const labels = {
-      used_grid: "Combined from grid",
+      used_grid: this.hass.localize(
-      used_solar: "Consumed solar",
+        "ui.panel.lovelace.cards.energy.energy_usage_graph.combined_from_grid"
-      used_battery: "Consumed battery",
+      ),
+      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

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

@@ -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">

src/translations/en.json

@@ -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"
         }
       }
     }