Group history by device class (#18841)

src/components/chart/state-history-charts.ts

@@ -303,6 +303,11 @@ export class StateHistoryCharts extends LitElement {
         padding-right: 1px;
       }
 
+      .entry-container:not(:first-child) {
+        border-top: 2px solid var(--divider-color);
+        margin-top: 16px;
+      }
+
       .container,
       lit-virtualizer {
         height: 100%;

src/data/history.ts

@@ -49,6 +49,7 @@ export interface LineChartEntity {
 
 export interface LineChartUnit {
   unit: string;
+  device_class?: string;
   identifier: string;
   data: LineChartEntity[];
 }
@@ -323,7 +324,8 @@ const processTimelineEntity = (
 };
 
 const processLineChartEntities = (
-  unit,
+  unit: string,
+  device_class: string | undefined,
   entities: HistoryStates,
   hassEntities: HassEntities
 ): LineChartUnit => {
@@ -391,6 +393,7 @@ const processLineChartEntities = (
 
   return {
     unit,
+    device_class,
     identifier: Object.keys(entities).join(""),
     data,
   };
@@ -466,6 +469,12 @@ export const computeHistory = (
       }[domain];
     }
 
+    const deviceClass: string | undefined = (
+      currentState?.attributes || numericStateFromHistory?.a
+    )?.device_class;
+
+    const key = computeGroupKey(unit, deviceClass);
+
     if (!unit) {
       timelineDevices.push(
         processTimelineEntity(
@@ -478,19 +487,32 @@ export const computeHistory = (
           currentState
         )
       );
-    } else if (unit in lineChartDevices && entityId in lineChartDevices[unit]) {
+    } else if (key in lineChartDevices && entityId in lineChartDevices[key]) {
-      lineChartDevices[unit][entityId].push(...stateInfo);
+      lineChartDevices[key][entityId].push(...stateInfo);
     } else {
-      if (!(unit in lineChartDevices)) {
+      if (!(key in lineChartDevices)) {
-        lineChartDevices[unit] = {};
+        lineChartDevices[key] = {};
       }
-      lineChartDevices[unit][entityId] = stateInfo;
+      lineChartDevices[key][entityId] = stateInfo;
     }
   });
 
-  const unitStates = Object.keys(lineChartDevices).map((unit) =>
+  const unitStates = Object.keys(lineChartDevices).map((key) => {
-    processLineChartEntities(unit, lineChartDevices[unit], hass.states)
+    const splitKey = key.split("_");
-  );
+    const unit = splitKey[0];
+    const deviceClass = splitKey[1] || undefined;
+    return processLineChartEntities(
+      unit,
+      deviceClass,
+      lineChartDevices[key],
+      hass.states
+    );
+  });
 
   return { line: unitStates, timeline: timelineDevices };
 };
+
+export const computeGroupKey = (
+  unit: string | undefined,
+  device_class: string | undefined
+) => `${unit}_${device_class || ""}`;

src/panels/history/ha-panel-history.ts

@@ -46,6 +46,7 @@ import {
   EntityHistoryState,
   LineChartUnit,
   LineChartEntity,
+  computeGroupKey,
 } from "../../data/history";
 import { fetchStatistics, Statistics } from "../../data/recorder";
 import { getSensorNumericDeviceClasses } from "../../data/sensor";
@@ -221,14 +222,20 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
   ): HistoryResult {
     const result: HistoryResult = { ...historyResult, line: [] };
 
-    const units = new Set(
+    const keys = new Set(
       historyResult.line
-        .map((i) => i.unit)
+        .map((i) => computeGroupKey(i.unit, i.device_class))
-        .concat(ltsResult.line.map((i) => i.unit))
+        .concat(
+          ltsResult.line.map((i) => computeGroupKey(i.unit, i.device_class))
+        )
     );
-    units.forEach((unit) => {
+    keys.forEach((key) => {
-      const historyItem = historyResult.line.find((i) => i.unit === unit);
+      const historyItem = historyResult.line.find(
-      const ltsItem = ltsResult.line.find((i) => i.unit === unit);
+        (i) => computeGroupKey(i.unit, i.device_class) === key
+      );
+      const ltsItem = ltsResult.line.find(
+        (i) => computeGroupKey(i.unit, i.device_class) === key
+      );
       if (historyItem && ltsItem) {
         const newLineItem: LineChartUnit = { ...historyItem, data: [] };
         const entities = new Set(