Merge pull request #586 from kitschpatrol/scalable-graph

Fix SVG scaling in graph log.
cocopon · Dec 14, 2023 · 3c091b6 · 3c091b6
2 parents 6b24d98 + f776873
commit 3c091b6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/packages/core/src/monitor-binding/number/controller/graph-log.ts b/packages/core/src/monitor-binding/number/controller/graph-log.ts
@@ -98,9 +98,10 @@ export class GraphLogController
 	}
 
 	private onGraphMouseMove_(ev: MouseEvent): void {
-		const bounds = this.view.element.getBoundingClientRect();
+		const {clientWidth: w} = this.view.element;
+
 		this.cursor_.rawValue = Math.floor(
-			mapRange(ev.offsetX, 0, bounds.width, 0, this.value.rawValue.length),
+			mapRange(ev.offsetX, 0, w, 0, this.value.rawValue.length),
 		);
 	}
 

diff --git a/packages/core/src/monitor-binding/number/view/graph-log.ts b/packages/core/src/monitor-binding/number/view/graph-log.ts
@@ -80,7 +80,7 @@ export class GraphLogView implements View {
 	}
 
 	private update_(): void {
-		const bounds = this.svgElem_.getBoundingClientRect();
+		const {clientWidth: w, clientHeight: h} = this.element;
 
 		// Graph
 		const maxIndex = this.value.rawValue.length - 1;
@@ -91,8 +91,8 @@ export class GraphLogView implements View {
 			if (v === undefined) {
 				return;
 			}
-			const x = mapRange(index, 0, maxIndex, 0, bounds.width);
-			const y = mapRange(v, min, max, bounds.height, 0);
+			const x = mapRange(index, 0, maxIndex, 0, w);
+			const y = mapRange(v, min, max, h, 0);
 			points.push([x, y].join(','));
 		});
 		this.lineElem_.setAttributeNS(null, 'points', points.join(' '));
@@ -105,8 +105,8 @@ export class GraphLogView implements View {
 			return;
 		}
 
-		const tx = mapRange(this.cursor_.rawValue, 0, maxIndex, 0, bounds.width);
-		const ty = mapRange(value, min, max, bounds.height, 0);
+		const tx = mapRange(this.cursor_.rawValue, 0, maxIndex, 0, w);
+		const ty = mapRange(value, min, max, h, 0);
 		tooltipElem.style.left = `${tx}px`;
 		tooltipElem.style.top = `${ty}px`;
 		tooltipElem.textContent = `${this.formatter_(value)}`;