Merge pull request #2174 from cshagen/web-fixes

Colors theme fixes

packages/modules/web_themes/colors/source/package.json

@@ -19,36 +19,36 @@
     "d3": "^7.9.0",
     "mqtt": "^5.10.3",
     "process": "^0.11.10",
-    "swiper": "^11.1.15",
+    "swiper": "^11.2.1",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/types": "^7.26.3",
+    "@babel/types": "^7.26.7",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
-    "@eslint/compat": "^1.2.4",
+    "@eslint/compat": "^1.2.5",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
-    "@rushstack/eslint-patch": "^1.10.4",
+    "@rushstack/eslint-patch": "^1.10.5",
     "@tsconfig/node20": "^20.1.4",
     "@types/bootstrap": "^5.2.10",
     "@types/d3": "^7.4.3",
-    "@types/node": "^20.17.11",
+    "@types/node": "^20.17.16",
     "@typescript-eslint/eslint-plugin": "^8.19.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.2.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.7.0",
     "esbuild": "^0.24.2",
-    "eslint": "^9.17.0",
+    "eslint": "^9.19.0",
     "eslint-plugin-vue": "^9.32.0",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
-    "rollup": "^4.29.1",
+    "rollup": "^4.32.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.6",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
     "vue-tsc": "^2.2.0"
   }
 }

packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue

@@ -1,31 +1,33 @@
 <template>
-	<path
-		:id="'soc-' + vID"
-		.origin="autozoom"
-		class="soc-baseline"
-		:d="myline"
-		stroke="var(--color-bg)"
-		stroke-width="1"
-		fill="none"
-	/>
-	<path
-		:id="'socdashes-' + vID"
-		class="soc-dashes"
-		:d="myline"
-		:stroke="cpColor"
-		stroke-width="1"
-		:style="{ strokeDasharray: '3,3' }"
-		fill="none"
-	/>
-	<text
-		class="cpname"
-		:x="nameX"
-		:y="nameY"
-		:style="{ fill: cpColor, fontSize: 10 }"
-		:text-anchor="textPosition"
-	>
-		{{ vName }}
-	</text>
+	<svg x="0" :width="props.width">
+		<path
+			:id="'soc-' + vID"
+			.origin="autozoom"
+			class="soc-baseline"
+			:d="myline"
+			stroke="var(--color-bg)"
+			stroke-width="1"
+			fill="none"
+		/>
+		<path
+			:id="'socdashes-' + vID"
+			class="soc-dashes"
+			:d="myline"
+			:stroke="cpColor"
+			stroke-width="1"
+			:style="{ strokeDasharray: '3,3' }"
+			fill="none"
+		/>
+		<text
+			class="cpname"
+			:x="nameX"
+			:y="nameY"
+			:style="{ fill: cpColor, fontSize: 10 }"
+			:text-anchor="textPosition"
+		>
+			{{ vName }}
+		</text>
+	</svg>
 </template>
 
 <script setup lang="ts">

packages/modules/web_themes/colors/source/src/components/powerGraph/PgSourceGraph.vue

