From f776873ca440df38add170bf8381df1a9913c07a Mon Sep 17 00:00:00 2001 From: Eric Mika Date: Tue, 14 Nov 2023 16:07:12 -0500 Subject: [PATCH] Update graph log SVG bounds for consistent CSS transform scaling. --- .../src/monitor-binding/number/controller/graph-log.ts | 5 +++-- .../core/src/monitor-binding/number/view/graph-log.ts | 10 +++++----- 2 files changed, 8 insertions(+), 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 index d396fc4a..c9ba8dd4 100644 --- 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 index 7f0a170b..26171119 100644 --- 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)}`;