Intergrate consumers in koala theme charts

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;
 }
 

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: mqttStore.consumerColor(id) || 'var(--q-consumer)',
+      });
+    }
+  });
+  return consumers;
+});
+
 const componentData = computed((): DailyTotalsItem[] => {
   const components: DailyTotalsItem[] = [];
 
@@ -466,6 +519,24 @@ 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:
+        mqttStore.consumerIds.length === 1
+          ? mqttStore.consumerColor(mqttStore.consumerIds[0]) ||
+            'var(--q-consumer)'
+          : 'var(--q-consumer)',
+    });
+  }
   return components;
 });
 

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>
 

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);