@wick-charts/vue 0.6.4 → 0.8.0

package/dist/core/dist/data/sync.js

@@ -1,69 +1,75 @@
-import { normalizeTime as s } from "../utils/time.js";
-const g = { len: 0, firstTime: null, lastTime: null, data: null }, d = 20;
-function c(t, a) {
-  if (s(t.time) !== s(a.time)) return !1;
+import { normalizeTime as y } from "../utils/time.js";
+function i(t) {
+  return "x" in t ? t.x : y(t.time);
+}
+const m = { len: 0, firstTime: null, lastTime: null, data: null }, p = 20;
+function g(t, a) {
+  if (i(t) !== i(a)) return !1;
   const r = Object.keys(t), e = Object.keys(a);
   return r.length !== e.length ? !1 : r.every((n) => n === "time" || t[n] === a[n]);
 }
-function y(t, a) {
+function c(t, a) {
   if (!t || t.length !== a.length || t === a) return !1;
   for (let r = 0; r < a.length - 1; r++)
-    if (t[r] !== a[r] && !c(t[r], a[r]))
+    if (t[r] !== a[r] && !g(t[r], a[r]))
       return !1;
   return !0;
 }
-function p(t, a, r) {
+function T(t, a, r) {
   if (!t || t.length === 0 || r <= 0 || t.length !== a.length - r) return !1;
   for (let e = 1; e < r; e++)
-    if (s(a[e - 1].time) >= s(a[e].time)) return !1;
-  if (s(a[r - 1].time) >= s(t[0].time)) return !1;
+    if (i(a[e - 1]) >= i(a[e])) return !1;
+  if (i(a[r - 1]) >= i(t[0])) return !1;
   for (let e = 0; e < t.length; e++)
-    if (!c(t[e], a[r + e])) return !1;
+    if (!g(t[e], a[r + e])) return !1;
   return !0;
 }
-function T(t) {
+function A(t) {
   return typeof t == "object" && t !== null && !Array.isArray(t) && Array.isArray(t.data);
 }
-function A(t) {
+function b(t) {
   if (!Array.isArray(t)) return [t];
   if (t.length === 0) return [{ data: [] }];
   const a = t[0];
-  return Array.isArray(a) || T(a) ? t.map((r) => Array.isArray(r) ? { data: r } : r) : [{ data: t }];
+  return Array.isArray(a) || A(a) ? t.map((r) => Array.isArray(r) ? { data: r } : r) : [{ data: t }];
 }
-function D(t) {
-  const { chart: a, id: r } = t, e = A(t.data), n = e.length > 1 ? e.map((l, f) => l.label ?? `Series ${f + 1}`) : [e[0].label];
+function L(t) {
+  const { chart: a, id: r } = t, e = b(t.data), n = e.length > 1 ? e.map((l, f) => l.label ?? `Series ${f + 1}`) : [e[0].label];
   a.setSeriesLabels(r, n), a.setLayerColors(
     r,
     e.map((l) => l.color)
   );
-  const i = [];
+  const s = [];
   return a.batch(() => {
     for (let l = 0; l < e.length; l++)
-      i[l] = b({
+      s[l] = S({
         chart: a,
         id: r,
         data: e[l].data,
-        prev: t.prev[l] ?? g,
+        prev: t.prev[l] ?? m,
         layerIndex: l
       });
-  }), i;
+  }), s;
 }
-function b(t) {
-  const { chart: a, id: r, data: e, prev: n, layerIndex: i } = t;
+function S(t) {
+  const { chart: a, id: r, data: e, prev: n, layerIndex: s } = t;
   if (e.length === 0)
-    return a.setSeriesData(r, [], i), { len: 0, firstTime: null, lastTime: null, data: [] };
+    return a.setSeriesData(r, [], s), { len: 0, firstTime: null, lastTime: null, data: [] };
   if (n.data === e && n.len === e.length) return n;
-  const l = s(e[0].time), f = s(e[e.length - 1].time), h = n.firstTime !== null && n.firstTime !== l, u = e.length - n.len, m = n.lastTime !== null && n.lastTime !== f;
-  return h && u === 0 && m ? a.batch(() => {
-    a.appendData(r, e[e.length - 1], i), a.keepLast(r, e.length, i);
-  }) : p(n.data, e, u) ? a.prependData(r, e.slice(0, u), i) : n.len === 0 || e.length < n.len || u > d || h ? a.setSeriesData(r, e, i) : e.length === n.len ? y(n.data, e) ? a.updateData(r, e[e.length - 1], i) : a.setSeriesData(r, e, i) : a.batch(() => {
+  const l = i(e[0]), f = i(e[e.length - 1]);
+  if (typeof l == "string")
+    return e.length === n.len && c(n.data, e) ? a.updateData(r, e[e.length - 1], s) : a.setSeriesData(r, e, s), { len: e.length, firstTime: l, lastTime: f, data: e };
+  const h = n.firstTime !== null && n.firstTime !== l, u = e.length - n.len, d = n.lastTime !== null && n.lastTime !== f;
+  return h && u === 0 && d ? a.batch(() => {
+    a.appendData(r, e[e.length - 1], s), a.keepLast(r, e.length, s);
+  }) : T(n.data, e, u) ? a.prependData(r, e.slice(0, u), s) : n.len === 0 || e.length < n.len || u > p || h ? a.setSeriesData(r, e, s) : e.length === n.len ? c(n.data, e) ? a.updateData(r, e[e.length - 1], s) : a.setSeriesData(r, e, s) : a.batch(() => {
     for (let o = n.len; o < e.length; o++)
-      a.appendData(r, e[o], i);
+      a.appendData(r, e[o], s);
   }), { len: e.length, firstTime: l, lastTime: f, data: e };
 }
 export {
-  g as EMPTY_SYNC_STATE,
-  D as syncLayers,
-  b as syncSeriesLayer,
-  A as toLayers
+  m as EMPTY_SYNC_STATE,
+  L as syncLayers,
+  S as syncSeriesLayer,
+  b as toLayers
 };

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 k } from "../scales/y-scale.js";
-import { decimateCandles as R, decimateLinear as C } from "./decimate.js";
+import { decimateCandles as C, decimateLinear as R } 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 { computeWindowGeometry as M, renderBackground as L, renderMiniCandlestick as N, renderMiniBar as V, renderMiniLine as P } from "./render.js";
 import { Animator as S } from "../animation/animator.js";
 import { easeOutCubic as z } from "../animation/easing.js";
 class G {
@@ -12,7 +12,7 @@ class G {
   #z;
   #e;
   #n;
-  #d;
+  #u;
   #r;
   #l;
   #a;
@@ -21,9 +21,9 @@ class G {
   #v;
   // 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 k();
-  #A = 0;
+  #d = new T();
+  #A = new k();
+  #F = 0;
   #m = 0;
   #h = 1;
   #p = null;
@@ -48,11 +48,11 @@ class G {
   #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. */
-  #R = null;
+  #C = 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). */
-  #C = -1;
+  #R = -1;
   #E;
   // Active-drag state — null when idle.
   #g = null;
@@ -61,22 +61,22 @@ class G {
   #$;
   #M;
   #L;
-  #V;
-  #y;
   #N;
+  #y;
+  #V;
   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.#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.#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.#u = document.createElement("div"), this.#u.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.#u, 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.#N = (s) => this.#J(s), this.#y = (s) => this.#K(s), this.#V = () => {
       this.#g === null && (this.#t.style.cursor = "default");
-    }, 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();
+    }, this.#t.addEventListener("pointerdown", this.#L), this.#t.addEventListener("pointermove", this.#N), this.#t.addEventListener("pointerup", this.#y), this.#t.addEventListener("pointercancel", this.#y), this.#t.addEventListener("pointerleave", this.#V), 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.#R !== null && i !== this.#R) {
+    const e = A(t), i = e?.time ?? null;
+    if (i !== null && this.#C !== null && i !== this.#C) {
       const s = this.#o?.current ?? 0;
       this.#o = new S({
         initial: s,
@@ -85,7 +85,7 @@ class G {
         lerp: (n, h, l) => n + (h - n) * l
       }), this.#o.setTarget(1);
     }
-    this.#R = i, this.#C = e?.seriesIndex ?? -1, this.#x = t, this.#k.clear(), this.#f();
+    this.#C = i, this.#R = 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.#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();
+    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.#N), this.#t.removeEventListener("pointerup", this.#y), this.#t.removeEventListener("pointercancel", this.#y), this.#t.removeEventListener("pointerleave", this.#V), 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,10 +108,10 @@ class G {
   }
   // --- internals ---------------------------------------------------------
   /** Effective drawing width — the navigator reserves the main chart's
-   *  `yAxisWidth` on the Y-axis side so its active zone lines up with the
-   *  plot area. */
+   *  Y-axis columns so its active zone lines up with the plot area. */
   get #i() {
-    return Math.max(0, this.#A - this.#e.yAxisWidth);
+    const t = this.#e.getAxisColumnWidth("left") + this.#e.getAxisColumnWidth("right");
+    return Math.max(0, this.#F - t);
   }
   #j(t) {
     if (!t) return;
@@ -119,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.#h = window.devicePixelRatio || 1, this.#X();
+    this.#F = t, this.#m = e, this.#h = window.devicePixelRatio || 1, this.#X();
   }
   /**
    * Write canvas backing-store / CSS sizes only when they actually changed —
@@ -160,7 +160,7 @@ class G {
    *  compute against primed scales even on the opening gesture. */
   #P() {
     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 };
+    return this.#d.update(t, this.#i, this.#h), this.#A.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
@@ -172,7 +172,7 @@ class G {
     return this.#g !== null ? this.#e.getVisibleRange() : this.#e.getAnimationState().xRange;
   }
   #S() {
-    return this.#P(), M(this.#u, this.#Y(), this.#b());
+    return this.#P(), M(this.#d, this.#Y(), this.#b());
   }
   #H() {
     const t = this.#b(), e = t.to - t.from;
@@ -186,7 +186,7 @@ class G {
     if (h === 0) return;
     let l = this.#e.getVisibleRange();
     if (n.snapToCenter) {
-      const r = this.#u.xToTime(e), a = E({ time: r, startVisible: l, xRange: i });
+      const r = this.#d.xToTime(e), a = E({ time: r, startVisible: l, xRange: i });
       this.#e.setVisibleRange(a), l = a;
     }
     this.#g = {
@@ -243,8 +243,8 @@ class G {
     i.save(), i.clearRect(0, 0, s, n), i.scale(this.#h, this.#h);
     const h = {
       ctx: i,
-      timeScale: this.#u,
-      yScale: this.#F,
+      timeScale: this.#d,
+      yScale: this.#A,
       mediaWidth: this.#i,
       mediaHeight: this.#m,
       theme: t
@@ -254,12 +254,12 @@ class G {
     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")
-      V(h, this.#q(a.points, r, R), l);
+      N(h, this.#q(a.points, r, C), 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++) {
-        const p = this.#q(c[u], r, C), m = u === d ? l : 1;
-        a.type === "bar" ? N(h, p, m) : P(h, p, g, m);
+      const c = f(a), g = c.length === 1, u = this.#R >= 0 ? this.#R : c.length - 1;
+      for (let d = 0; d < c.length; d++) {
+        const p = this.#q(c[d], r, R), m = d === u ? l : 1;
+        a.type === "bar" ? V(h, p, m) : P(h, p, g, m);
       }
     }
     i.restore(), this.#G(t, e);
@@ -291,12 +291,12 @@ class G {
   }
   #G(t, e) {
     if (e.to <= e.from) return;
-    const i = this.#Y(), s = Math.max(e.from, Math.min(e.to, i.from)), n = Math.max(e.from, Math.min(e.to, i.to)), h = this.#u.timeToX(s), l = this.#u.timeToX(n), r = Math.min(h, l), a = Math.max(h, l), c = Math.max(1, a - r);
-    this.#d.style.width = `${r}px`, this.#d.style.background = t.mask.fill, this.#d.style.display = r > 0 ? "block" : "none";
+    const i = this.#Y(), s = Math.max(e.from, Math.min(e.to, i.from)), n = Math.max(e.from, Math.min(e.to, i.to)), h = this.#d.timeToX(s), l = this.#d.timeToX(n), r = Math.min(h, l), a = Math.max(h, l), c = Math.max(1, a - r);
+    this.#u.style.width = `${r}px`, this.#u.style.background = t.mask.fill, this.#u.style.display = r > 0 ? "block" : "none";
     const g = Math.max(0, this.#i - (r + c));
     this.#r.style.left = `${r + c}px`, this.#r.style.width = `${g}px`, this.#r.style.background = t.mask.fill, this.#r.style.display = g > 0 ? "block" : "none", this.#l.style.left = `${r}px`, this.#l.style.width = `${c}px`, this.#l.style.background = t.window.fill, this.#l.style.border = t.window.borderWidth > 0 ? `${t.window.borderWidth}px solid ${t.window.border}` : "none";
-    const d = t.handle.width, u = Math.max(1, d / 2), p = this.#e.getTheme().background;
-    this.#a.style.left = `${r - d / 2}px`, this.#a.style.width = `${d}px`, this.#a.style.background = t.handle.color, this.#a.style.borderRadius = `${u}px`, this.#c.style.left = `${r + c - d / 2}px`, this.#c.style.width = `${d}px`, this.#c.style.background = t.handle.color, this.#c.style.borderRadius = `${u}px`;
+    const u = t.handle.width, d = Math.max(1, u / 2), p = this.#e.getTheme().background;
+    this.#a.style.left = `${r - u / 2}px`, this.#a.style.width = `${u}px`, this.#a.style.background = t.handle.color, this.#a.style.borderRadius = `${d}px`, this.#c.style.left = `${r + c - u / 2}px`, this.#c.style.width = `${u}px`, this.#c.style.background = t.handle.color, this.#c.style.borderRadius = `${d}px`;
     for (const m of this.#a.children)
       m.style.background = p;
     for (const m of this.#c.children)
@@ -339,7 +339,7 @@ class G {
 function f(o) {
   return "series" in o ? o.series : [o.points];
 }
-function F(o) {
+function A(o) {
   if (o.type === "candlestick") {
     const s = o.points.length;
     return s === 0 ? null : { time: o.points[s - 1].time, seriesIndex: -1 };
@@ -358,9 +358,9 @@ function v(o, t) {
   return o === "resize-left" || o === "resize-right" ? "ew-resize" : t ? "grabbing" : "grab";
 }
 function x(o, t) {
-  return v(A(o, t), !1);
+  return v(F(o, t), !1);
 }
-function A(o, t) {
+function F(o, t) {
   return b(o, t).gesture;
 }
 function y() {

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

@@ -10,7 +10,7 @@ function N(i) {
     ownsMonitor: !e
   };
 }
-const P = 100, z = 600, f = 250, F = 1e3 / 60, H = 1e3 / 120, m = 60, b = 4, L = 34, S = 64, j = 24;
+const P = 100, z = 600, f = 250, F = 1e3 / 60, H = 1e3 / 120, m = 60, b = 4, j = 34, S = 64, L = 24;
 function I(i) {
   let e = 0;
   for (const t of i)
@@ -233,7 +233,7 @@ class D {
     }), this.element.insertBefore(this.sparkHost, this.element.firstChild)) : (Object.assign(this.sparkHost.style, {
       position: "relative",
       inset: "auto",
-      height: `${L}px`,
+      height: `${j}px`,
       marginTop: "7px",
       borderRadius: "4px",
       opacity: "1",
@@ -308,7 +308,7 @@ class D {
   }
   /** Keeps the plateau below the FPS number (mini) or the Y tick (strip). */
   sparkPaddingTop() {
-    return this.mode === "mini" ? j : 12;
+    return this.mode === "mini" ? L : 12;
   }
   /** Append one FPS sample to the sparkline chart and roll its window. */
   appendSpark(e) {

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;
 }
-let m = class {
+class m {
   #e = [];
   #r = [];
   #t = /* @__PURE__ */ new Map();
@@ -104,7 +104,7 @@ let m = class {
   reset() {
     this.#e = [], this.#r = [], this.#t.clear(), this.#s = !1;
   }
-};
+}
 export {
   m as AxisTickTracker
 };