From f136ffba6cd372c2df8e9fe1b5257a2d9095eebe Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Mon, 8 Sep 2025 16:56:22 +0200
Subject: [PATCH 1/5] Flow chart animation (speed / width) based on current
 flow

---
 .../energyFlowChart/EnergyFlowChart.vue       | 58 +++++++++++++++++++
 .../energy-flow-chart-models.ts               |  1 +
 2 files changed, 59 insertions(+)

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 944a7b0967..101f8ce168 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
@@ -246,6 +246,27 @@ const chargePointSumCharging = computed(
   () => Number(chargePointSumPower.value.value) > 0,
 );
 
+///////////////////// Set animation speed and size ///////////////////
+
+const getCurrentCategory = (value: number) => {
+  if (Math.abs(value) >= 5000) return 'large';
+  if (Math.abs(value) >= 1500) return 'medium';
+  return 'small';
+};
+
+const useCurrentCategory = (powerRef: () => ValueObject) => {
+  return computed(() => getCurrentCategory(Number(powerRef().value)));
+}
+
+const pvCurrentCategory = useCurrentCategory(() => pvPower.value);
+const batteryCurrentCategory = useCurrentCategory(() => batteryPower.value);
+const gridCurrentCategory = useCurrentCategory(() => gridPower.value);
+const homeCurrentCategory = useCurrentCategory(() => homePower.value);
+const chargePoint1CurrentCategory = useCurrentCategory(() => chargePoint1Power.value);
+const chargePoint2CurrentCategory = useCurrentCategory(() => chargePoint2Power.value);
+const chargePoint3CurrentCategory = useCurrentCategory(() => chargePoint3Power.value);
+const chargePointSumCurrentCategory = useCurrentCategory(() => chargePointSumPower.value);
+
 ///////////////////////// Diagram components /////////////////////////
 
 const svgComponents = computed((): FlowComponent[] => {
@@ -262,6 +283,7 @@ const svgComponents = computed((): FlowComponent[] => {
           : '',
       animated: gridConsumption.value,
       animatedReverse: gridFeedIn.value,
+      currentCategory: gridCurrentCategory.value,
     },
     position: { row: 0, column: 0 },
     label: ['EVU', absoluteValueObject(gridPower.value).textValue],
@@ -275,6 +297,7 @@ const svgComponents = computed((): FlowComponent[] => {
       valueLabel: '',
       animated: homeProduction.value,
       animatedReverse: homeConsumption.value,
+      currentCategory: homeCurrentCategory.value,
     },
     position: { row: 0, column: 2 },
     label: ['Haus', absoluteValueObject(homePower.value).textValue],
@@ -289,6 +312,7 @@ const svgComponents = computed((): FlowComponent[] => {
         valueLabel: 'fill-success',
         animated: pvProduction.value,
         animatedReverse: pvConsumption.value,
+        currentCategory: pvCurrentCategory.value,
       },
       position: { row: 1, column: 0 },
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
@@ -304,6 +328,7 @@ const svgComponents = computed((): FlowComponent[] => {
         valueLabel: '',
         animated: batteryDischarging.value,
         animatedReverse: batteryCharging.value,
+        currentCategory: batteryCurrentCategory.value,
       },
       position: { row: 1, column: 2 },
       label: ['Speicher', absoluteValueObject(batteryPower.value).textValue],
@@ -322,6 +347,7 @@ const svgComponents = computed((): FlowComponent[] => {
           valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
+          currentCategory: chargePoint1CurrentCategory.value,
         },
         position: {
           row: 2,
@@ -344,6 +370,7 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
             animatedReverse: chargePoint1Charging.value,
+            currentCategory: chargePoint1CurrentCategory.value,
           },
           position: {
             row: 3,
@@ -367,6 +394,7 @@ const svgComponents = computed((): FlowComponent[] => {
             valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
+            currentCategory: chargePoint2CurrentCategory.value,
           },
           position: {
             row: 2,
@@ -390,6 +418,7 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
+            currentCategory: chargePoint2CurrentCategory.value,
           },
           position: {
             row: 3,
@@ -413,6 +442,7 @@ const svgComponents = computed((): FlowComponent[] => {
             valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
+            currentCategory: chargePoint3CurrentCategory.value,
           },
           position: { row: 2, column: 2 },
           label: [
@@ -433,6 +463,7 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
+            currentCategory: chargePoint2CurrentCategory.value,
           },
           position: {
             row: 3,
@@ -455,6 +486,7 @@ const svgComponents = computed((): FlowComponent[] => {
           valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
+          currentCategory: chargePointSumCurrentCategory.value,
         },
         position: { row: 2, column: 1 },
         label: [
@@ -540,6 +572,8 @@ const svgRectWidth = computed(
       svgSize.value.numColumns) /
     svgSize.value.numColumns,
 );
+
+
 </script>
 
 <template>
@@ -558,6 +592,7 @@ const svgRectWidth = computed(
             component.class.base,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
+            component.class.currentCategory
           ]"
           :d="
             component.class.base !== 'vehicle'
@@ -937,4 +972,27 @@ text .fill-dark {
 .vehicle circle:not(.soc) {
   fill: color-mix(in srgb, var(--q-accent) 50%, transparent);
 }
+
+/* path.small {
+  stroke-width: 0.5;
+}
+path.medium {
+  stroke-width: 1;
+}
+path.large {
+  stroke-width: 1.5;
+} */
+
+path.small.animated,
+path.small.animatedReverse {
+  animation-duration: 2s;
+}
+path.medium.animated,
+path.medium.animatedReverse {
+  animation-duration: 1.5s;
+}
+path.large.animated,
+path.large.animatedReverse {
+  animation-duration: 0.75s;
+}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index 519aec3150..efe6d18374 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -15,6 +15,7 @@ export interface ComponentClass {
   valueLabel: string;
   animated?: boolean;
   animatedReverse?: boolean;
+  currentCategory?: string;
 }
 
 export interface ComponentPosition {

From a58f2525c7ce3e171afd8cc2db9bc4ff7fccd9cc Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 9 Sep 2025 13:24:52 +0200
Subject: [PATCH 2/5] formating

---
 .../energyFlowChart/EnergyFlowChart.vue       | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

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 101f8ce168..05d03d98de 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
@@ -254,18 +254,27 @@ const getCurrentCategory = (value: number) => {
   return 'small';
 };
 
+// helper function to create a computed property for current category
 const useCurrentCategory = (powerRef: () => ValueObject) => {
   return computed(() => getCurrentCategory(Number(powerRef().value)));
-}
+};
 
 const pvCurrentCategory = useCurrentCategory(() => pvPower.value);
 const batteryCurrentCategory = useCurrentCategory(() => batteryPower.value);
 const gridCurrentCategory = useCurrentCategory(() => gridPower.value);
 const homeCurrentCategory = useCurrentCategory(() => homePower.value);
-const chargePoint1CurrentCategory = useCurrentCategory(() => chargePoint1Power.value);
-const chargePoint2CurrentCategory = useCurrentCategory(() => chargePoint2Power.value);
-const chargePoint3CurrentCategory = useCurrentCategory(() => chargePoint3Power.value);
-const chargePointSumCurrentCategory = useCurrentCategory(() => chargePointSumPower.value);
+const chargePoint1CurrentCategory = useCurrentCategory(
+  () => chargePoint1Power.value,
+);
+const chargePoint2CurrentCategory = useCurrentCategory(
+  () => chargePoint2Power.value,
+);
+const chargePoint3CurrentCategory = useCurrentCategory(
+  () => chargePoint3Power.value,
+);
+const chargePointSumCurrentCategory = useCurrentCategory(
+  () => chargePointSumPower.value,
+);
 
 ///////////////////////// Diagram components /////////////////////////
 
@@ -572,8 +581,6 @@ const svgRectWidth = computed(
       svgSize.value.numColumns) /
     svgSize.value.numColumns,
 );
-
-
 </script>
 
 <template>
@@ -592,7 +599,7 @@ const svgRectWidth = computed(
             component.class.base,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
-            component.class.currentCategory
+            component.class.currentCategory,
           ]"
           :d="
             component.class.base !== 'vehicle'
@@ -779,6 +786,29 @@ path.animatedReverse {
   animation: dashReverse 1s linear infinite;
 }
 
+/* path.small {
+  stroke-width: 0.5;
+}
+path.medium {
+  stroke-width: 1;
+}
+path.large {
+  stroke-width: 1.5;
+} */
+
+path.small.animated,
+path.small.animatedReverse {
+  animation-duration: 2s;
+}
+path.medium.animated,
+path.medium.animatedReverse {
+  animation-duration: 1.5s;
+}
+path.large.animated,
+path.large.animatedReverse {
+  animation-duration: 0.75s;
+}
+
 path.animated.grid {
   stroke: var(--q-negative);
 }
@@ -972,27 +1002,4 @@ text .fill-dark {
 .vehicle circle:not(.soc) {
   fill: color-mix(in srgb, var(--q-accent) 50%, transparent);
 }
-
-/* path.small {
-  stroke-width: 0.5;
-}
-path.medium {
-  stroke-width: 1;
-}
-path.large {
-  stroke-width: 1.5;
-} */
-
-path.small.animated,
-path.small.animatedReverse {
-  animation-duration: 2s;
-}
-path.medium.animated,
-path.medium.animatedReverse {
-  animation-duration: 1.5s;
-}
-path.large.animated,
-path.large.animatedReverse {
-  animation-duration: 0.75s;
-}
 </style>

From fde1a86ff9763031067417e0aa6f92ee789dc4f3 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 11 Sep 2025 09:35:21 +0200
Subject: [PATCH 3/5] Refactor animation categories

---
 .../energyFlowChart/EnergyFlowChart.vue       | 82 ++++++++-----------
 .../energy-flow-chart-models.ts               |  2 +-
 2 files changed, 36 insertions(+), 48 deletions(-)

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 05d03d98de..90449d8a7e 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
@@ -246,34 +246,32 @@ const chargePointSumCharging = computed(
   () => Number(chargePointSumPower.value.value) > 0,
 );
 
-///////////////////// Set animation speed and size ///////////////////
-
-const getCurrentCategory = (value: number) => {
-  if (Math.abs(value) >= 5000) return 'large';
-  if (Math.abs(value) >= 1500) return 'medium';
-  return 'small';
-};
-
-// helper function to create a computed property for current category
-const useCurrentCategory = (powerRef: () => ValueObject) => {
-  return computed(() => getCurrentCategory(Number(powerRef().value)));
+///////////////////// Set animation speed //////////////////////////
+
+const powerCategory = (powerRef: () => number) => {
+  return computed(() => {
+    const value = powerRef();
+    if (Math.abs(value) >= 5000) return 'large';
+    if (Math.abs(value) >= 1500) return 'medium';
+    return 'small';
+  });
 };
 
-const pvCurrentCategory = useCurrentCategory(() => pvPower.value);
-const batteryCurrentCategory = useCurrentCategory(() => batteryPower.value);
-const gridCurrentCategory = useCurrentCategory(() => gridPower.value);
-const homeCurrentCategory = useCurrentCategory(() => homePower.value);
-const chargePoint1CurrentCategory = useCurrentCategory(
-  () => chargePoint1Power.value,
+const pvPowerCategory = powerCategory(() => pvPower.value.value);
+const batteryPowerCategory = powerCategory(() => batteryPower.value.value);
+const gridPowerCategory = powerCategory(() => gridPower.value.value);
+const homePowerCategory = powerCategory(() => homePower.value.value);
+const chargePoint1PowerCategory = powerCategory(
+  () => chargePoint1Power.value.value,
 );
-const chargePoint2CurrentCategory = useCurrentCategory(
-  () => chargePoint2Power.value,
+const chargePoint2PowerCategory = powerCategory(
+  () => chargePoint2Power.value.value,
 );
-const chargePoint3CurrentCategory = useCurrentCategory(
-  () => chargePoint3Power.value,
+const chargePoint3PowerCategory = powerCategory(
+  () => chargePoint3Power.value.value,
 );
-const chargePointSumCurrentCategory = useCurrentCategory(
-  () => chargePointSumPower.value,
+const chargePointSumPowerCategory = powerCategory(
+  () => chargePointSumPower.value.value,
 );
 
 ///////////////////////// Diagram components /////////////////////////
@@ -292,7 +290,7 @@ const svgComponents = computed((): FlowComponent[] => {
           : '',
       animated: gridConsumption.value,
       animatedReverse: gridFeedIn.value,
-      currentCategory: gridCurrentCategory.value,
+      powerCategory: gridPowerCategory.value,
     },
     position: { row: 0, column: 0 },
     label: ['EVU', absoluteValueObject(gridPower.value).textValue],
@@ -306,7 +304,7 @@ const svgComponents = computed((): FlowComponent[] => {
       valueLabel: '',
       animated: homeProduction.value,
       animatedReverse: homeConsumption.value,
-      currentCategory: homeCurrentCategory.value,
+      powerCategory: homePowerCategory.value,
     },
     position: { row: 0, column: 2 },
     label: ['Haus', absoluteValueObject(homePower.value).textValue],
@@ -321,7 +319,7 @@ const svgComponents = computed((): FlowComponent[] => {
         valueLabel: 'fill-success',
         animated: pvProduction.value,
         animatedReverse: pvConsumption.value,
-        currentCategory: pvCurrentCategory.value,
+        powerCategory: pvPowerCategory.value,
       },
       position: { row: 1, column: 0 },
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
@@ -337,7 +335,7 @@ const svgComponents = computed((): FlowComponent[] => {
         valueLabel: '',
         animated: batteryDischarging.value,
         animatedReverse: batteryCharging.value,
-        currentCategory: batteryCurrentCategory.value,
+        powerCategory: batteryPowerCategory.value,
       },
       position: { row: 1, column: 2 },
       label: ['Speicher', absoluteValueObject(batteryPower.value).textValue],
@@ -356,7 +354,7 @@ const svgComponents = computed((): FlowComponent[] => {
           valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
-          currentCategory: chargePoint1CurrentCategory.value,
+          powerCategory: chargePoint1PowerCategory.value,
         },
         position: {
           row: 2,
@@ -379,7 +377,7 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
             animatedReverse: chargePoint1Charging.value,
-            currentCategory: chargePoint1CurrentCategory.value,
+            powerCategory: chargePoint1PowerCategory.value,
           },
           position: {
             row: 3,
@@ -403,7 +401,7 @@ const svgComponents = computed((): FlowComponent[] => {
             valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
-            currentCategory: chargePoint2CurrentCategory.value,
+            powerCategory: chargePoint2PowerCategory.value,
           },
           position: {
             row: 2,
@@ -427,7 +425,7 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
-            currentCategory: chargePoint2CurrentCategory.value,
+            powerCategory: chargePoint2PowerCategory.value,
           },
           position: {
             row: 3,
@@ -451,7 +449,7 @@ const svgComponents = computed((): FlowComponent[] => {
             valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
-            currentCategory: chargePoint3CurrentCategory.value,
+            powerCategory: chargePoint3PowerCategory.value,
           },
           position: { row: 2, column: 2 },
           label: [
@@ -472,7 +470,7 @@ const svgComponents = computed((): FlowComponent[] => {
               'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
-            currentCategory: chargePoint2CurrentCategory.value,
+            powerCategory: chargePoint3PowerCategory.value,
           },
           position: {
             row: 3,
@@ -495,7 +493,7 @@ const svgComponents = computed((): FlowComponent[] => {
           valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
-          currentCategory: chargePointSumCurrentCategory.value,
+          powerCategory: chargePointSumPowerCategory.value,
         },
         position: { row: 2, column: 1 },
         label: [
@@ -599,7 +597,7 @@ const svgRectWidth = computed(
             component.class.base,
             { animated: component.class.animated },
             { animatedReverse: component.class.animatedReverse },
-            component.class.currentCategory,
+            component.class.powerCategory,
           ]"
           :d="
             component.class.base !== 'vehicle'
@@ -786,19 +784,9 @@ path.animatedReverse {
   animation: dashReverse 1s linear infinite;
 }
 
-/* path.small {
-  stroke-width: 0.5;
-}
-path.medium {
-  stroke-width: 1;
-}
-path.large {
-  stroke-width: 1.5;
-} */
-
 path.small.animated,
 path.small.animatedReverse {
-  animation-duration: 2s;
+  animation-duration: 3.5s;
 }
 path.medium.animated,
 path.medium.animatedReverse {
@@ -806,7 +794,7 @@ path.medium.animatedReverse {
 }
 path.large.animated,
 path.large.animatedReverse {
-  animation-duration: 0.75s;
+  animation-duration: 0.6s;
 }
 
 path.animated.grid {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index efe6d18374..d8b1dab41c 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -15,7 +15,7 @@ export interface ComponentClass {
   valueLabel: string;
   animated?: boolean;
   animatedReverse?: boolean;
-  currentCategory?: string;
+  powerCategory?: string;
 }
 
 export interface ComponentPosition {

From d365c4fe786a4555ce555c9f59c149e498a4c088 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Thu, 11 Sep 2025 14:02:50 +0200
Subject: [PATCH 4/5] Refactor animation categories 2

---
 .../energyFlowChart/EnergyFlowChart.vue       | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

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 90449d8a7e..ca1933274e 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
@@ -248,30 +248,29 @@ const chargePointSumCharging = computed(
 
 ///////////////////// Set animation speed //////////////////////////
 
-const powerCategory = (powerRef: () => number) => {
-  return computed(() => {
-    const value = powerRef();
-    if (Math.abs(value) >= 5000) return 'large';
-    if (Math.abs(value) >= 1500) return 'medium';
+const powerCategory = (power: number) => {
+    if (Math.abs(power) >= 5000) return 'large';
+    if (Math.abs(power) >= 1500) return 'medium';
     return 'small';
-  });
 };
 
-const pvPowerCategory = powerCategory(() => pvPower.value.value);
-const batteryPowerCategory = powerCategory(() => batteryPower.value.value);
-const gridPowerCategory = powerCategory(() => gridPower.value.value);
-const homePowerCategory = powerCategory(() => homePower.value.value);
-const chargePoint1PowerCategory = powerCategory(
-  () => chargePoint1Power.value.value,
+const pvPowerCategory = computed(() => powerCategory(pvPower.value.value));
+const batteryPowerCategory = computed(() =>
+  powerCategory(batteryPower.value.value),
+);
+const gridPowerCategory = computed(() => powerCategory(gridPower.value.value));
+const homePowerCategory = computed(() => powerCategory(homePower.value.value));
+const chargePoint1PowerCategory = computed(() =>
+  powerCategory(chargePoint1Power.value.value),
 );
-const chargePoint2PowerCategory = powerCategory(
-  () => chargePoint2Power.value.value,
+const chargePoint2PowerCategory = computed(() =>
+  powerCategory(chargePoint2Power.value.value),
 );
-const chargePoint3PowerCategory = powerCategory(
-  () => chargePoint3Power.value.value,
+const chargePoint3PowerCategory = computed(() =>
+  powerCategory(chargePoint3Power.value.value),
 );
-const chargePointSumPowerCategory = powerCategory(
-  () => chargePointSumPower.value.value,
+const chargePointSumPowerCategory = computed(() =>
+  powerCategory(chargePointSumPower.value.value),
 );
 
 ///////////////////////// Diagram components /////////////////////////

From 461545f5e54acd273addb8582b6d61d18db13aba Mon Sep 17 00:00:00 2001
From: benderl <benderl@users.noreply.github.com>
Date: Fri, 12 Sep 2025 08:32:33 +0200
Subject: [PATCH 5/5] cleanup css animation settings

---
 .../energyFlowChart/EnergyFlowChart.vue       | 53 +++++++++----------
 1 file changed, 24 insertions(+), 29 deletions(-)

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 ca1933274e..f5c402d523 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
@@ -249,9 +249,9 @@ const chargePointSumCharging = computed(
 ///////////////////// Set animation speed //////////////////////////
 
 const powerCategory = (power: number) => {
-    if (Math.abs(power) >= 5000) return 'large';
-    if (Math.abs(power) >= 1500) return 'medium';
-    return 'small';
+  if (Math.abs(power) >= 5000) return 'large';
+  if (Math.abs(power) >= 1500) return 'medium';
+  return 'small';
 };
 
 const pvPowerCategory = computed(() => powerCategory(pvPower.value.value));
@@ -752,13 +752,11 @@ const svgRectWidth = computed(
   user-select: none;
 }
 
-/* ------ */
 svg {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
-/* ------ */
 
 path {
   fill: none;
@@ -774,28 +772,43 @@ path {
 path.animated {
   stroke: var(--q-white);
   stroke-dasharray: 5;
-  animation: dash 1s linear infinite;
+  animation: dash 3.5s linear infinite;
 }
 
 path.animatedReverse {
   stroke: var(--q-white);
   stroke-dasharray: 5;
-  animation: dashReverse 1s linear infinite;
+  animation: dashReverse 3.5s linear infinite;
 }
 
-path.small.animated,
-path.small.animatedReverse {
-  animation-duration: 3.5s;
-}
 path.medium.animated,
 path.medium.animatedReverse {
   animation-duration: 1.5s;
 }
+
 path.large.animated,
 path.large.animatedReverse {
   animation-duration: 0.6s;
 }
 
+@keyframes dash {
+  from {
+    stroke-dashoffset: 10;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes dashReverse {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: 10;
+  }
+}
+
 path.animated.grid {
   stroke: var(--q-negative);
 }
@@ -862,24 +875,6 @@ rect {
   }
 }
 
-@keyframes dash {
-  from {
-    stroke-dashoffset: 20;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes dashReverse {
-  from {
-    stroke-dashoffset: 0;
-  }
-  to {
-    stroke-dashoffset: 20;
-  }
-}
-
 text {
   font-size: v-bind(svgFontSize);
   line-height: 1.25;