From 938855e13c6414f27891ea982778e9d1af698b97 Mon Sep 17 00:00:00 2001
From: Petar Petrov <MindFreeze@users.noreply.github.com>
Date: Fri, 31 Jan 2025 12:02:39 +0200
Subject: [PATCH] Fix statistics echarts with negative values (#23983)

* Fix statistics echarts with negative values

* fix border-radius of negative bar values

* revert timeline label width to previous max values
---
 .../chart/state-history-chart-timeline.ts     |  2 +-
 src/components/chart/statistics-chart.ts      | 23 +++++++++++++------
 .../lovelace/cards/hui-history-graph-card.ts  |  2 +-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index 3e4962c3be..5618a158cb 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -183,7 +183,7 @@ export class StateHistoryChartTimeline extends LitElement {
   private _createOptions() {
     const narrow = this.narrow;
     const showNames = this.chunked || this.showNames;
-    const maxInternalLabelWidth = narrow ? 70 : 165;
+    const maxInternalLabelWidth = narrow ? 105 : 185;
     const labelWidth = showNames
       ? Math.max(this.paddingYAxis, this._yWidth)
       : 0;
diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
index 614b2bce4a..0225818253 100644
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -375,10 +375,12 @@ export class StatisticsChart extends LitElement {
           ) {
             // if the end of the previous data doesn't match the start of the current data,
             // we have to draw a gap so add a value at the end time, and then an empty value.
-            d.data!.push([prevEndTime, ...prevValues[i]!]);
+            d.data!.push(
+              this._transformDataValue([prevEndTime, ...prevValues[i]!])
+            );
             d.data!.push([prevEndTime, null]);
           }
-          d.data!.push([start, ...dataValues[i]!]);
+          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
         });
         prevValues = dataValues;
         prevEndTime = end;
@@ -455,14 +457,14 @@ export class StatisticsChart extends LitElement {
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color: band ? color + "3F" : color + "7F",
+            color:
+              band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color,
           };
           if (band && this.chartType === "line") {
             series.stack = `band-${statistic_id}`;
+            series.stackStrategy = "all";
             (series as LineSeriesOption).symbol = "none";
-            (series as LineSeriesOption).lineStyle = {
-              opacity: 0,
-            };
+            (series as LineSeriesOption).lineStyle = { width: 1.5 };
             if (drawBands && type === "max") {
               (series as LineSeriesOption).areaStyle = {
                 color: color + "3F",
@@ -495,7 +497,7 @@ export class StatisticsChart extends LitElement {
             }
           } else if (type === "max" && this.chartType === "line") {
             const max = stat.max || 0;
-            val.push(max - (stat.min || 0));
+            val.push(Math.abs(max - (stat.min || 0)));
             val.push(max);
           } else {
             val.push(stat[type] ?? null);
@@ -535,6 +537,13 @@ export class StatisticsChart extends LitElement {
     this._statisticIds = statisticIds;
   }
 
+  private _transformDataValue(val: [Date, ...(number | null)[]]) {
+    if (this.chartType === "bar" && val[1] && val[1] < 0) {
+      return { value: val, itemStyle: { borderRadius: [0, 0, 4, 4] } };
+    }
+    return val;
+  }
+
   static styles = css`
     :host {
       display: block;
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
index b77360cef8..53758b07a5 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.ts
+++ b/src/panels/lovelace/cards/hui-history-graph-card.ts
@@ -244,7 +244,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     })}`;
 
     const columns = this._config.grid_options?.columns ?? 12;
-    const narrow = Number.isNaN(columns) || Number(columns) < 12;
+    const narrow = Number.isNaN(columns) || Number(columns) <= 12;
 
     return html`
       <ha-card>