From 7dbc78f1d646db0df6bce18db30a7d6ee825b152 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 4 Feb 2025 12:47:24 +0100
Subject: [PATCH] Improve value formatting inside backup tooltip (#24057)

---
 .../chart/state-history-chart-line.ts         | 25 ++++++----
 src/components/chart/statistics-chart.ts      | 49 +++++++++++--------
 2 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index 2afbc7f3bd..b2f28c9a48 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/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,19 +133,25 @@ 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(
-            param.value[1] as number,
-            this.hass.locale,
-            getNumberFormatOptions(
-              undefined,
-              this.hass.entities[this._entityIds[param.seriesIndex]]
-            )
-          )}${unit}`;
+          const entityId = this._entityIds[param.seriesIndex];
+          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(undefined, entry)
+              )}${unit}`;
           const dataIndex = this._datasetToDataIndex[param.seriesIndex];
           const data = this.data[dataIndex];
           if (data.statistics && data.statistics.length > 0) {
diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
index 05eb8fe654..f6a03bd9c8 100644
--- a/src/components/chart/statistics-chart.ts
+++ b/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,20 +187,26 @@ 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
-          (param.value[2] ?? param.value[1]) as number,
-          this.hass.locale,
-          getNumberFormatOptions(
-            undefined,
-            this.hass.entities[this._statisticIds[param.seriesIndex]]
-          )
-        )}${unit}`;
+
+        const statisticId = this._statisticIds[param.seriesIndex];
+        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(undefined, entry)
+            )}${unit}`;
 
         const time =
           index === 0