Fix powergraph headings and Axis (#2646)

* Fix powergraph headings and Axis
* add documentation

Author: cshagen

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'
 })

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,7 +155,21 @@ import PgToolTips from './PgToolTips.vue'
 
 // state
 const stackOrderMax = 2
-const heading = 'Leistung / Ladestand '
+const heading = computed(() => {
+	switch (graphData.graphMode) {
+		case 'year':
+			return 'Jahresübersicht'
+		case 'month':
+			return 'Monatsübersicht'
+		default:
+			return 'Leistung / Ladestand'
+	}
+})
+/**
+ * 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) {
@@ -163,6 +178,11 @@ function changeStackOrder() {
 	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],
@@ -181,17 +201,30 @@ function setZoom(svg: Selection<Element, unknown, HTMLElement, unknown>) {
 	)
 }
 
-// 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
 }
 
-// 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
 }
 
+/**
+ * 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
@@ -207,22 +240,4 @@ onMounted(() => {
 .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);
-}
 </style>

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>