From feecaff154809fc6e1c05c310eb48273fb8ef86f Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Fri, 20 Nov 2020 18:14:21 -0700 Subject: [PATCH 01/17] Make file and func names consistent with date format files and funcs --- src/common/entity/compute_state_display.ts | 4 ++-- src/common/string/{number-format.ts => format_number.ts} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename src/common/string/{number-format.ts => format_number.ts} (95%) diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts index d588cd168828..7a2bf77f2ae6 100644 --- a/src/common/entity/compute_state_display.ts +++ b/src/common/entity/compute_state_display.ts @@ -5,7 +5,7 @@ import { formatDateTime } from "../datetime/format_date_time"; import { formatTime } from "../datetime/format_time"; import { LocalizeFunc } from "../translations/localize"; import { computeStateDomain } from "./compute_state_domain"; -import { numberFormat } from "../string/number-format"; +import { formatNumber } from "../string/format_number"; export const computeStateDisplay = ( localize: LocalizeFunc, @@ -20,7 +20,7 @@ export const computeStateDisplay = ( } if (stateObj.attributes.unit_of_measurement) { - return `${numberFormat(compareState, language)} ${ + return `${formatNumber(compareState, language)} ${ stateObj.attributes.unit_of_measurement }`; } diff --git a/src/common/string/number-format.ts b/src/common/string/format_number.ts similarity index 95% rename from src/common/string/number-format.ts rename to src/common/string/format_number.ts index 39d20e47a598..fe2a820113f5 100644 --- a/src/common/string/number-format.ts +++ b/src/common/string/format_number.ts @@ -4,7 +4,7 @@ * @param num The number to format * @param language The language to use when formatting the number */ -export const numberFormat = ( +export const formatNumber = ( num: string | number, language: string ): string => { From fe66d8e5f513ac3e40cdc3e468a5ee39ee0ed734 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Fri, 20 Nov 2020 18:20:38 -0700 Subject: [PATCH 02/17] Add number formatting in badges for sensors with units of measurement. --- src/components/entity/ha-state-label-badge.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts index 61d68fc1c10e..11a4761a2c70 100644 --- a/src/components/entity/ha-state-label-badge.ts +++ b/src/components/entity/ha-state-label-badge.ts @@ -21,6 +21,7 @@ import { timerTimeRemaining } from "../../common/entity/timer_time_remaining"; import { HomeAssistant } from "../../types"; import "../ha-label-badge"; import { UNAVAILABLE, UNKNOWN } from "../../data/entity"; +import { formatNumber } from "../../common/string/format_number"; @customElement("ha-state-label-badge") export class HaStateLabelBadge extends LitElement { @@ -115,7 +116,7 @@ export class HaStateLabelBadge extends LitElement { : state.state === UNKNOWN ? "-" : state.attributes.unit_of_measurement - ? state.state + ? formatNumber(state.state, this.hass!.language) : computeStateDisplay( this.hass!.localize, state, From 56821f49f9df865a1da1bfef9865a2def2bb52d8 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 08:00:03 -0700 Subject: [PATCH 03/17] Add number formatting to entity card --- src/panels/lovelace/cards/hui-entity-card.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index 7a4b2348bb95..7c581429b101 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -31,6 +31,7 @@ import { import { HuiErrorCard } from "./hui-error-card"; import { EntityCardConfig } from "./types"; import { computeCardSize } from "../common/compute-card-size"; +import { formatNumber } from "../../../common/string/format_number"; @customElement("hui-entity-card") export class HuiEntityCard extends LitElement implements LovelaceCard { @@ -127,7 +128,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { ? stateObj.attributes[this._config.attribute!] ?? this.hass.localize("state.default.unknown") : stateObj.attributes.unit_of_measurement - ? stateObj.state + ? formatNumber(stateObj.state, this.hass!.language) : computeStateDisplay( this.hass.localize, stateObj, From e29b4f35ac551377739210e921fca0661a488a8c Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 09:40:01 -0700 Subject: [PATCH 04/17] Add number formatting to weather card --- src/data/weather.ts | 12 ++++++--- .../cards/hui-weather-forecast-card.ts | 27 +++++++++++++------ 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/data/weather.ts b/src/data/weather.ts index 16333d2d1ef8..46b99a976dae 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -7,6 +7,7 @@ import { } from "@mdi/js"; import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit-element"; import { styleMap } from "lit-html/directives/style-map"; +import { formatNumber } from "../common/string/format_number"; import "../components/ha-icon"; import "../components/ha-svg-icon"; import type { HomeAssistant, WeatherEntity } from "../types"; @@ -106,15 +107,19 @@ export const getWind = ( speed: string, bearing: string ): string => { + const speedText = `${formatNumber(speed, hass!.language)} ${getWeatherUnit( + hass!, + "wind_speed" + )}`; if (bearing !== null) { const cardinalDirection = getWindBearing(bearing); - return `${speed} ${getWeatherUnit(hass!, "wind_speed")} (${ + return `${speedText} (${ hass.localize( `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}` ) || cardinalDirection })`; } - return `${speed} ${getWeatherUnit(hass!, "wind_speed")}`; + return speedText; }; export const getWeatherUnit = ( @@ -175,7 +180,8 @@ export const getSecondaryWeatherAttribute = ( ` : hass!.localize(`ui.card.weather.attributes.${attribute}`)} - ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)} + ${formatNumber(roundWithOneDecimal(value), hass!.language)} + ${getWeatherUnit(hass!, attribute)} `; }; diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 36c4bd8d1b0a..96d0a65744cc 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -15,6 +15,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa import { computeStateName } from "../../../common/entity/compute_state_name"; import { stateIcon } from "../../../common/entity/state_icon"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; +import { formatNumber } from "../../../common/string/format_number"; import { debounce } from "../../../common/util/debounce"; import "../../../components/ha-card"; import "../../../components/ha-icon"; @@ -216,9 +217,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
- ${stateObj.attributes.temperature}${getWeatherUnit(this.hass, "temperature")} + ${formatNumber( + stateObj.attributes.temperature, + this.hass!.language + )}${getWeatherUnit(this.hass, "temperature")}
${this._config.secondary_info_attribute !== undefined @@ -243,9 +245,12 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { stateObj.attributes.wind_bearing ) : html` - ${stateObj.attributes[ - this._config.secondary_info_attribute - ]} + ${formatNumber( + stateObj.attributes[ + this._config.secondary_info_attribute + ], + this.hass!.language + )} ${getWeatherUnit( this.hass, this._config.secondary_info_attribute @@ -309,14 +314,20 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { item.temperature !== null ? html`
- ${item.temperature}° + ${formatNumber( + item.temperature, + this.hass!.language + )}°
` : ""} ${item.templow !== undefined && item.templow !== null ? html`
- ${item.templow}° + ${formatNumber( + item.templow, + this.hass!.language + )}°
` : ""} From bdfc3e9ee8c46952ceed270b4c229a4ea87b3087 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 09:51:40 -0700 Subject: [PATCH 05/17] Add number formatting to weather more info dialog --- .../more-info/controls/more-info-weather.ts | 28 +++++++++++++++---- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 7e962071a526..4d3c38ca908d 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -34,6 +34,7 @@ import { mdiWeatherWindy, mdiWeatherWindyVariant, } from "@mdi/js"; +import { formatNumber } from "../../../common/string/format_number"; const weatherIcons = { "clear-night": mdiWeatherNight, @@ -88,7 +89,10 @@ class MoreInfoWeather extends LitElement { ${this.hass.localize("ui.card.weather.attributes.temperature")}
- ${this.stateObj.attributes.temperature} + ${formatNumber( + this.stateObj.attributes.temperature, + this.hass!.language + )} ${getWeatherUnit(this.hass, "temperature")}
@@ -100,7 +104,10 @@ class MoreInfoWeather extends LitElement { ${this.hass.localize("ui.card.weather.attributes.air_pressure")}
- ${this.stateObj.attributes.pressure} + ${formatNumber( + this.stateObj.attributes.pressure, + this.hass!.language + )} ${getWeatherUnit(this.hass, "air_pressure")}
@@ -113,7 +120,13 @@ class MoreInfoWeather extends LitElement {
${this.hass.localize("ui.card.weather.attributes.humidity")}
-
${this.stateObj.attributes.humidity} %
+
+ ${formatNumber( + this.stateObj.attributes.humidity, + this.hass!.language + )} + % +
` : ""} @@ -142,7 +155,10 @@ class MoreInfoWeather extends LitElement { ${this.hass.localize("ui.card.weather.attributes.visibility")}
- ${this.stateObj.attributes.visibility} + ${formatNumber( + this.stateObj.attributes.visibility, + this.hass!.language + )} ${getWeatherUnit(this.hass, "length")}
@@ -176,13 +192,13 @@ class MoreInfoWeather extends LitElement { ${this.computeDate(item.datetime)}
- ${item.templow} + ${formatNumber(item.templow, this.hass!.language)} ${getWeatherUnit(this.hass, "temperature")}
` : ""}
- ${item.temperature} + ${formatNumber(item.temperature, this.hass!.language)} ${getWeatherUnit(this.hass, "temperature")}
From 033621d031789fc9a496af2a1854e5a0794e0d68 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 10:02:36 -0700 Subject: [PATCH 06/17] Add number formatting to gauge card --- src/components/ha-gauge.ts | 4 +++- src/panels/lovelace/cards/hui-gauge-card.ts | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts index 5e1adbf35111..f082206700d0 100644 --- a/src/components/ha-gauge.ts +++ b/src/components/ha-gauge.ts @@ -29,6 +29,8 @@ export class Gauge extends LitElement { @property({ type: Number }) public value = 0; + @property({ type: String }) public valueFormatted = this.value.toString(); + @property() public label = ""; @internalProperty() private _angle = 0; @@ -88,7 +90,7 @@ export class Gauge extends LitElement { - ${this.value} ${this.label} + ${this.valueFormatted} ${this.label} `; } diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index c6ce2aa3792f..4c33983125e7 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -15,6 +15,7 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; +import { formatNumber } from "../../../common/string/format_number"; import "../../../components/ha-card"; import "../../../components/ha-gauge"; import type { HomeAssistant } from "../../../types"; @@ -116,6 +117,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { .min=${this._config.min!} .max=${this._config.max!} .value=${state} + .valueFormatted=${formatNumber(state, this.hass!.language)} .label=${this._config!.unit || this.hass?.states[this._config!.entity].attributes .unit_of_measurement || From 921a13e0360ccd27ad44daa698261ddaffb769ea Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 10:57:36 -0700 Subject: [PATCH 07/17] Enable passing Intl.NumberFormatOptions to formatNumber function --- src/common/string/format_number.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/common/string/format_number.ts b/src/common/string/format_number.ts index fe2a820113f5..0a49d7aa1928 100644 --- a/src/common/string/format_number.ts +++ b/src/common/string/format_number.ts @@ -6,7 +6,8 @@ */ export const formatNumber = ( num: string | number, - language: string + language: string, + options?: Intl.NumberFormatOptions ): string => { // Polyfill for Number.isNaN, which is more reliable that the global isNaN() Number.isNaN = @@ -16,7 +17,7 @@ export const formatNumber = ( }; if (!Number.isNaN(Number(num)) && Intl) { - return new Intl.NumberFormat(language).format(Number(num)); + return new Intl.NumberFormat(language, options).format(Number(num)); } return num.toString(); }; From ee6daa3d9a19e75a5125fe4c8363c942d200187e Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 11:00:45 -0700 Subject: [PATCH 08/17] Add number formatting to thermostat card --- .../lovelace/cards/hui-thermostat-card.ts | 48 ++++++++++++++++--- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index 19e1ca9e9505..b5c895011601 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -19,6 +19,7 @@ import { UNIT_F } from "../../../common/const"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; +import { formatNumber } from "../../../common/string/format_number"; import "../../../components/ha-card"; import type { HaCard } from "../../../components/ha-card"; import "../../../components/ha-icon-button"; @@ -143,7 +144,10 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { text-anchor="middle" style="font-size: 13px;" > - ${stateObj.attributes.current_temperature} + ${formatNumber( + stateObj.attributes.current_temperature, + this.hass!.language + )} ${this.hass.config.unit_system.temperature} @@ -164,19 +168,49 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { : Array.isArray(this._setTemp) ? this._stepSize === 1 ? svg` - ${this._setTemp[0].toFixed()} - - ${this._setTemp[1].toFixed()} + ${formatNumber( + this._setTemp[0].toFixed(), + this.hass!.language + )} - + ${formatNumber( + this._setTemp[1].toFixed(), + this.hass!.language + )} ` : svg` - ${this._setTemp[0].toFixed(1)} - - ${this._setTemp[1].toFixed(1)} + ${formatNumber( + this._setTemp[0].toFixed(1), + this.hass!.language, + { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + } + )} - + ${formatNumber( + this._setTemp[1].toFixed(1), + this.hass!.language, + { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + } + )} ` : this._stepSize === 1 ? svg` - ${this._setTemp.toFixed()} + ${formatNumber( + this._setTemp.toFixed(), + this.hass!.language + )} ` : svg` - ${this._setTemp.toFixed(1)} + ${formatNumber( + this._setTemp.toFixed(1), + this.hass!.language, + { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + } + )} ` } From 74eff87552827973fcf47bb229f6d91d5a76d31f Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 13:16:25 -0700 Subject: [PATCH 09/17] Keep trailing zeros in decimals in formatNumber This can be helpful if a sensor stores the internal value as a formatted number string (for example USD currency) and should resolve https://github.com/home-assistant/frontend/issues/7758 --- src/common/string/format_number.ts | 34 ++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/common/string/format_number.ts b/src/common/string/format_number.ts index 0a49d7aa1928..cdd4c9601eea 100644 --- a/src/common/string/format_number.ts +++ b/src/common/string/format_number.ts @@ -9,7 +9,7 @@ export const formatNumber = ( language: string, options?: Intl.NumberFormatOptions ): string => { - // Polyfill for Number.isNaN, which is more reliable that the global isNaN() + // Polyfill for Number.isNaN, which is more reliable than the global isNaN() Number.isNaN = Number.isNaN || function isNaN(input) { @@ -17,7 +17,37 @@ export const formatNumber = ( }; if (!Number.isNaN(Number(num)) && Intl) { - return new Intl.NumberFormat(language, options).format(Number(num)); + return new Intl.NumberFormat( + language, + getDefaultFormatOptions(num, options) + ).format(Number(num)); } return num.toString(); }; + +/** + * Generates default options for Intl.NumberFormat + * @param num The number to be formatted + * @param options The Intl.NumberFormatOptions that should be included in the returned options + */ +const getDefaultFormatOptions = ( + num: string | number, + options?: Intl.NumberFormatOptions +): Intl.NumberFormatOptions => { + let defaultOptions: Intl.NumberFormatOptions = options || {}; + + // Keep decimal trailing zeros if they are present + if ( + !options || + (!options.minimumFractionDigits && !options.maximumFractionDigits) + ) { + const digits = + num.toString().indexOf(".") > -1 + ? num.toString().split(".")[1].length + : 0; + defaultOptions.minimumFractionDigits = digits; + defaultOptions.maximumFractionDigits = digits; + } + + return defaultOptions; +}; From 9c8bbf6e0d548e8485b8fa2a655dfea34ea70b62 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Sat, 21 Nov 2020 18:24:30 -0700 Subject: [PATCH 10/17] Fix lint error --- src/common/string/format_number.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/string/format_number.ts b/src/common/string/format_number.ts index cdd4c9601eea..e6d9017d6997 100644 --- a/src/common/string/format_number.ts +++ b/src/common/string/format_number.ts @@ -34,7 +34,7 @@ const getDefaultFormatOptions = ( num: string | number, options?: Intl.NumberFormatOptions ): Intl.NumberFormatOptions => { - let defaultOptions: Intl.NumberFormatOptions = options || {}; + const defaultOptions: Intl.NumberFormatOptions = options || {}; // Keep decimal trailing zeros if they are present if ( From 60b0e7524f42539ac6c548b4befa286391c1372f Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Mon, 23 Nov 2020 13:48:45 -0700 Subject: [PATCH 11/17] Replace toFixed with formatNumber options --- .../lovelace/cards/hui-thermostat-card.ts | 57 +++++++------------ 1 file changed, 21 insertions(+), 36 deletions(-) diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index b5c895011601..4437173de646 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -168,49 +168,34 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { : Array.isArray(this._setTemp) ? this._stepSize === 1 ? svg` - ${formatNumber( - this._setTemp[0].toFixed(), - this.hass!.language - )} - - ${formatNumber( - this._setTemp[1].toFixed(), - this.hass!.language - )} + ${formatNumber(this._setTemp[0], this.hass!.language, { + maximumFractionDigits: 0, + })} - + ${formatNumber(this._setTemp[1], this.hass!.language, { + maximumFractionDigits: 0, + })} ` : svg` - ${formatNumber( - this._setTemp[0].toFixed(1), - this.hass!.language, - { - minimumFractionDigits: 1, - maximumFractionDigits: 1, - } - )} - - ${formatNumber( - this._setTemp[1].toFixed(1), - this.hass!.language, - { - minimumFractionDigits: 1, - maximumFractionDigits: 1, - } - )} + ${formatNumber(this._setTemp[0], this.hass!.language, { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + })} - + ${formatNumber(this._setTemp[1], this.hass!.language, { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + })} ` : this._stepSize === 1 ? svg` - ${formatNumber( - this._setTemp.toFixed(), - this.hass!.language - )} + ${formatNumber(this._setTemp, this.hass!.language, { + maximumFractionDigits: 0, + })} ` : svg` - ${formatNumber( - this._setTemp.toFixed(1), - this.hass!.language, - { - minimumFractionDigits: 1, - maximumFractionDigits: 1, - } - )} + ${formatNumber(this._setTemp, this.hass!.language, { + minimumFractionDigits: 1, + maximumFractionDigits: 1, + })} ` } From 0dca26c44b7a32e4ea21ca2abb6d9ccdeb388f04 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Mon, 23 Nov 2020 14:01:20 -0700 Subject: [PATCH 12/17] Handle rounding with formatNumber options --- src/data/weather.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/weather.ts b/src/data/weather.ts index 46b99a976dae..1d6a35f1407d 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -180,7 +180,7 @@ export const getSecondaryWeatherAttribute = ( ` : hass!.localize(`ui.card.weather.attributes.${attribute}`)} - ${formatNumber(roundWithOneDecimal(value), hass!.language)} + ${formatNumber(value, hass!.language, { maximumFractionDigits: 1 })} ${getWeatherUnit(hass!, attribute)} `; }; From 516d5289cc574e1c88dcd3d9ec4b9475ddb006ec Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Mon, 23 Nov 2020 14:33:54 -0700 Subject: [PATCH 13/17] Move formatNumber into ha-gauge element --- src/components/ha-gauge.ts | 5 +++-- src/panels/lovelace/cards/hui-gauge-card.ts | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts index f082206700d0..249a5639a529 100644 --- a/src/components/ha-gauge.ts +++ b/src/components/ha-gauge.ts @@ -12,6 +12,7 @@ import { afterNextRender } from "../common/util/render-status"; import { ifDefined } from "lit-html/directives/if-defined"; import { getValueInPercentage, normalize } from "../util/calculate"; +import { formatNumber } from "../common/string/format_number"; const getAngle = (value: number, min: number, max: number) => { const percentage = getValueInPercentage(normalize(value, min, max), min, max); @@ -29,7 +30,7 @@ export class Gauge extends LitElement { @property({ type: Number }) public value = 0; - @property({ type: String }) public valueFormatted = this.value.toString(); + @property({ type: String }) public language = ""; @property() public label = ""; @@ -90,7 +91,7 @@ export class Gauge extends LitElement { - ${this.valueFormatted} ${this.label} + ${formatNumber(this.value, this.language)} ${this.label} `; } diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 4c33983125e7..8de09ad0f32d 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -117,7 +117,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { .min=${this._config.min!} .max=${this._config.max!} .value=${state} - .valueFormatted=${formatNumber(state, this.hass!.language)} + .language=${this.hass!.language} .label=${this._config!.unit || this.hass?.states[this._config!.entity].attributes .unit_of_measurement || From 2b693027eac3bd64ab7104cb50ada40bdc27dd53 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Mon, 23 Nov 2020 14:44:52 -0700 Subject: [PATCH 14/17] Remove unused imports --- src/data/weather.ts | 1 - src/panels/lovelace/cards/hui-gauge-card.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/data/weather.ts b/src/data/weather.ts index 1d6a35f1407d..3b7959bf3b6c 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -11,7 +11,6 @@ import { formatNumber } from "../common/string/format_number"; import "../components/ha-icon"; import "../components/ha-svg-icon"; import type { HomeAssistant, WeatherEntity } from "../types"; -import { roundWithOneDecimal } from "../util/calculate"; export const weatherSVGs = new Set([ "clear-night", diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 8de09ad0f32d..037a0874fbc6 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -15,7 +15,6 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; -import { formatNumber } from "../../../common/string/format_number"; import "../../../components/ha-card"; import "../../../components/ha-gauge"; import type { HomeAssistant } from "../../../types"; From 7dd7ce1da40744e835d58b80760b5b737db04522 Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Tue, 24 Nov 2020 08:57:14 -0700 Subject: [PATCH 15/17] Format numbers in climate entity row --- src/components/ha-climate-state.ts | 37 +++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 6 deletions(-) diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts index 1aa49ae6b213..ba5e5844ecb7 100644 --- a/src/components/ha-climate-state.ts +++ b/src/components/ha-climate-state.ts @@ -11,6 +11,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { CLIMATE_PRESET_NONE } from "../data/climate"; import type { HomeAssistant } from "../types"; +import { formatNumber } from "../common/string/format_number"; @customElement("ha-climate-state") class HaClimateState extends LitElement { @@ -51,11 +52,17 @@ class HaClimateState extends LitElement { } if (this.stateObj.attributes.current_temperature != null) { - return `${this.stateObj.attributes.current_temperature} ${this.hass.config.unit_system.temperature}`; + return `${formatNumber( + this.stateObj.attributes.current_temperature, + this.hass!.language + )} ${this.hass.config.unit_system.temperature}`; } if (this.stateObj.attributes.current_humidity != null) { - return `${this.stateObj.attributes.current_humidity} %`; + return `${formatNumber( + this.stateObj.attributes.current_humidity, + this.hass!.language + )} %`; } return undefined; @@ -70,21 +77,39 @@ class HaClimateState extends LitElement { this.stateObj.attributes.target_temp_low != null && this.stateObj.attributes.target_temp_high != null ) { - return `${this.stateObj.attributes.target_temp_low}-${this.stateObj.attributes.target_temp_high} ${this.hass.config.unit_system.temperature}`; + return `${formatNumber( + this.stateObj.attributes.target_temp_low, + this.hass!.language + )}-${formatNumber( + this.stateObj.attributes.target_temp_high, + this.hass!.language + )} ${this.hass.config.unit_system.temperature}`; } if (this.stateObj.attributes.temperature != null) { - return `${this.stateObj.attributes.temperature} ${this.hass.config.unit_system.temperature}`; + return `${formatNumber( + this.stateObj.attributes.temperature, + this.hass!.language + )} ${this.hass.config.unit_system.temperature}`; } if ( this.stateObj.attributes.target_humidity_low != null && this.stateObj.attributes.target_humidity_high != null ) { - return `${this.stateObj.attributes.target_humidity_low}-${this.stateObj.attributes.target_humidity_high}%`; + return `${formatNumber( + this.stateObj.attributes.target_humidity_low, + this.hass!.language + )}-${formatNumber( + this.stateObj.attributes.target_humidity_high, + this.hass!.language + )}%`; } if (this.stateObj.attributes.humidity != null) { - return `${this.stateObj.attributes.humidity} %`; + return `${formatNumber( + this.stateObj.attributes.humidity, + this.hass!.language + )} %`; } return ""; From b691793b26b9d1973aadf500209e39708ece505b Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Tue, 24 Nov 2020 08:58:25 -0700 Subject: [PATCH 16/17] Only check for trailing decimal zeros on strings --- src/common/string/format_number.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/common/string/format_number.ts b/src/common/string/format_number.ts index e6d9017d6997..3dc345fbbcda 100644 --- a/src/common/string/format_number.ts +++ b/src/common/string/format_number.ts @@ -36,15 +36,16 @@ const getDefaultFormatOptions = ( ): Intl.NumberFormatOptions => { const defaultOptions: Intl.NumberFormatOptions = options || {}; - // Keep decimal trailing zeros if they are present + if (typeof num !== "string") { + return defaultOptions; + } + + // Keep decimal trailing zeros if they are present in a string numeric value if ( !options || (!options.minimumFractionDigits && !options.maximumFractionDigits) ) { - const digits = - num.toString().indexOf(".") > -1 - ? num.toString().split(".")[1].length - : 0; + const digits = num.indexOf(".") > -1 ? num.split(".")[1].length : 0; defaultOptions.minimumFractionDigits = digits; defaultOptions.maximumFractionDigits = digits; } From b4b4a06e55bac21a7d64e324495affdbbdff7fea Mon Sep 17 00:00:00 2001 From: Josh McCarty Date: Tue, 24 Nov 2020 08:58:56 -0700 Subject: [PATCH 17/17] Format number for sun elevation in more info dialog --- src/dialogs/more-info/controls/more-info-sun.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts index b92de7e261a7..5030ddf0bcac 100644 --- a/src/dialogs/more-info/controls/more-info-sun.ts +++ b/src/dialogs/more-info/controls/more-info-sun.ts @@ -9,6 +9,7 @@ import { TemplateResult, } from "lit-element"; import { formatTime } from "../../../common/datetime/format_time"; +import { formatNumber } from "../../../common/string/format_number"; import "../../../components/ha-relative-time"; import { HomeAssistant } from "../../../types"; @@ -59,7 +60,12 @@ class MoreInfoSun extends LitElement {
${this.hass.localize("ui.dialogs.more_info_control.sun.elevation")}
-
${this.stateObj.attributes.elevation}
+
+ ${formatNumber( + this.stateObj.attributes.elevation, + this.hass!.language + )} +
`; }