Make history split by device class option in history card (#18871)

src/data/history.ts

@@ -420,7 +420,8 @@ export const computeHistory = (
   hass: HomeAssistant,
   stateHistory: HistoryStates,
   localize: LocalizeFunc,
-  sensorNumericalDeviceClasses: string[]
+  sensorNumericalDeviceClasses: string[],
+  splitDeviceClasses = false
 ): HistoryResult => {
   const lineChartDevices: { [unit: string]: HistoryStates } = {};
   const timelineDevices: TimelineEntity[] = [];
@@ -473,7 +474,7 @@ export const computeHistory = (
       currentState?.attributes || numericStateFromHistory?.a
     )?.device_class;
 
-    const key = computeGroupKey(unit, deviceClass);
+    const key = computeGroupKey(unit, deviceClass, splitDeviceClasses);
 
     if (!unit) {
       timelineDevices.push(
@@ -487,9 +488,13 @@ export const computeHistory = (
           currentState
         )
       );
-    } else if (key in lineChartDevices && entityId in lineChartDevices[key]) {
+    } else if (
+      key &&
+      key in lineChartDevices &&
+      entityId in lineChartDevices[key]
+    ) {
       lineChartDevices[key][entityId].push(...stateInfo);
-    } else {
+    } else if (key) {
       if (!(key in lineChartDevices)) {
         lineChartDevices[key] = {};
       }
@@ -514,5 +519,6 @@ export const computeHistory = (
 
 export const computeGroupKey = (
   unit: string | undefined,
-  device_class: string | undefined
+  device_class: string | undefined,
-) => `${unit}_${device_class || ""}`;
+  splitDeviceClasses: boolean
+) => (splitDeviceClasses ? `${unit}_${device_class || ""}` : unit);

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

@@ -224,17 +224,19 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
 
     const keys = new Set(
       historyResult.line
-        .map((i) => computeGroupKey(i.unit, i.device_class))
+        .map((i) => computeGroupKey(i.unit, i.device_class, true))
         .concat(
-          ltsResult.line.map((i) => computeGroupKey(i.unit, i.device_class))
+          ltsResult.line.map((i) =>
+            computeGroupKey(i.unit, i.device_class, true)
+          )
         )
     );
     keys.forEach((key) => {
       const historyItem = historyResult.line.find(
-        (i) => computeGroupKey(i.unit, i.device_class) === key
+        (i) => computeGroupKey(i.unit, i.device_class, true) === key
       );
       const ltsItem = ltsResult.line.find(
-        (i) => computeGroupKey(i.unit, i.device_class) === key
+        (i) => computeGroupKey(i.unit, i.device_class, true) === key
       );
       if (historyItem && ltsItem) {
         const newLineItem: LineChartUnit = { ...historyItem, data: [] };
@@ -410,7 +412,8 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
         this.hass,
         statsHistoryStates,
         this.hass.localize,
-        sensorNumericDeviceClasses
+        sensorNumericDeviceClasses,
+        true
       );
       // remap states array to statistics array
       (this._statisticsHistory?.line || []).forEach((item) => {
@@ -460,7 +463,8 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
           this.hass,
           history,
           this.hass.localize,
-          sensorNumericDeviceClasses
+          sensorNumericDeviceClasses,
+          true
         );
       },
       this._startDate,

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -118,7 +118,8 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
           this.hass!,
           combinedHistory,
           this.hass!.localize,
-          sensorNumericDeviceClasses
+          sensorNumericDeviceClasses,
+          this._config?.split_device_classes
         );
       },
       this._hoursToShow,

src/panels/lovelace/cards/types.ts

@@ -323,6 +323,7 @@ export interface HistoryGraphCardConfig extends LovelaceCardConfig {
   title?: string;
   show_names?: boolean;
   logarithmic_scale?: boolean;
+  split_device_classes?: boolean;
 }
 
 export interface StatisticsGraphCardConfig extends LovelaceCardConfig {