Add formatEntityStateToParts() + use it for hui-entity-card & ha-state-label-badge (#29239)

* add formatEntityStateToParts * add formatEntityStateToParts * use formatEntityStateToParts * add formatEntityStateToParts * use formatEntityStateToParts * add formatEntityStateToParts * add formatEntityStateToParts * add computeStateDisplayToParts * update for monetary * fix a test for monetary * fixed test for monetary * do not include "order" into result * do not include "order" into result * do not include "order" into result * do not include "order" into result * do not include "order" into result * do not include "order" into result * do not include "order" into result * simplify * ensure less conflicts in future merges * Refactor monetary computing --------- Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
2026-02-14 23:18:21 +00:00 · 2026-02-09 17:11:05 +03:00
parent aa13c6fa53
commit e6c9e81082
10 changed files with 221 additions and 92 deletions
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -3,13 +3,14 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, ValuePart } from "../../types";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { DURATION_UNITS, formatDuration } from "../datetime/format_duration";
 import { formatTime } from "../datetime/format_time";
 import {
  formatNumber,
+  formatNumberToParts,
  getNumberFormatOptions,
  isNumericFromAttributes,
 } from "../number/format_number";
@@ -51,8 +52,36 @@ export const computeStateDisplayFromEntityAttributes = (
  attributes: any,
  state: string
 ): string => {
+  const parts = computeStateToPartsFromEntityAttributes(
+    localize,
+    locale,
+    sensorNumericDeviceClasses,
+    config,
+    entity,
+    entityId,
+    attributes,
+    state
+  );
+  return parts.map((part) => part.value).join("");
+};
+
+const computeStateToPartsFromEntityAttributes = (
+  localize: LocalizeFunc,
+  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
+  config: HassConfig,
+  entity: EntityRegistryDisplayEntry | undefined,
+  entityId: string,
+  attributes: any,
+  state: string
+): ValuePart[] => {
  if (state === UNKNOWN || state === UNAVAILABLE) {
-    return localize(`state.default.${state}`);
+    return [
+      {
+        type: "value",
+        value: localize(`state.default.${state}`),
+      },
+    ];
  }

  const domain = computeDomain(entityId);
@@ -73,19 +102,27 @@ export const computeStateDisplayFromEntityAttributes = (
      DURATION_UNITS.includes(attributes.unit_of_measurement)
    ) {
      try {
-        return formatDuration(
-          locale,
-          state,
-          attributes.unit_of_measurement,
-          entity?.display_precision
-        );
+        return [
+          {
+            type: "value",
+            value: formatDuration(
+              locale,
+              state,
+              attributes.unit_of_measurement,
+              entity?.display_precision
+            ),
+          },
+        ];
      } catch (_err) {
        // fallback to default
      }
    }
+
+    // state is monetary
    if (attributes.device_class === "monetary") {
+      let parts: Record<string, string>[] = [];
      try {
-        return formatNumber(state, locale, {
+        parts = formatNumberToParts(state, locale, {
          style: "currency",
          currency: attributes.unit_of_measurement,
          minimumFractionDigits: 2,
@@ -98,8 +135,34 @@ export const computeStateDisplayFromEntityAttributes = (
      } catch (_err) {
        // fallback to default
      }
+
+      const TYPE_MAP: Record<string, ValuePart["type"]> = {
+        integer: "value",
+        group: "value",
+        decimal: "value",
+        fraction: "value",
+        literal: "literal",
+        currency: "unit",
+      };
+
+      const valueParts: ValuePart[] = [];
+
+      for (const part of parts) {
+        const type = TYPE_MAP[part.type];
+        if (!type) continue;
+        const last = valueParts[valueParts.length - 1];
+        // Merge consecutive numeric parts (e.g. "1" + "," + "234" + "." + "56" → "1,234.56")
+        if (type === "value" && last?.type === "value") {
+          last.value += part.value;
+        } else {
+          valueParts.push({ type, value: part.value });
+        }
+      }
+
+      return valueParts;
    }

+    // default processing of numeric values
    const value = formatNumber(
      state,
      locale,
@@ -114,10 +177,14 @@ export const computeStateDisplayFromEntityAttributes = (
      attributes.unit_of_measurement;

    if (unit) {
-      return `${value}${blankBeforeUnit(unit, locale)}${unit}`;
+      return [
+        { type: "value", value: value },
+        { type: "literal", value: blankBeforeUnit(unit, locale) },
+        { type: "unit", value: unit },
+      ];
    }

-    return value;
+    return [{ type: "value", value: value }];
  }

  if (["date", "input_datetime", "time"].includes(domain)) {
@@ -129,36 +196,51 @@ export const computeStateDisplayFromEntityAttributes = (
      const components = state.split(" ");
      if (components.length === 2) {
        // Date and time.
-        return formatDateTime(
-          new Date(components.join("T")),
-          { ...locale, time_zone: TimeZone.local },
-          config
-        );
+        return [
+          {
+            type: "value",
+            value: formatDateTime(
+              new Date(components.join("T")),
+              { ...locale, time_zone: TimeZone.local },
+              config
+            ),
+          },
+        ];
      }
      if (components.length === 1) {
        if (state.includes("-")) {
          // Date only.
-          return formatDate(
-            new Date(`${state}T00:00`),
-            { ...locale, time_zone: TimeZone.local },
-            config
-          );
+          return [
+            {
+              type: "value",
+              value: formatDate(
+                new Date(`${state}T00:00`),
+                { ...locale, time_zone: TimeZone.local },
+                config
+              ),
+            },
+          ];
        }
        if (state.includes(":")) {
          // Time only.
          const now = new Date();
-          return formatTime(
-            new Date(`${now.toISOString().split("T")[0]}T${state}`),
-            { ...locale, time_zone: TimeZone.local },
-            config
-          );
+          return [
+            {
+              type: "value",
+              value: formatTime(
+                new Date(`${now.toISOString().split("T")[0]}T${state}`),
+                { ...locale, time_zone: TimeZone.local },
+                config
+              ),
+            },
+          ];
        }
      }
-      return state;
+      return [{ type: "value", value: state }];
    } catch (_e) {
      // Formatting methods may throw error if date parsing doesn't go well,
      // just return the state string in that case.
-      return state;
+      return [{ type: "value", value: state }];
    }
  }

@@ -182,25 +264,58 @@ export const computeStateDisplayFromEntityAttributes = (
    (domain === "sensor" && attributes.device_class === "timestamp")
  ) {
    try {
-      return formatDateTime(new Date(state), locale, config);
+      return [
+        {
+          type: "value",
+          value: formatDateTime(new Date(state), locale, config),
+        },
+      ];
    } catch (_err) {
-      return state;
+      return [{ type: "value", value: state }];
    }
  }

-  return (
-    (entity?.translation_key &&
-      localize(
-        `component.${entity.platform}.entity.${domain}.${entity.translation_key}.state.${state}`
-      )) ||
-    // Return device class translation
-    (attributes.device_class &&
-      localize(
-        `component.${domain}.entity_component.${attributes.device_class}.state.${state}`
-      )) ||
-    // Return default translation
-    localize(`component.${domain}.entity_component._.state.${state}`) ||
-    // We don't know! Return the raw state.
-    state
+  return [
+    {
+      type: "value",
+      value:
+        (entity?.translation_key &&
+          localize(
+            `component.${entity.platform}.entity.${domain}.${entity.translation_key}.state.${state}`
+          )) ||
+        // Return device class translation
+        (attributes.device_class &&
+          localize(
+            `component.${domain}.entity_component.${attributes.device_class}.state.${state}`
+          )) ||
+        // Return default translation
+        localize(`component.${domain}.entity_component._.state.${state}`) ||
+        // We don't know! Return the raw state.
+        state,
+    },
+  ];
+};
+
+export const computeStateToParts = (
+  localize: LocalizeFunc,
+  stateObj: HassEntity,
+  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
+  config: HassConfig,
+  entities: HomeAssistant["entities"],
+  state?: string
+): ValuePart[] => {
+  const entity = entities?.[stateObj.entity_id] as
+    | EntityRegistryDisplayEntry
+    | undefined;
+  return computeStateToPartsFromEntityAttributes(
+    localize,
+    locale,
+    sensorNumericDeviceClasses,
+    config,
+    entity,
+    stateObj.entity_id,
+    stateObj.attributes,
+    state !== undefined ? state : stateObj.state
  );
 };
--- a/src/common/number/format_number.ts
+++ b/src/common/number/format_number.ts
@@ -5,7 +5,6 @@ import type {
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { NumberFormat } from "../../data/translation";
-import { round } from "./round";

 /**
 * Returns true if the entity is considered numeric based on the attributes it has
@@ -52,7 +51,22 @@ export const formatNumber = (
  num: string | number,
  localeOptions?: FrontendLocaleData,
  options?: Intl.NumberFormatOptions
-): string => {
+): string =>
+  formatNumberToParts(num, localeOptions, options)
+    .map((part) => part.value)
+    .join("");
+
+/**
+ * Returns an array of objects containing the formatted number in parts
+ * Similar to Intl.NumberFormat.prototype.formatToParts()
+ *
+ * Input params - same as for formatNumber()
+ */
+export const formatNumberToParts = (
+  num: string | number,
+  localeOptions?: FrontendLocaleData,
+  options?: Intl.NumberFormatOptions
+): any[] => {
  const locale = localeOptions
    ? numberFormatToLocale(localeOptions)
    : undefined;
@@ -71,7 +85,7 @@ export const formatNumber = (
    return new Intl.NumberFormat(
      locale,
      getDefaultFormatOptions(num, options)
-    ).format(Number(num));
+    ).formatToParts(Number(num));
  }

  if (
@@ -86,15 +100,10 @@ export const formatNumber = (
        ...options,
        useGrouping: false,
      })
-    ).format(Number(num));
+    ).formatToParts(Number(num));
  }

-  if (typeof num === "string") {
-    return num;
-  }
-  return `${round(num, options?.maximumFractionDigits).toString()}${
-    options?.style === "currency" ? ` ${options.currency}` : ""
-  }`;
+  return [{ type: "literal", value: num }];
 };

 /**
--- a/src/common/translations/entity-state.ts
+++ b/src/common/translations/entity-state.ts
@@ -12,6 +12,10 @@ export type FormatEntityStateFunc = (
  stateObj: HassEntity,
  state?: string
 ) => string;
+export type FormatEntityStateToPartsFunc = (
+  stateObj: HassEntity,
+  state?: string
+) => ValuePart[];
 export type FormatEntityAttributeValueFunc = (
  stateObj: HassEntity,
  attribute: string,
@@ -46,12 +50,13 @@ export const computeFormatFunctions = async (
  sensorNumericDeviceClasses: string[]
 ): Promise<{
  formatEntityState: FormatEntityStateFunc;
+  formatEntityStateToParts: FormatEntityStateToPartsFunc;
  formatEntityAttributeValue: FormatEntityAttributeValueFunc;
  formatEntityAttributeValueToParts: FormatEntityAttributeValueToPartsFunc;
  formatEntityAttributeName: FormatEntityAttributeNameFunc;
  formatEntityName: FormatEntityNameFunc;
 }> => {
-  const { computeStateDisplay } =
+  const { computeStateDisplay, computeStateToParts } =
    await import("../entity/compute_state_display");
  const {
    computeAttributeValueDisplay,
@@ -70,6 +75,16 @@ export const computeFormatFunctions = async (
        entities,
        state
      ),
+    formatEntityStateToParts: (stateObj, state) =>
+      computeStateToParts(
+        localize,
+        stateObj,
+        locale,
+        sensorNumericDeviceClasses,
+        config,
+        entities,
+        state
+      ),
    formatEntityAttributeValue: (stateObj, attribute, value) =>
      computeAttributeValueDisplay(
        localize,
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -9,16 +9,7 @@ import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
-import {
-  formatNumber,
-  getNumberFormatOptions,
-  isNumericState,
-} from "../../common/number/format_number";
-import {
-  isUnavailableState,
-  UNAVAILABLE,
-  UNKNOWN,
-} from "../../data/entity/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../data/entity/entity";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { timerTimeRemaining } from "../../data/timer";
 import type { HomeAssistant } from "../../types";
@@ -180,16 +171,11 @@ export class HaStateLabelBadge extends LitElement {
        }
      // eslint-disable-next-line: disable=no-fallthrough
      default:
-        return entityState.state === UNKNOWN ||
-          entityState.state === UNAVAILABLE
+        return isUnavailableState(entityState.state)
          ? "—"
-          : isNumericState(entityState)
-            ? formatNumber(
-                entityState.state,
-                this.hass!.locale,
-                getNumberFormatOptions(entityState, entry)
-              )
-            : this.hass!.formatEntityState(entityState);
+          : this.hass!.formatEntityStateToParts(entityState).find(
+              (part) => part.type === "value"
+            )?.value;
    }
  }

--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -52,6 +52,7 @@ export interface MockHomeAssistant extends HomeAssistant {
  mockEvent(event);
  mockTheme(theme: Record<string, string> | null);
  formatEntityState(stateObj: HassEntity, state?: string): string;
+  formatEntityStateToParts(stateObj: HassEntity, state?: string): ValuePart[];
  formatEntityAttributeValue(
    stateObj: HassEntity,
    attribute: string,
@@ -117,6 +118,7 @@ export const provideHass = (
  async function updateFormatFunctions() {
    const {
      formatEntityState,
+      formatEntityStateToParts,
      formatEntityAttributeName,
      formatEntityAttributeValue,
      formatEntityAttributeValueToParts,
@@ -133,6 +135,7 @@ export const provideHass = (
    );
    hass().updateHass({
      formatEntityState,
+      formatEntityStateToParts,
      formatEntityAttributeName,
      formatEntityAttributeValue,
      formatEntityAttributeValueToParts,
@@ -375,6 +378,12 @@ export const provideHass = (
    floors: {},
    formatEntityState: (stateObj, state) =>
      (state !== null ? state : stateObj.state) ?? "",
+    formatEntityStateToParts: (stateObj, state) => [
+      {
+        type: "value",
+        value: (state !== null ? state : stateObj.state) ?? "",
+      },
+    ],
    formatEntityAttributeName: (_stateObj, attribute) => attribute,
    formatEntityAttributeValue: (stateObj, attribute, value) =>
      value !== null ? value : (stateObj.attributes[attribute] ?? ""),
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -13,11 +13,6 @@ import {
  stateColorCss,
 } from "../../../common/entity/state_color";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
-import {
-  formatNumber,
-  getNumberFormatOptions,
-  isNumericState,
-} from "../../../common/number/format_number";
 import { iconColorCSS } from "../../../common/style/icon_color_css";
 import "../../../components/ha-attribute-value";
 import "../../../components/ha-card";
@@ -125,6 +120,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
    }

    const domain = computeStateDomain(stateObj);
+    const stateParts = this.hass.formatEntityStateToParts(stateObj);

    let unit;
    if (
@@ -205,17 +201,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
                  >
                  </ha-attribute-value>`
                : this.hass.localize("state.default.unknown")
-              : (isNumericState(stateObj) || this._config.unit) &&
-                  stateObj.attributes.device_class !== "duration"
-                ? formatNumber(
-                    stateObj.state,
-                    this.hass.locale,
-                    getNumberFormatOptions(
-                      stateObj,
-                      this.hass.entities[this._config.entity]
-                    )
-                  )
-                : this.hass.formatEntityState(stateObj)}</span
+              : stateParts.find((part) => part.type === "value")?.value}</span
          >
          ${unit ? html`<span class="measurement">${unit}</span>` : nothing}
        </div>
--- a/src/state/connection-mixin.ts
+++ b/src/state/connection-mixin.ts
@@ -209,6 +209,12 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
          this._loadFragmentTranslations(this.hass?.language, fragment),
        formatEntityState: (stateObj, state) =>
          (state != null ? state : stateObj.state) ?? "",
+        formatEntityStateToParts: (stateObj, state) => [
+          {
+            type: "value",
+            value: (state != null ? state : stateObj.state) ?? "",
+          },
+        ],
        formatEntityAttributeName: (_stateObj, attribute) => attribute,
        formatEntityAttributeValue: (stateObj, attribute, value) =>
          value != null ? value : (stateObj.attributes[attribute] ?? ""),
--- a/src/state/state-display-mixin.ts
+++ b/src/state/state-display-mixin.ts
@@ -53,6 +53,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) => {

      const {
        formatEntityState,
+        formatEntityStateToParts,
        formatEntityAttributeName,
        formatEntityAttributeValue,
        formatEntityAttributeValueToParts,
@@ -69,6 +70,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) => {
      );
      this._updateHass({
        formatEntityState,
+        formatEntityStateToParts,
        formatEntityAttributeName,
        formatEntityAttributeValue,
        formatEntityAttributeValueToParts,
--- a/src/types.ts
+++ b/src/types.ts
@@ -292,6 +292,7 @@ export interface HomeAssistant {
  ): Promise<LocalizeFunc>;
  loadFragmentTranslation(fragment: string): Promise<LocalizeFunc | undefined>;
  formatEntityState(stateObj: HassEntity, state?: string): string;
+  formatEntityStateToParts(stateObj: HassEntity, state?: string): ValuePart[];
  formatEntityAttributeValue(
    stateObj: HassEntity,
    attribute: string,
--- a/test/common/entity/compute_state_display.test.ts
+++ b/test/common/entity/compute_state_display.test.ts
@@ -678,11 +678,11 @@ describe("computeStateDisplayFromEntityAttributes with numeric device classes",
      "number.test",
      {
        device_class: "monetary",
-        unit_of_measurement: "$",
+        unit_of_measurement: "USD",
      },
      "12"
    );
-    expect(result).toBe("12 $");
+    expect(result).toBe("$12.00");
  });
 });