From 0e21ac21c0f001545cf78f56660fa368651a210b Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sat, 9 Aug 2025 08:16:24 +0200
Subject: [PATCH 1/2] Fix powergraph headings and Axis

---
 .../src/components/powerGraph/PgXAxis.vue     |   8 +-
 .../src/components/powerGraph/PowerGraph.vue  | 111 ++++++++++--------
 .../src/components/powerMeter/PMArc.vue       |   7 +-
 3 files changed, 75 insertions(+), 51 deletions(-)

diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue
index faf6971e2d..95830cdfeb 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue
@@ -132,7 +132,13 @@ const drawAxis1 = computed(() => {
 		.attr('y', 12)
 		.attr('fill', 'var(--color-axis)')
 		.attr('font-size', fontsize)
-		.text(graphData.graphMode == 'year' ? 'MW' : 'kW')
+		.text(
+			graphData.graphMode == 'year'
+				? 'MWh'
+				: graphData.graphMode == 'month'
+					? 'kWh'
+					: 'kW',
+		)
 		.attr('text-anchor', 'start')
 	return 'PGXAxis.vue'
 })
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
index 1d95fa5884..bdf9062748 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
@@ -126,6 +126,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import WBWidget from '../shared/WBWidget.vue'
 import PgSourceGraph from './PgSourceGraph.vue'
 import PgUsageGraph from './PgUsageGraph.vue'
@@ -154,47 +155,79 @@ import PgToolTips from './PgToolTips.vue'
 
 // state
 const stackOrderMax = 2
