Fix spacing & colors in statistics-graph chart (#24068)

* Fix statistic chart colors

* Fix spacing in statistics-graph

* set start time based on data

src/components/chart/ha-chart-base.ts

@@ -248,43 +248,49 @@ export class HaChartBase extends LitElement {
 
   private _createOptions(): ECOption {
     let xAxis = this.options?.xAxis;
-    if (xAxis && !Array.isArray(xAxis) && xAxis.type === "time") {
+    if (xAxis) {
-      if (xAxis.max && xAxis.min) {
+      xAxis = Array.isArray(xAxis) ? xAxis : [xAxis];
-        this._minutesDifference = differenceInMinutes(
+      xAxis = xAxis.map((axis: XAXisOption) => {
-          xAxis.max as Date,
+        if (axis.type !== "time" || axis.show === false) {
-          xAxis.min as Date
+          return axis;
-        );
+        }
-      }
+        if (axis.max && axis.min) {
-      const dayDifference = this._minutesDifference / 60 / 24;
+          this._minutesDifference = differenceInMinutes(
-      let minInterval: number | undefined;
+            axis.max as Date,
-      if (dayDifference) {
+            axis.min as Date
-        minInterval =
+          );
-          dayDifference >= 89 // quarter
+        }
-            ? 28 * 3600 * 24 * 1000
+        const dayDifference = this._minutesDifference / 60 / 24;
-            : dayDifference > 2
+        let minInterval: number | undefined;
-              ? 3600 * 24 * 1000
+        if (dayDifference) {
-              : undefined;
+          minInterval =
-      }
+            dayDifference >= 89 // quarter
-      xAxis = {
+              ? 28 * 3600 * 24 * 1000
-        ...xAxis,
+              : dayDifference > 2
-        axisLabel: {
+                ? 3600 * 24 * 1000
-          formatter: this._formatTimeLabel,
+                : undefined;
-          rich: {
+        }
-            bold: {
+        return {
-              fontWeight: "bold",
+          axisLine: {
-            },
+            show: false,
           },
-          hideOverlap: true,
+          splitLine: {
-          ...xAxis.axisLabel,
+            show: true,
-        },
+          },
-        axisLine: {
+          ...axis,
-          show: false,
+          axisLabel: {
-        },
+            formatter: this._formatTimeLabel,
-        splitLine: {
+            rich: {
-          show: true,
+              bold: {
-        },
+                fontWeight: "bold",
-        minInterval,
+              },
-      } as XAXisOption;
+            },
+            hideOverlap: true,
+            ...axis.axisLabel,
+          },
+          minInterval,
+        } as XAXisOption;
+      });
     }
     const options = {
       animation: !this._reducedMotion,

src/components/chart/statistics-chart.ts

@@ -128,7 +128,8 @@ export class StatisticsChart extends LitElement {
       changedProps.has("hideLegend") ||
       changedProps.has("startTime") ||
       changedProps.has("endTime") ||
-      changedProps.has("_legendData")
+      changedProps.has("_legendData") ||
+      changedProps.has("_chartData")
     ) {
       this._createOptions();
     }
@@ -249,29 +250,38 @@ export class StatisticsChart extends LitElement {
     let startTime = this.startTime;
 
     if (!startTime) {
-      // Calculate default start time based on dayDifference
+      // set start time to the earliest point in the chart data
-      startTime = new Date(
-        endTime.getTime() - dayDifference * 24 * 3600 * 1000
-      );
-
-      // Check chart data for earlier points
       this._chartData.forEach((series) => {
-        if (!Array.isArray(series.data)) return;
+        if (!Array.isArray(series.data) || !series.data[0]) return;
-        series.data.forEach((point) => {
+        const firstPoint = series.data[0] as any;
-          const timestamp = Array.isArray(point) ? point[0] : point.value?.[0];
+        const timestamp = Array.isArray(firstPoint)
-          if (new Date(timestamp) < startTime!) {
+          ? firstPoint[0]
-            startTime = new Date(timestamp);
+          : firstPoint.value?.[0];
-          }
+        if (timestamp && (!startTime || new Date(timestamp) < startTime)) {
-        });
+          startTime = new Date(timestamp);
+        }
       });
+
+      if (!startTime) {
+        // Calculate default start time based on dayDifference
+        startTime = new Date(
+          endTime.getTime() - dayDifference * 24 * 3600 * 1000
+        );
+      }
     }
 
     this._chartOptions = {
-      xAxis: {
+      xAxis: [
-        type: "time",
+        {
-        min: startTime,
+          type: "time",
-        max: endTime,
+          min: startTime,
-      },
+          max: endTime,
+        },
+        {
+          type: "time",
+          show: false,
+        },
+      ],
       yAxis: {
         type: this.logarithmicScale ? "log" : "value",
         name: this.unit,
@@ -465,6 +475,9 @@ export class StatisticsChart extends LitElement {
             displayedLegend = displayedLegend || showLegend;
           }
           statTypes.push(type);
+          const borderColor =
+            band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color;
+          const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
             type: this.chartType,
@@ -488,21 +501,16 @@ export class StatisticsChart extends LitElement {
               this.chartType === "bar"
                 ? {
                     borderRadius: [4, 4, 0, 0],
-                    borderColor:
+                    borderColor,
-                      band && hasMean
-                        ? color + (this.hideLegend ? "00" : "7F")
-                        : color,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color:
+            color: this.chartType === "bar" ? backgroundColor : borderColor,
-              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 = { width: 1.5 };
             if (drawBands && type === "max") {
               (series as LineSeriesOption).areaStyle = {
                 color: color + "3F",
@@ -564,6 +572,7 @@ export class StatisticsChart extends LitElement {
         color,
         type: this.chartType,
         data: [],
+        xAxisIndex: 1,
       });
     });