Improve value formatting inside backup tooltip (#24057)

src/components/chart/state-history-chart-line.ts

@@ -20,6 +20,7 @@ import {
 import { measureTextWidth } from "../../util/text";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
+import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
 
 const safeParseFloat = (value) => {
   const parsed = parseFloat(value);
@@ -132,18 +133,24 @@ export class StateHistoryChartLine extends LitElement {
         marker: `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
       });
     });
-    const unit = this.unit ? ` ${this.unit}` : "";
+    const unit = this.unit
+      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
+      : "";
+
     return (
       title +
       datapoints
         .map((param) => {
-          let value = `${formatNumber(
+          const entityId = this._entityIds[param.seriesIndex];
-            param.value[1] as number,
+          const stateObj = this.hass.states[entityId];
+          const entry = this.hass.entities[entityId];
+          const stateValue = String(param.value[1]);
+          let value = stateObj
+            ? this.hass.formatEntityState(stateObj, stateValue)
+            : `${formatNumber(
+                stateValue,
                 this.hass.locale,
-            getNumberFormatOptions(
+                getNumberFormatOptions(undefined, entry)
-              undefined,
-              this.hass.entities[this._entityIds[param.seriesIndex]]
-            )
               )}${unit}`;
           const dataIndex = this._datasetToDataIndex[param.seriesIndex];
           const data = this.data[dataIndex];

src/components/chart/statistics-chart.ts

@@ -1,15 +1,22 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import type {
   BarSeriesOption,
   LineSeriesOption,
 } from "echarts/types/dist/shared";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 
+import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
+import {
+  formatNumber,
+  getNumberFormatOptions,
+} from "../../common/number/format_number";
+import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
+import { computeRTL } from "../../common/util/compute_rtl";
 import type {
   Statistics,
   StatisticsMetaData,
@@ -21,15 +28,9 @@ import {
   getStatisticMetadata,
   statisticsHaveType,
 } from "../../data/recorder";
+import type { ECOption } from "../../resources/echarts";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
-import { computeRTL } from "../../common/util/compute_rtl";
-import type { ECOption } from "../../resources/echarts";
-import {
-  formatNumber,
-  getNumberFormatOptions,
-} from "../../common/number/format_number";
-import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -186,19 +187,25 @@ export class StatisticsChart extends LitElement {
 
   private _renderTooltip = (params: any) => {
     const rendered: Record<string, boolean> = {};
-    const unit = this.unit ? ` ${this.unit}` : "";
+    const unit = this.unit
+      ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
+      : "";
     return params
       .map((param, index: number) => {
         if (rendered[param.seriesName]) return "";
         rendered[param.seriesName] = true;
-        const value = `${formatNumber(
+
-          // max series can have 3 values, as the second value is the max-min to form a band
+        const statisticId = this._statisticIds[param.seriesIndex];
-          (param.value[2] ?? param.value[1]) as number,
+        const stateObj = this.hass.states[statisticId];
+        const entry = this.hass.entities[statisticId];
+        const stateValue = String(param.value[1]);
+
+        const value = stateObj
+          ? this.hass.formatEntityState(stateObj, stateValue)
+          : `${formatNumber(
+              stateValue,
               this.hass.locale,
-          getNumberFormatOptions(
+              getNumberFormatOptions(undefined, entry)
-            undefined,
-            this.hass.entities[this._statisticIds[param.seriesIndex]]
-          )
             )}${unit}`;
 
         const time =