Create number formatting options on the profile panel

cast/src/receiver/layout/hc-lovelace.ts

@@ -39,7 +39,7 @@ class HcLovelace extends LitElement {
       urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
-      language: "en",
+      locale: this.hass.locale,
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,

src/common/datetime/format_date.ts

@@ -1,18 +1,19 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
 export const formatDate = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleDateString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleDateString(locales.language, {
         year: "numeric",
         month: "long",
         day: "numeric",
       })
   : (dateObj: Date) => format(dateObj, "longDate");
 
 export const formatDateWeekday = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleDateString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleDateString(locales.language, {
         weekday: "long",
         month: "short",
         day: "numeric",

src/common/datetime/format_date_time.ts

@@ -1,9 +1,10 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleStringSupportsOptions } from "./check_options_support";
 
 export const formatDateTime = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleString(locales.language, {
         year: "numeric",
         month: "long",
         day: "numeric",
@@ -13,8 +14,8 @@ export const formatDateTime = toLocaleStringSupportsOptions
   : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm");
 
 export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleString(locales.language, {
         year: "numeric",
         month: "long",
         day: "numeric",

src/common/datetime/format_time.ts

@@ -1,26 +1,27 @@
 import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
 import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 
 export const formatTime = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
         hour: "numeric",
         minute: "2-digit",
       })
   : (dateObj: Date) => format(dateObj, "shortTime");
 
 export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
         hour: "numeric",
         minute: "2-digit",
         second: "2-digit",
       })
   : (dateObj: Date) => format(dateObj, "mediumTime");
 
 export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: string) =>
-      dateObj.toLocaleTimeString(locales, {
+  ? (dateObj: Date, locales: FrontendTranslationData) =>
+      dateObj.toLocaleTimeString(locales.language, {
         weekday: "long",
         hour: "numeric",
         minute: "2-digit",

src/common/entity/compute_state_display.ts

@@ -1,5 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
+import { FrontendTranslationData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
@@ -10,7 +11,7 @@ import { computeStateDomain } from "./compute_state_domain";
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
-  language: string,
+  locale: FrontendTranslationData,
   state?: string
 ): string => {
   const compareState = state !== undefined ? state : stateObj.state;
@@ -20,7 +21,7 @@ export const computeStateDisplay = (
   }
 
   if (stateObj.attributes.unit_of_measurement) {
-    return `${formatNumber(compareState, language)} ${
+    return `${formatNumber(compareState, locale)} ${
       stateObj.attributes.unit_of_measurement
     }`;
   }
@@ -35,7 +36,7 @@ export const computeStateDisplay = (
         stateObj.attributes.month - 1,
         stateObj.attributes.day
       );
-      return formatDate(date, language);
+      return formatDate(date, locale);
     }
     if (!stateObj.attributes.has_date) {
       const now = new Date();
@@ -48,7 +49,7 @@ export const computeStateDisplay = (
         stateObj.attributes.hour,
         stateObj.attributes.minute
       );
-      return formatTime(date, language);
+      return formatTime(date, locale);
     }
 
     date = new Date(
@@ -58,7 +59,7 @@ export const computeStateDisplay = (
       stateObj.attributes.hour,
       stateObj.attributes.minute
     );
-    return formatDateTime(date, language);
+    return formatDateTime(date, locale);
   }
 
   if (domain === "humidifier") {
@@ -67,8 +68,9 @@ export const computeStateDisplay = (
     }
   }
 
-  if (domain === "counter") {
-    return formatNumber(compareState, language);
+  // `counter` and `number` domains do not have a unit of measurement but should still use `formatNumber`
+  if (domain === "counter" || domain === "number") {
+    return formatNumber(compareState, locale);
   }
 
   return (

src/common/string/format_number.ts

@@ -1,28 +1,64 @@
+import { FrontendTranslationData, NumberFormat } from "../../data/translation";
+
 /**
- * Formats a number based on the specified language with thousands separator(s) and decimal character for better legibility.
+ * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
  *
  * @param num The number to format
- * @param language The language to use when formatting the number
+ * @param locale The user-selected language and number format, from `hass.locale`
+ * @param options Intl.NumberFormatOptions to use
  */
 export const formatNumber = (
   num: string | number,
-  language: string,
+  locale?: FrontendTranslationData,
   options?: Intl.NumberFormatOptions
 ): string => {
+  let format: string | string[] | undefined;
+
+  switch (locale?.number_format) {
+    case NumberFormat.comma_decimal:
+      format = ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
+      break;
+    case NumberFormat.decimal_comma:
+      format = ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
+      break;
+    case NumberFormat.space_comma:
+      format = ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
+      break;
+    case NumberFormat.system:
+      format = undefined;
+      break;
+    default:
+      format = locale?.language;
+  }
+
   // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
   Number.isNaN =
     Number.isNaN ||
     function isNaN(input) {
       return typeof input === "number" && isNaN(input);
     };
 
-  if (!Number.isNaN(Number(num)) && Intl) {
-    return new Intl.NumberFormat(
-      language,
-      getDefaultFormatOptions(num, options)
-    ).format(Number(num));
+  if (
+    !Number.isNaN(Number(num)) &&
+    Intl &&
+    locale?.number_format !== NumberFormat.none
+  ) {
+    try {
+      return new Intl.NumberFormat(
+        format,
+        getDefaultFormatOptions(num, options)
+      ).format(Number(num));
+    } catch (error) {
+      // Don't fail when using "TEST" language
+      // eslint-disable-next-line no-console
+      console.error(error);
+      return new Intl.NumberFormat(
+        undefined,
+        getDefaultFormatOptions(num, options)
+      ).format(Number(num));
+    }
   }
-  return num.toString();
+  return num ? num.toString() : "";
 };
 
 /**

src/components/entity/ha-chart-base.js

@@ -371,7 +371,7 @@ class HaChartBase extends mixinBehaviors(
       return value;
     }
     const date = new Date(values[index].value);
-    return formatTime(date, this.hass.language);
+    return formatTime(date, this.hass.locale);
   }
 
   drawChart() {

src/components/entity/ha-state-label-badge.ts

@@ -116,12 +116,8 @@ export class HaStateLabelBadge extends LitElement {
           : state.state === UNKNOWN
           ? "-"
           : state.attributes.unit_of_measurement
-          ? formatNumber(state.state, this.hass!.language)
-          : computeStateDisplay(
-              this.hass!.localize,
-              state,
-              this.hass!.language
-            );
+          ? formatNumber(state.state, this.hass!.locale)
+          : computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
     }
   }
 

src/components/entity/state-info.ts

@@ -84,7 +84,7 @@ class StateInfo extends LitElement {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.language !== this.hass.language) {
+    if (!oldHass || oldHass.locale !== this.hass.locale) {
       this.rtl = computeRTL(this.hass);
     }
   }

src/components/ha-climate-state.ts

@@ -53,14 +53,14 @@ class HaClimateState extends LitElement {
     if (this.stateObj.attributes.current_temperature != null) {
       return `${formatNumber(
         this.stateObj.attributes.current_temperature,
-        this.hass!.language
+        this.hass.locale
       )} ${this.hass.config.unit_system.temperature}`;
     }
 
     if (this.stateObj.attributes.current_humidity != null) {
       return `${formatNumber(
         this.stateObj.attributes.current_humidity,
-        this.hass!.language
+        this.hass.locale
       )} %`;
     }
 
@@ -78,17 +78,17 @@ class HaClimateState extends LitElement {
     ) {
       return `${formatNumber(
         this.stateObj.attributes.target_temp_low,
-        this.hass!.language
+        this.hass.locale
       )}-${formatNumber(
         this.stateObj.attributes.target_temp_high,
-        this.hass!.language
+        this.hass.locale
       )} ${this.hass.config.unit_system.temperature}`;
     }
 
     if (this.stateObj.attributes.temperature != null) {
       return `${formatNumber(
         this.stateObj.attributes.temperature,
-        this.hass!.language
+        this.hass.locale
       )} ${this.hass.config.unit_system.temperature}`;
     }
     if (
@@ -97,17 +97,17 @@ class HaClimateState extends LitElement {
     ) {
       return `${formatNumber(
         this.stateObj.attributes.target_humidity_low,
-        this.hass!.language
+        this.hass.locale
       )}-${formatNumber(
         this.stateObj.attributes.target_humidity_high,
-        this.hass!.language
+        this.hass.locale
       )} %`;
     }
 
     if (this.stateObj.attributes.humidity != null) {
       return `${formatNumber(
         this.stateObj.attributes.humidity,
-        this.hass!.language
+        this.hass.locale
       )} %`;
     }
 

src/components/ha-date-range-picker.ts

@@ -43,7 +43,7 @@ export class HaDateRangePicker extends LitElement {
   protected updated(changedProps: PropertyValues) {
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.language !== this.hass.language) {
+      if (!oldHass || oldHass.locale !== this.hass.locale) {
         this._hour24format = this._compute24hourFormat();
         this._rtlDirection = computeRTLDirection(this.hass);
       }
@@ -62,7 +62,7 @@ export class HaDateRangePicker extends LitElement {
         <div slot="input" class="date-range-inputs">
           <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
           <paper-input
-            .value=${formatDateTime(this.startDate, this.hass.language)}
+            .value=${formatDateTime(this.startDate, this.hass.locale)}
             .label=${this.hass.localize(
               "ui.components.date-range-picker.start_date"
             )}
@@ -71,7 +71,7 @@ export class HaDateRangePicker extends LitElement {
             readonly
           ></paper-input>
           <paper-input
-            .value=${formatDateTime(this.endDate, this.hass.language)}
+            .value=${formatDateTime(this.endDate, this.hass.locale)}
             label=${this.hass.localize(
               "ui.components.date-range-picker.end_date"
             )}

src/components/ha-gauge.ts

@@ -11,6 +11,7 @@ import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
 import { formatNumber } from "../common/string/format_number";
 import { afterNextRender } from "../common/util/render-status";
+import { FrontendTranslationData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
 
 const getAngle = (value: number, min: number, max: number) => {
@@ -29,7 +30,7 @@ export class Gauge extends LitElement {
 
   @property({ type: Number }) public value = 0;
 
-  @property({ type: String }) public language = "";
+  @property() public locale!: FrontendTranslationData;
 
   @property() public label = "";
 
@@ -90,7 +91,7 @@ export class Gauge extends LitElement {
       </svg>
       <svg class="text">
         <text class="value-text">
-          ${formatNumber(this.value, this.language)} ${this.label}
+          ${formatNumber(this.value, this.locale)} ${this.label}
         </text>
       </svg>`;
   }

src/components/ha-sidebar.ts

@@ -245,7 +245,7 @@ class HaSidebar extends LitElement {
       hass.panelUrl !== oldHass.panelUrl ||
       hass.user !== oldHass.user ||
       hass.localize !== oldHass.localize ||
-      hass.language !== oldHass.language ||
+      hass.locale !== oldHass.locale ||
       hass.states !== oldHass.states ||
       hass.defaultPanel !== oldHass.defaultPanel
     );
@@ -281,7 +281,7 @@ class HaSidebar extends LitElement {
     }
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.language !== this.hass.language) {
+    if (!oldHass || oldHass.locale !== this.hass.locale) {
       this.rtl = computeRTL(this.hass);
     }