@abdullahjaswal/tickyr-charts-solid 0.1.0 → 0.1.2

package/dist/index.js

@@ -4859,51 +4859,49 @@ let __tla = (async () => {
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout, s2 = t2.extremes;
-      if (s2 !== null) {
-        let e3 = (e4) => e4 !== null && i2 >= e4.x && i2 <= e4.x + e4.width && a2 >= e4.y && a2 <= e4.y + e4.height;
-        if (e3(s2.high.pillBox)) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout, o2 = t2.extremes;
+      if (o2 !== null) {
+        let e3 = (e4) => e4 !== null && r2 >= e4.x && r2 <= e4.x + e4.width && i2 >= e4.y && i2 <= e4.y + e4.height;
+        if (e3(o2.high.pillBox)) {
           this.setHover(null), this.setExtremeHover({
             kind: "high",
-            pointerX: i2,
-            pointerY: a2,
-            idx: s2.high.idx,
-            t: s2.high.t,
-            price: s2.high.price
+            pointerX: r2,
+            pointerY: i2,
+            idx: o2.high.idx,
+            t: o2.high.t,
+            price: o2.high.price
           }), this.repaintDynamicWith(null, performance.now());
           return;
         }
-        if (e3(s2.low.pillBox)) {
+        if (e3(o2.low.pillBox)) {
           this.setHover(null), this.setExtremeHover({
             kind: "low",
-            pointerX: i2,
-            pointerY: a2,
-            idx: s2.low.idx,
-            t: s2.low.t,
-            price: s2.low.price
+            pointerX: r2,
+            pointerY: i2,
+            idx: o2.low.idx,
+            t: o2.low.t,
+            price: o2.low.price
           }), this.repaintDynamicWith(null, performance.now());
           return;
         }
       }
-      if (i2 < o2.innerLeft || i2 > o2.innerRight || a2 < o2.innerTop || a2 > o2.innerBottom) {
+      if (r2 < a2.innerLeft || r2 > a2.innerRight || i2 < a2.innerTop || i2 > a2.innerBottom) {
         this.setHover(null), this.setExtremeHover(null), this.repaintDynamicWith(null, performance.now());
         return;
       }
       this.setExtremeHover(null);
-      let c2 = this.props.crosshairSnap ?? "data", l2 = i2, u2 = a2, d2 = -1, f2 = ho(i2, o2), p2 = o2.yScale.fromPx(a2), m2 = this.stackedLayout === null ? this.series.values : this.stackedLayout.tops[0];
-      c2 === "data" && this.series.length > 0 ? (d2 = Ir(this.series.times, f2), f2 = X(this.series.times, d2), p2 = X(m2, d2), l2 = mo(f2, o2), u2 = o2.yScale.toPx(p2)) : c2 === "x-axis" && this.series.length > 0 && (d2 = Ir(this.series.times, f2), f2 = X(this.series.times, d2), l2 = mo(f2, o2));
-      let h2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: l2,
-        snapY: u2,
-        idx: d2,
-        t: f2,
-        value: p2
+      let s2 = this.props.crosshairSnap ?? "data", c2 = r2, l2 = i2, u2 = -1, d2 = ho(r2, a2), f2 = a2.yScale.fromPx(i2), p2 = this.stackedLayout === null ? this.series.values : this.stackedLayout.tops[0];
+      s2 === "data" && this.series.length > 0 ? (u2 = Ir(this.series.times, d2), d2 = X(this.series.times, u2), f2 = X(p2, u2), c2 = mo(d2, a2), l2 = a2.yScale.toPx(f2)) : s2 === "x-axis" && this.series.length > 0 && (u2 = Ir(this.series.times, d2), d2 = X(this.series.times, u2), c2 = mo(d2, a2));
+      let m2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: c2,
+        snapY: l2,
+        idx: u2,
+        t: d2,
+        value: f2
       };
-      this.setHover(h2), this.repaintDynamicWith(h2, performance.now());
+      this.setHover(m2), this.repaintDynamicWith(m2, performance.now());
     }
     handlePointerLeave() {
       let e2 = this.handle;
@@ -8743,111 +8741,109 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout;
       if (this.dividerDrag !== null) {
-        if (Math.abs(a2 - this.dividerDrag.startPointerY) > 2 && (this.dividerDrag.moved = true), this.dividerDrag.availableHeight > 0) {
-          let e3 = (this.dividerDrag.startPointerY - a2) / this.dividerDrag.availableHeight, t3 = this.dividerDrag.startRatio + e3;
+        if (Math.abs(i2 - this.dividerDrag.startPointerY) > 2 && (this.dividerDrag.moved = true), this.dividerDrag.availableHeight > 0) {
+          let e3 = (this.dividerDrag.startPointerY - i2) / this.dividerDrag.availableHeight, t3 = this.dividerDrag.startRatio + e3;
           t3 < 0.05 && (t3 = 0.05), t3 > 0.6 && (t3 = 0.6), t3 !== this.volumeHeightRatio && (this.volumeHeightRatio = t3, this.runStaticDraw());
         }
         return;
       }
-      if ((this.props.volumeResizable ?? true) && o2.volumePane !== null) {
-        let e3 = o2.volumePane.dividerY, t3 = Math.abs(a2 - e3) <= 5;
+      if ((this.props.volumeResizable ?? true) && a2.volumePane !== null) {
+        let e3 = a2.volumePane.dividerY, t3 = Math.abs(i2 - e3) <= 5;
         t3 !== this.overDivider && (this.overDivider = t3, this.callbacks.onOverDividerChange(t3));
       } else this.overDivider && (this.overDivider = false, this.callbacks.onOverDividerChange(false));
-      let s2 = t2.extremes;
-      if (s2 !== null) {
-        let e3 = (e4) => e4 !== null && i2 >= e4.x && i2 <= e4.x + e4.width && a2 >= e4.y && a2 <= e4.y + e4.height;
-        if (e3(s2.high.pillBox)) {
+      let o2 = t2.extremes;
+      if (o2 !== null) {
+        let e3 = (e4) => e4 !== null && r2 >= e4.x && r2 <= e4.x + e4.width && i2 >= e4.y && i2 <= e4.y + e4.height;
+        if (e3(o2.high.pillBox)) {
           this.setHover(null), this.setExtremeHover({
             kind: "high",
-            pointerX: i2,
-            pointerY: a2,
-            idx: s2.high.idx,
-            t: s2.high.t,
-            price: s2.high.price
+            pointerX: r2,
+            pointerY: i2,
+            idx: o2.high.idx,
+            t: o2.high.t,
+            price: o2.high.price
           }), this.repaintDynamic();
           return;
         }
-        if (e3(s2.low.pillBox)) {
+        if (e3(o2.low.pillBox)) {
           this.setHover(null), this.setExtremeHover({
             kind: "low",
-            pointerX: i2,
-            pointerY: a2,
-            idx: s2.low.idx,
-            t: s2.low.t,
-            price: s2.low.price
+            pointerX: r2,
+            pointerY: i2,
+            idx: o2.low.idx,
+            t: o2.low.t,
+            price: o2.low.price
           }), this.repaintDynamic();
           return;
         }
       }
-      let c2 = a2 >= o2.innerTop && a2 <= (o2.volumePane?.top ?? o2.innerBottom), l2 = o2.volumePane !== null && a2 >= o2.volumePane.top && a2 <= o2.volumePane.bottom;
-      if (i2 < o2.innerLeft || i2 > o2.innerRight || !c2 && !l2) {
+      let s2 = i2 >= a2.innerTop && i2 <= (a2.volumePane?.top ?? a2.innerBottom), c2 = a2.volumePane !== null && i2 >= a2.volumePane.top && i2 <= a2.volumePane.bottom;
+      if (r2 < a2.innerLeft || r2 > a2.innerRight || !s2 && !c2) {
         this.setHover(null), this.setExtremeHover(null), this.repaintDynamic();
         return;
       }
       if (this.setExtremeHover(null), this.panDrag !== null) {
-        let e3 = this.panDrag.startWindow.endMs - this.panDrag.startWindow.startMs, t3 = o2.innerRight - o2.innerLeft, n3 = -((i2 - this.panDrag.startPx) / t3) * e3, r3 = {
+        let e3 = this.panDrag.startWindow.endMs - this.panDrag.startWindow.startMs, t3 = a2.innerRight - a2.innerLeft, n3 = -((r2 - this.panDrag.startPx) / t3) * e3, i3 = {
           startMs: this.panDrag.startWindow.startMs + n3,
           endMs: this.panDrag.startWindow.endMs + n3
-        }, a3 = this.arr;
-        if (a3.length > 0) {
-          let e4 = X(a3.times, 0), t4 = X(a3.times, a3.length - 1);
-          r3.startMs < e4 && (r3.endMs += e4 - r3.startMs, r3.startMs = e4), r3.endMs > t4 && (r3.startMs -= r3.endMs - t4, r3.endMs = t4);
+        }, o3 = this.arr;
+        if (o3.length > 0) {
+          let e4 = X(o3.times, 0), t4 = X(o3.times, o3.length - 1);
+          i3.startMs < e4 && (i3.endMs += e4 - i3.startMs, i3.startMs = e4), i3.endMs > t4 && (i3.startMs -= i3.endMs - t4, i3.endMs = t4);
         }
-        this.zoomWindow = r3, this.resolveDerived(), this.runStaticDraw();
+        this.zoomWindow = i3, this.resolveDerived(), this.runStaticDraw();
         return;
       }
-      let u2 = this.visibleArr;
-      if (u2.length === 0) return;
-      let d2 = o2.xScale.fromPx(i2), f2 = Ir(u2.times, d2), p2 = X(u2.times, f2), m2 = X(u2.opens, f2), h2 = X(u2.highs, f2), g2 = X(u2.lows, f2), _2 = X(u2.closes, f2), v2 = u2.volumes === null ? NaN : X(u2.volumes, f2), y2 = this.props.dojiMinBodyHeight ?? 1.5, b2 = o2.yScale.toPx(Math.max(m2, _2)), x2 = o2.yScale.toPx(Math.min(m2, _2)) - b2 < y2 ? "doji" : _2 >= m2 ? "up" : "down", S2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: o2.xScale.toPx(p2),
-        snapY: o2.yScale.toPx(_2),
-        idx: f2,
-        t: p2,
-        o: m2,
-        h: h2,
-        l: g2,
-        c: _2,
-        v: v2,
-        direction: x2,
-        pane: l2 ? "volume" : "price"
+      let l2 = this.visibleArr;
+      if (l2.length === 0) return;
+      let u2 = a2.xScale.fromPx(r2), d2 = Ir(l2.times, u2), f2 = X(l2.times, d2), p2 = X(l2.opens, d2), m2 = X(l2.highs, d2), h2 = X(l2.lows, d2), g2 = X(l2.closes, d2), _2 = l2.volumes === null ? NaN : X(l2.volumes, d2), v2 = this.props.dojiMinBodyHeight ?? 1.5, y2 = a2.yScale.toPx(Math.max(p2, g2)), b2 = a2.yScale.toPx(Math.min(p2, g2)) - y2 < v2 ? "doji" : g2 >= p2 ? "up" : "down", x2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: a2.xScale.toPx(f2),
+        snapY: a2.yScale.toPx(g2),
+        idx: d2,
+        t: f2,
+        o: p2,
+        h: m2,
+        l: h2,
+        c: g2,
+        v: _2,
+        direction: b2,
+        pane: c2 ? "volume" : "price"
       };
-      this.setHover(S2), this.crosshairAlpha < 1 && this.kickCrosshairFade(1);
-      let C2 = null, w2 = -1, T2 = Infinity;
+      this.setHover(x2), this.crosshairAlpha < 1 && this.kickCrosshairFade(1);
+      let S2 = null, C2 = -1, w2 = Infinity;
       if (this.markerQuadtree !== null) {
-        let e3 = this.markerQuadtree.nearest(i2, a2);
+        let e3 = this.markerQuadtree.nearest(r2, i2);
         if (e3 !== null) {
-          let t3 = i2 - e3.x, n3 = a2 - e3.y, r3 = Math.sqrt(t3 * t3 + n3 * n3);
-          if (r3 < 14) {
+          let t3 = r2 - e3.x, n3 = i2 - e3.y, a3 = Math.sqrt(t3 * t3 + n3 * n3);
+          if (a3 < 14) {
             let t4 = e3.id >>> 24 & 255, n4 = e3.id & 16777215;
-            t4 === 0 && this.props.signalTooltip !== false ? (C2 = "signal", w2 = n4, T2 = r3) : t4 === 1 && this.props.eventTooltip !== false && (C2 = "event", w2 = n4, T2 = r3);
+            t4 === 0 && this.props.signalTooltip !== false ? (S2 = "signal", C2 = n4, w2 = a3) : t4 === 1 && this.props.eventTooltip !== false && (S2 = "event", C2 = n4, w2 = a3);
           }
         }
       }
-      let E2 = this.props.orders;
-      if (this.props.orderTooltip !== false && E2 !== void 0 && E2.length > 0) for (let e3 = 0; e3 < E2.length; e3++) {
-        let t3 = E2[e3], n3 = o2.yScale.toPx(t3.entryPrice), r3 = Math.abs(a2 - n3);
-        r3 < 14 && r3 < T2 && (C2 = "order", w2 = e3, T2 = r3);
+      let T2 = this.props.orders;
+      if (this.props.orderTooltip !== false && T2 !== void 0 && T2.length > 0) for (let e3 = 0; e3 < T2.length; e3++) {
+        let t3 = T2[e3], n3 = a2.yScale.toPx(t3.entryPrice), r3 = Math.abs(i2 - n3);
+        r3 < 14 && r3 < w2 && (S2 = "order", C2 = e3, w2 = r3);
       }
-      let D2 = this.props.position;
-      if (this.props.positionTooltip !== false && D2 !== void 0) {
-        let e3 = o2.yScale.toPx(D2.entryPrice), t3 = Math.abs(a2 - e3);
-        t3 < 14 && t3 < T2 && (C2 = "position", w2 = -1, T2 = t3);
+      let E2 = this.props.position;
+      if (this.props.positionTooltip !== false && E2 !== void 0) {
+        let e3 = a2.yScale.toPx(E2.entryPrice), t3 = Math.abs(i2 - e3);
+        t3 < 14 && t3 < w2 && (S2 = "position", C2 = -1, w2 = t3);
       }
-      if (C2 === null ? this.markerHover !== null && this.setMarkerHover(null) : this.setMarkerHover({
-        kind: C2,
-        idx: w2,
-        pointerX: i2,
-        pointerY: a2
+      if (S2 === null ? this.markerHover !== null && this.setMarkerHover(null) : this.setMarkerHover({
+        kind: S2,
+        idx: C2,
+        pointerX: r2,
+        pointerY: i2
       }), this.armedTool === null) {
         let e3 = this.props.drawings;
         if (e3 !== void 0 && e3.length > 0) {
-          let t3 = Ks(e3, i2, a2, this.makeDrawCtx(o2));
+          let t3 = Ks(e3, r2, i2, this.makeDrawCtx(a2));
           this.setHoverDrawingId(t3?.id);
         } else this.hoverDrawingId !== void 0 && this.setHoverDrawingId(void 0);
       }
@@ -8868,27 +8864,23 @@ ${G2 ?? ""}`;
       if (t2 === null) return;
       let n2 = this.arr;
       if (n2.length < 2) return;
-      let r2 = e2.currentTarget;
-      if (r2 === null) return;
-      let i2 = r2.getBoundingClientRect(), a2 = e2.clientX - i2.left, o2 = t2.layout;
-      if (a2 < o2.innerLeft || a2 > o2.innerRight) return;
+      let r2 = this.staticCanvas.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = t2.layout;
+      if (i2 < a2.innerLeft || i2 > a2.innerRight) return;
       e2.preventDefault();
-      let s2 = this.zoomWindow ?? {
+      let o2 = this.zoomWindow ?? {
         startMs: X(n2.times, 0),
         endMs: X(n2.times, n2.length - 1)
-      }, c2 = e2.deltaY < 0 ? 0.85 : 1.18, l2 = o2.xScale.fromPx(a2), u2 = (s2.endMs - s2.startMs) * c2, d2 = (l2 - s2.startMs) / Math.max(1, s2.endMs - s2.startMs), f2 = {
-        startMs: l2 - d2 * u2,
-        endMs: l2 + (1 - d2) * u2
-      }, p2 = X(n2.times, 0), m2 = X(n2.times, n2.length - 1);
-      f2.endMs - f2.startMs >= m2 - p2 ? this.zoomWindow = null : (f2.startMs < p2 && (f2.endMs += p2 - f2.startMs, f2.startMs = p2), f2.endMs > m2 && (f2.startMs -= f2.endMs - m2, f2.endMs = m2), this.zoomWindow = f2), this.resolveDerived(), this.runStaticDraw();
+      }, s2 = e2.deltaY < 0 ? 0.85 : 1.18, c2 = a2.xScale.fromPx(i2), l2 = (o2.endMs - o2.startMs) * s2, u2 = (c2 - o2.startMs) / Math.max(1, o2.endMs - o2.startMs), d2 = {
+        startMs: c2 - u2 * l2,
+        endMs: c2 + (1 - u2) * l2
+      }, f2 = X(n2.times, 0), p2 = X(n2.times, n2.length - 1);
+      d2.endMs - d2.startMs >= p2 - f2 ? this.zoomWindow = null : (d2.startMs < f2 && (d2.endMs += f2 - d2.startMs, d2.startMs = f2), d2.endMs > p2 && (d2.startMs -= d2.endMs - p2, d2.endMs = p2), this.zoomWindow = d2), this.resolveDerived(), this.runStaticDraw();
     }
     handlePointerDown(e2) {
       if (this.disposed) return;
       let t2 = this.handle;
       if (t2 === null) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
+      let n2 = this.staticCanvas, r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
       if ((this.props.volumeResizable ?? true) && o2.volumePane !== null) {
         let t3 = o2.volumePane.dividerY;
         if (Math.abs(a2 - t3) <= 5) {
@@ -10432,40 +10424,38 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.totalPointCount() === 0 || this.quadtree === null) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
-      if (i2 < o2.innerLeft || i2 > o2.innerRight || a2 < o2.innerTop || a2 > o2.innerBottom) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout;
+      if (r2 < a2.innerLeft || r2 > a2.innerRight || i2 < a2.innerTop || i2 > a2.innerBottom) {
         this.setHover(null), Il(t2, null, this.dynCfg);
         return;
       }
-      let s2 = this.quadtree.nearest(i2, a2);
-      if (s2 === null) {
+      let o2 = this.quadtree.nearest(r2, i2);
+      if (o2 === null) {
         this.setHover(null), Il(t2, null, this.dynCfg);
         return;
       }
-      let c2 = s2.id;
-      if (c2 >= this.flatSeriesIdx.length) {
+      let s2 = o2.id;
+      if (s2 >= this.flatSeriesIdx.length) {
         this.setHover(null), Il(t2, null, this.dynCfg);
         return;
       }
-      let l2 = this.flatSeriesIdx[c2], u2 = this.flatPointIdx[c2], d2 = this.seriesList[l2];
-      if (d2 === void 0 || u2 >= d2.series.length) {
+      let c2 = this.flatSeriesIdx[s2], l2 = this.flatPointIdx[s2], u2 = this.seriesList[c2];
+      if (u2 === void 0 || l2 >= u2.series.length) {
         this.setHover(null), Il(t2, null, this.dynCfg);
         return;
       }
-      let f2 = d2.series, p2 = X(f2.xs, u2), m2 = X(f2.ys, u2), h2 = f2.sizes === null ? null : X(f2.sizes, u2), g2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: o2.xScale.toPx(p2),
-        snapY: o2.yScale.toPx(m2),
-        seriesIdx: l2,
-        idx: u2,
-        x: p2,
-        y: m2,
-        size: h2
+      let d2 = u2.series, f2 = X(d2.xs, l2), p2 = X(d2.ys, l2), m2 = d2.sizes === null ? null : X(d2.sizes, l2), h2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: a2.xScale.toPx(f2),
+        snapY: a2.yScale.toPx(p2),
+        seriesIdx: c2,
+        idx: l2,
+        x: f2,
+        y: p2,
+        size: m2
       };
-      this.setHover(g2), Il(t2, g2, this.dynCfg);
+      this.setHover(h2), Il(t2, h2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && Il(this.handle, null, this.dynCfg);
@@ -11279,30 +11269,28 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.binCount === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
-      if (i2 < o2.innerLeft || i2 > o2.innerRight || a2 < o2.innerTop || a2 > o2.innerBottom) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout;
+      if (r2 < a2.innerLeft || r2 > a2.innerRight || i2 < a2.innerTop || i2 > a2.innerBottom) {
         this.setHover(null), mu(t2, null, this.dynCfg);
         return;
       }
-      let s2 = o2.xScale.fromPx(i2), c2 = hu(this.edges, this.binCount, s2);
-      if (c2 < 0) {
+      let o2 = a2.xScale.fromPx(r2), s2 = hu(this.edges, this.binCount, o2);
+      if (s2 < 0) {
         this.setHover(null), mu(t2, null, this.dynCfg);
         return;
       }
-      let l2 = X(this.edges, c2), u2 = X(this.edges, c2 + 1), d2 = X(this.yValues, c2), f2 = this.counts[c2], p2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: o2.xScale.toPx((l2 + u2) / 2),
-        snapY: o2.yScale.toPx(d2),
-        binIdx: c2,
-        binStart: l2,
-        binEnd: u2,
-        count: f2,
-        value: d2
+      let c2 = X(this.edges, s2), l2 = X(this.edges, s2 + 1), u2 = X(this.yValues, s2), d2 = this.counts[s2], f2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: a2.xScale.toPx((c2 + l2) / 2),
+        snapY: a2.yScale.toPx(u2),
+        binIdx: s2,
+        binStart: c2,
+        binEnd: l2,
+        count: d2,
+        value: u2
       };
-      this.setHover(p2), mu(t2, p2, this.dynCfg);
+      this.setHover(f2), mu(t2, f2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && mu(this.handle, null, this.dynCfg);
@@ -11928,25 +11916,23 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.matrix.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout, s2 = nd(o2, i2, a2);
-      if (s2 === null) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout, o2 = nd(a2, r2, i2);
+      if (o2 === null) {
         this.setHover(null), td(t2, null, this.dynCfg);
         return;
       }
-      let c2 = s2.row * o2.cols + s2.col, l2 = this.matrix.nullMask !== null && this.matrix.nullMask[c2] === 1 ? null : X(this.matrix.values, c2), u2 = this.matrix.rowLabels === null ? String(s2.row) : this.matrix.rowLabels[s2.row], d2 = this.matrix.colLabels === null ? String(s2.col) : this.matrix.colLabels[s2.col], f2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: o2.innerLeft + (s2.col + 0.5) * o2.cellWidthPx,
-        snapY: o2.innerTop + (s2.row + 0.5) * o2.cellHeightPx,
-        row: s2.row,
-        col: s2.col,
-        value: l2,
-        rowLabel: u2,
-        colLabel: d2
+      let s2 = o2.row * a2.cols + o2.col, c2 = this.matrix.nullMask !== null && this.matrix.nullMask[s2] === 1 ? null : X(this.matrix.values, s2), l2 = this.matrix.rowLabels === null ? String(o2.row) : this.matrix.rowLabels[o2.row], u2 = this.matrix.colLabels === null ? String(o2.col) : this.matrix.colLabels[o2.col], d2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: a2.innerLeft + (o2.col + 0.5) * a2.cellWidthPx,
+        snapY: a2.innerTop + (o2.row + 0.5) * a2.cellHeightPx,
+        row: o2.row,
+        col: o2.col,
+        value: c2,
+        rowLabel: l2,
+        colLabel: u2
       };
-      this.setHover(f2), td(t2, f2, this.dynCfg);
+      this.setHover(d2), td(t2, d2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && td(this.handle, null, this.dynCfg);
@@ -12528,29 +12514,27 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.series.bidPrices.length === 0 && this.series.askPrices.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
-      if (i2 < o2.innerLeft || i2 > o2.innerRight || a2 < o2.innerTop || a2 > o2.innerBottom) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout;
+      if (r2 < a2.innerLeft || r2 > a2.innerRight || i2 < a2.innerTop || i2 > a2.innerBottom) {
         this.setHover(null), Dd(t2, null, this.dynCfg);
         return;
       }
-      let s2 = o2.xScale.fromPx(i2), c2 = s2 <= o2.midPrice ? "bid" : "ask", l2 = c2 === "bid" ? this.series.bidPrices : this.series.askPrices, u2 = c2 === "bid" ? this.series.bidCumulative : this.series.askCumulative, d2 = c2 === "bid" ? this.series.bidSizes : this.series.askSizes, f2 = Od(l2, u2, l2.length, s2, c2);
-      if (f2 === null) {
+      let o2 = a2.xScale.fromPx(r2), s2 = o2 <= a2.midPrice ? "bid" : "ask", c2 = s2 === "bid" ? this.series.bidPrices : this.series.askPrices, l2 = s2 === "bid" ? this.series.bidCumulative : this.series.askCumulative, u2 = s2 === "bid" ? this.series.bidSizes : this.series.askSizes, d2 = Od(c2, l2, c2.length, o2, s2);
+      if (d2 === null) {
         this.setHover(null), Dd(t2, null, this.dynCfg);
         return;
       }
-      let p2 = this.cumulative ? X(u2, f2.idx) : X(d2, f2.idx), m2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: o2.xScale.toPx(X(l2, f2.idx)),
-        snapY: o2.yScale.toPx(p2),
-        side: c2,
-        price: s2,
-        cumulativeVolume: p2,
-        pctFromMid: Number.isFinite(o2.midPrice) && o2.midPrice !== 0 ? (s2 - o2.midPrice) / o2.midPrice : 0
+      let f2 = this.cumulative ? X(l2, d2.idx) : X(u2, d2.idx), p2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: a2.xScale.toPx(X(c2, d2.idx)),
+        snapY: a2.yScale.toPx(f2),
+        side: s2,
+        price: o2,
+        cumulativeVolume: f2,
+        pctFromMid: Number.isFinite(a2.midPrice) && a2.midPrice !== 0 ? (o2 - a2.midPrice) / a2.midPrice : 0
       };
-      this.setHover(m2), Dd(t2, m2, this.dynCfg);
+      this.setHover(p2), Dd(t2, p2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && Dd(this.handle, null, this.dynCfg);
@@ -13122,25 +13106,23 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.resolvedSeries.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = tf(t2.layout, this.startAngles, this.endAngles, this.resolvedSeries.length, i2, a2);
-      if (o2 < 0) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = tf(t2.layout, this.startAngles, this.endAngles, this.resolvedSeries.length, r2, i2);
+      if (a2 < 0) {
         this.setHover(null), ef(t2, null, this.dynCfg);
         return;
       }
-      let s2 = (X(this.startAngles, o2) + X(this.endAngles, o2)) / 2, c2 = (t2.layout.innerR + t2.layout.outerR) / 2, l2 = t2.layout.cx + c2 * Math.cos(s2), u2 = t2.layout.cy + c2 * Math.sin(s2), d2 = this.resolvedSeries.values[o2], f2 = this.resolvedSeries.names[o2], p2 = this.resolvedSeries.totalValue, m2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: l2,
-        snapY: u2,
-        idx: o2,
-        name: f2,
-        value: d2,
-        percent: p2 > 0 ? d2 / p2 : 0,
-        color: this.sliceColors[o2] ?? "rgba(128,128,128,1)"
+      let o2 = (X(this.startAngles, a2) + X(this.endAngles, a2)) / 2, s2 = (t2.layout.innerR + t2.layout.outerR) / 2, c2 = t2.layout.cx + s2 * Math.cos(o2), l2 = t2.layout.cy + s2 * Math.sin(o2), u2 = this.resolvedSeries.values[a2], d2 = this.resolvedSeries.names[a2], f2 = this.resolvedSeries.totalValue, p2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: c2,
+        snapY: l2,
+        idx: a2,
+        name: d2,
+        value: u2,
+        percent: f2 > 0 ? u2 / f2 : 0,
+        color: this.sliceColors[a2] ?? "rgba(128,128,128,1)"
       };
-      this.setHover(m2), ef(t2, m2, this.dynCfg);
+      this.setHover(p2), ef(t2, p2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && ef(this.handle, null, this.dynCfg);
@@ -13952,25 +13934,23 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.hierarchy.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = Bf(this.hierarchy, t2.layout, i2, a2, this.resolvedViewMode);
-      if (o2 < 0) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = Bf(this.hierarchy, t2.layout, r2, i2, this.resolvedViewMode);
+      if (a2 < 0) {
         this.setHover(null), zf(t2, null, this.dynCfg);
         return;
       }
-      let s2 = this.hierarchy.values[o2], c2 = this.hierarchy.values[this.rootIdx], l2 = {
-        pointerX: i2,
-        pointerY: a2,
-        idx: o2,
-        name: this.hierarchy.names[o2],
-        value: s2,
-        percent: c2 > 0 ? s2 / c2 : 0,
-        depth: this.hierarchy.depths[o2],
-        path: Af(this.hierarchy, o2),
-        color: this.nodeColors[o2] ?? "rgba(128,128,128,1)"
+      let o2 = this.hierarchy.values[a2], s2 = this.hierarchy.values[this.rootIdx], c2 = {
+        pointerX: r2,
+        pointerY: i2,
+        idx: a2,
+        name: this.hierarchy.names[a2],
+        value: o2,
+        percent: s2 > 0 ? o2 / s2 : 0,
+        depth: this.hierarchy.depths[a2],
+        path: Af(this.hierarchy, a2),
+        color: this.nodeColors[a2] ?? "rgba(128,128,128,1)"
       };
-      this.setHover(l2), zf(t2, l2, this.dynCfg);
+      this.setHover(c2), zf(t2, c2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && zf(this.handle, null, this.dynCfg);
@@ -13983,10 +13963,8 @@ ${G2 ?? ""}`;
     handleClick(e2) {
       let t2 = this.handle;
       if (t2 === null || this.resolvedViewMode !== "drill-down") return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = Bf(this.hierarchy, t2.layout, i2, a2, this.resolvedViewMode);
-      o2 < 0 || o2 === this.rootIdx || this.hierarchy.childCount[o2] !== 0 && this.drillTo(o2);
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = Bf(this.hierarchy, t2.layout, r2, i2, this.resolvedViewMode);
+      a2 < 0 || a2 === this.rootIdx || this.hierarchy.childCount[a2] !== 0 && this.drillTo(a2);
     }
     setPath(e2) {
       if (this.props.onPathChange !== void 0) {
@@ -14709,25 +14687,23 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.hierarchy.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = yp(this.hierarchy, t2.layout, i2, a2);
-      if (o2 < 0) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = yp(this.hierarchy, t2.layout, r2, i2);
+      if (a2 < 0) {
         this.setHover(null), vp(t2, null, this.dynCfg);
         return;
       }
-      let s2 = this.hierarchy.values[o2], c2 = this.hierarchy.values[this.rootIdx], l2 = {
-        pointerX: i2,
-        pointerY: a2,
-        idx: o2,
-        name: this.hierarchy.names[o2],
-        value: s2,
-        percent: c2 > 0 ? s2 / c2 : 0,
-        depth: this.hierarchy.depths[o2],
-        path: cp(this.hierarchy, o2),
-        color: this.nodeColors[o2] ?? "rgba(128,128,128,1)"
+      let o2 = this.hierarchy.values[a2], s2 = this.hierarchy.values[this.rootIdx], c2 = {
+        pointerX: r2,
+        pointerY: i2,
+        idx: a2,
+        name: this.hierarchy.names[a2],
+        value: o2,
+        percent: s2 > 0 ? o2 / s2 : 0,
+        depth: this.hierarchy.depths[a2],
+        path: cp(this.hierarchy, a2),
+        color: this.nodeColors[a2] ?? "rgba(128,128,128,1)"
       };
-      this.setHover(l2), vp(t2, l2, this.dynCfg);
+      this.setHover(c2), vp(t2, c2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && vp(this.handle, null, this.dynCfg);
@@ -14740,10 +14716,8 @@ ${G2 ?? ""}`;
     handleClick(e2) {
       let t2 = this.handle;
       if (t2 === null || this.resolvedViewMode !== "drill-down") return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = yp(this.hierarchy, t2.layout, i2, a2);
-      o2 < 0 || o2 === this.rootIdx || this.hierarchy.childCount[o2] !== 0 && this.drillTo(o2);
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = yp(this.hierarchy, t2.layout, r2, i2);
+      a2 < 0 || a2 === this.rootIdx || this.hierarchy.childCount[a2] !== 0 && this.drillTo(a2);
     }
     setPath(e2) {
       if (this.props.onPathChange !== void 0) {
@@ -15240,27 +15214,25 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.bricks.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
-      if (i2 < o2.innerLeft || i2 > o2.innerRight || a2 < o2.innerTop || a2 > o2.innerBottom) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout;
+      if (r2 < a2.innerLeft || r2 > a2.innerRight || i2 < a2.innerTop || i2 > a2.innerBottom) {
         this.setHover(null), zp(t2, null, this.dynCfg);
         return;
       }
-      let s2 = o2.xScale.fromPx(i2), c2 = Math.floor(s2);
-      c2 < 0 && (c2 = 0), c2 >= this.bricks.length && (c2 = this.bricks.length - 1);
-      let l2 = X(this.bricks.bottomPrices, c2), u2 = X(this.bricks.topPrices, c2), d2 = this.bricks.directions[c2], f2 = this.bricks.sourceIdx[c2], p2 = f2 >= 0 && f2 < this.candleTimes.length ? this.candleTimes[f2] : 0, m2 = {
-        pointerX: i2,
-        pointerY: a2,
-        snapX: o2.xScale.toPx(c2 + 0.5),
-        snapY: o2.yScale.toPx((l2 + u2) / 2),
-        idx: c2,
-        direction: d2,
-        bottomPrice: l2,
-        topPrice: u2,
-        sourceTime: p2
+      let o2 = a2.xScale.fromPx(r2), s2 = Math.floor(o2);
+      s2 < 0 && (s2 = 0), s2 >= this.bricks.length && (s2 = this.bricks.length - 1);
+      let c2 = X(this.bricks.bottomPrices, s2), l2 = X(this.bricks.topPrices, s2), u2 = this.bricks.directions[s2], d2 = this.bricks.sourceIdx[s2], f2 = d2 >= 0 && d2 < this.candleTimes.length ? this.candleTimes[d2] : 0, p2 = {
+        pointerX: r2,
+        pointerY: i2,
+        snapX: a2.xScale.toPx(s2 + 0.5),
+        snapY: a2.yScale.toPx((c2 + l2) / 2),
+        idx: s2,
+        direction: u2,
+        bottomPrice: c2,
+        topPrice: l2,
+        sourceTime: f2
       };
-      this.setHover(m2), zp(t2, m2, this.dynCfg);
+      this.setHover(p2), zp(t2, p2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && zp(this.handle, null, this.dynCfg);
@@ -15653,25 +15625,23 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.legs.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
-      if (i2 < o2.innerLeft || i2 > o2.innerRight) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout;
+      if (r2 < a2.innerLeft || r2 > a2.innerRight) {
         this.setHover(null), Gp(t2, null, this.dynCfg);
         return;
       }
-      let s2 = o2.xScale.fromPx(i2), c2 = Math.floor(s2);
-      c2 < 0 && (c2 = 0), c2 >= this.legs.length && (c2 = this.legs.length - 1);
-      let l2 = {
-        pointerX: i2,
-        pointerY: a2,
-        idx: c2,
-        direction: this.legs.directions[c2],
-        thick: this.legs.thick[c2] === 1,
-        startPrice: this.legs.startPrices[c2],
-        endPrice: this.legs.endPrices[c2]
+      let o2 = a2.xScale.fromPx(r2), s2 = Math.floor(o2);
+      s2 < 0 && (s2 = 0), s2 >= this.legs.length && (s2 = this.legs.length - 1);
+      let c2 = {
+        pointerX: r2,
+        pointerY: i2,
+        idx: s2,
+        direction: this.legs.directions[s2],
+        thick: this.legs.thick[s2] === 1,
+        startPrice: this.legs.startPrices[s2],
+        endPrice: this.legs.endPrices[s2]
       };
-      this.setHover(l2), Gp(t2, l2, this.dynCfg);
+      this.setHover(c2), Gp(t2, c2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && Gp(this.handle, null, this.dynCfg);
@@ -16034,24 +16004,22 @@ ${G2 ?? ""}`;
     handlePointerMove(e2) {
       let t2 = this.handle;
       if (t2 === null || this.columns.length === 0) return;
-      let n2 = e2.currentTarget;
-      if (n2 === null) return;
-      let r2 = n2.getBoundingClientRect(), i2 = e2.clientX - r2.left, a2 = e2.clientY - r2.top, o2 = t2.layout;
-      if (i2 < o2.innerLeft || i2 > o2.innerRight) {
+      let n2 = this.staticCanvas.getBoundingClientRect(), r2 = e2.clientX - n2.left, i2 = e2.clientY - n2.top, a2 = t2.layout;
+      if (r2 < a2.innerLeft || r2 > a2.innerRight) {
         this.setHover(null), Qp(t2, null, this.dynCfg);
         return;
       }
-      let s2 = o2.xScale.fromPx(i2), c2 = Math.floor(s2);
-      c2 < 0 && (c2 = 0), c2 >= this.columns.length && (c2 = this.columns.length - 1);
-      let l2 = {
-        pointerX: i2,
-        pointerY: a2,
-        idx: c2,
-        direction: this.columns.directions[c2],
-        bottomBox: this.columns.bottomBoxes[c2],
-        topBox: this.columns.topBoxes[c2]
+      let o2 = a2.xScale.fromPx(r2), s2 = Math.floor(o2);
+      s2 < 0 && (s2 = 0), s2 >= this.columns.length && (s2 = this.columns.length - 1);
+      let c2 = {
+        pointerX: r2,
+        pointerY: i2,
+        idx: s2,
+        direction: this.columns.directions[s2],
+        bottomBox: this.columns.bottomBoxes[s2],
+        topBox: this.columns.topBoxes[s2]
       };
-      this.setHover(l2), Qp(t2, l2, this.dynCfg);
+      this.setHover(c2), Qp(t2, c2, this.dynCfg);
     }
     handlePointerLeave() {
       this.setHover(null), this.handle !== null && Qp(this.handle, null, this.dynCfg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abdullahjaswal/tickyr-charts-solid",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Tickyr Charts for SolidJS: opinionated, canvas-rendered trading and financial-data charts, powered by a vendored Rust/WASM engine.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",