From 738117b2e526bea22c166a38e7ba58135aa9979c Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 8 Jul 2026 11:46:55 +0200
Subject: [PATCH 01/15] Add consumer to energy flow chart

---
 .../{public => src/assets}/icons/icon_Data.md |  0
 .../source/src/assets/icons/owbConsumer.svg   |  1 +
 .../energyFlowChart/EnergyFlowChart.vue       | 31 +++++++++++++++++++
 .../koala/source/src/stores/mqtt-store.ts     | 29 +++++++++++++++++
 4 files changed, 61 insertions(+)
 rename packages/modules/web_themes/koala/source/{public => src/assets}/icons/icon_Data.md (100%)
 create mode 100644 packages/modules/web_themes/koala/source/src/assets/icons/owbConsumer.svg

diff --git a/packages/modules/web_themes/koala/source/public/icons/icon_Data.md b/packages/modules/web_themes/koala/source/src/assets/icons/icon_Data.md
similarity index 100%
rename from packages/modules/web_themes/koala/source/public/icons/icon_Data.md
rename to packages/modules/web_themes/koala/source/src/assets/icons/icon_Data.md
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbConsumer.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbConsumer.svg
new file mode 100644
index 0000000000..ee05b02183
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbConsumer.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M682.666667 298.666667V128h-85.333334v170.666667h-170.666666V128H341.333333v170.666667C298.666667 298.666667 256 341.333333 256 384v234.666667L405.333333 768v128h213.333334v-128l149.333333-149.333333V384c0-42.666667-42.666667-85.333333-85.333333-85.333333z" /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 6de4de2614..65d897d514 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -10,6 +10,7 @@ import PvIcon from 'src/assets/icons/owbPV.svg?component';
 import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
 import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
+import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 
 const mqttStore = useMqttStore();
 const $q = useQuasar();
