@wick-charts/vue 0.6.1 → 0.6.3

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,22 +1,35 @@
-function T({ scope: c, timeScale: h, yScale: d, theme: a, yTicks: m, timeTicks: p }) {
-  const { context: t, bitmapSize: s, horizontalPixelRatio: e, verticalPixelRatio: u } = c;
-  t.save(), t.strokeStyle = a.grid.color, a.grid.style === "dashed" ? t.setLineDash([4 * e, 4 * e]) : a.grid.style === "dotted" && t.setLineDash([1 * e, 3 * e]);
-  const l = Math.max(1, Math.round(u)), g = l % 2 === 1 ? 0.5 : 0;
-  t.lineWidth = l;
-  for (const { value: n, opacity: o } of m.entries) {
+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: 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 T = d(h), y = p(h), b = l > 0 ? -l : 0;
+  e.lineWidth = T;
+  for (const { value: r, opacity: s } of u.entries) {
+    const o = s * n;
     if (o <= 0.01) continue;
-    const i = Math.round(d.valueToBitmapY(n)) + g;
-    t.globalAlpha = o, t.beginPath(), t.moveTo(0, i), t.lineTo(s.width, i), t.stroke();
+    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 r = Math.max(1, Math.round(e)), y = r % 2 === 1 ? 0.5 : 0;
-  t.lineWidth = r;
-  for (const { value: n, opacity: o } of p.entries) {
+  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(h.timeToBitmapX(n)) + y;
-    t.globalAlpha = o, t.beginPath(), t.moveTo(i, 0), t.lineTo(i, s.height), t.stroke();
+    const i = Math.round(m.timeToBitmapX(r)) + P;
+    e.globalAlpha = o, e.beginPath(), e.moveTo(i, 0), e.lineTo(i, c.height), e.stroke();
   }
-  t.restore();
+  e.restore();
 }
 export {
-  T 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/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

@@ -2,8 +2,8 @@ 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 M } from "./interactions.js";
-import { computeWindowGeometry as $, renderBackground as V, renderMiniCandlestick as L, renderMiniBar as N, renderMiniLine as P } from "./render.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;
@@ -25,7 +25,7 @@ class G {
   #F = new R();
   #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. */
@@ -45,7 +45,7 @@ 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;
@@ -58,32 +58,32 @@ class G {
   #g = null;
   // Bound listeners so we can remove the same references on destroy.
   #I;
-  #M;
   #$;
-  #V;
+  #M;
   #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.#M = () => this.#f(), this.#$ = () => this.#B(), this.#e.on("viewportChange", this.#I), this.#e.on("overlayChange", this.#M), this.#e.on("tickFrame", this.#$), this.#V = (s) => this.#H(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.#U(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({
+      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();
   }
@@ -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.#M), this.#e.off("tickFrame", this.#$), 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,17 +108,18 @@ 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);
   }
-  #U(t) {
+  #j(t) {
     if (!t) return;
     const e = t.contentBoxSize?.[0], i = e?.inlineSize ?? t.contentRect.width, s = e?.blockSize ?? t.contentRect.height;
     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(), $(this.#u, this.#Y(), this.#y());
+    return this.#P(), M(this.#u, this.#Y(), this.#b());
   }
-  #j() {
-    const t = this.#y(), e = t.to - t.from;
+  #H() {
+    const t = this.#b(), e = t.to - t.from;
     return e <= 0 || this.#i <= 0 ? 0 : this.#i / e;
   }
-  #H(t) {
+  #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.#j();
+    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({
@@ -216,7 +219,7 @@ class G {
       });
     else {
       const h = e.gesture === "resize-left" ? "left" : "right";
-      n = M({
+      n = $({
         edge: h,
         startVisible: e.startVisible,
         deltaPx: 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, k), 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,13 +272,13 @@ 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. */
@@ -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++) {

package/dist/core/dist/perf/perf-hud.js

@@ -20,7 +20,7 @@ function I(i) {
 function O(i) {
   return -I(i) / 12;
 }
-const B = "#9aa6b6", c = "#5d6877", C = "#e8eef7", x = "#cdd6e2", y = "#3fd68f", V = "#f5c451", $ = "#f4756a", Y = "#5d6877", X = {
+const V = "#9aa6b6", c = "#5d6877", C = "#e8eef7", x = "#cdd6e2", y = "#3fd68f", B = "#f5c451", $ = "#f4756a", Y = "#5d6877", X = {
   position: "absolute",
   top: "8px",
   right: "8px",
@@ -34,7 +34,7 @@ const B = "#9aa6b6", c = "#5d6877", C = "#e8eef7", x = "#cdd6e2", y = "#3fd68f",
   border: "1px solid rgba(255, 255, 255, 0.09)",
   borderRadius: "10px",
   boxShadow: "0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
-  color: B,
+  color: V,
   font: "10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
   fontVariantNumeric: "tabular-nums",
   letterSpacing: "0.02em",
@@ -50,7 +50,7 @@ function G(i) {
 }`, i.head.appendChild(e);
 }
 function v(i) {
-  return i <= H ? y : i <= F ? V : $;
+  return i <= H ? y : i <= F ? B : $;
 }
 function A(i) {
   return i >= 1e6 ? `${(i / 1e6).toFixed(1)}M` : i >= 1e4 ? `${(i / 1e3).toFixed(1)}k` : Math.round(i).toLocaleString("en-US");

package/dist/core/dist/scales/log-scale.js

@@ -0,0 +1,76 @@
+import { formatCompact as x } from "../utils/format.js";
+const b = 1e-9, p = /* @__PURE__ */ new Map();
+function K(n = {}) {
+  const t = n.base ?? 10;
+  if (!Number.isFinite(t) || t <= 0 || t === 1)
+    throw new Error(`[wick-charts] logScale: base must be a positive number other than 1, got ${t}.`);
+  const o = p.get(t);
+  if (o) return o;
+  const a = S(t);
+  return p.set(t, a), a;
+}
+function S(n) {
+  const t = Math.log(n), o = n === 10 ? Math.log10 : n === 2 ? Math.log2 : (r) => Math.log(r) / t, a = n === 10 ? [1, 2, 5] : [1];
+  return {
+    forward: o,
+    inverse: (r) => n ** r,
+    isPlottable: (r) => r > 0,
+    ticks: (r) => C(r, P({ ...r, forward: o, base: n, mantissas: a })),
+    format: (r) => B(x(r))
+  };
+}
+function C(n, t) {
+  const { linear: o, labelCount: a, height: r, minSpacing: l } = n;
+  if (o.length < 2) return t;
+  if (t.length < 2) return o;
+  const s = a ?? Math.max(2, Math.floor(r / l)), e = Math.abs(t.length - s);
+  return Math.abs(o.length - s) + 1 < e ? o : t;
+}
+function P(n) {
+  const { min: t, max: o, height: a, minSpacing: r, labelCount: l, forward: s, base: e, mantissas: i } = n, c = s(t), h = s(o), u = a / (h - c), f = k({ lo: c, hi: h, pxPerPower: u, minSpacing: r, labelCount: l, base: e });
+  if (f > 1) return w({ lo: c, hi: h, step: f, base: e });
+  const g = M({ lo: c, hi: h, base: e, mantissas: [1], forward: s });
+  if (i.length === 1) return g;
+  const $ = s(i[1]) - s(i[0]);
+  if (u * $ < r) return g;
+  const m = M({ lo: c, hi: h, base: e, mantissas: i, forward: s });
+  return l !== null && m.length > l ? g : m;
+}
+function k(n) {
+  const { lo: t, hi: o, pxPerPower: a, minSpacing: r, labelCount: l, base: s } = n;
+  let e = 1;
+  for (; e < 1e6; ) {
+    const i = e * a >= r, c = l === null || w({ lo: t, hi: o, step: e, base: s }).length <= l;
+    if (i && c) return e;
+    e = v(e);
+  }
+  return e;
+}
+function v(n) {
+  const t = n / 10 ** Math.floor(Math.log10(n));
+  return t < 2 ? n * 2 : t < 5 ? n * 2.5 : n * 2;
+}
+function w(n) {
+  const { lo: t, hi: o, step: a, base: r } = n, l = Math.ceil(t / a - b), s = Math.floor(o / a + b), e = [];
+  for (let i = l; i <= s; i++)
+    e.push(d(1, r, i * a));
+  return e;
+}
+function M(n) {
+  const { lo: t, hi: o, base: a, mantissas: r, forward: l } = n, s = Math.floor(t), e = Math.floor(o + b), i = [];
+  for (let c = s; c <= e; c++)
+    for (const h of r) {
+      const u = d(h, a, c), f = l(u);
+      f < t - b || f > o + b || i.push(u);
+    }
+  return i;
+}
+function d(n, t, o) {
+  return o >= 0 ? n * t ** o : n / t ** -o;
+}
+function B(n) {
+  return n.replace(/(\.\d*?)0+([KMBT]?)$/, "$1$2").replace(/\.([KMBT]?)$/, "$1");
+}
+export {
+  K as logScale
+};

package/dist/core/dist/scales/tick-tracker.js

@@ -8,7 +8,7 @@ function f(s, t) {
     if (s[e] !== t[e]) return !1;
   return !0;
 }
-class m {
+let m = class {
   #e = [];
   #r = [];
   #t = /* @__PURE__ */ new Map();
@@ -104,7 +104,7 @@ class m {
   reset() {
     this.#e = [], this.#r = [], this.#t.clear(), this.#s = !1;
   }
-}
+};
 export {
   m as AxisTickTracker
 };