fix zoom function

openWB · Jan 27, 2025 · d708e17 · d708e17
1 parent a70a100
commit d708e17
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 82 deletions.
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue b/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">

diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSourceGraph.vue b/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()

diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue b/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

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

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
@@ -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

diff --git a/...emes/colors/web/assets/index-Ds1fwKst.css → ...emes/colors/web/assets/index-BM5jgL8d.css b/...emes/colors/web/assets/index-Ds1fwKst.css → ...emes/colors/web/assets/index-BM5jgL8d.css
diff --git a/packages/modules/web_themes/colors/web/assets/index-CIr-OUyK.js b/packages/modules/web_themes/colors/web/assets/index-CIr-OUyK.js
diff --git a/packages/modules/web_themes/colors/web/assets/index-CSkMUkaU.js b/packages/modules/web_themes/colors/web/assets/index-CSkMUkaU.js
diff --git a/packages/modules/web_themes/colors/web/index.html b/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-CSkMUkaU.js"></script>
+  <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-Ds1fwKst.css">
+  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-BM5jgL8d.css">
 </head>
 
 <body>