@wick-charts/vue 0.6.2 → 0.6.4

package/dist/core/dist/components/crosshair.js

@@ -1,11 +1,11 @@
-function u(m) {
-  const { scope: x, bitmapX: o, bitmapY: i, theme: M, pane: a } = m, { context: t, bitmapSize: h, horizontalPixelRatio: e, verticalPixelRatio: p } = x, n = o <= a.width, r = i <= a.height;
-  if (!n && !r) return;
-  const s = Math.max(1, Math.round(p)), c = Math.max(1, Math.round(e));
-  t.strokeStyle = M.crosshair.color, t.lineWidth = Math.max(s, c), t.setLineDash([4 * e, 4 * e]);
-  const l = Math.round(o) + (c % 2 === 1 ? 0.5 : 0), d = Math.round(i) + (s % 2 === 1 ? 0.5 : 0);
-  t.beginPath(), n && (t.moveTo(l, 0), t.lineTo(l, h.height)), r && (t.moveTo(0, d), t.lineTo(h.width, d)), t.stroke(), t.setLineDash([]);
+function b(M) {
+  const { scope: p, bitmapX: e, bitmapY: a, theme: u, pane: i, leftOverhang: h = 0 } = M, { context: t, bitmapSize: n, horizontalPixelRatio: o, verticalPixelRatio: x } = p, r = e >= 0 && e <= i.width, s = a <= i.height;
+  if (!r && !s) return;
+  const l = Math.max(1, Math.round(x)), c = Math.max(1, Math.round(o));
+  t.strokeStyle = u.crosshair.color, t.lineWidth = Math.max(l, c), t.setLineDash([4 * o, 4 * o]);
+  const m = Math.round(e) + (c % 2 === 1 ? 0.5 : 0), d = Math.round(a) + (l % 2 === 1 ? 0.5 : 0), v = h > 0 ? -h : 0;
+  t.beginPath(), r && (t.moveTo(m, 0), t.lineTo(m, n.height)), s && (t.moveTo(v, d), t.lineTo(n.width, d)), t.stroke(), t.setLineDash([]);
 }
 export {
-  u as renderCrosshair
+  b as renderCrosshair
 };

package/dist/core/dist/components/grid.js

@@ -1,26 +1,35 @@
-import { crispLineWidth as h, crispCenterOffset as d } from "../utils/pixel-grid.js";
-function x({ scope: p, timeScale: m, yScale: f, theme: a, yTicks: u, timeTicks: T, alpha: n = 1 }) {
+import { crispLineWidth as d, crispCenterOffset as p } from "../utils/pixel-grid.js";
+function L({
+  scope: f,
+  timeScale: m,
+  yScale: g,
+  theme: a,
+  yTicks: u,
+  timeTicks: v,
+  alpha: n = 1,
+  leftOverhang: l = 0
+}) {
   if (n <= 0.01) return;
-  const { context: e, bitmapSize: c, horizontalPixelRatio: t, verticalPixelRatio: l } = p;
+  const { context: e, bitmapSize: c, horizontalPixelRatio: t, verticalPixelRatio: h } = f;
   e.save(), e.strokeStyle = a.grid.color, a.grid.style === "dashed" ? e.setLineDash([4 * t, 4 * t]) : a.grid.style === "dotted" && e.setLineDash([1 * t, 3 * t]);
-  const g = h(l), v = d(l);
-  e.lineWidth = g;
+  const T = d(h), y = p(h), b = l > 0 ? -l : 0;
+  e.lineWidth = T;
   for (const { value: r, opacity: s } of u.entries) {
-    const i = s * n;
-    if (i <= 0.01) continue;
-    const o = Math.round(f.valueToBitmapY(r)) + v;
-    e.globalAlpha = i, e.beginPath(), e.moveTo(0, o), e.lineTo(c.width, o), e.stroke();
+    const o = s * n;
+    if (o <= 0.01) continue;
+    const i = Math.round(g.valueToBitmapY(r)) + y;
+    e.globalAlpha = o, e.beginPath(), e.moveTo(b, i), e.lineTo(c.width, i), e.stroke();
   }
-  const y = h(t), b = d(t);
-  e.lineWidth = y;
-  for (const { value: r, opacity: s } of T.entries) {
-    const i = s * n;
-    if (i <= 0.01) continue;
-    const o = Math.round(m.timeToBitmapX(r)) + b;
-    e.globalAlpha = i, e.beginPath(), e.moveTo(o, 0), e.lineTo(o, c.height), e.stroke();
+  const k = d(t), P = p(t);
+  e.lineWidth = k;
+  for (const { value: r, opacity: s } of v.entries) {
+    const o = s * n;
+    if (o <= 0.01) continue;
+    const i = Math.round(m.timeToBitmapX(r)) + P;
+    e.globalAlpha = o, e.beginPath(), e.moveTo(i, 0), e.lineTo(i, c.height), e.stroke();
   }
   e.restore();
 }
 export {
-  x as renderGrid
+  L as renderGrid
 };

package/dist/core/dist/components/marker.js

@@ -1,56 +1,56 @@
 import { hexToRgba as g } from "../utils/color.js";
 import { measureChip as I, drawChip as T, CHIP_TAIL_HEIGHT_MEDIA as S } from "./annotation-chip.js";
-const y = 4, H = 5, k = 9, W = 3, C = 4;
+const P = 4, H = 5, k = 9, W = 3, C = 4;
 function Y(e) {
-  const { scope: a, timeScale: r, yScale: l, theme: s, marker: t, phase: n, plotWidth: o, plotHeight: p } = e, { context: h, horizontalPixelRatio: i, verticalPixelRatio: d } = a, c = r.timeToBitmapX(t.time), b = l.valueToBitmapY(t.value);
-  if (!Number.isFinite(c) || !Number.isFinite(b)) return;
-  const m = y * i, f = t.shape === "arrow-up" || t.shape === "arrow-down", x = t.label !== void 0 && t.label !== "";
-  h.save(), t.pulse && R({ context: h, bx: c, by: b, color: t.color, radius: m, hpr: i, phase: n }), f && x || _({ context: h, bx: c, by: b, color: t.color, radius: m, hpr: i, vpr: d, shape: t.shape }), t.label !== void 0 && t.label !== "" && A({
+  const { scope: l, timeScale: r, yScale: o, theme: s, marker: t, phase: i, plotWidth: a, plotHeight: n } = e, { context: h, horizontalPixelRatio: p, verticalPixelRatio: d } = l, c = r.timeToBitmapX(t.time), b = o.valueToBitmapY(t.value);
+  if (!o.isPlottable(t.value) || !Number.isFinite(c) || !Number.isFinite(b)) return;
+  const u = P * p, f = t.shape === "arrow-up" || t.shape === "arrow-down", x = t.label !== void 0 && t.label !== "";
+  h.save(), t.pulse && R({ context: h, bx: c, by: b, color: t.color, radius: u, hpr: p, phase: i }), f && x || _({ context: h, bx: c, by: b, color: t.color, radius: u, hpr: p, vpr: d, shape: t.shape }), t.label !== void 0 && t.label !== "" && A({
     context: h,
     bx: c,
     by: b,
     color: t.color,
     theme: s,
-    hpr: i,
+    hpr: p,
     vpr: d,
     label: t.label,
     shape: t.shape,
-    plotWidth: o,
-    plotHeight: p
+    plotWidth: a,
+    plotHeight: n
   }), h.restore();
 }
-function R({ context: e, bx: a, by: r, color: l, radius: s, hpr: t, phase: n }) {
-  const o = 0.4 + 0.6 * Math.abs(Math.sin(n * 2 * Math.PI)), p = s + 4 * t * o;
-  e.beginPath(), e.arc(a, r, p, 0, Math.PI * 2), e.fillStyle = g(l, o * 0.3), e.fill();
+function R({ context: e, bx: l, by: r, color: o, radius: s, hpr: t, phase: i }) {
+  const a = 0.4 + 0.6 * Math.abs(Math.sin(i * 2 * Math.PI)), n = s + 4 * t * a;
+  e.beginPath(), e.arc(l, r, n, 0, Math.PI * 2), e.fillStyle = g(o, a * 0.3), e.fill();
 }
-function _({ context: e, bx: a, by: r, color: l, radius: s, hpr: t, vpr: n, shape: o }) {
-  if (o === "dot") {
-    e.beginPath(), e.arc(a, r, s, 0, Math.PI * 2), e.fillStyle = l, e.fill();
+function _({ context: e, bx: l, by: r, color: o, radius: s, hpr: t, vpr: i, shape: a }) {
+  if (a === "dot") {
+    e.beginPath(), e.arc(l, r, s, 0, Math.PI * 2), e.fillStyle = o, e.fill();
     return;
   }
-  if (o === "circle") {
-    e.beginPath(), e.arc(a, r, s, 0, Math.PI * 2), e.strokeStyle = l, e.lineWidth = Math.max(1, Math.round(1.5 * t)), e.stroke();
+  if (a === "circle") {
+    e.beginPath(), e.arc(l, r, s, 0, Math.PI * 2), e.strokeStyle = o, e.lineWidth = Math.max(1, Math.round(1.5 * t)), e.stroke();
     return;
   }
-  const p = H * t, h = k * n, i = o === "arrow-down" ? -1 : 1;
-  e.beginPath(), e.moveTo(a, r), e.lineTo(a - p, r + i * h), e.lineTo(a + p, r + i * h), e.closePath(), e.fillStyle = l, e.fill();
+  const n = H * t, h = k * i, p = a === "arrow-down" ? -1 : 1;
+  e.beginPath(), e.moveTo(l, r), e.lineTo(l - n, r + p * h), e.lineTo(l + n, r + p * h), e.closePath(), e.fillStyle = o, e.fill();
 }
 function A(e) {
-  const { context: a, bx: r, by: l, color: s, theme: t, hpr: n, vpr: o, label: p, shape: h, plotWidth: i, plotHeight: d } = e, { width: c, height: b } = I({ context: a, theme: t, label: p, hpr: n, vpr: o }), m = S * o, f = C * n, x = h === "arrow-up" || h === "arrow-down" ? 0 : (y + W) * o, v = x + m + b;
-  let u = h !== "arrow-up";
-  u && l - v < 0 && (u = !1), !u && l + v > d && (u = !0);
-  const w = u ? l - x : l + x, M = u ? w - m - b : w + m, P = Math.max(f, Math.min(r - c / 2, i - c - f));
+  const { context: l, bx: r, by: o, color: s, theme: t, hpr: i, vpr: a, label: n, shape: h, plotWidth: p, plotHeight: d } = e, { width: c, height: b } = I({ context: l, theme: t, label: n, hpr: i, vpr: a }), u = S * a, f = C * i, x = h === "arrow-up" || h === "arrow-down" ? 0 : (P + W) * a, v = x + u + b;
+  let m = h !== "arrow-up";
+  m && o - v < 0 && (m = !1), !m && o + v > d && (m = !0);
+  const w = m ? o - x : o + x, y = m ? w - u - b : w + u, M = Math.max(f, Math.min(r - c / 2, p - c - f));
   T({
-    context: a,
+    context: l,
     theme: t,
     color: s,
-    label: p,
-    x: P,
-    y: M,
+    label: n,
+    x: M,
+    y,
     width: c,
     height: b,
-    hpr: n,
-    vpr: o,
+    hpr: i,
+    vpr: a,
     tail: { tipX: r, tipY: w }
   });
 }

package/dist/core/dist/components/reference-line.js

@@ -1,38 +1,38 @@
-import { measureChip as T, drawChip as b } from "./annotation-chip.js";
+import { measureChip as f, drawChip as M } from "./annotation-chip.js";
 const v = 4, x = 6;
-function S(c) {
-  const { scope: m, timeScale: r, yScale: d, theme: p, line: o, plotWidth: a, plotHeight: h } = c, { context: e, horizontalPixelRatio: n, verticalPixelRatio: s } = m;
+function S(m) {
+  const { scope: d, timeScale: r, yScale: s, theme: p, line: o, plotWidth: a, plotHeight: l } = m, { context: e, horizontalPixelRatio: n, verticalPixelRatio: c } = d;
   if (e.save(), e.strokeStyle = o.color, o.style === "dashed" && e.setLineDash([v * n, v * n]), o.orientation === "horizontal") {
-    const t = d.valueToBitmapY(o.coord);
-    if (!Number.isFinite(t) || t < 0 || t > h) {
+    const t = s.valueToBitmapY(o.coord);
+    if (!s.isPlottable(o.coord) || !Number.isFinite(t) || t < 0 || t > l) {
       e.restore();
       return;
     }
-    const l = Math.max(1, Math.round(o.width * s)), i = Math.round(t) + (l % 2 === 1 ? 0.5 : 0);
-    e.lineWidth = l, e.beginPath(), e.moveTo(0, i), e.lineTo(a, i), e.stroke();
+    const h = Math.max(1, Math.round(o.width * c)), i = Math.round(t) + (h % 2 === 1 ? 0.5 : 0);
+    e.lineWidth = h, e.beginPath(), e.moveTo(0, i), e.lineTo(a, i), e.stroke();
   } else {
     const t = r.timeToBitmapX(o.coord);
     if (!Number.isFinite(t) || t < 0 || t > a) {
       e.restore();
       return;
     }
-    const l = Math.max(1, Math.round(o.width * n)), i = Math.round(t) + (l % 2 === 1 ? 0.5 : 0);
-    e.lineWidth = l, e.beginPath(), e.moveTo(i, 0), e.lineTo(i, h), e.stroke();
+    const h = Math.max(1, Math.round(o.width * n)), i = Math.round(t) + (h % 2 === 1 ? 0.5 : 0);
+    e.lineWidth = h, e.beginPath(), e.moveTo(i, 0), e.lineTo(i, l), e.stroke();
   }
-  e.setLineDash([]), o.label !== void 0 && M({ context: e, theme: p, line: o, timeScale: r, yScale: d, plotWidth: a, hpr: n, vpr: s }), e.restore();
+  e.setLineDash([]), o.label !== void 0 && T({ context: e, theme: p, line: o, timeScale: r, yScale: s, plotWidth: a, hpr: n, vpr: c }), e.restore();
 }
-function M({ context: c, theme: m, line: r, timeScale: d, yScale: p, plotWidth: o, hpr: a, vpr: h }) {
+function T({ context: m, theme: d, line: r, timeScale: s, yScale: p, plotWidth: o, hpr: a, vpr: l }) {
   const e = r.label;
   if (e === void 0) return;
-  const { width: n, height: s } = T({ context: c, theme: m, label: e, hpr: a, vpr: h }), t = x * a, l = x * h;
+  const { width: n, height: c } = f({ context: m, theme: d, label: e, hpr: a, vpr: l }), t = x * a, h = x * l;
   let i, u;
   if (r.orientation === "horizontal")
-    i = t, u = p.valueToBitmapY(r.coord) - s / 2;
+    i = t, u = p.valueToBitmapY(r.coord) - c / 2;
   else {
-    const f = d.timeToBitmapX(r.coord);
-    i = Math.min(f + t, o - n - t), u = l;
+    const b = s.timeToBitmapX(r.coord);
+    i = Math.min(b + t, o - n - t), u = h;
   }
-  b({ context: c, theme: m, color: r.color, label: e, x: i, y: u, width: n, height: s, hpr: a, vpr: h });
+  M({ context: m, theme: d, color: r.color, label: e, x: i, y: u, width: n, height: c, hpr: a, vpr: l });
 }
 export {
   S as renderReferenceLine

package/dist/core/dist/data/decimation.js

@@ -1,54 +1,73 @@
-function D(t, o) {
-  return t.length <= o ? t : x(
+function D(t, h) {
+  return t.length <= h ? t : v(
     t,
-    o,
+    h,
     (l) => l.time,
     (l) => l.value
   );
 }
-function L(t, o) {
-  if (t.length <= o) return t;
-  const l = Math.ceil(t.length / o), c = [];
-  for (let h = 0; h < t.length; h += l) {
-    const s = Math.min(h + l, t.length);
-    let r = -1 / 0, a = 1 / 0, f = 0;
-    for (let n = h; n < s; n++)
-      t[n].high > r && (r = t[n].high), t[n].low < a && (a = t[n].low), f += t[n].volume ?? 0;
-    c.push({
-      time: t[h].time,
-      open: t[h].open,
-      high: r,
-      low: a,
-      close: t[s - 1].close,
-      volume: f
+function k(t, h) {
+  if (t.length <= h) return t;
+  const l = Math.ceil(t.length / h), u = [];
+  for (let o = 0; o < t.length; o += l) {
+    const n = Math.min(o + l, t.length);
+    let s = -1 / 0, i = 1 / 0, c = 0;
+    for (let r = o; r < n; r++)
+      t[r].high > s && (s = t[r].high), t[r].low < i && (i = t[r].low), c += t[r].volume ?? 0;
+    u.push({
+      time: t[o].time,
+      open: t[o].open,
+      high: s,
+      low: i,
+      close: t[n - 1].close,
+      volume: c
     });
   }
-  return c;
+  return u;
 }
-function x(t, o, l, c) {
-  if (o >= t.length || o < 3) return t;
-  const h = [t[0]], s = (t.length - 2) / (o - 2);
-  let r = 0;
-  for (let a = 0; a < o - 2; a++) {
-    const f = Math.floor((a + 1) * s) + 1, n = Math.min(Math.floor((a + 2) * s) + 1, t.length - 1);
-    let u = 0, g = 0;
-    const M = n, p = Math.min(Math.floor((a + 3) * s) + 1, t.length), e = p - M;
-    if (e > 0) {
-      for (let i = M; i < p; i++)
-        u += l(t[i]), g += c(t[i]);
-      u /= e, g /= e;
+function x(t, h) {
+  if (t.length <= h || h < 3) return t;
+  const l = t.length - 1, u = Math.ceil((t.length - 2) / (h - 2)), o = [t[0]];
+  for (let n = 1; n < l; n += u) {
+    const s = Math.min(n + u, l);
+    let i = 1 / 0, c = -1 / 0, r = !1;
+    for (let f = n; f < s; f++) {
+      const a = t[f];
+      if (!Number.isFinite(a.low) || !Number.isFinite(a.high)) {
+        r = !0;
+        break;
+      }
+      a.low < i && (i = a.low), a.high > c && (c = a.high);
     }
-    let v = -1, m = f;
-    const w = l(t[r]), b = c(t[r]);
-    for (let i = f; i < n; i++) {
-      const d = Math.abs((w - u) * (c(t[i]) - b) - (w - l(t[i])) * (g - b));
-      d > v && (v = d, m = i);
+    o.push(r ? { time: t[n].time, low: Number.NaN, high: Number.NaN } : { time: t[n].time, low: i, high: c });
+  }
+  return o.push(t[l]), o;
+}
+function v(t, h, l, u) {
+  if (h >= t.length || h < 3) return t;
+  const o = [t[0]], n = (t.length - 2) / (h - 2);
+  let s = 0;
+  for (let i = 0; i < h - 2; i++) {
+    const c = Math.floor((i + 1) * n) + 1, r = Math.min(Math.floor((i + 2) * n) + 1, t.length - 1);
+    let f = 0, a = 0;
+    const M = r, p = Math.min(Math.floor((i + 3) * n) + 1, t.length), g = p - M;
+    if (g > 0) {
+      for (let e = M; e < p; e++)
+        f += l(t[e]), a += u(t[e]);
+      f /= g, a /= g;
+    }
+    let w = -1, m = c;
+    const N = l(t[s]), b = u(t[s]);
+    for (let e = c; e < r; e++) {
+      const d = Math.abs((N - f) * (u(t[e]) - b) - (N - l(t[e])) * (a - b));
+      d > w && (w = d, m = e);
     }
-    h.push(t[m]), r = m;
+    o.push(t[m]), s = m;
   }
-  return h.push(t[t.length - 1]), h;
+  return o.push(t[t.length - 1]), o;
 }
 export {
+  x as decimateBandData,
   D as decimateLineData,
-  L as decimateOHLCData
+  k as decimateOHLCData
 };

package/dist/core/dist/interactions/handler.js

@@ -82,7 +82,7 @@ class T extends a {
       else if (e.touches.length === 2) {
         const t = i(e.touches[0], e.touches[1]), s = (e.touches[0].clientX + e.touches[1].clientX) / 2, n = this.canvas.getBoundingClientRect();
         if (t > 0 && this.lastTouchDist > 0) {
-          const h = l(this.lastTouchDist / t, 0.1, 10), c = this.timeScale.xToTime(s - n.left);
+          const h = l(this.lastTouchDist / t, 0.1, 10), c = this.timeScale.xToTime(s - n.left - (this.target.plotLeft ?? 0));
           this.target.zoomAt(c, h, this.timeScale.getMediaWidth());
         }
         this.lastTouchDist = t;
@@ -105,10 +105,11 @@ class T extends a {
     this.pan.handleMouseUp(), this.touchCount = 0, this.lastTouchDist = 0, this.downClient = null, this.gestureHadTwoFingers = !1, this.emit("crosshairMove", null);
   };
   posFromOffset(e, t) {
+    const s = e - (this.target.plotLeft ?? 0);
     return {
       mediaX: e,
       mediaY: t,
-      time: this.timeScale.xToTime(e),
+      time: this.timeScale.xToTime(s),
       y: this.yScale.yToValue(t)
     };
   }

package/dist/core/dist/interactions/zoom.js

@@ -1,11 +1,12 @@
-class s {
+import { clamp as s } from "../utils/math.js";
+class c {
   constructor(e, a) {
     this.target = e, this.timeScale = a;
   }
   handleWheel(e) {
     e.preventDefault();
-    const a = l(e.deltaY, e.deltaMode), i = Math.exp(a * 5e-3), n = this.timeScale.getMediaWidth(), o = Math.min(e.offsetX, n), h = this.timeScale.xToTime(o);
-    this.target.zoomAt(h, i, n);
+    const a = r(e.deltaY, e.deltaMode), i = Math.exp(a * 5e-3), o = this.timeScale.getMediaWidth(), l = s(e.offsetX - (this.target.plotLeft ?? 0), 0, o), n = this.timeScale.xToTime(l);
+    this.target.zoomAt(n, i, o);
   }
   /** Kept for API parity with InteractionHandler.destroy. Phase 2 step 2
    *  removed the wheel-idle rebound timer alongside the rest of the
@@ -13,9 +14,9 @@ class s {
   cancelPendingRebound() {
   }
 }
-function l(t, e) {
+function r(t, e) {
   return e === WheelEvent.DOM_DELTA_LINE ? t * 8 : e === WheelEvent.DOM_DELTA_PAGE ? t * 24 : t;
 }
 export {
-  s as ZoomHandler
+  c as ZoomHandler
 };

package/dist/core/dist/navigator/controller.js

@@ -1,9 +1,9 @@
 import { DEFAULT_LINE_ENTRY as w } from "../animation/config.js";
 import { XScale as T } from "../scales/x-scale.js";
-import { YScale as R } from "../scales/y-scale.js";
-import { decimateCandles as k, decimateLinear as C } from "./decimate.js";
-import { hitTest as y, computeSnapCenter as E, computePan as I, computeResize as $ } from "./interactions.js";
-import { computeWindowGeometry as M, renderBackground as V, renderMiniCandlestick as L, renderMiniBar as N, renderMiniLine as P } from "./render.js";
+import { YScale as k } from "../scales/y-scale.js";
+import { decimateCandles as R, decimateLinear as C } from "./decimate.js";
+import { hitTest as b, computeSnapCenter as E, computePan as I, computeResize as $ } from "./interactions.js";
+import { computeWindowGeometry as M, renderBackground as L, renderMiniCandlestick as V, renderMiniBar as N, renderMiniLine as P } from "./render.js";
 import { Animator as S } from "../animation/animator.js";
 import { easeOutCubic as z } from "../animation/easing.js";
 class G {
@@ -11,7 +11,7 @@ class G {
   #t;
   #z;
   #e;
-  #o;
+  #n;
   #d;
   #r;
   #l;
@@ -22,10 +22,10 @@ class G {
   // Own scales — both cover the full data span. The main chart's scales move
   // with the viewport; these don't.
   #u = new T();
-  #F = new R();
+  #F = new k();
   #A = 0;
   #m = 0;
-  #n = 1;
+  #h = 1;
   #p = null;
   /** A full canvas render is owed. A queued frame with `#dirty === false`
    *  came from {@link #markWindowDirty} and only repositions the window DOM. */
@@ -35,7 +35,7 @@ class G {
    * `setData` (guards in-place mutation of a re-passed array); a buckets
    * mismatch (resize) recomputes per entry.
    */
-  #R = /* @__PURE__ */ new Map();
+  #k = /* @__PURE__ */ new Map();
   /**
    * Eases the alpha of the trailing bar/candle/line-segment from 0 → 1 over
    * `DEFAULT_LINE_ENTRY` whenever {@link setData} reports a new last point
@@ -45,10 +45,10 @@ class G {
    *
    * `null` means "no entrance in flight, draw the tail at full alpha".
    */
-  #h = null;
+  #o = null;
   /** `time` of the last point we've ever seen — initialises after the first
    * `setData`/render so the first paint doesn't trigger a fade-in. */
-  #k = null;
+  #R = null;
   /** Series index in `lineSeriesList(data)` that owns the newest last-time,
    * so the tail fade applies to the series that actually grew — not always
    * the last entry in the stack. -1 for candlestick (single-series). */
@@ -60,32 +60,32 @@ class G {
   #I;
   #$;
   #M;
-  #V;
   #L;
-  #b;
+  #V;
+  #y;
   #N;
   constructor(t) {
     this.#s = t.container, this.#e = t.chart, this.#x = t.data, this.#v = t.options ?? {}, window.getComputedStyle(this.#s).position === "static" && (this.#s.style.position = "relative"), this.#t = document.createElement("canvas"), this.#t.style.position = "absolute", this.#t.style.left = "0", this.#t.style.top = "0", this.#t.style.height = "100%", this.#t.style.touchAction = "none", this.#s.appendChild(this.#t);
     const e = this.#t.getContext("2d", { alpha: !0 });
     if (!e) throw new Error("NavigatorController: failed to acquire 2D context");
-    this.#z = e, this.#o = document.createElement("div"), this.#o.dataset.chartNavigatorOverlay = "", this.#o.style.cssText = "position:absolute;left:0;top:0;height:100%;pointer-events:none;", this.#d = document.createElement("div"), this.#d.style.cssText = "position:absolute;left:0;top:0;bottom:0;", this.#r = document.createElement("div"), this.#r.style.cssText = "position:absolute;top:0;bottom:0;", this.#l = document.createElement("div"), this.#l.style.cssText = "position:absolute;top:0;bottom:0;box-sizing:border-box;", this.#a = b(), this.#c = b(), this.#o.append(this.#d, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#o), this.#I = () => this.#B(), this.#$ = () => this.#f(), this.#M = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#$), this.#e.on("tickFrame", this.#M), this.#V = (s) => this.#U(s), this.#L = (s) => this.#J(s), this.#b = (s) => this.#K(s), this.#N = () => {
+    this.#z = e, this.#n = document.createElement("div"), this.#n.dataset.chartNavigatorOverlay = "", this.#n.style.cssText = "position:absolute;left:0;top:0;height:100%;pointer-events:none;", this.#d = document.createElement("div"), this.#d.style.cssText = "position:absolute;left:0;top:0;bottom:0;", this.#r = document.createElement("div"), this.#r.style.cssText = "position:absolute;top:0;bottom:0;", this.#l = document.createElement("div"), this.#l.style.cssText = "position:absolute;top:0;bottom:0;box-sizing:border-box;", this.#a = y(), this.#c = y(), this.#n.append(this.#d, this.#r, this.#l, this.#a, this.#c), this.#s.appendChild(this.#n), this.#I = () => this.#B(), this.#$ = () => this.#f(), this.#M = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#$), this.#e.on("tickFrame", this.#M), this.#L = (s) => this.#U(s), this.#V = (s) => this.#J(s), this.#y = (s) => this.#K(s), this.#N = () => {
       this.#g === null && (this.#t.style.cursor = "default");
-    }, this.#t.addEventListener("pointerdown", this.#V), this.#t.addEventListener("pointermove", this.#L), this.#t.addEventListener("pointerup", this.#b), this.#t.addEventListener("pointercancel", this.#b), this.#t.addEventListener("pointerleave", this.#N), this.#E = new ResizeObserver((s) => this.#j(s[0])), this.#E.observe(this.#s), this.#D();
+    }, this.#t.addEventListener("pointerdown", this.#L), this.#t.addEventListener("pointermove", this.#V), this.#t.addEventListener("pointerup", this.#y), this.#t.addEventListener("pointercancel", this.#y), this.#t.addEventListener("pointerleave", this.#N), this.#E = new ResizeObserver((s) => this.#j(s[0])), this.#E.observe(this.#s), this.#D();
     const i = this.#s.getBoundingClientRect();
     i.width > 0 && i.height > 0 && this.#W(i.width, i.height), this.#f();
   }
   setData(t) {
     const e = F(t), i = e?.time ?? null;
-    if (i !== null && this.#k !== null && i !== this.#k) {
-      const s = this.#h?.current ?? 0;
-      this.#h = new S({
+    if (i !== null && this.#R !== null && i !== this.#R) {
+      const s = this.#o?.current ?? 0;
+      this.#o = new S({
         initial: s,
         duration: w,
         easing: z,
         lerp: (n, h, l) => n + (h - n) * l
-      }), this.#h.setTarget(1);
+      }), this.#o.setTarget(1);
     }
-    this.#k = i, this.#C = e?.seriesIndex ?? -1, this.#x = t, this.#R.clear(), this.#f();
+    this.#R = i, this.#C = e?.seriesIndex ?? -1, this.#x = t, this.#k.clear(), this.#f();
   }
   setOptions(t) {
     this.#v = t, this.#D(), this.#f();
@@ -100,7 +100,7 @@ class G {
     t !== void 0 && (this.#s.style.height = `${t}px`);
   }
   destroy() {
-    this.#e.off("viewportChange", this.#I), this.#e.off("overlayChange", this.#$), this.#e.off("tickFrame", this.#M), this.#t.removeEventListener("pointerdown", this.#V), this.#t.removeEventListener("pointermove", this.#L), this.#t.removeEventListener("pointerup", this.#b), this.#t.removeEventListener("pointercancel", this.#b), this.#t.removeEventListener("pointerleave", this.#N), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#o.remove();
+    this.#e.off("viewportChange", this.#I), this.#e.off("overlayChange", this.#$), this.#e.off("tickFrame", this.#M), this.#t.removeEventListener("pointerdown", this.#L), this.#t.removeEventListener("pointermove", this.#V), this.#t.removeEventListener("pointerup", this.#y), this.#t.removeEventListener("pointercancel", this.#y), this.#t.removeEventListener("pointerleave", this.#N), this.#E.disconnect(), this.#p !== null && (cancelAnimationFrame(this.#p), this.#p = null), this.#t.remove(), this.#n.remove();
   }
   /** CSS pixel height of the strip — theme default unless overridden. */
   get height() {
@@ -108,7 +108,8 @@ class G {
   }
   // --- internals ---------------------------------------------------------
   /** Effective drawing width — the navigator reserves the main chart's
-   *  `yAxisWidth` on the right so its active zone lines up with the plot area. */
+   *  `yAxisWidth` on the Y-axis side so its active zone lines up with the
+   *  plot area. */
   get #i() {
     return Math.max(0, this.#A - this.#e.yAxisWidth);
   }
@@ -118,7 +119,7 @@ class G {
     i <= 0 || s <= 0 || (this.#W(i, s), this.#f());
   }
   #W(t, e) {
-    this.#A = t, this.#m = e, this.#n = window.devicePixelRatio || 1, this.#X();
+    this.#A = t, this.#m = e, this.#h = window.devicePixelRatio || 1, this.#X();
   }
   /**
    * Write canvas backing-store / CSS sizes only when they actually changed —
@@ -127,10 +128,12 @@ class G {
    * a repaint where nothing resized.
    */
   #X() {
-    const t = Math.round(this.#i * this.#n), e = Math.round(this.#m * this.#n);
+    const t = Math.round(this.#i * this.#h), e = Math.round(this.#m * this.#h);
     this.#t.width !== t && (this.#t.width = t), this.#t.height !== e && (this.#t.height = e);
     const i = `${this.#i}px`;
-    this.#t.style.width !== i && (this.#t.style.width = i, this.#o.style.width = i);
+    this.#t.style.width !== i && (this.#t.style.width = i, this.#n.style.width = i);
+    const s = `${this.#e.plotLeft}px`;
+    this.#t.style.left !== s && (this.#t.style.left = s, this.#n.style.left = s);
   }
   #f() {
     this.#T = !0, this.#O();
@@ -156,8 +159,8 @@ class G {
    *  the first RAF-driven render — pointer handlers rely on this so hit-tests
    *  compute against primed scales even on the opening gesture. */
   #P() {
-    const t = this.#y(), e = this.#Z();
-    return this.#u.update(t, this.#i, this.#n), this.#F.update(e, this.#m, this.#n), { xRange: t, yRange: e };
+    const t = this.#b(), e = this.#Z();
+    return this.#u.update(t, this.#i, this.#h), this.#F.update(e, this.#m, this.#h), { xRange: t, yRange: e };
   }
   /**
    * X range for the brush window. While the user drags the brush we track the
@@ -169,17 +172,17 @@ class G {
     return this.#g !== null ? this.#e.getVisibleRange() : this.#e.getAnimationState().xRange;
   }
   #S() {
-    return this.#P(), M(this.#u, this.#Y(), this.#y());
+    return this.#P(), M(this.#u, this.#Y(), this.#b());
   }
   #H() {
-    const t = this.#y(), e = t.to - t.from;
+    const t = this.#b(), e = t.to - t.from;
     return e <= 0 || this.#i <= 0 ? 0 : this.#i / e;
   }
   #U(t) {
     if (t.button !== void 0 && t.button !== 0) return;
-    const e = this.#w(t), i = this.#y();
+    const e = this.#w(t), i = this.#b();
     if (i.to <= i.from) return;
-    const s = this.#S(), n = y(e, s), h = this.#H();
+    const s = this.#S(), n = b(e, s), h = this.#H();
     if (h === 0) return;
     let l = this.#e.getVisibleRange();
     if (n.snapToCenter) {
@@ -205,7 +208,7 @@ class G {
       return;
     }
     if (t.pointerId !== e.pointerId) return;
-    const i = this.#w(t) - e.startX, s = this.#y();
+    const i = this.#w(t) - e.startX, s = this.#b();
     let n;
     if (e.gesture === "pan")
       n = I({
@@ -237,7 +240,7 @@ class G {
     const t = this.#e.getTheme().navigator, { xRange: e } = this.#P();
     this.#X();
     const i = this.#z, s = this.#t.width, n = this.#t.height;
-    i.save(), i.clearRect(0, 0, s, n), i.scale(this.#n, this.#n);
+    i.save(), i.clearRect(0, 0, s, n), i.scale(this.#h, this.#h);
     const h = {
       ctx: i,
       timeScale: this.#u,
@@ -246,12 +249,12 @@ class G {
       mediaHeight: this.#m,
       theme: t
     };
-    this.#t.style.boxShadow = `inset 0 1px 0 ${t.borderColor}, inset 0 -1px 0 ${t.borderColor}`, V(h);
+    this.#t.style.boxShadow = `inset 0 1px 0 ${t.borderColor}, inset 0 -1px 0 ${t.borderColor}`, L(h);
     let l = 1;
-    this.#h !== null && (this.#h.tick(performance.now()), l = this.#h.current, this.#h.animating ? this.#f() : this.#h = null);
+    this.#o !== null && (this.#o.tick(performance.now()), l = this.#o.current, this.#o.animating ? this.#f() : this.#o = null);
     const r = Math.max(1, Math.round(this.#i)), a = this.#x;
     if (a.type === "candlestick")
-      L(h, this.#q(a.points, r, k), l);
+      V(h, this.#q(a.points, r, R), l);
     else {
       const c = f(a), g = c.length === 1, d = this.#C >= 0 ? this.#C : c.length - 1;
       for (let u = 0; u < c.length; u++) {
@@ -269,22 +272,22 @@ class G {
    */
   #Q() {
     if (this.#i <= 0 || this.#m <= 0) return;
-    const t = Math.round(this.#i * this.#n);
-    if (this.#t.width !== t) {
+    const t = Math.round(this.#i * this.#h), e = this.#t.style.left !== `${this.#e.plotLeft}px`;
+    if (this.#t.width !== t || e) {
       this.#_();
       return;
     }
-    const e = this.#e.getTheme().navigator, { xRange: i } = this.#P();
-    this.#G(e, i);
+    const i = this.#e.getTheme().navigator, { xRange: s } = this.#P();
+    this.#G(i, s);
   }
   /** Decimate `points` into `buckets`, reusing the cached result while the
    *  source array ref and bucket count are unchanged. */
   #q(t, e, i) {
-    const s = this.#R.get(t);
+    const s = this.#k.get(t);
     if (s !== void 0 && s.buckets === e)
       return s.result;
     const n = i(t, e);
-    return this.#R.set(t, { buckets: e, result: n }), n;
+    return this.#k.set(t, { buckets: e, result: n }), n;
   }
   #G(t, e) {
     if (e.to <= e.from) return;
@@ -299,7 +302,7 @@ class G {
     for (const m of this.#c.children)
       m.style.background = p;
   }
-  #y() {
+  #b() {
     const t = this.#x;
     let e = Number.POSITIVE_INFINITY, i = Number.NEGATIVE_INFINITY, s = 0;
     if (t.type === "candlestick")
@@ -358,9 +361,9 @@ function x(o, t) {
   return v(A(o, t), !1);
 }
 function A(o, t) {
-  return y(o, t).gesture;
+  return b(o, t).gesture;
 }
-function b() {
+function y() {
   const o = document.createElement("div");
   o.style.cssText = "position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;";
   for (let t = 0; t < 3; t++) {