@@ -97,6 +98,13 @@ const showHomePower = computed(() => {
 const homeConsumption = computed(() => Number(homePower.value.value) > 0);
 const homeProduction = computed(() => Number(homePower.value.value) < 0);
 
+const consumerPower = computed(
+  () => mqttStore.consumerSumPower('object') as ValueObject,
+);
+const showConsumerPower = computed(
+  () => mqttStore.consumerIds.length > 0,
+);
+
 const pvPower = computed(() => mqttStore.pvPowerTotal('object') as ValueObject);
 const pvProduction = computed(() => {
   const value = Number(pvPower.value.value);
@@ -282,6 +290,7 @@ const maxSystemPower = computed(() => {
   const powerValues = [
     Math.abs(Number(gridPower.value.value)),
     Math.abs(Number(homePower.value.value)),
+    Math.abs(Number(consumerPower.value.value)),
     Math.abs(Number(pvPower.value.value)),
     Math.abs(Number(batteryPower.value.value)),
     Math.abs(Number(chargePoint1Power.value.value)),
@@ -314,6 +323,7 @@ const animationDurations = computed(() => {
   return {
     grid: calcDuration(Number(gridPower.value.value), maxPower),
     home: calcDuration(Number(homePower.value.value), maxPower),
+    consumer: calcDuration(Number(consumerPower.value.value), maxPower),
     pv: calcDuration(Number(pvPower.value.value), maxPower),
     battery: calcDuration(Number(batteryPower.value.value), maxPower),
     chargePoint1: calcDuration(Number(chargePoint1Power.value.value), maxPower),
@@ -371,6 +381,22 @@ const svgComponents = computed((): FlowComponent[] => {
     });
   }
 
+  if (showConsumerPower.value) {
+    components.push({
+      id: 'consumer',
+      class: {
+        base: 'consumer',
+        valueLabelColor: 'var(--q-consumer)',
+        animatedReverse: Number(consumerPower.value.value) > 0,
+      },
+      position: { row: 0, column: 1 },
+      label: ['Verbraucher', absoluteValueObject(consumerPower.value).textValue],
+      powerValue: Number(consumerPower.value.value),
+      iconComponent: ConsumerIcon,
+      iconColor: 'var(--q-consumer)',
+    });
+  }
+
   if (mqttStore.pvConfigured) {
     components.push({
       id: 'pv',
@@ -949,6 +975,11 @@ path.animatedReverse.home {
   animation-duration: v-bind('animationDurations.home');
 }
 
+path.animatedReverse.consumer {
+  color: var(--q-consumer);
+  animation-duration: v-bind('animationDurations.consumer');
+}
+
 path.animated.pv,
 path.animatedReverse.pv {
   color: var(--q-pv-stroke);
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 3ae3500c44..0007627932 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3779,6 +3779,34 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the summed power of all consumers.
+   * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @returns string | number | ValueObject
+   */
+  const consumerSumPower = computed(() => {
+    return (returnType: string = 'textValue') => {
+      const power = consumerIds.value.reduce((sum, id) => {
+        return (
+          sum +
+          ((getValue.value(
+            `openWB/consumer/${id}/get/power`,
+            undefined,
+            0,
+          ) as number) || 0)
+        );
+      }, 0);
+      const valueObject = getValueObject.value(power);
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      if (returnType == 'object') {
+        return valueObject;
+      }
+      console.error('returnType not found!', returnType, power);
+    };
+  });
+
   /**
    * Get the running time (on_time, in seconds) of a consumer since it last
    * started. Resets when the device stops drawing current.
@@ -4521,6 +4549,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     consumerIds,
     consumerName,
     consumerPower,
+    consumerSumPower,
     consumerOnTime,
     consumerStateStr,
     consumerFaultState,

From 47c5b2811fc94b50a0013d37b13679cf1c33e471 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 8 Jul 2026 15:38:53 +0200
Subject: [PATCH 02/15] use new backend topic for consumer power sum

---
 .../koala/source/src/stores/mqtt-store.ts           | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 0007627932..3a8f3ff37a 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3786,16 +3786,9 @@ export const useMqttStore = defineStore('mqtt', () => {
    */
   const consumerSumPower = computed(() => {
     return (returnType: string = 'textValue') => {
-      const power = consumerIds.value.reduce((sum, id) => {
-        return (
-          sum +
-          ((getValue.value(
-            `openWB/consumer/${id}/get/power`,
-            undefined,
-            0,
-          ) as number) || 0)
-        );
-      }, 0);
+      const power = getValue.value('openWB/consumer/get/power') as
+        | number
+        | undefined;
       const valueObject = getValueObject.value(power);
       if (Object.hasOwn(valueObject, returnType)) {
         return valueObject[returnType as keyof ValueObject];

From 18e14349193498240ff93e240211d7cc3678e121 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 9 Jul 2026 09:03:14 +0200
Subject: [PATCH 03/15] Add consumer row to daily totals chart

---
 .../charts/dailyTotals/DailyTotals.vue        | 75 ++++++++++++++++++-
 .../charts/dailyTotals/DailyTotalsRow.vue     |  5 ++
 .../koala/source/src/stores/mqtt-store.ts     | 30 ++++++++
 3 files changed, 106 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index a460ff999f..ed99e729f3 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -89,16 +89,20 @@
                 <template v-else-if="item.id === 'pv'">
                   <div>Ertrag:</div>
                 </template>
-                <template v-else-if="item.id === 'house'">
+                <template v-else-if="['house', 'consumer'].includes(item.id)">
                   <div>Verbrauch:</div>
                 </template>
               </template>
               <template #right-value>
                 <div
                   v-if="
-                    ['battery', 'grid', 'house', 'chargepoint'].includes(
-                      item.id,
-                    ) && item.today !== undefined
+                    [
+                      'battery',
+                      'grid',
+                      'house',
+                      'chargepoint',
+                      'consumer',
+                    ].includes(item.id) && item.today !== undefined
                   "
                 >
                   {{ item.today.imported }}
@@ -191,6 +195,28 @@
               </DailyTotalsRow>
             </div>
           </div>
+          <div v-if="item.id === 'consumer'">
+            <div
+              v-for="consumerData in individualConsumerData"
+              :key="consumerData.id"
+              class="sub-row"
+            >
+              <DailyTotalsRow
+                :item="consumerData"
+                :rowHeight="rowHeight"
+                :componentNameVisible="componentNameVisible"
+                :currentPowerVisible="currentPowerVisible"
+                :socValueVisible="socValueVisible"
+              >
+                <template #right-label>
+                  <div>Verbrauch:</div>
+                </template>
+                <template #right-value>
+                  <div>{{ consumerData.today?.imported }}</div>
+                </template>
+              </DailyTotalsRow>
+            </div>
+          </div>
         </q-expansion-item>
       </div>
     </div>
@@ -224,6 +250,7 @@ const expanded = ref<Record<string, boolean>>({
   chargepoint: false,
   battery: false,
   pv: false,
+  consumer: false,
 });
 
 const componentNameVisible = computed(() => $q.screen.width >= 300);
@@ -235,6 +262,7 @@ const showHomePower = computed(() => {
 });
 const batteryConfigured = computed(() => mqttStore.batteryConfigured);
 const pvConfigured = computed(() => mqttStore.pvConfigured);
+const consumerConfigured = computed(() => mqttStore.consumerIds.length > 0);
 const chargePointSumPowerAvailable = computed(
   () => mqttStore.chargePointSumPower('value') !== undefined,
 );
@@ -252,6 +280,8 @@ const secondaryComponentsConfigured = computed(() => {
         return individualBatteryData.value.length > 1;
       case 'pv':
         return individualPvData.value.length > 1;
+      case 'consumer':
+        return individualConsumerData.value.length > 1;
       default:
         return false;
     }
@@ -387,6 +417,29 @@ const individualPvData = computed((): DailyTotalsItem[] => {
   return pvSystems;
 });
 
+const individualConsumerData = computed((): DailyTotalsItem[] => {
+  const consumers: DailyTotalsItem[] = [];
+
+  mqttStore.consumerIds.forEach((id) => {
+    const name = mqttStore.consumerName(id);
+    if (name !== undefined) {
+      consumers.push({
+        id: `consumer-${id}`,
+        title: name,
+        level: 'secondary',
+        icon: 'consumer',
+        power: mqttStore.consumerPower(id, 'textValue') as string,
+        powerValue: mqttStore.consumerPower(id, 'value') as number,
+        today: {
+          imported: mqttStore.consumerDailyImported('textValue', id) as string,
+        },
+        color: 'var(--q-consumer)',
+      });
+    }
+  });
+  return consumers;
+});
+
 const componentData = computed((): DailyTotalsItem[] => {
   const components: DailyTotalsItem[] = [];
 
@@ -466,6 +519,20 @@ const componentData = computed((): DailyTotalsItem[] => {
     }
     components.push(item);
   }
+  if (consumerConfigured.value) {
+    components.push({
+      id: 'consumer',
+      title: 'Verbraucher',
+      level: 'primary',
+      icon: 'consumer',
+      power: mqttStore.consumerSumPower('textValue') as string,
+      powerValue: mqttStore.consumerSumPower('value') as number,
+      today: {
+        imported: mqttStore.consumerDailyImported('textValue') as string,
+      },
+      color: 'var(--q-consumer)',
+    });
+  }
   return components;
 });
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index b318efcb99..d468ec2632 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -99,6 +99,7 @@ import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
 import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
+import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 
 const mqttStore = useMqttStore();
 
@@ -132,6 +133,9 @@ const arrowDirection = (id: string) => {
     case 'chargepoint':
       value = mqttStore.chargePointSumPower('value') as number;
       break;
+    case 'consumer':
+      value = mqttStore.consumerSumPower('value') as number;
+      break;
     default:
       if (id.startsWith('counter-')) {
         const counterId = Number(id.replace('counter-', ''));
@@ -155,6 +159,7 @@ const iconMap = {
   pv: PvIcon,
   house: HouseIcon,
   counter: CounterIcon,
+  consumer: ConsumerIcon,
 };
 </script>
 
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 3a8f3ff37a..f9eceb223c 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3800,6 +3800,35 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the daily imported energy total of all consumers, or of a single
+   * consumer when an id is provided
+   * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param id optional consumer id; omit for the sum of all consumers
+   * @returns string | number | ValueObject
+   */
+  const consumerDailyImported = computed(() => {
+    return (
+      returnType: string = 'textValue',
+      id: number | undefined = undefined,
+    ) => {
+      const energy =
+        (getValue.value(
+          `openWB/consumer/${id !== undefined ? `${id}/` : ''}get/daily_imported`,
+          undefined,
+          0,
+        ) as number) || 0;
+      const valueObject = getValueObject.value(energy, 'Wh');
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      if (returnType == 'object') {
+        return valueObject;
+      }
+      console.error('returnType not found!', returnType, energy);
+    };
+  });
+
   /**
    * Get the running time (on_time, in seconds) of a consumer since it last
    * started. Resets when the device stops drawing current.
@@ -4543,6 +4572,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     consumerName,
     consumerPower,
     consumerSumPower,
+    consumerDailyImported,
     consumerOnTime,
     consumerStateStr,
     consumerFaultState,

From 28c1960e00b5d78839381d85563e949235020ed9 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 9 Jul 2026 09:42:41 +0200
Subject: [PATCH 04/15] Add consumer total to history chart

---
 .../charts/historyChart/HistoryChart.vue      | 23 +++++++++++++++++++
 .../source/src/stores/mqtt-store-model.ts     |  1 +
 2 files changed, 24 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 502414280c..3ffc6c87b8 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -375,6 +375,29 @@ const lineChartData = computed(() => {
     );
   }
   datasets.push(...chargePointDatasets.value);
+  if (mqttStore.consumerIds.length > 0) {
+    const baseColor = getGlobalColor('--q-consumer');
+    datasets.push({
+      label: 'Verbraucher ges.',
+      category: 'component',
+      unit: 'kW',
+      borderColor: baseColor,
+      backgroundColor: hexColorToRgba(baseColor, 0.1),
+      data: selectedData.value.map(
+        (item) =>
+          ({
+            x: item.timestamp * 1000,
+            y: item['consumer-all'],
+          }) as Point,
+      ),
+      borderWidth: 2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHitRadius: 5,
+      fill: true,
+      yAxisID: 'y',
+    });
+  }
   datasets.push(...vehicleDatasets.value);
   return {
     labels: chartLabels.value,
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index c99bc49712..d9a2edadbb 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -218,6 +218,7 @@ export interface GraphDataPoint {
   grid: number;
   'house-power': number;
   'charging-all': number;
+  'consumer-all': number;
   'pv-all': number;
   'bat-all-power': number;
   'bat-all-soc': number;

From 79dcdb0654571441db42dabfd79b23a041a023d5 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 13 Jul 2026 11:08:31 +0200
Subject: [PATCH 05/15] add consumer color to store

---
 .../source/src/stores/mqtt-store-model.ts      |  1 +
 .../koala/source/src/stores/mqtt-store.ts      | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index d9a2edadbb..0f388f389c 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -142,6 +142,7 @@ export interface ConsumerModule {
   type: string;
   id: number;
   vendor: string;
+  color?: string | null;
 }
 export type ConsumerUsageType =
   | 'meter_only'
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index f9eceb223c..7c7e0f6346 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3754,6 +3754,22 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the consumer user-defined color identified by the consumer id
+   * @param consumerId consumer id
+   * @returns string | null
+   */
+  const consumerColor = computed(() => {
+    return (consumerId: number): string | null => {
+        const color = getValue.value(
+          `openWB/consumer/${consumerId}/module`,
+          'color',
+          null,
+        ) as string | null;
+      return resolveComponentColor(color, SETTINGS_UI_COLORS.consumer);
+    };
+  });
+
   /**
    * Get the current power of a consumer identified by the consumer id
    * @param consumerId consumer id
@@ -4409,6 +4425,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     vehicle: '#17a2b8',
     counter: '#dc3545',
     pv: '#28a745',
+    consumer: '#6f42c1',
   } as const;
 
   const resolveComponentColor = (
@@ -4570,6 +4587,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     consumerList,
     consumerIds,
     consumerName,
+    consumerColor,
     consumerPower,
     consumerSumPower,
     consumerDailyImported,

From 49c7d6139de777d52075927e2c400e79e0b0ed66 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 13 Jul 2026 11:10:08 +0200
Subject: [PATCH 06/15] add consumer to history chart conditionally

---
 .../components/charts/historyChart/HistoryChart.vue   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 3ffc6c87b8..c00bfe9f08 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -376,9 +376,16 @@ const lineChartData = computed(() => {
   }
   datasets.push(...chargePointDatasets.value);
   if (mqttStore.consumerIds.length > 0) {
-    const baseColor = getGlobalColor('--q-consumer');
+    const singleConsumer = mqttStore.consumerIds.length === 1;
+    const consumerId = mqttStore.consumerIds[0];
+    const baseColor = singleConsumer
+      ? mqttStore.consumerColor(consumerId) || getGlobalColor('--q-consumer')
+      : getGlobalColor('--q-consumer');
+    const label = singleConsumer
+      ? mqttStore.consumerName(consumerId) || 'Verbraucher'
+      : 'Verbraucher ges.';
     datasets.push({
-      label: 'Verbraucher ges.',
+      label,
       category: 'component',
       unit: 'kW',
       borderColor: baseColor,

From 2982931c0b57543a8d4a9462ab4969d409460d7e Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 13 Jul 2026 11:22:20 +0200
Subject: [PATCH 07/15] add user defined color to consumer card

---
 .../koala/source/src/components/ConsumerCard.vue      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
index 2276377097..afd4b88abc 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -1,6 +1,6 @@
 <template>
   <q-card
-    class="card-width"
+    class="consumer-card"
     :class="{ 'full-height': props.fullHeight }"
   >
     <q-card-section class="row no-wrap items-center justify-between">
@@ -144,14 +144,19 @@ const onOff = computed({
     consumerMode.value = value ? 'instant_charging' : 'stop';
   },
 });
+
+const consumerColor = computed(() => {
+  return mqttStore.consumerColor(props.consumerId) || 'var(--q-consumer)';
+});
 </script>
 
 <style scoped lang="scss">
-.card-width {
+
+.consumer-card {
   width: 22em;
   max-width: 100%;
   border: none;
-  border-left: 4px solid var(--q-consumer);
+  border-left: 4px solid v-bind(consumerColor);
   border-radius: 15px;
 }
 

From 9023edbaedbc1565277d2cb8a88d147980eae933 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 13 Jul 2026 11:39:09 +0200
Subject: [PATCH 08/15] add user defined colors to daily totals

---
 .../src/components/charts/dailyTotals/DailyTotals.vue     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index ed99e729f3..7eea7662a0 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -433,7 +433,7 @@ const individualConsumerData = computed((): DailyTotalsItem[] => {
         today: {
           imported: mqttStore.consumerDailyImported('textValue', id) as string,
         },
-        color: 'var(--q-consumer)',
+        color: mqttStore.consumerColor(id) || 'var(--q-consumer)',
       });
     }
   });
@@ -530,7 +530,11 @@ const componentData = computed((): DailyTotalsItem[] => {
       today: {
         imported: mqttStore.consumerDailyImported('textValue') as string,
       },
-      color: 'var(--q-consumer)',
+      color:
+        mqttStore.consumerIds.length === 1
+          ? mqttStore.consumerColor(mqttStore.consumerIds[0]) ||
+            'var(--q-consumer)'
+          : 'var(--q-consumer)',
     });
   }
   return components;

From b25e8afa073045df607474e9d8e11a3b41406367 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 13 Jul 2026 16:32:14 +0200
Subject: [PATCH 09/15] add all consumers to history chart - initially hidden

---
 .../charts/historyChart/HistoryChart.vue      | 114 +++++++++++++-----
 .../historyChart/HistoryChartLegend.vue       |   1 +
 .../HistoryChartLegendCategoriesGroup.vue     |  12 ++
 .../historyChart/history-chart-model.ts       |   7 +-
 .../source/src/stores/mqtt-store-model.ts     |   1 +
 5 files changed, 104 insertions(+), 31 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index c00bfe9f08..c448f1d396 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -195,6 +195,89 @@ const chargePointDatasets = computed(() =>
   }),
 );
 
+const consumerDatasets = computed(() => {
+  const ids = mqttStore.consumerIds;
+  if (ids.length === 0) return [];
+  const defaultColor = getGlobalColor('--q-consumer');
+
+  const individualDataset = (id: number) => {
+    const baseColor = mqttStore.consumerColor(id) || defaultColor;
+    const label = mqttStore.consumerName(id) || `Verbraucher ${id}`;
+    return {
+      label,
+      category: 'consumer',
+      unit: 'kW',
+      borderColor: baseColor,
+      backgroundColor: hexColorToRgba(baseColor, 0.1),
+      data: selectedData.value.map(
+        (item) =>
+          ({
+            x: item.timestamp * 1000,
+            y: item[`consumer${id}-power` as keyof GraphDataPoint] ?? 0,
+          }) as Point,
+      ),
+      borderWidth: 2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHitRadius: 5,
+      fill: true,
+      yAxisID: 'y',
+    };
+  };
+
+  if (ids.length === 1) {
+    return [individualDataset(ids[0])];
+  }
+
+  return [
+    {
+      label: 'Verbraucher ges.',
+      category: 'consumer',
+      unit: 'kW',
+      borderColor: defaultColor,
+      backgroundColor: hexColorToRgba(defaultColor, 0.1),
+      data: selectedData.value.map(
+        (item) =>
+          ({
+            x: item.timestamp * 1000,
+            y: item['consumer-all'],
+          }) as Point,
+      ),
+      borderWidth: 2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHitRadius: 5,
+      fill: true,
+      yAxisID: 'y',
+    },
+    ...ids.map((id) => ({
+      ...individualDataset(id),
+      hidden: localDataStore.isDatasetHidden(
+        mqttStore.consumerName(id) || `Verbraucher ${id}`,
+      ),
+    })),
+  ];
+});
+
+const seededHiddenConsumers = new Set<string>();
+watch(
+  () =>
+    mqttStore.consumerIds.length > 1
+      ? mqttStore.consumerIds.map(
+          (id) => mqttStore.consumerName(id) || `Verbraucher ${id}`,
+        )
+      : [],
+  (labels) => {
+    labels.forEach((label) => {
+      if (!seededHiddenConsumers.has(label)) {
+        seededHiddenConsumers.add(label);
+        localDataStore.hideDataset(label);
+      }
+    });
+  },
+  { immediate: true },
+);
+
 const vehicleDatasets = computed(() =>
   vehicles.value
     .map((vehicle) => {
@@ -375,37 +458,8 @@ const lineChartData = computed(() => {
     );
   }
   datasets.push(...chargePointDatasets.value);
-  if (mqttStore.consumerIds.length > 0) {
-    const singleConsumer = mqttStore.consumerIds.length === 1;
-    const consumerId = mqttStore.consumerIds[0];
-    const baseColor = singleConsumer
-      ? mqttStore.consumerColor(consumerId) || getGlobalColor('--q-consumer')
-      : getGlobalColor('--q-consumer');
-    const label = singleConsumer
-      ? mqttStore.consumerName(consumerId) || 'Verbraucher'
-      : 'Verbraucher ges.';
-    datasets.push({
-      label,
-      category: 'component',
-      unit: 'kW',
-      borderColor: baseColor,
-      backgroundColor: hexColorToRgba(baseColor, 0.1),
-      data: selectedData.value.map(
-        (item) =>
-          ({
-            x: item.timestamp * 1000,
-            y: item['consumer-all'],
-          }) as Point,
-      ),
-      borderWidth: 2,
-      pointRadius: 0,
-      pointHoverRadius: 4,
-      pointHitRadius: 5,
-      fill: true,
-      yAxisID: 'y',
-    });
-  }
   datasets.push(...vehicleDatasets.value);
+  datasets.push(...consumerDatasets.value);
   return {
     labels: chartLabels.value,
     datasets: datasets,
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
index 02965fb88b..c83448976c 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -88,6 +88,7 @@ const categorizedLegendItems = computed(() => {
     chargepoint: [],
     vehicle: [],
     battery: [],
+    consumer: [],
     component: [],
   };
   for (const item of legendItems.value) {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
index 2215427764..ae7b339bbb 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
@@ -27,6 +27,18 @@
       :toggleDataset="toggleDataset"
       :getItemColor="getItemColor"
       :getItemLineType="getItemLineType"
+      menuAnchor="bottom middle"
+      menuSelf="top middle"
+      menuFormat="q-mx-lg"
+    />
+
+    <HistoryChartLegendCategory
+      v-if="categorizedLegendItems.consumer.length"
+      :label="'Verbraucher'"
+      :items="categorizedLegendItems.consumer"
+      :toggleDataset="toggleDataset"
+      :getItemColor="getItemColor"
+      :getItemLineType="getItemLineType"
       menuAnchor="bottom left"
       menuSelf="top left"
     />
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index ade9f6ac7d..76637e6dc1 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -11,7 +11,12 @@ export interface ChartComponentRef {
   chart?: Chart;
 }
 
-export type Category = 'chargepoint' | 'vehicle' | 'battery' | 'component';
+export type Category =
+  | 'chargepoint'
+  | 'vehicle'
+  | 'battery'
+  | 'consumer'
+  | 'component';
 
 // Add category to the chart datasets
 export interface CategorizedDataset extends ChartDataset<
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index 0f388f389c..353783180a 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -224,6 +224,7 @@ export interface GraphDataPoint {
   'bat-all-power': number;
   'bat-all-soc': number;
   [key: `cp${number}-power`]: number;
+  [key: `consumer${number}-power`]: number;
   [key: `ev${number}-soc`]: number | null;
 }
 

From e16cc34ed071198b439acdf40eff365b2c488cbe Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 13 Jul 2026 17:22:37 +0200
Subject: [PATCH 10/15] Align legend category dropdowns

---
 .../HistoryChartLegendCategoriesGroup.vue     | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
index ae7b339bbb..66d563d01d 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="row justify-center items-center">
+  <div
+    class="items-center"
+    :class="wrapToGrid ? 'legend-categories-grid' : 'row justify-center'"
+  >
     <HistoryChartLegendCategory
       :label="'Komponenten'"
       :items="categorizedLegendItems.component"
@@ -18,7 +21,7 @@
       :getItemLineType="getItemLineType"
       menuAnchor="bottom middle"
       menuSelf="top middle"
-      menuFormat="q-mx-lg"
+      :menuFormat="wrapToGrid ? undefined : 'q-mx-lg'"
     />
 
     <HistoryChartLegendCategory
@@ -29,7 +32,7 @@
       :getItemLineType="getItemLineType"
       menuAnchor="bottom middle"
       menuSelf="top middle"
-      menuFormat="q-mx-lg"
+      :menuFormat="wrapToGrid ? undefined : 'q-mx-lg'"
     />
 
     <HistoryChartLegendCategory
@@ -46,14 +49,36 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
 import HistoryChartLegendCategory from './HistoryChartLegendCategory.vue';
 import type { LegendItem } from 'chart.js';
 import type { Category } from './history-chart-model';
 
-defineProps<{
+const props = defineProps<{
   categorizedLegendItems: Record<Category, LegendItem[]>;
   toggleDataset: (datasetName: string, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
 }>();
+
+const $q = useQuasar();
+const wrapToGrid = computed(
+  () =>
+    props.categorizedLegendItems.consumer.length > 0 && $q.screen.width < 700,
+);
 </script>
+
+<style scoped>
+.legend-categories-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  justify-items: stretch;
+  gap: 4px 8px;
+}
+
+.legend-categories-grid :deep(.q-btn) {
+  margin: 0;
+  width: 100%;
+}
+</style>

From d92e3010149152fe0fa699fb9978ad4c01b95ba9 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 14 Jul 2026 10:06:29 +0200
Subject: [PATCH 11/15] consumer total placed first in legend dropdown

---
 .../charts/historyChart/HistoryChart.vue      |  9 +++---
 .../historyChart/HistoryChartLegend.vue       | 28 ++++++++++++++-----
 .../historyChart/history-chart-model.ts       |  2 ++
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index c448f1d396..710f975e2f 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -39,9 +39,10 @@ import { useLocalDataStore } from 'src/stores/localData-store';
 import { GraphDataPoint } from 'src/stores/mqtt-store-model';
 import HistoryChartLegend from 'src/components/charts/historyChart/HistoryChartLegend.vue';
 import 'chartjs-adapter-luxon';
-import type {
-  HistoryChartTooltipItem,
-  ChartComponentRef,
+import {
+  CONSUMER_TOTAL_LABEL,
+  type HistoryChartTooltipItem,
+  type ChartComponentRef,
 } from './history-chart-model';
 
 Chart.register(
@@ -231,7 +232,7 @@ const consumerDatasets = computed(() => {
 
   return [
     {
-      label: 'Verbraucher ges.',
+      label: CONSUMER_TOTAL_LABEL,
       category: 'consumer',
       unit: 'kW',
       borderColor: defaultColor,
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
index c83448976c..f70c498a88 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -30,10 +30,11 @@
 import { ref, watch, computed, nextTick } from 'vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { Chart, ChartDataset, LegendItem } from 'chart.js';
-import type {
-  Category,
-  CategorizedDataset,
-  LegendItemWithCategory,
+import {
+  CONSUMER_TOTAL_LABEL,
+  type Category,
+  type CategorizedDataset,
+  type LegendItemWithCategory,
 } from './history-chart-model';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
@@ -99,11 +100,24 @@ const categorizedLegendItems = computed(() => {
       categories.component.push(item);
     }
   }
-  // Sort each category's items alphabetically
+
   Object.keys(categories).forEach((key) => {
-    categories[key as Category].sort((a, b) =>
-      (a.text || '').localeCompare(b.text || '', undefined, { numeric: true }),
+    const category = key as Category;
+    categories[category].sort((a, b) =>
+      (a.text || '').localeCompare(b.text || '', undefined, {
+        numeric: true,
+      }),
     );
+
+    if (category === 'consumer') {
+      const totalIndex = categories[category].findIndex(
+        (item) => item.text === CONSUMER_TOTAL_LABEL,
+      );
+      if (totalIndex > 0) {
+        const [total] = categories[category].splice(totalIndex, 1);
+        categories[category].unshift(total);
+      }
+    }
   });
   return categories;
 });
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index 76637e6dc1..acc7c19fa9 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -18,6 +18,8 @@ export type Category =
   | 'consumer'
   | 'component';
 
+export const CONSUMER_TOTAL_LABEL = 'Verbraucher ges.';
+
 // Add category to the chart datasets
 export interface CategorizedDataset extends ChartDataset<
   'line',

From c8921c17a8ed91c5dfff32603204fc7e190201f3 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 15 Jul 2026 17:50:16 +0200
Subject: [PATCH 12/15] refactor consumer label

---
 .../components/charts/historyChart/HistoryChart.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 710f975e2f..1271baaa20 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -196,6 +196,9 @@ const chargePointDatasets = computed(() =>
   }),
 );
 
+const consumerLabel = (id: number) =>
+  mqttStore.consumerName(id) || `Verbraucher ${id}`;
+
 const consumerDatasets = computed(() => {
   const ids = mqttStore.consumerIds;
   if (ids.length === 0) return [];
@@ -203,7 +206,7 @@ const consumerDatasets = computed(() => {
 
   const individualDataset = (id: number) => {
     const baseColor = mqttStore.consumerColor(id) || defaultColor;
-    const label = mqttStore.consumerName(id) || `Verbraucher ${id}`;
+    const label = consumerLabel(id);
     return {
       label,
       category: 'consumer',
@@ -253,9 +256,7 @@ const consumerDatasets = computed(() => {
     },
     ...ids.map((id) => ({
       ...individualDataset(id),
-      hidden: localDataStore.isDatasetHidden(
-        mqttStore.consumerName(id) || `Verbraucher ${id}`,
-      ),
+      hidden: localDataStore.isDatasetHidden(consumerLabel(id)),
     })),
   ];
 });
@@ -264,9 +265,7 @@ const seededHiddenConsumers = new Set<string>();
 watch(
   () =>
     mqttStore.consumerIds.length > 1
-      ? mqttStore.consumerIds.map(
-          (id) => mqttStore.consumerName(id) || `Verbraucher ${id}`,
-        )
+      ? mqttStore.consumerIds.map((id) => consumerLabel(id))
       : [],
   (labels) => {
     labels.forEach((label) => {

From b3e2d566ea26ef75a740ff0ccfdbae93151a4b30 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 15 Jul 2026 17:51:57 +0200
Subject: [PATCH 13/15] formatting

---
 .../web_themes/koala/source/src/stores/mqtt-store.ts   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 7c7e0f6346..ef7e3b0ec9 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3761,11 +3761,11 @@ export const useMqttStore = defineStore('mqtt', () => {
    */
   const consumerColor = computed(() => {
     return (consumerId: number): string | null => {
-        const color = getValue.value(
-          `openWB/consumer/${consumerId}/module`,
-          'color',
-          null,
-        ) as string | null;
+      const color = getValue.value(
+        `openWB/consumer/${consumerId}/module`,
+        'color',
+        null,
+      ) as string | null;
       return resolveComponentColor(color, SETTINGS_UI_COLORS.consumer);
     };
   });

From cabb6a3a976871d225e24dfa7f603ba868f1f914 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 20 Jul 2026 08:47:02 +0200
Subject: [PATCH 14/15] Legend logic changed from labels to keys

---
 .../charts/historyChart/HistoryChart.vue      | 38 +++++++++-----
 .../historyChart/HistoryChartLegend.vue       | 51 +++++++++----------
 .../HistoryChartLegendCategoriesGroup.vue     |  6 +--
 .../HistoryChartLegendCategory.vue            |  9 ++--
 .../HistoryChartLegendStandard.vue            |  9 ++--
 .../historyChart/history-chart-model.ts       | 12 ++++-
 .../source/src/stores/localData-store.ts      | 22 ++++----
 7 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 1271baaa20..430235788d 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -31,7 +31,6 @@ import {
   TimeScale,
   Tooltip,
   Filler,
-  ChartDataset,
   ChartType,
 } from 'chart.js';
 import { useMqttStore } from 'src/stores/mqtt-store';
@@ -41,6 +40,11 @@ import HistoryChartLegend from 'src/components/charts/historyChart/HistoryChartL
 import 'chartjs-adapter-luxon';
 import {
   CONSUMER_TOTAL_LABEL,
+  CONSUMER_TOTAL_KEY,
+  BATTERY_TOTAL_KEY,
+  BATTERY_SOC_KEY,
+  consumerDatasetKey,
+  type CategorizedDataset,
   type HistoryChartTooltipItem,
   type ChartComponentRef,
 } from './history-chart-model';
@@ -74,11 +78,9 @@ const legendDisplay = computed(() => props.showLegend);
 const applyHiddenDatasetsToChart = <TType extends ChartType, TData>(
   chart: Chart<TType, TData>,
 ): void => {
-  chart.data.datasets.forEach((dataset: ChartDataset<TType, TData>, index) => {
-    if (
-      typeof dataset.label === 'string' &&
-      localDataStore.isDatasetHidden(dataset.label)
-    ) {
+  chart.data.datasets.forEach((dataset, index) => {
+    const { key } = dataset as unknown as CategorizedDataset;
+    if (key && localDataStore.isDatasetHidden(key)) {
       chart.hide(index);
     }
   });
@@ -145,6 +147,7 @@ const secondaryCounterDatasets = computed(() =>
         getGlobalColor('--q-secondary-counter-stroke');
       return {
         label: mqttStore.componentName(id),
+        key: `counter-${id}`,
         category: 'component',
         unit: 'kW',
         borderColor: baseColor,
@@ -175,6 +178,7 @@ const chargePointDatasets = computed(() =>
 
     return {
       label: `${chargePointNames.value(cpId)}`,
+      key: `cp-${cpId}`,
       category: 'chargepoint',
       unit: 'kW',
       borderColor: baseColor,
@@ -209,6 +213,7 @@ const consumerDatasets = computed(() => {
     const label = consumerLabel(id);
     return {
       label,
+      key: consumerDatasetKey(id),
       category: 'consumer',
       unit: 'kW',
       borderColor: baseColor,
@@ -236,6 +241,7 @@ const consumerDatasets = computed(() => {
   return [
     {
       label: CONSUMER_TOTAL_LABEL,
+      key: CONSUMER_TOTAL_KEY,
       category: 'consumer',
       unit: 'kW',
       borderColor: defaultColor,
@@ -256,7 +262,7 @@ const consumerDatasets = computed(() => {
     },
     ...ids.map((id) => ({
       ...individualDataset(id),
-      hidden: localDataStore.isDatasetHidden(consumerLabel(id)),
+      hidden: localDataStore.isDatasetHidden(consumerDatasetKey(id)),
     })),
   ];
 });
@@ -265,13 +271,13 @@ const seededHiddenConsumers = new Set<string>();
 watch(
   () =>
     mqttStore.consumerIds.length > 1
-      ? mqttStore.consumerIds.map((id) => consumerLabel(id))
+      ? mqttStore.consumerIds.map((id) => consumerDatasetKey(id))
       : [],
-  (labels) => {
-    labels.forEach((label) => {
-      if (!seededHiddenConsumers.has(label)) {
-        seededHiddenConsumers.add(label);
-        localDataStore.hideDataset(label);
+  (keys) => {
+    keys.forEach((key) => {
+      if (!seededHiddenConsumers.has(key)) {
+        seededHiddenConsumers.add(key);
+        localDataStore.hideDataset(key);
       }
     });
   },
@@ -288,6 +294,7 @@ const vehicleDatasets = computed(() =>
           getGlobalColor('--q-vehicle-stroke');
         return {
           label: `${vehicle.name} SoC`,
+          key: `vehicle-${vehicle.id}-soc`,
           category: 'vehicle',
           unit: '%',
           borderColor: baseColor,
@@ -347,6 +354,7 @@ const lineChartData = computed(() => {
     const baseColor = getGlobalColor('--q-grid-stroke');
     datasets.push({
       label: gridMeterName.value,
+      key: 'grid',
       category: 'component',
       unit: 'kW',
       borderColor: baseColor,
@@ -369,6 +377,7 @@ const lineChartData = computed(() => {
   if (mqttStore.homePower('value') !== undefined) {
     datasets.push({
       label: 'Hausverbrauch',
+      key: 'house',
       category: 'component',
       unit: 'kW',
       borderColor: getGlobalColor('--q-home-stroke'),
@@ -393,6 +402,7 @@ const lineChartData = computed(() => {
     const baseColor = getGlobalColor('--q-pv-stroke');
     datasets.push({
       label: 'PV ges.',
+      key: 'pv-total',
       category: 'component',
       unit: 'kW',
       borderColor: baseColor,
@@ -417,6 +427,7 @@ const lineChartData = computed(() => {
     datasets.push(
       {
         label: 'Speicher ges.',
+        key: BATTERY_TOTAL_KEY,
         category: 'component',
         unit: 'kW',
         borderColor: baseColor,
@@ -437,6 +448,7 @@ const lineChartData = computed(() => {
       },
       {
         label: 'Speicher SoC',
+        key: BATTERY_SOC_KEY,
         category: 'component',
         unit: '%',
         borderColor: '#FFB96E',
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
index f70c498a88..1e36105c04 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -31,7 +31,9 @@ import { ref, watch, computed, nextTick } from 'vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { Chart, ChartDataset, LegendItem } from 'chart.js';
 import {
-  CONSUMER_TOTAL_LABEL,
+  CONSUMER_TOTAL_KEY,
+  BATTERY_TOTAL_KEY,
+  BATTERY_SOC_KEY,
   type Category,
   type CategorizedDataset,
   type LegendItemWithCategory,
@@ -61,27 +63,26 @@ const batteryConfigured = computed(() => {
 
 const updateLegendItems = () => {
   if (!props.chart) return;
-  let items =
-    props.chart.options.plugins?.legend?.labels?.generateLabels?.(
-      props.chart,
-    ) || [];
-  if (!batteryConfigured.value) {
-    items = items.filter(
-      (item: LegendItemWithCategory) =>
-        item.text !== 'Speicher ges.' && item.text !== 'Speicher SoC',
-    );
-  }
-  (items as LegendItemWithCategory[]).forEach((item) => {
-    if (item.text && localDataStore.isDatasetHidden(item.text)) {
-      item.hidden = true;
-    }
-    // Inject the category from the dataset
+  let items = (props.chart.options.plugins?.legend?.labels?.generateLabels?.(
+    props.chart,
+  ) || []) as LegendItemWithCategory[];
+  items.forEach((item) => {
+    // Inject the category and key from the dataset
     const dataset = props.chart?.data.datasets[
       item.datasetIndex!
     ] as unknown as CategorizedDataset;
     item.category = dataset.category;
+    item.key = dataset.key;
+    if (item.key && localDataStore.isDatasetHidden(item.key)) {
+      item.hidden = true;
+    }
   });
-  legendItems.value = items as LegendItemWithCategory[];
+  if (!batteryConfigured.value) {
+    items = items.filter(
+      (item) => item.key !== BATTERY_TOTAL_KEY && item.key !== BATTERY_SOC_KEY,
+    );
+  }
+  legendItems.value = items;
 };
 
 const categorizedLegendItems = computed(() => {
@@ -111,7 +112,7 @@ const categorizedLegendItems = computed(() => {
 
     if (category === 'consumer') {
       const totalIndex = categories[category].findIndex(
-        (item) => item.text === CONSUMER_TOTAL_LABEL,
+        (item) => item.key === CONSUMER_TOTAL_KEY,
       );
       if (totalIndex > 0) {
         const [total] = categories[category].splice(totalIndex, 1);
@@ -139,10 +140,10 @@ const getItemLineType = (item: LegendItem) => {
     : 'solid';
 };
 
-const toggleDataset = (datasetName?: string, datasetIndex?: number) => {
-  if (!props.chart || !datasetName || datasetIndex === undefined) return;
-  localDataStore.toggleDataset(datasetName);
-  if (localDataStore.isDatasetHidden(datasetName)) {
+const toggleDataset = (datasetKey?: string, datasetIndex?: number) => {
+  if (!props.chart || !datasetKey || datasetIndex === undefined) return;
+  localDataStore.toggleDataset(datasetKey);
+  if (localDataStore.isDatasetHidden(datasetKey)) {
     props.chart.hide(datasetIndex);
   } else {
     props.chart.show(datasetIndex);
@@ -156,10 +157,8 @@ watch(
   (newChart) => {
     if (newChart) {
       newChart.data.datasets.forEach((dataset, index) => {
-        if (
-          typeof dataset.label === 'string' &&
-          localDataStore.isDatasetHidden(dataset.label)
-        ) {
+        const { key } = dataset as unknown as CategorizedDataset;
+        if (key && localDataStore.isDatasetHidden(key)) {
           newChart.hide(index);
         }
       });
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
index 66d563d01d..e7ce310283 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
@@ -53,11 +53,11 @@ import { computed } from 'vue';
 import { useQuasar } from 'quasar';
 import HistoryChartLegendCategory from './HistoryChartLegendCategory.vue';
 import type { LegendItem } from 'chart.js';
-import type { Category } from './history-chart-model';
+import type { Category, LegendItemWithCategory } from './history-chart-model';
 
 const props = defineProps<{
-  categorizedLegendItems: Record<Category, LegendItem[]>;
-  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  categorizedLegendItems: Record<Category, LegendItemWithCategory[]>;
+  toggleDataset: (datasetKey: string | undefined, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
 }>();
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
index aeec8de4ee..3876526674 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
@@ -12,14 +12,14 @@
     <q-list dense class="q-pa-none" style="max-height: 200px; overflow-y: auto">
       <q-item
         v-for="(dataset, index) in items"
-        :key="dataset.text || index"
+        :key="dataset.key || index"
         clickable
         dense
         class="q-py-none"
         :class="{ 'legend-item-hidden': dataset.hidden }"
         @click="
           dataset.datasetIndex !== undefined &&
-          toggleDataset(dataset.text, dataset.datasetIndex)
+          toggleDataset(dataset.key, dataset.datasetIndex)
         "
       >
         <q-item-section avatar class="q-pr-none">
@@ -60,11 +60,12 @@
 <script setup lang="ts">
 import { LegendItem } from 'chart.js';
 import type { QMenuProps } from 'quasar';
+import type { LegendItemWithCategory } from './history-chart-model';
 
 defineProps<{
   label: string;
-  items: LegendItem[];
-  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  items: LegendItemWithCategory[];
+  toggleDataset: (datasetKey: string | undefined, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
   menuAnchor: QMenuProps['anchor'];
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue
index fb284de12c..d18b6ccd85 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue
@@ -3,14 +3,14 @@
     <div class="row wrap q-pa-none items-center justify-center">
       <q-item
         v-for="(dataset, index) in items"
-        :key="dataset.text || index"
+        :key="dataset.key || index"
         clickable
         dense
         class="q-py-none"
         :class="{ 'legend-item-hidden': dataset.hidden }"
         @click="
           dataset.datasetIndex !== undefined &&
-          toggleDataset(dataset.text, dataset.datasetIndex)
+          toggleDataset(dataset.key, dataset.datasetIndex)
         "
       >
         <q-item-section avatar class="q-pr-none">
@@ -50,10 +50,11 @@
 
 <script setup lang="ts">
 import { LegendItem } from 'chart.js';
+import type { LegendItemWithCategory } from './history-chart-model';
 
 defineProps<{
-  items: LegendItem[];
-  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  items: LegendItemWithCategory[];
+  toggleDataset: (datasetKey: string | undefined, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
 }>();
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index acc7c19fa9..c9f60823e7 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -20,15 +20,23 @@ export type Category =
 
 export const CONSUMER_TOTAL_LABEL = 'Verbraucher ges.';
 
-// Add category to the chart datasets
+export const CONSUMER_TOTAL_KEY = 'consumer-total';
+export const BATTERY_TOTAL_KEY = 'battery-total';
+export const BATTERY_SOC_KEY = 'battery-soc';
+
+export const consumerDatasetKey = (id: number) => `consumer-${id}`;
+
+// Add category and key to the chart datasets
 export interface CategorizedDataset extends ChartDataset<
   'line',
   { x: number; y: number }
 > {
   category: Category;
+  key: string;
 }
 
-// Add category to the legendItem
+// Add category and key to the legendItem
 export interface LegendItemWithCategory extends LegendItem {
   category?: Category;
+  key?: string;
 }
diff --git a/packages/modules/web_themes/koala/source/src/stores/localData-store.ts b/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
index 7fa748fb1d..170aa5c1ce 100644
--- a/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
@@ -18,28 +18,28 @@ export const useLocalDataStore = defineStore('localData', () => {
   const hiddenDatasets = ref<string[]>([]);
 
   // Function to add a dataset to hidden list
-  const hideDataset = (datasetName: string) => {
-    if (!hiddenDatasets.value.includes(datasetName)) {
-      hiddenDatasets.value.push(datasetName);
+  const hideDataset = (datasetKey: string) => {
+    if (!hiddenDatasets.value.includes(datasetKey)) {
+      hiddenDatasets.value.push(datasetKey);
     }
   };
 
-  const showDataset = (datasetName: string) => {
+  const showDataset = (datasetKey: string) => {
     hiddenDatasets.value = hiddenDatasets.value.filter(
-      (item) => item !== datasetName,
+      (item) => item !== datasetKey,
     );
   };
 
-  const toggleDataset = (datasetName: string) => {
-    if (hiddenDatasets.value.includes(datasetName)) {
-      showDataset(datasetName);
+  const toggleDataset = (datasetKey: string) => {
+    if (hiddenDatasets.value.includes(datasetKey)) {
+      showDataset(datasetKey);
     } else {
-      hideDataset(datasetName);
+      hideDataset(datasetKey);
     }
   };
 
-  const isDatasetHidden = (datasetName: string): boolean => {
-    return hiddenDatasets.value.includes(datasetName);
+  const isDatasetHidden = (datasetKey: string): boolean => {
+    return hiddenDatasets.value.includes(datasetKey);
   };
 
   return {

From a1dcaa8578eb38ef2e2390facf29af7cb7eeb986 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 20 Jul 2026 09:04:59 +0200
Subject: [PATCH 15/15] Update history chart legend categories CSS

---
 .../HistoryChartLegendCategoriesGroup.vue     | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
index e7ce310283..aec4d68f45 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="items-center"
-    :class="wrapToGrid ? 'legend-categories-grid' : 'row justify-center'"
-  >
+  <div class="row justify-center items-center">
     <HistoryChartLegendCategory
       :label="'Komponenten'"
       :items="categorizedLegendItems.component"
@@ -21,7 +18,6 @@
       :getItemLineType="getItemLineType"
       menuAnchor="bottom middle"
       menuSelf="top middle"
-      :menuFormat="wrapToGrid ? undefined : 'q-mx-lg'"
     />
 
     <HistoryChartLegendCategory
@@ -32,7 +28,6 @@
       :getItemLineType="getItemLineType"
       menuAnchor="bottom middle"
       menuSelf="top middle"
-      :menuFormat="wrapToGrid ? undefined : 'q-mx-lg'"
     />
 
     <HistoryChartLegendCategory
@@ -49,36 +44,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useQuasar } from 'quasar';
 import HistoryChartLegendCategory from './HistoryChartLegendCategory.vue';
 import type { LegendItem } from 'chart.js';
 import type { Category, LegendItemWithCategory } from './history-chart-model';
 
-const props = defineProps<{
+defineProps<{
   categorizedLegendItems: Record<Category, LegendItemWithCategory[]>;
   toggleDataset: (datasetKey: string | undefined, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
 }>();
-
-const $q = useQuasar();
-const wrapToGrid = computed(
-  () =>
-    props.categorizedLegendItems.consumer.length > 0 && $q.screen.width < 700,
-);
 </script>
 
 <style scoped>
-.legend-categories-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  justify-items: stretch;
-  gap: 4px 8px;
+:deep(.q-btn):not(:first-child) {
+  margin-left: 4px;
 }
-
-.legend-categories-grid :deep(.q-btn) {
-  margin: 0;
-  width: 100%;
+:deep(.q-btn) .q-btn-dropdown__arrow {
+  margin-left: 0;
 }
 </style>