Fix price units for gas (#13824)

src/components/ha-textfield.ts

@@ -82,6 +82,13 @@ export class HaTextField extends TextFieldBase {
         direction: var(--direction);
       }
 
+      .mdc-floating-label:not(.mdc-floating-label--float-above) {
+        text-overflow: ellipsis;
+        width: inherit;
+        padding-right: 30px;
+        box-sizing: border-box;
+      }
+
       input {
         text-align: var(--text-field-text-align, start);
       }

src/data/energy.ts

@@ -630,7 +630,7 @@ export const getEnergyGasUnitCategory = (
     const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
     if (statisticIdWithMeta) {
       return ENERGY_GAS_VOLUME_UNITS.includes(
-        statisticIdWithMeta.display_unit_of_measurement
+        statisticIdWithMeta.statistics_unit_of_measurement
       )
         ? "volume"
         : "energy";

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

@@ -36,7 +36,7 @@ export class EnergyBatterySettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -104,14 +104,14 @@ export class EnergyBatterySettings extends LitElement {
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_from,
-                      this.statsMetadata[source.stat_energy_from]
+                      this.statsMetadata?.[source.stat_energy_from]
                     )}</span
                   >
                   <span
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_to,
-                      this.statsMetadata[source.stat_energy_to]
+                      this.statsMetadata?.[source.stat_energy_to]
                     )}</span
                   >
                 </div>

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

@@ -35,7 +35,7 @@ export class EnergyDeviceSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -90,7 +90,7 @@ export class EnergyDeviceSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     device.stat_consumption,
-                    this.statsMetadata[device.stat_consumption]
+                    this.statsMetadata?.[device.stat_consumption]
                   )}</span
                 >
                 <ha-icon-button

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

@@ -36,7 +36,7 @@ export class EnergyGasSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -98,7 +98,7 @@ export class EnergyGasSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     source.stat_energy_from,
-                    this.statsMetadata[source.stat_energy_from]
+                    this.statsMetadata?.[source.stat_energy_from]
                   )}</span
                 >
                 <ha-icon-button
