Add stacked chart types to Statistics Graph Card (#51530)

* Add stacked mode to statistics-chart

Allows displaying the entries as stacked lines or stacked bars. This means we can create charts similar to the energy graph cards but with alternate entities.

* Move fillDataGapsAndRoundCaps to components/chart

Now used in statistics-chart too, so move to common chart location.
Re-export in energy-chart-options.ts to minimise changes throughout energy cards.

* Correct order of line/bar in statistics graph card editor

Line and Bar options were unintentionally reversed in the displayed list.

* Support unstacked bar charts in fillDataGapsAndRoundCaps

Author: TCWORLD

src/components/chart/round-caps.ts

@@ -0,0 +1,103 @@
+import type { BarSeriesOption } from "echarts/types/dist/shared";
+
+export function fillDataGapsAndRoundCaps(
+  datasets: BarSeriesOption[],
+  stacked = true
+) {
+  if (!stacked) {
+    // For non-stacked charts, we can simply apply an overall border to each stack
+    // to curve the top of the bar, and then override on any negative bars.
+    datasets.forEach((dataset) => {
+      // Add upper border radius to stack
+      dataset.itemStyle = {
+        ...dataset.itemStyle,
+        borderRadius: [4, 4, 0, 0],
+      };
+      // And override any negative points to have bottom border curved
+      for (let pointIdx = 0; pointIdx < dataset.data!.length; pointIdx++) {
+        const dataPoint = dataset.data![pointIdx];
+        const item: any =
+          dataPoint && typeof dataPoint === "object" && "value" in dataPoint
+            ? dataPoint
+            : { value: dataPoint };
+        if (item.value?.[1] < 0) {
+          dataset.data![pointIdx] = {
+            ...item,
+            itemStyle: {
+              ...item.itemStyle,
+              borderRadius: [0, 0, 4, 4],
+            },
+          };
+        }
+      }
+    });
+    return;
+  }
+
+  // For stacked charts, we need to carefully work through the data points in each
+  // stack to ensure only the lowermost negative and uppermost positive values have
+  // a curved border.
+  const buckets = Array.from(
+    new Set(
+      datasets
+        .map((dataset) =>
+          dataset.data!.map((datapoint) => Number(datapoint![0]))
+        )
+        .flat()
+    )
+  ).sort((a, b) => a - b);
+
+  // make sure all datasets have the same buckets
+  // otherwise the chart will render incorrectly in some cases
+  buckets.forEach((bucket, index) => {
+    const capRounded = {};
+    const capRoundedNegative = {};
+    for (let i = datasets.length - 1; i >= 0; i--) {
+      const dataPoint = datasets[i].data![index];
+      const item: any =
+        dataPoint && typeof dataPoint === "object" && "value" in dataPoint
+          ? dataPoint
+          : { value: dataPoint };
+      const x = item.value?.[0];
+      const stack = datasets[i].stack ?? "";
+      if (x === undefined) {
+        continue;
+      }
+      if (Number(x) !== bucket) {
+        datasets[i].data?.splice(index, 0, {
+          value: [bucket, 0],
+          itemStyle: {
+            borderWidth: 0,
+          },
+        });
+      } else if (item.value?.[1] === 0) {
+        // remove the border for zero values or it will be rendered
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderWidth: 0,
+          },
+        };
+      } else if (!capRounded[stack] && item.value?.[1] > 0) {
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderRadius: [4, 4, 0, 0],
+          },
+        };
+        capRounded[stack] = true;
+      } else if (!capRoundedNegative[stack] && item.value?.[1] < 0) {
+        datasets[i].data![index] = {
+          ...item,
+          itemStyle: {
+            ...item.itemStyle,
+            borderRadius: [0, 0, 4, 4],
+          },
+        };
+        capRoundedNegative[stack] = true;
+      }
+    }
+  });
+}

src/components/chart/statistics-chart.ts

