Add compare data to individual devices graph (#12829)

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -43,8 +43,6 @@ export class HuiEnergyDevicesGraphCard
 
   @state() private _config?: EnergyDevicesGraphCardConfig;
 
-  @state() private _data?: Statistics;
-
   @state() private _chartData: ChartData = { datasets: [] };
 
   @query("ha-chart-base") private _chart?: HaChartBase;
@@ -162,19 +160,24 @@ export class HuiEnergyDevicesGraphCard
       energyData.start
     );
 
-    this._data = await fetchStatistics(
-      this.hass,
-      addHours(energyData.start, -1),
-      energyData.end,
-      energyData.prefs.device_consumption.map(
+    const devices = energyData.prefs.device_consumption.map(
       (device) => device.stat_consumption
-      ),
-      dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
     );
 
+    const period =
+      dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour";
+
     const startMinHour = addHours(energyData.start, -1);
 
-    Object.values(this._data).forEach((stat) => {
+    const data = await fetchStatistics(
+      this.hass,
+      startMinHour,
+      energyData.end,
+      devices,
+      period
+    );
+
+    Object.values(data).forEach((stat) => {
       // if the start of the first value is after the requested period, we have the first data point, and should add a zero point
       if (stat.length && new Date(stat[0].start) > startMinHour) {
         stat.unshift({
@@ -187,9 +190,41 @@ export class HuiEnergyDevicesGraphCard
       }
     });
 
-    const data: Array<ChartDataset<"bar", ParsedDataType<"bar">>["data"]> = [];
+    let compareData: Statistics | undefined;
+
+    if (energyData.startCompare && energyData.endCompare) {
+      const startCompareMinHour = addHours(energyData.startCompare, -1);
+      compareData = await fetchStatistics(
+        this.hass,
+        startCompareMinHour,
+        energyData.endCompare,
+        devices,
+        period
+      );
+
+      Object.values(compareData).forEach((stat) => {
+        // if the start of the first value is after the requested period, we have the first data point, and should add a zero point
+        if (stat.length && new Date(stat[0].start) > startMinHour) {
+          stat.unshift({
+            ...stat[0],
+            start: startCompareMinHour.toISOString(),
+            end: startCompareMinHour.toISOString(),
+            sum: 0,
+            state: 0,
+          });
+        }
+      });
+    }
+
+    const chartData: Array<ChartDataset<"bar", ParsedDataType<"bar">>["data"]> =
+      [];
+    const chartDataCompare: Array<
+      ChartDataset<"bar", ParsedDataType<"bar">>["data"]
+    > = [];
     const borderColor: string[] = [];
+    const borderColorCompare: string[] = [];
     const backgroundColor: string[] = [];
+    const backgroundColorCompare: string[] = [];
 
     const datasets: ChartDataset<"bar", ParsedDataType<"bar">[]>[] = [
       {
@@ -198,35 +233,69 @@ export class HuiEnergyDevicesGraphCard
         ),
         borderColor,
         backgroundColor,
-        data,
-        barThickness: 20,
+        data: chartData,
+        barThickness: compareData ? 10 : 20,
       },
     ];
 
+    if (compareData) {
+      datasets.push({
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_devices_graph.previous_energy_usage"
+        ),
+        borderColor: borderColorCompare,
+        backgroundColor: backgroundColorCompare,
+        data: chartDataCompare,
+        barThickness: 10,
+      });
+    }
+
     energyData.prefs.device_consumption.forEach((device, idx) => {
       const value =
-        device.stat_consumption in this._data!
-          ? calculateStatisticSumGrowth(this._data![device.stat_consumption]) ||
-            0
+        device.stat_consumption in data
+          ? calculateStatisticSumGrowth(data[device.stat_consumption]) || 0
           : 0;
 
-      data.push({
+      chartData.push({
         // @ts-expect-error
         y: device.stat_consumption,
         x: value,
         idx,
       });
+
+      if (compareData) {
+        const compareValue =
+          device.stat_consumption in compareData
+            ? calculateStatisticSumGrowth(
+                compareData[device.stat_consumption]
+              ) || 0
+            : 0;
+
+        chartDataCompare.push({
+          // @ts-expect-error
+          y: device.stat_consumption,
+          x: compareValue,
+          idx,
+        });
+      }
     });
 
-    data.sort((a, b) => b.x - a.x);
+    chartData.sort((a, b) => b.x - a.x);
 
-    data.forEach((d: any) => {
+    chartData.forEach((d: any) => {
       const color = getColorByIndex(d.idx);
 
       borderColor.push(color);
       backgroundColor.push(color + "7F");
     });
 
+    chartDataCompare.forEach((d: any) => {
+      const color = getColorByIndex(d.idx);
+
+      borderColorCompare.push(color + "7F");
+      backgroundColorCompare.push(color + "32");
+    });
+
     this._chartData = {
       datasets,
     };

src/translations/en.json

@@ -3405,7 +3405,8 @@
               "go_to_energy_dashboard": "Go to the energy dashboard"
             },
             "energy_devices_graph": {
-              "energy_usage": "Energy usage"
+              "energy_usage": "Energy usage",
+              "previous_energy_usage": "Previous energy usage"
             },
             "carbon_consumed_gauge": {
               "card_indicates_energy_used": "This card indicates how much of the energy consumed by your home was generated using non-fossil fuels like solar, wind and nuclear. The higher, the better!",