@@ -133,7 +133,10 @@ export class EnergyGasSettings extends LitElement {
 
   private _addSource() {
     showEnergySettingsGasDialog(this, {
-      unit: getEnergyGasUnitCategory(this.preferences, this.statsMetadata),
+      allowedGasUnitCategory: getEnergyGasUnitCategory(
+        this.preferences,
+        this.statsMetadata
+      ),
       saveCallback: async (source) => {
         delete source.unit_of_measurement;
         await this._savePreferences({
@@ -149,11 +152,12 @@ export class EnergyGasSettings extends LitElement {
       ev.currentTarget.closest(".row").source;
     showEnergySettingsGasDialog(this, {
       source: { ...origSource },
-      unit: getEnergyGasUnitCategory(
+      allowedGasUnitCategory: getEnergyGasUnitCategory(
         this.preferences,
         this.statsMetadata,
         origSource.stat_energy_from
       ),
+      metadata: this.statsMetadata?.[origSource.stat_energy_from],
       saveCallback: async (newSource) => {
         await this._savePreferences({
           ...this.preferences,

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

@@ -55,7 +55,7 @@ export class EnergyGridSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -136,7 +136,7 @@ export class EnergyGridSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     flow.stat_energy_from,
-                    this.statsMetadata[flow.stat_energy_from]
+                    this.statsMetadata?.[flow.stat_energy_from]
                   )}</span
                 >
                 <ha-icon-button
@@ -183,7 +183,7 @@ export class EnergyGridSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     flow.stat_energy_to,
-                    this.statsMetadata[flow.stat_energy_to]
+                    this.statsMetadata?.[flow.stat_energy_to]
                   )}</span
                 >
                 <ha-icon-button

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

@@ -36,7 +36,7 @@ export class EnergySolarSettings extends LitElement {
   public preferences!: EnergyPreferences;
 
   @property({ attribute: false })
-  public statsMetadata!: Record<string, StatisticsMetaData>;
+  public statsMetadata?: Record<string, StatisticsMetaData>;
 
   @property({ attribute: false })
   public validationResult?: EnergyPreferencesValidation;
@@ -106,7 +106,7 @@ export class EnergySolarSettings extends LitElement {
                   >${getStatisticLabel(
                     this.hass,
                     source.stat_energy_from,
-                    this.statsMetadata[source.stat_energy_from]
+                    this.statsMetadata?.[source.stat_energy_from]
                   )}</span
                 >
                 ${this.info

src/panels/config/energy/components/ha-energy-validation-result.ts

@@ -32,9 +32,7 @@ class EnergyValidationMessage extends LitElement {
           >
             ${this.hass.localize(
               `ui.panel.config.energy.validation.issues.${issueType}.description`,
-              issueType === "entity_unexpected_unit_price"
-                ? { currency: this.hass.config.currency }
-                : undefined
+              { currency: this.hass.config.currency }
             )}
             ${
               issueType === "recorder_untracked"

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

@@ -21,6 +21,7 @@ import "../../../../components/ha-radio";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-textfield";
 import type { HaRadio } from "../../../../components/ha-radio";
+import { getStatisticMetadata } from "../../../../data/recorder";
 
 @customElement("dialog-energy-gas-settings")
 export class DialogEnergyGasSettings
@@ -35,7 +36,9 @@ export class DialogEnergyGasSettings
 
   @state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
 
-  @state() private _unit?: string;
+  @state() private _pickableUnit?: string;
+
+  @state() private _pickedDisplayUnit?: string;
 
   @state() private _error?: string;
 
@@ -46,6 +49,7 @@ export class DialogEnergyGasSettings
     this._source = params.source
       ? { ...params.source }
       : emptyGasEnergyPreference();
+    this._pickedDisplayUnit = params.metadata?.display_unit_of_measurement;
     this._costs = this._source.entity_energy_price
       ? "entity"
       : this._source.number_energy_price
@@ -58,7 +62,8 @@ export class DialogEnergyGasSettings
   public closeDialog(): void {
     this._params = undefined;
     this._source = undefined;
-    this._unit = undefined;
+    this._pickableUnit = undefined;
+    this._pickedDisplayUnit = undefined;
     this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -68,13 +73,16 @@ export class DialogEnergyGasSettings
       return html``;
     }
 
-    const unit =
-      this._unit ||
-      (this._params.unit === undefined
-        ? "m³ or kWh"
-        : this._params.unit === "energy"
-        ? "kWh"
-        : "m³");
+    const pickableUnit =
+      this._pickableUnit ||
+      (this._params.allowedGasUnitCategory === undefined
+        ? "ft³, m³, Wh, kWh or MWh"
+        : this._params.allowedGasUnitCategory === "energy"
+        ? "Wh, kWh or MWh"
+        : "ft³ or m³");
+
+    const externalSource =
+      this._source.stat_cost && this._source.stat_cost.includes(":");
 
     return html`
       <ha-dialog
@@ -90,22 +98,21 @@ export class DialogEnergyGasSettings
 
         <ha-statistic-picker
           .hass=${this.hass}
-          .includeStatisticsUnitOfMeasurement=${this._params.unit === undefined
+          .includeStatisticsUnitOfMeasurement=${this._params
+            .allowedGasUnitCategory === undefined
             ? ENERGY_GAS_UNITS
-            : this._params.unit === "energy"
+            : this._params.allowedGasUnitCategory === "energy"
             ? ENERGY_GAS_ENERGY_UNITS
             : ENERGY_GAS_VOLUME_UNITS}
           .value=${this._source.stat_energy_from}
           .label=${`${this.hass.localize(
             "ui.panel.config.energy.gas.dialog.gas_usage"
           )} (${
-            this._params.unit === undefined
+            this._params.allowedGasUnitCategory === undefined
               ? this.hass.localize(
                   "ui.panel.config.energy.gas.dialog.m3_or_kWh"
                 )
-              : this._params.unit === "energy"
-              ? "kWh"
-              : "m³"
+              : pickableUnit
           })`}
           @value-changed=${this._statisticChanged}
           dialogInitialFocus
@@ -136,6 +143,7 @@ export class DialogEnergyGasSettings
             value="statistic"
             name="costs"
             .checked=${this._costs === "statistic"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
@@ -160,6 +168,7 @@ export class DialogEnergyGasSettings
             value="entity"
             name="costs"
             .checked=${this._costs === "entity"}
+            .disabled=${externalSource}
             @change=${this._handleCostChanged}
           ></ha-radio>
         </ha-formfield>
@@ -171,7 +180,7 @@ export class DialogEnergyGasSettings
               .value=${this._source.entity_energy_price}
               .label=${this.hass.localize(
                 `ui.panel.config.energy.gas.dialog.cost_entity_input`,
-                { unit }
+                { unit: this._pickedDisplayUnit || pickableUnit }
               )}
               @value-changed=${this._priceEntityChanged}
             ></ha-entity-picker>`
@@ -192,14 +201,16 @@ export class DialogEnergyGasSettings
           ? html`<ha-textfield
               .label=${this.hass.localize(
                 `ui.panel.config.energy.gas.dialog.cost_number_input`,
-                { unit }
+                { unit: this._pickedDisplayUnit || pickableUnit }
               )}
               class="price-options"
               step=".01"
               type="number"
               .value=${this._source.number_energy_price}
               @change=${this._numberPriceChanged}
-              .suffix=${`${this.hass.config.currency}/${unit}`}
+              .suffix=${`${this.hass.config.currency}/${
+                this._pickedDisplayUnit || pickableUnit
+              }`}
             >
             </ha-textfield>`
           : ""}
@@ -250,18 +261,21 @@ export class DialogEnergyGasSettings
     };
   }
 
-  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
+  private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
     if (ev.detail.value) {
       const entity = this.hass.states[ev.detail.value];
       if (entity?.attributes.unit_of_measurement) {
-        // Wh is normalized to kWh by stats generation
-        this._unit =
-          entity.attributes.unit_of_measurement === "Wh"
-            ? "kWh"
-            : entity.attributes.unit_of_measurement;
+        this._pickedDisplayUnit = entity.attributes.unit_of_measurement;
+      } else {
+        this._pickedDisplayUnit = (
+          await getStatisticMetadata(this.hass, [ev.detail.value])
+        )[0]?.display_unit_of_measurement;
       }
     } else {
-      this._unit = undefined;
+      this._pickedDisplayUnit = undefined;
+    }
+    if (ev.detail.value.includes(":") && this._costs !== "statistic") {
+      this._costs = "no-costs";
     }
     this._source = {
       ...this._source!,

src/panels/config/energy/dialogs/show-dialogs-energy.ts

@@ -9,6 +9,7 @@ import {
   GasSourceTypeEnergyPreference,
   SolarSourceTypeEnergyPreference,
 } from "../../../../data/energy";
+import { StatisticsMetaData } from "../../../../data/recorder";
 
 export interface EnergySettingsGridFlowDialogParams {
   source?:
@@ -45,7 +46,8 @@ export interface EnergySettingsBatteryDialogParams {
 
 export interface EnergySettingsGasDialogParams {
   source?: GasSourceTypeEnergyPreference;
-  unit?: EnergyGasUnit;
+  allowedGasUnitCategory?: EnergyGasUnit;
+  metadata?: StatisticsMetaData;
   saveCallback: (source: GasSourceTypeEnergyPreference) => Promise<void>;
 }
 

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

@@ -90,37 +90,37 @@ class HaConfigEnergy extends LitElement {
           <ha-energy-grid-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
-            .validationResult=${this._validationResult!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-grid-settings>
           <ha-energy-solar-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
-            .validationResult=${this._validationResult!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
             .info=${this._info}
             @value-changed=${this._prefsChanged}
           ></ha-energy-solar-settings>
           <ha-energy-battery-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
-            .validationResult=${this._validationResult!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-battery-settings>
           <ha-energy-gas-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
-            .validationResult=${this._validationResult!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-gas-settings>
           <ha-energy-device-settings
             .hass=${this.hass}
             .preferences=${this._preferences!}
-            .statsMetadata=${this._statsMetadata!}
-            .validationResult=${this._validationResult!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
         </div>