@@ -35,6 +35,7 @@ import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
+import { fillDataGapsAndRoundCaps } from "./round-caps";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -67,7 +68,11 @@ export class StatisticsChart extends LitElement {
   @property({ attribute: false })
   public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
-  @property({ attribute: false }) public chartType: "line" | "bar" = "line";
+  @property({ attribute: false }) public chartType:
+    | "line"
+    | "line-stack"
+    | "bar"
+    | "bar-stack" = "line";
 
   @property({ attribute: false }) public minYAxis?: number;
 
@@ -326,7 +331,7 @@ export class StatisticsChart extends LitElement {
         },
         position: computeRTL(this.hass) ? "right" : "left",
         scale:
-          this.chartType !== "bar" ||
+          this.chartType.startsWith("line") ||
           this.logarithmicScale ||
           minYAxis !== undefined ||
           maxYAxis !== undefined,
@@ -386,6 +391,8 @@ export class StatisticsChart extends LitElement {
       (await this._getStatisticsMetaData(Object.keys(this.statisticsData)));
 
     let colorIndex = 0;
+    const chartType = this.chartType.startsWith("line") ? "line" : "bar";
+    const chartStacked = this.chartType.endsWith("stack");
     const statisticsData = Object.entries(this.statisticsData);
     const totalDataSets: typeof this._chartData = [];
     const legendData: {
@@ -471,19 +478,17 @@ export class StatisticsChart extends LitElement {
         }
         statDataSets.forEach((d, i) => {
           if (
-            this.chartType === "line" &&
+            chartType === "line" &&
             prevEndTime &&
             prevValues &&
             prevEndTime.getTime() !== start.getTime()
           ) {
             // 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(
-              this._transformDataValue([prevEndTime, ...prevValues[i]!])
-            );
+            d.data!.push([prevEndTime, ...prevValues[i]!]);
             d.data!.push([prevEndTime, null]);
           }
-          d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
+          d.data!.push([start, ...dataValues[i]!]);
         });
         prevValues = dataValues;
         prevEndTime = end;
@@ -503,7 +508,8 @@ export class StatisticsChart extends LitElement {
         this.statTypes.includes("max") && statisticsHaveType(stats, "max");
       const hasMin =
         this.statTypes.includes("min") && statisticsHaveType(stats, "min");
-      const drawBands = [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
+      const drawBands =
+        !chartStacked && [hasMean, hasMax, hasMin].filter(Boolean).length > 1;
 
       const hasState = this.statTypes.includes("state");
 
@@ -535,8 +541,8 @@ export class StatisticsChart extends LitElement {
           const backgroundColor = band ? color + "3F" : color + "7F";
           const series: LineSeriesOption | BarSeriesOption = {
             id: `${statistic_id}-${type}`,
-            type: this.chartType,
-            smooth: this.chartType === "line" ? 0.4 : false,
+            type: chartType,
+            smooth: chartType === "line" ? 0.4 : false,
             cursor: "default",
             data: [],
             name: name
@@ -555,16 +561,23 @@ export class StatisticsChart extends LitElement {
               width: 1.5,
             },
             itemStyle:
-              this.chartType === "bar"
+              chartType === "bar"
                 ? {
-                    borderRadius: [4, 4, 0, 0],
                     borderColor,
                     borderWidth: 1.5,
                   }
                 : undefined,
-            color: this.chartType === "bar" ? backgroundColor : borderColor,
+            color: chartType === "bar" ? backgroundColor : borderColor,
           };
-          if (band && this.chartType === "line") {
+          if (chartStacked) {
+            series.stack = `band-stacked`;
+            series.stackStrategy = "samesign";
+            if (chartType === "line") {
+              (series as LineSeriesOption).areaStyle = {
+                color: color + "3F",
+              };
+            }
+          } else if (band && chartType === "line") {
             series.stack = `band-${statistic_id}`;
             series.stackStrategy = "all";
             if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
@@ -621,7 +634,7 @@ export class StatisticsChart extends LitElement {
             }
           } else if (
             type === bandTop &&
-            this.chartType === "line" &&
+            chartType === "line" &&
             drawBands &&
             !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
           ) {
@@ -645,18 +658,17 @@ export class StatisticsChart extends LitElement {
       // For line charts, close out the last stat segment at prevEndTime
       const lastEndTime = prevEndTime;
       const lastValues = prevValues;
-      if (this.chartType === "line" && lastEndTime && lastValues) {
+      if (chartType === "line" && lastEndTime && lastValues) {
         statDataSets.forEach((d, i) => {
-          d.data!.push(
-            this._transformDataValue([lastEndTime, ...lastValues[i]!])
-          );
+          d.data!.push([lastEndTime, ...lastValues[i]!]);
         });
       }
 
       // Show current state if required, and units match (or are unknown)
       const statisticUnit = getDisplayUnit(this.hass, statistic_id, meta);
       if (
         displayCurrentState &&
+        !chartStacked &&
         (!this.unit || !statisticUnit || this.unit === statisticUnit)
       ) {
         // Skip external statistics
@@ -677,7 +689,7 @@ export class StatisticsChart extends LitElement {
                 const val: (number | null)[] = [];
                 if (
                   type === bandTop &&
-                  this.chartType === "line" &&
+                  chartType === "line" &&
                   drawBands &&
                   !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
                 ) {
@@ -687,9 +699,7 @@ export class StatisticsChart extends LitElement {
                 } else {
                   val.push(currentValue);
                 }
-                statDataSets[i].data!.push(
-                  this._transformDataValue([now, ...val])
-                );
+                statDataSets[i].data!.push([now, ...val]);
               });
             }
           }
@@ -701,6 +711,13 @@ export class StatisticsChart extends LitElement {
       Array.prototype.push.apply(legendData, statLegendData);
     });
 
+    if (chartType === "bar") {
+      fillDataGapsAndRoundCaps(
+        totalDataSets as BarSeriesOption[],
+        chartStacked
+      );
+    }
+
     legendData.forEach(({ id, name, color, borderColor }) => {
       // Add an empty series for the legend
       totalDataSets.push({
@@ -710,7 +727,7 @@ export class StatisticsChart extends LitElement {
         itemStyle: {
           borderColor,
         },
-        type: this.chartType,
+        type: chartType,
         data: [],
         xAxisIndex: 1,
       });
@@ -728,13 +745,6 @@ 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;
-  }
-
   private _clampYAxis(value?: number | ((values: any) => number)) {
     if (this.logarithmicScale) {
       // log(0) is -Infinity, so we need to set a minimum value

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -16,7 +16,6 @@ import {
   subDays,
 } from "date-fns";
 import type {
-  BarSeriesOption,
   CallbackDataParams,
   LineSeriesOption,
   TopLevelFormatterParams,
@@ -38,6 +37,8 @@ import type { StatisticPeriod } from "../../../../../data/recorder";
 import { getPeriodicAxisLabelConfig } from "../../../../../components/chart/axis-label";
 import { getSuggestedPeriod } from "../../../../../data/energy";
 
+export { fillDataGapsAndRoundCaps } from "../../../../../components/chart/round-caps";
+
 /**
  * Energy chart data point tuple:
  * [0] displayX  - bar position (midpoint for sub-daily periods, start otherwise)
@@ -280,72 +281,6 @@ function formatTooltip(
   return values.length > 0 ? `${title}${values.join("<br>")}${footer}` : "";
 }
 
-export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
-  const buckets = Array.from(
-    new Set(
-      datasets
-        .map((dataset) =>
-          dataset.data!.map((datapoint) => Number(datapoint![0]))
-        )
-        .flat()
-    )
-  ).sort((a, b) => a - b);
-
-  // make sure all datasets have the same buckets
-  // otherwise the chart will render incorrectly in some cases
-  buckets.forEach((bucket, index) => {
-    const capRounded = {};
-    const capRoundedNegative = {};
-    for (let i = datasets.length - 1; i >= 0; i--) {
-      const dataPoint = datasets[i].data![index];
-      const item: any =
-        dataPoint && typeof dataPoint === "object" && "value" in dataPoint
-          ? dataPoint
-          : { value: dataPoint };
-      const x = item.value?.[0];
-      const stack = datasets[i].stack ?? "";
-      if (x === undefined) {
-        continue;
-      }
-      if (Number(x) !== bucket) {
-        datasets[i].data?.splice(index, 0, {
-          value: [bucket, 0],
-          itemStyle: {
-            borderWidth: 0,
-          },
-        });
-      } else if (item.value?.[1] === 0) {
-        // remove the border for zero values or it will be rendered
-        datasets[i].data![index] = {
-          ...item,
-          itemStyle: {
-            ...item.itemStyle,
-            borderWidth: 0,
-          },
-        };
-      } else if (!capRounded[stack] && item.value?.[1] > 0) {
-        datasets[i].data![index] = {
-          ...item,
-          itemStyle: {
-            ...item.itemStyle,
-            borderRadius: [4, 4, 0, 0],
-          },
-        };
-        capRounded[stack] = true;
-      } else if (!capRoundedNegative[stack] && item.value?.[1] < 0) {
-        datasets[i].data![index] = {
-          ...item,
-          itemStyle: {
-            ...item.itemStyle,
-            borderRadius: [0, 0, 4, 4],
-          },
-        };
-        capRoundedNegative[stack] = true;
-      }
-    }
-  });
-}
-
 function getDatapointX(datapoint: NonNullable<LineSeriesOption["data"]>[0]) {
   const item =
     datapoint && typeof datapoint === "object" && "value" in datapoint