@@ -173,7 +173,7 @@ const ticklineColor = computed(() => {
 	return globalConfig.showGrid ? 'var(--color-grid)' : 'var(--color-bg)'
 })
 function drawGraph(
-	graph: Selection<SVGGElement, unknown, HTMLElement, never>,
+	graph: Selection<SVGGElement, unknown, HTMLElement, unknown>,
 	xScale: ScaleTime<number, number, never>,
 ) {
 	const area0 = area()
@@ -187,7 +187,8 @@ function drawGraph(
 		.curve(curveBumpX)
 	if (animateSourceGraph) {
 		graph.selectAll('*').remove()
-		paths = graph
+		const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
+		paths = canvas
 			.selectAll('.sourceareas')
 			.data(stackedSeries.value as [number, number][][])
 			.enter()

packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue

@@ -82,7 +82,9 @@ const delay = globalConfig.showAnimations ? globalConfig.animationDelay : 0
 
 // computed:
 const draw = computed(() => {
-	const graph = select('g#pgUsageGraph')
+	const graph: Selection<SVGGElement, unknown, HTMLElement, unknown> =
+		select('g#pgUsageGraph')
+
 	if (graphData.graphMode == 'month' || graphData.graphMode == 'year') {
 		drawBarGraph(graph)
 	} else {
@@ -190,7 +192,7 @@ const yAxisGenerator = computed(() => {
 			(d == 0 ? '' : Math.round(d * 10) / 10).toLocaleString(undefined),
 		)
 })
-function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
+function drawGraph(graph: Selection<SVGGElement, unknown, HTMLElement, never>) {
 	const area0 = area()
 		.x((d, i) => xScale.value(graphData.data[i].date))
 		.y(yScale.value(0))
@@ -203,7 +205,8 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
 	if (globalConfig.showAnimations) {
 		if (animateUsageGraph) {
 			graph.selectAll('*').remove()
-			paths = graph
+			const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
+			paths = canvas
 				.selectAll('.usageareas')
 				.data(stackedSeries.value as [number, number][][])
 				.enter()
@@ -219,7 +222,8 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
 			usageGraphIsInitialized()
 		} else {
 			graph.selectAll('*').remove()
-			graph
+			const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
+			canvas
 				.selectAll('.usageareas')
 
 				.data(stackedSeries.value as [number, number][][])
@@ -230,7 +234,8 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
 		}
 	} else {
 		graph.selectAll('*').remove()
-		graph
+		const canvas = graph.append('svg').attr('x', 0).attr('width', props.width)
+		canvas
 			.selectAll('.usageareas')
 			.data(stackedSeries.value as [number, number][][])
 			.enter()
@@ -239,7 +244,9 @@ function drawGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
 			.attr('fill', (d, i: number) => colors[keysToUse.value[i]])
 	}
 }
-function drawBarGraph(graph: Selection<BaseType, unknown, HTMLElement, never>) {
+function drawBarGraph(
+	graph: Selection<SVGGElement, unknown, HTMLElement, never>,
+) {
 	if (animateUsageGraph) {
 		graph.selectAll('*').remove()
 		rects = graph

packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue

@@ -1,41 +1,49 @@
 <template>
-	<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
+	<svg x="0" :width="props.width">
 		<g
-			id="PGXAxis"
-			class="axis"
-			:origin="drawAxis1"
-			:origin2="autozoom"
-			:transform="'translate(0,' + (height / 2 - 6) + ')'"
-		/>
-		<g
-			id="PGXAxis2"
-			class="axis"
-			:origin="drawAxis2"
-			:transform="'translate(0,' + (height / 2 + 10) + ')'"
-		/>
-		<g v-if="globalConfig.showGrid">
-			<rect
-				x="0"
-				y="0"
-				:width="width"
-				:height="height / 2 - 10"
-				fill="none"
-				stroke="var(--color-grid)"
-				stroke-width="0.5"
+			id="PgUnit"
+			:transform="'translate(' + 0 + ',' + (height / 2 + 9) + ')'"
+		></g>
+	</svg>
+	<svg :x="props.margin.left" :width="props.width">
+		<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
+			<g
+				id="PGXAxis"
+				class="axis"
+				:origin="drawAxis1"
+				:origin2="autozoom"
+				:transform="'translate(0,' + (height / 2 - 6) + ')'"
 			/>
-		</g>
-		<g v-if="globalConfig.showGrid">
-			<rect
-				x="0"
-				:y="height / 2 + 10"
-				:width="width"
-				:height="height / 2 - 10"
-				fill="none"
-				stroke="var(--color-grid)"
-				stroke-width="0.5"
+			<g
+				id="PGXAxis2"
+				class="axis"
+				:origin="drawAxis2"
+				:transform="'translate(0,' + (height / 2 + 10) + ')'"
 			/>
+			<g v-if="globalConfig.showGrid">
+				<rect
+					x="0"
+					y="0"
+					:width="width"
+					:height="height / 2 - 10"
+					fill="none"
+					stroke="var(--color-grid)"
+					stroke-width="0.5"
+				/>
+			</g>
+			<g v-if="globalConfig.showGrid">
+				<rect
+					x="0"
+					:y="height / 2 + 10"
+					:width="width"
+					:height="height / 2 - 10"
+					fill="none"
+					stroke="var(--color-grid)"
+					stroke-width="0.5"
+				/>
+			</g>
 		</g>
-	</g>
+	</svg>
 </template>
 
 <script setup lang="ts">
@@ -90,7 +98,9 @@ const ticksize = computed(() => {
 
 const drawAxis1 = computed(() => {
 	let axis = select<AxisContainerElement, number>('g#PGXAxis')
+	let unit = select('g#PgUnit')
 	axis.selectAll('*').remove()
+	unit.selectAll('*').remove()
 	if (graphData.graphMode == 'month' || graphData.graphMode == 'year') {
 		axis.call(xAxisGeneratorMonth.value)
 	} else {
@@ -116,9 +126,9 @@ const drawAxis1 = computed(() => {
 		axis.selectAll('.tick line').attr('stroke', 'var(--color-bg)')
 	}
 	axis.select('.domain').attr('stroke', 'var(--color-bg)')
-	axis
+	unit
 		.append('text')
-		.attr('x', -props.margin.left)
+		.attr('x', 0)
 		.attr('y', 12)
 		.attr('fill', 'var(--color-axis)')
 		.attr('font-size', fontsize)

packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue

@@ -26,8 +26,16 @@
 			</div>
 		</template>
 
-		<figure v-show="graphData.data.length > 0" id="powergraph" class="p-0 m-0">
-			<svg id="powergraph" :viewBox="'0 0 ' + width + ' ' + height">
+		<figure
+			v-show="graphData.data.length > 0"
+			id="powergraphFigure"
+			class="p-0 m-0"
+		>
+			<svg
+				id="powergraph"
+				class="powergraphSvg"
+				:viewBox="'0 0 ' + width + ' ' + height"
+			>
 				<!-- Draw the source graph -->
 				<PgSourceGraph
 					:width="width - margin.left - 2 * margin.right"
@@ -44,7 +52,6 @@
 					:width="width - margin.left - 2 * margin.right"
 					:height="height - margin.top - margin.bottom"
 					:margin="margin"
-					:graph-data="graphData"
 				/>
 				<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
 					<PgSoc

packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue

@@ -81,7 +81,9 @@
 							Math.round(vehicles[topVehicles[0]].soc) +
 							'%'
 						"
-						:labelcolor="chargepoints[0].color"
+						:labelcolor="
+							chargepoints[0] ? chargepoints[0].color : 'var(--color-charging)'
+						"
 						:anchor="'start'"
 						:config="globalConfig"
 					/>

packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue

@@ -11,16 +11,7 @@ Hagen */
 		<ButtonBar v-if="globalConfig.showButtonBar" />
 
 		<!-- Main Widgets -->
-		<div v-if="false" class="row py-0 px-0 m-0">
-			<PowerMeter />
-			<PowerGraph />
-			<EnergyMeter />
-			<ChargePointList id="0" :compact="globalConfig.shortCpList == 'always'" />
-			<GlobalPriceChart id="Hidden" />
-			<VehicleList />
-			<CounterList />
-		</div>
-		<div v-if="true" class="row py-0 px-0 m-0">
+		<div class="row py-0 px-0 m-0">
 			<CarouselFix>
 				<template #item1>
 					<PowerMeter />
@@ -283,7 +274,6 @@ import {
 	screensize,
 } from '@/assets/js/themeConfig'
 import { initGraph } from '@/components/powerGraph/model'
-
 // state
 const showMQ = ref(false)
 const showSH = computed(() => {

packages/modules/web_themes/colors/web/index.html

@@ -24,9 +24,9 @@
 	<link rel="apple-touch-icon" sizes="60x60" href="/openWB/web/img/favicons/apple-touch-icon-60x60.png">
 	<link rel="manifest" href="/openWB/web/manifest.json">
 	<title>openWB</title>
-  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-Bpw8XWwo.js"></script>
-  <link rel="modulepreload" crossorigin href="/openWB/web/themes/colors/assets/vendor-CyQtMzsz.js">
-  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-BPb-wTT5.css">
+  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-CIr-OUyK.js"></script>
+  <link rel="modulepreload" crossorigin href="/openWB/web/themes/colors/assets/vendor-CmSLe-Fc.js">
+  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-BM5jgL8d.css">
 </head>
 
 <body>