-const heading = 'Leistung / Ladestand '
-function changeStackOrder() {
-	let newOrder = globalConfig.usageStackOrder + 1
-	if (newOrder > stackOrderMax) {
-		newOrder = 0
+const heading = computed(() => {
+	switch (graphData.graphMode) {
+		case 'year':
+			return 'Jahresübersicht'
+		case 'month':
+			return 'Monatsübersicht'
+		default:
+			return 'Leistung / Ladestand'
 	}
-	globalConfig.usageStackOrder = newOrder
-	setInitializeUsageGraph(true)
+})
+/**
+ * Changes the stack order for usage graph visualization
+ * Cycles through available stack orders (0 to stackOrderMax)
+ * Triggers usage graph reinitialization after change
+ */
+function changeStackOrder() {
+    let newOrder = globalConfig.usageStackOrder + 1
+    if (newOrder > stackOrderMax) {
+        newOrder = 0
+    }
+    globalConfig.usageStackOrder = newOrder
+    setInitializeUsageGraph(true)
 }
+
+/**
+ * Configures zoom behavior for the power graph SVG
+ * @param svg - D3 Selection of the SVG element to apply zoom to
+ */
 function setZoom(svg: Selection<Element, unknown, HTMLElement, unknown>) {
-	const myextent: [[number, number], [number, number]] = [
-		[0, margin.top],
-		[width, height - margin.top],
-	]
-	svg.call(
-		zoom<Element, unknown>()
-			.scaleExtent([1, 8])
-			.translateExtent([
-				[0, 0],
-				[width, height],
-			])
-			.extent(myextent)
-			.filter(filter)
-			.on('zoom', zoomed),
-	)
+    const myextent: [[number, number], [number, number]] = [
+        [0, margin.top],
+        [width, height - margin.top],
+    ]
+    svg.call(
+        zoom<Element, unknown>()
+            .scaleExtent([1, 8])
+            .translateExtent([
+                [0, 0],
+                [width, height],
+            ])
+            .extent(myextent)
+            .filter(filter)
+            .on('zoom', zoomed),
+    )
 }
 
-// callback that is called when the user tries to pan/zoom in the window
+/**
+ * Handles zoom events on the graph
+ * Updates the transform value used for rendering
+ * @param event - D3 zoom event containing transform information
+ */
 function zoomed(event: D3ZoomEvent<SVGGElement, unknown>) {
-	mytransform.value = event.transform
+    mytransform.value = event.transform
 }
 
-// prevent scrolling then apply the default filter
+/**
+ * Filters zoom/pan events to control graph interaction
+ * Prevents default scroll behavior and applies zoom constraints
+ * @param event - Browser pointer or wheel event
+ * @returns boolean indicating if the event should trigger zoom
+ */
 function filter(event: PointerEvent | WheelEvent) {
-	event.preventDefault()
-	return (!event.ctrlKey || event.type === 'wheel') && !event.button
+    event.preventDefault()
+    return (!event.ctrlKey || event.type === 'wheel') && !event.button
 }
 
+/**
+ * Toggles the zoom state of the graph
+ * Sets the current widget as active and toggles zoom mode
+ */
 function zoomGraph() {
-	globalConfig.zoomedWidget = 1
-	globalConfig.zoomGraph = !globalConfig.zoomGraph
+    globalConfig.zoomedWidget = 1
+    globalConfig.zoomGraph = !globalConfig.zoomGraph
 }
 
 onMounted(() => {
@@ -205,24 +238,6 @@ onMounted(() => {
 
 <style scoped>
 .fa-magnifying-glass {
-	color: var(--color-menu);
-}
-
-.dateWbBadge {
-	background-color: var(--color-menu);
-	color: var(--color-bg);
-	font-size: var(--font-medium);
-	font-weight: normal;
-}
-
-.waitsign {
-	text-align: center;
-	font-size: var(--font-medium);
-	color: var(--color-fg);
-	border: 1px solid var(--color-bg);
-	padding: 2em;
-	margin: 2em;
-	margin-top: 4em;
-	background-color: var(--color-bg);
+    color: var(--color-menu);
 }
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/powerMeter/PMArc.vue b/packages/modules/web_themes/colors/source/src/components/powerMeter/PMArc.vue
index 2f18d52c06..0e53cf73af 100644
--- a/packages/modules/web_themes/colors/source/src/components/powerMeter/PMArc.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerMeter/PMArc.vue
@@ -33,7 +33,10 @@
 			:transform="'translate(' + path.centroid(consumer) + ')'"
 		>
 			<PMPopup
-				v-if="categoriesToShow.includes(consumer.data.type) && Math.abs(consumer.data.power) / summarizedPower > 0.05"
+				v-if="
+					categoriesToShow.includes(consumer.data.type) &&
+					Math.abs(consumer.data.power) / summarizedPower > 0.05
+				"
 				:consumer="consumer.data"
 			/>
 		</g>
@@ -83,7 +86,7 @@ function strokeColor(d: PieArcDatum<PowerItem>, i: number): string {
 			: 'null'
 		: d.data.color
 }
-const summarizedPower = computed (() => {
+const summarizedPower = computed(() => {
 	return props.plotdata.reduce((sum, item) => sum + Math.abs(item.power), 0)
 })
 </script>

From d7347687348f7d4dc2e6ad3edbea66429e7b9ec5 Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sat, 9 Aug 2025 08:23:05 +0200
Subject: [PATCH 2/2] add documentation

---
 .../src/components/powerGraph/PowerGraph.vue  | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
index bdf9062748..0e2515dbdd 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
@@ -171,12 +171,12 @@ const heading = computed(() => {
  * Triggers usage graph reinitialization after change
  */
 function changeStackOrder() {
-    let newOrder = globalConfig.usageStackOrder + 1
-    if (newOrder > stackOrderMax) {
-        newOrder = 0
-    }
-    globalConfig.usageStackOrder = newOrder
-    setInitializeUsageGraph(true)
+	let newOrder = globalConfig.usageStackOrder + 1
+	if (newOrder > stackOrderMax) {
+		newOrder = 0
+	}
+	globalConfig.usageStackOrder = newOrder
+	setInitializeUsageGraph(true)
 }
 
 /**
@@ -184,21 +184,21 @@ function changeStackOrder() {
  * @param svg - D3 Selection of the SVG element to apply zoom to
  */
 function setZoom(svg: Selection<Element, unknown, HTMLElement, unknown>) {
-    const myextent: [[number, number], [number, number]] = [
-        [0, margin.top],
-        [width, height - margin.top],
-    ]
-    svg.call(
-        zoom<Element, unknown>()
-            .scaleExtent([1, 8])
-            .translateExtent([
-                [0, 0],
-                [width, height],
-            ])
-            .extent(myextent)
-            .filter(filter)
-            .on('zoom', zoomed),
-    )
+	const myextent: [[number, number], [number, number]] = [
+		[0, margin.top],
+		[width, height - margin.top],
+	]
+	svg.call(
+		zoom<Element, unknown>()
+			.scaleExtent([1, 8])
+			.translateExtent([
+				[0, 0],
+				[width, height],
+			])
+			.extent(myextent)
+			.filter(filter)
+			.on('zoom', zoomed),
+	)
 }
 
 /**
@@ -207,7 +207,7 @@ function setZoom(svg: Selection<Element, unknown, HTMLElement, unknown>) {
  * @param event - D3 zoom event containing transform information
  */
 function zoomed(event: D3ZoomEvent<SVGGElement, unknown>) {
-    mytransform.value = event.transform
+	mytransform.value = event.transform
 }
 
 /**
@@ -217,8 +217,8 @@ function zoomed(event: D3ZoomEvent<SVGGElement, unknown>) {
  * @returns boolean indicating if the event should trigger zoom
  */
 function filter(event: PointerEvent | WheelEvent) {
-    event.preventDefault()
-    return (!event.ctrlKey || event.type === 'wheel') && !event.button
+	event.preventDefault()
+	return (!event.ctrlKey || event.type === 'wheel') && !event.button
 }
 
 /**
@@ -226,8 +226,8 @@ function filter(event: PointerEvent | WheelEvent) {
  * Sets the current widget as active and toggles zoom mode
  */
 function zoomGraph() {
-    globalConfig.zoomedWidget = 1
-    globalConfig.zoomGraph = !globalConfig.zoomGraph
+	globalConfig.zoomedWidget = 1
+	globalConfig.zoomGraph = !globalConfig.zoomGraph
 }
 
 onMounted(() => {
@@ -238,6 +238,6 @@ onMounted(() => {
 
 <style scoped>
 .fa-magnifying-glass {
-    color: var(--color-menu);
+	color: var(--color-menu);
 }
 </style>