@wick-charts/vue 0.6.2 → 0.6.4

package/dist/ui/Tooltip.vue.js

@@ -1,145 +1,174 @@
-import { defineComponent as P, computed as s, ref as w, onMounted as D, onUnmounted as M, useSlots as X, watchEffect as Y, openBlock as r, createElementBlock as u, Fragment as x, unref as p, normalizeStyle as m, createElementVNode as d, toDisplayString as f, renderList as H, createCommentVNode as _, renderSlot as Z } from "vue";
-import { buildHoverSnapshots as $ } from "../core/dist/snapshots.js";
-import { resolveCandlestickBodyColor as K } from "../core/dist/theme/resolve.js";
-import { computeTooltipPosition as R } from "../core/dist/tooltip-position.js";
-import { formatCompact as U, formatPriceAdaptive as j } from "../core/dist/utils/format.js";
-import { formatDate as q } from "../core/dist/utils/time.js";
-import { useCrosshairPosition as G } from "../composables.js";
-import { useChartInstance as J } from "../context.js";
-const Q = {
+import { defineComponent as D, computed as c, ref as _, onMounted as X, onUnmounted as Y, useSlots as Z, watchEffect as $, openBlock as n, createElementBlock as r, Fragment as x, unref as v, normalizeStyle as h, createElementVNode as s, toDisplayString as d, renderList as H, createCommentVNode as z, renderSlot as K } from "vue";
+import { buildHoverSnapshots as U } from "../core/dist/snapshots.js";
+import { resolveCandlestickBodyColor as j } from "../core/dist/theme/resolve.js";
+import { computeTooltipPosition as I } from "../core/dist/tooltip-position.js";
+import { formatCompact as q, formatPriceAdaptive as G } from "../core/dist/utils/format.js";
+import { formatDate as J } from "../core/dist/utils/time.js";
+import { useCrosshairPosition as Q } from "../composables.js";
+import { useChartInstance as ee } from "../context.js";
+const te = {
   key: 0,
   style: { display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 12px" }
-}, ee = { style: { opacity: 0.5 } }, te = {
+}, oe = { style: { opacity: 0.5 } }, ae = {
   key: 1,
   style: { display: "flex", alignItems: "center", gap: "8px", padding: "2px 0" }
-}, oe = { style: { opacity: 0.6, flex: "1" } }, le = ["data-measured"], ce = /* @__PURE__ */ P({
+}, le = { style: {
+  opacity: 0.6,
+  flex: "1",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+} }, ie = {
+  key: 2,
+  style: { display: "flex", alignItems: "center", gap: "8px", padding: "2px 0" }
+}, ne = { style: { opacity: 0.6, flex: "1" } }, re = ["data-measured"], xe = /* @__PURE__ */ D({
   __name: "Tooltip",
   props: {
     sort: {},
     format: { type: Function }
   },
-  setup(I) {
-    const F = I, A = s(() => F.sort ?? "none"), k = s(
-      () => F.format ?? ((a, n) => n === "volume" ? U(a) : j(a))
-    ), o = J(), i = G(o), C = w(0), W = () => {
-      C.value++;
+  setup(L) {
+    const W = L, O = c(() => W.sort ?? "none"), g = c(
+      () => W.format ?? ((a, i) => i === "volume" ? q(a) : G(a))
+    ), t = ee(), u = Q(t), w = _(0), F = () => {
+      w.value++;
     };
-    D(() => {
-      o.on("overlayChange", W), o.getSeriesIds().length > 0 && C.value++;
-    }), M(() => {
-      o.off("overlayChange", W);
+    X(() => {
+      t.on("overlayChange", F), t.getSeriesIds().length > 0 && w.value++;
+    }), Y(() => {
+      t.off("overlayChange", F);
     });
-    const t = s(() => o.getTheme()), O = s(() => o.getDataInterval()), c = s(() => (C.value, i.value ? $(o, {
-      time: i.value.time,
-      sort: A.value,
+    const o = c(() => t.getTheme()), A = c(() => t.getDataInterval()), f = c(() => (w.value, u.value ? U(t, {
+      time: u.value.time,
+      sort: O.value,
       cacheKey: "tooltip"
-    }) : [])), z = s(() => i.value?.time ?? 0), T = X(), g = s(() => typeof T.default == "function"), B = w(null), b = w(null);
-    let S = null;
-    Y((a) => {
-      if (!g.value) return;
-      const n = B.value;
-      !n || typeof ResizeObserver > "u" || (S = new ResizeObserver((e) => {
+    }) : [])), C = c(() => u.value?.time ?? 0), T = Z(), y = c(() => typeof T.default == "function"), B = _(null), b = _(null);
+    let k = null;
+    $((a) => {
+      if (!y.value) return;
+      const i = B.value;
+      !i || typeof ResizeObserver > "u" || (k = new ResizeObserver((e) => {
         const l = e[0]?.contentRect;
         if (!l) return;
-        const y = b.value;
-        (!y || y.width !== l.width || y.height !== l.height) && (b.value = { width: l.width, height: l.height });
-      }), S.observe(n), a(() => {
-        S?.disconnect(), S = null;
+        const S = b.value;
+        (!S || S.width !== l.width || S.height !== l.height) && (b.value = { width: l.width, height: l.height });
+      }), k.observe(i), a(() => {
+        k?.disconnect(), k = null;
       }));
     });
-    const h = s(() => {
-      if (!i.value || c.value.length === 0) return null;
-      const a = o.getMediaSize(), n = a.width - o.yAxisWidth, e = a.height - o.xAxisHeight;
-      if (g.value) {
-        const v = b.value;
-        return v ? R({
-          x: i.value.mediaX,
-          y: i.value.mediaY,
-          chartWidth: n,
-          chartHeight: e,
-          tooltipWidth: v.width,
-          tooltipHeight: v.height
-        }) : { left: 0, top: 0 };
+    const m = c(() => {
+      if (!u.value || f.value.length === 0) return null;
+      const a = t.getMediaSize(), i = t.plotLeft, e = a.width - t.yAxisWidth, l = a.height - t.xAxisHeight;
+      if (y.value) {
+        const p = b.value;
+        return p ? I({
+          x: u.value.mediaX,
+          y: u.value.mediaY,
+          chartLeft: i,
+          chartWidth: e,
+          chartHeight: l,
+          tooltipWidth: p.width,
+          tooltipHeight: p.height
+        }) : { left: i, top: 0 };
       }
-      const l = c.value.some((v) => "open" in v.data), y = c.value.filter((v) => !("open" in v.data)).length, L = 160, N = l ? 140 : 40 + y * 22;
-      return R({
-        x: i.value.mediaX,
-        y: i.value.mediaY,
-        chartWidth: n,
-        chartHeight: e,
-        tooltipWidth: L,
-        tooltipHeight: N
+      const S = f.value.some((p) => "open" in p.data), M = f.value.filter((p) => !("open" in p.data)).length, N = f.value.some((p) => "high" in p.data && !("open" in p.data)) ? 220 : 160, P = S ? 140 : 40 + M * 22;
+      return I({
+        x: u.value.mediaX,
+        y: u.value.mediaY,
+        chartLeft: i,
+        chartWidth: e,
+        chartHeight: l,
+        tooltipWidth: N,
+        tooltipHeight: P
       });
-    }), V = s(() => !g.value || b.value !== null);
-    function E(a) {
+    }), V = c(() => !y.value || b.value !== null);
+    function R(a) {
       return "open" in a;
     }
-    return (a, n) => (r(), u(x, null, [
-      p(i) && c.value.length > 0 && h.value && !g.value ? (r(), u("div", {
+    function E(a) {
+      return "high" in a && !R(a);
+    }
+    return (a, i) => (n(), r(x, null, [
+      v(u) && f.value.length > 0 && m.value && !y.value ? (n(), r("div", {
         key: 0,
-        style: m({
+        style: h({
           position: "absolute",
-          left: h.value.left + "px",
-          top: h.value.top + "px",
+          left: m.value.left + "px",
+          top: m.value.top + "px",
           pointerEvents: "none",
-          background: t.value.tooltip.background,
+          background: o.value.tooltip.background,
           backdropFilter: "blur(12px)",
           WebkitBackdropFilter: "blur(12px)",
-          border: "1px solid " + t.value.tooltip.borderColor,
+          border: "1px solid " + o.value.tooltip.borderColor,
           borderRadius: "8px",
           padding: "10px 14px",
           boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
-          fontSize: t.value.tooltip.fontSize + "px",
-          fontFamily: t.value.typography.fontFamily,
+          fontSize: o.value.tooltip.fontSize + "px",
+          fontFamily: o.value.typography.fontFamily,
           fontVariantNumeric: "tabular-nums",
-          color: t.value.tooltip.textColor,
+          color: o.value.tooltip.textColor,
           minWidth: "140px",
           zIndex: 10,
           transition: "opacity 0.15s ease"
         })
       }, [
-        d("div", {
-          style: m({
-            fontSize: t.value.axis.fontSize + "px",
-            color: t.value.axis.textColor,
+        s("div", {
+          style: h({
+            fontSize: o.value.axis.fontSize + "px",
+            color: o.value.axis.textColor,
             marginBottom: "8px",
             paddingBottom: "6px",
-            borderBottom: "1px solid " + t.value.tooltip.borderColor,
+            borderBottom: "1px solid " + o.value.tooltip.borderColor,
             letterSpacing: "0.02em"
           })
-        }, f(p(q)(z.value, { locale: p(o).timeScale.getLocale(), timeZone: p(o).timeScale.getTimeZone() })) + " " + f(p(o).timeScale.formatX(z.value, O.value)), 5),
-        (r(!0), u(x, null, H(c.value, (e) => (r(), u(x, {
+        }, d(v(J)(C.value, { locale: v(t).timeScale.getLocale(), timeZone: v(t).timeScale.getTimeZone() })) + " " + d(v(t).timeScale.formatX(C.value, A.value)), 5),
+        (n(!0), r(x, null, H(f.value, (e) => (n(), r(x, {
           key: e.id
         }, [
-          E(e.data) ? (r(), u("div", Q, [
-            (r(!0), u(x, null, H([
+          R(e.data) ? (n(), r("div", te, [
+            (n(!0), r(x, null, H([
               { label: "Open", val: e.data.open, field: "open" },
               { label: "High", val: e.data.high, field: "high" },
               { label: "Low", val: e.data.low, field: "low" },
               { label: "Close", val: e.data.close, field: "close" }
-            ], (l) => (r(), u(x, {
+            ], (l) => (n(), r(x, {
               key: l.label
             }, [
-              d("span", ee, f(l.label), 1),
-              d("span", {
-                style: m({
+              s("span", oe, d(l.label), 1),
+              s("span", {
+                style: h({
                   fontWeight: 600,
-                  color: p(K)(
-                    e.data.close >= e.data.open ? t.value.candlestick.up.body : t.value.candlestick.down.body
+                  color: v(j)(
+                    e.data.close >= e.data.open ? o.value.candlestick.up.body : o.value.candlestick.down.body
                   ),
                   textAlign: "right"
                 })
-              }, f(k.value(l.val, l.field)), 5)
+              }, d(g.value(l.val, l.field)), 5)
             ], 64))), 128)),
-            e.data.volume != null ? (r(), u(x, { key: 0 }, [
-              n[0] || (n[0] = d("span", { style: { opacity: 0.5 } }, "Volume", -1)),
-              d("span", {
-                style: m({ fontWeight: 600, color: t.value.tooltip.textColor, textAlign: "right" })
-              }, f(k.value(e.data.volume, "volume")), 5)
-            ], 64)) : _("", !0)
-          ])) : (r(), u("div", te, [
-            d("span", {
-              style: m({
+            e.data.volume != null ? (n(), r(x, { key: 0 }, [
+              i[0] || (i[0] = s("span", { style: { opacity: 0.5 } }, "Volume", -1)),
+              s("span", {
+                style: h({ fontWeight: 600, color: o.value.tooltip.textColor, textAlign: "right" })
+              }, d(g.value(e.data.volume, "volume")), 5)
+            ], 64)) : z("", !0)
+          ])) : E(e.data) ? (n(), r("div", ae, [
+            s("span", {
+              style: h({
+                width: "8px",
+                height: "8px",
+                borderRadius: "2px",
+                background: e.color,
+                flexShrink: 0
+              })
+            }, null, 4),
+            s("span", le, d(e.label ?? "Range"), 1),
+            s("span", {
+              style: h({ fontWeight: 600, color: e.color, whiteSpace: "nowrap" })
+            }, d(g.value(e.data.low, "low")) + " – " + d(g.value(e.data.high, "high")), 5)
+          ])) : (n(), r("div", ie, [
+            s("span", {
+              style: h({
                 width: "8px",
                 height: "8px",
                 borderRadius: "50%",
@@ -147,49 +176,49 @@ const Q = {
                 flexShrink: 0
               })
             }, null, 4),
-            d("span", oe, f(e.label ?? "Value"), 1),
-            d("span", {
-              style: m({ fontWeight: 600, color: e.color })
-            }, f(k.value(e.data.value, "value")), 5)
+            s("span", ne, d(e.label ?? "Value"), 1),
+            s("span", {
+              style: h({ fontWeight: 600, color: e.color })
+            }, d(g.value(e.data.value, "value")), 5)
           ]))
         ], 64))), 128))
-      ], 4)) : _("", !0),
-      p(i) && c.value.length > 0 && h.value && g.value ? (r(), u("div", {
+      ], 4)) : z("", !0),
+      v(u) && f.value.length > 0 && m.value && y.value ? (n(), r("div", {
         key: 1,
         ref_key: "containerRef",
         ref: B,
         "data-measured": V.value ? "true" : "false",
-        style: m({
+        style: h({
           position: "absolute",
-          left: h.value.left + "px",
-          top: h.value.top + "px",
+          left: m.value.left + "px",
+          top: m.value.top + "px",
           pointerEvents: "none",
-          background: t.value.tooltip.background,
+          background: o.value.tooltip.background,
           backdropFilter: "blur(12px)",
           WebkitBackdropFilter: "blur(12px)",
-          border: "1px solid " + t.value.tooltip.borderColor,
+          border: "1px solid " + o.value.tooltip.borderColor,
           borderRadius: "8px",
           padding: "10px 14px",
           boxShadow: "0 4px 16px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)",
-          fontFamily: t.value.typography.fontFamily,
-          fontSize: t.value.tooltip.fontSize + "px",
+          fontFamily: o.value.typography.fontFamily,
+          fontSize: o.value.tooltip.fontSize + "px",
           fontVariantNumeric: "tabular-nums",
-          color: t.value.tooltip.textColor,
+          color: o.value.tooltip.textColor,
           width: "max-content",
-          maxWidth: p(o).getMediaSize().width - p(o).yAxisWidth + "px",
+          maxWidth: v(t).getMediaSize().width - v(t).yAxisWidth + "px",
           boxSizing: "border-box",
           zIndex: 10,
           visibility: b.value !== null ? "visible" : "hidden"
         })
       }, [
-        Z(a.$slots, "default", {
-          snapshots: c.value,
-          time: z.value
+        K(a.$slots, "default", {
+          snapshots: f.value,
+          time: C.value
         })
-      ], 12, le)) : _("", !0)
+      ], 12, re)) : z("", !0)
     ], 64));
   }
 });
 export {
-  ce as default
+  xe as default
 };

package/dist/ui/YAxis.vue.js

@@ -1,42 +1,43 @@
-import { defineComponent as m, ref as p, onMounted as r, watch as s, onUnmounted as o, openBlock as b, createElementBlock as f, normalizeStyle as y, unref as u } from "vue";
-import { mountAxisLabels as x } from "../core/dist/axis/dom-labels.js";
-import { useChartInstance as h } from "../context.js";
-const _ = /* @__PURE__ */ m({
+import { defineComponent as p, ref as f, onMounted as u, watch as c, onUnmounted as a, openBlock as y, createElementBlock as b, normalizeStyle as x, unref as i } from "vue";
+import { mountAxisLabels as L } from "../core/dist/axis/dom-labels.js";
+import { useAxisLayout as A } from "../composables.js";
+import { useChartInstance as S } from "../context.js";
+const F = /* @__PURE__ */ p({
   __name: "YAxis",
   props: {
     format: { type: Function },
     labelCount: {},
     minLabelSpacing: {}
   },
-  setup(c) {
-    const e = c, n = h(), t = p(null), a = () => n.yScale.setFormat(e.format ?? null);
-    r(a), s(() => e.format, a), o(() => n.yScale.setFormat(null));
-    const i = () => {
-      n.setYAxisLabelDensity({
-        labelCount: e.labelCount ?? null,
-        minLabelSpacing: e.minLabelSpacing ?? null
+  setup(m) {
+    const n = m, t = S(), e = A(t), l = f(null), s = () => t.yScale.setFormat(n.format ?? null);
+    u(s), c(() => n.format, s), a(() => t.yScale.setFormat(null));
+    const r = () => {
+      t.setYAxisLabelDensity({
+        labelCount: n.labelCount ?? null,
+        minLabelSpacing: n.minLabelSpacing ?? null
       });
     };
-    i(), s(() => [e.labelCount, e.minLabelSpacing], i), o(() => n.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
-    let l = null;
-    return r(() => {
-      t.value !== null && (l = x({ chart: n, container: t.value, axis: "y" }));
-    }), o(() => {
-      l?.(), l = null;
-    }), (L, S) => (b(), f("div", {
+    r(), c(() => [n.labelCount, n.minLabelSpacing], r), a(() => t.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
+    let o = null;
+    return u(() => {
+      l.value !== null && (o = L({ chart: t, container: l.value, axis: "y" }));
+    }), a(() => {
+      o?.(), o = null;
+    }), (d, h) => (y(), b("div", {
       ref_key: "containerRef",
-      ref: t,
-      style: y({
+      ref: l,
+      style: x({
         position: "absolute",
-        right: "0",
+        [i(e).yAxisPosition]: "0",
         top: "0",
-        bottom: u(n).xAxisHeight + "px",
-        width: u(n).yAxisWidth + "px",
+        bottom: i(e).xAxisHeight + "px",
+        width: i(e).yAxisWidth + "px",
         pointerEvents: "none"
       })
     }, null, 4));
   }
 });
 export {
-  _ as default
+  F as default
 };

package/dist/ui/YLabel.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as q, useSlots as j, computed as n, ref as I, onMounted as G, onUnmounted as P, openBlock as w, createElementBlock as B, Fragment as A, renderSlot as W, createElementVNode as _, normalizeStyle as T, unref as H, createVNode as J, createCommentVNode as K } from "vue";
-import { prefersReducedMotion as Q } from "../core/dist/animation/reduced-motion.js";
-import { resolveAnimate as X, firstVisibleValue as Z, BadgeAnimator as ee } from "../core/dist/chart/badge-animator.js";
+import { defineComponent as $, useSlots as j, computed as a, ref as I, onMounted as G, onUnmounted as O, openBlock as w, createElementBlock as A, Fragment as B, renderSlot as W, createElementVNode as _, normalizeStyle as Y, unref as g, createVNode as H, createCommentVNode as J } from "vue";
+import { prefersReducedMotion as K } from "../core/dist/animation/reduced-motion.js";
+import { resolveAnimate as Q, resolveYLabelSeriesId as X, firstVisibleValue as Z, BadgeAnimator as ee } from "../core/dist/chart/badge-animator.js";
 import { useChartInstance as te } from "../context.js";
-import ne from "./NumberFlow.vue.js";
-const ie = /* @__PURE__ */ q({
+import ae from "./NumberFlow.vue.js";
+const ie = /* @__PURE__ */ $({
   __name: "YLabel",
   props: {
     seriesId: {},
@@ -12,55 +12,48 @@ const ie = /* @__PURE__ */ q({
     animate: { type: [Boolean, Object] }
   },
   setup(z) {
-    const f = z, e = te(), Y = j(), E = n(() => typeof Y.default == "function"), i = I(0), u = I(null);
-    let p = null, g = null, o = null;
-    const M = n(() => X(f.animate));
+    const c = z, e = te(), M = j(), E = a(() => typeof M.default == "function"), i = I(0), o = I(null);
+    let p = null, y = null, u = null;
+    const N = a(() => Q(c.animate));
     function L() {
-      o = null;
-      const t = s.value, l = t !== null ? e.getStackedLastValue(t) : null;
-      if (t === null || !l) {
-        p = null, g = null;
+      u = null;
+      const t = s.value, n = t !== null ? e.getStackedLastValue(t) : null;
+      if (t === null || !n) {
+        p = null, y = null;
         return;
       }
-      const v = l.value;
-      (p === null || g !== t) && (p = new ee(v), g = t);
-      const { glide: d, countUp: U, settleMs: $ } = M.value, F = e.getIntroFront(t), c = p.frame({
-        target: v,
+      const m = n.value;
+      (p === null || y !== t) && (p = new ee(m), y = t);
+      const { glide: P, countUp: U, settleMs: q } = N.value, S = e.getIntroFront(t), v = p.frame({
+        target: m,
         // Only needed for the intro count-up; skip the visible-range binary search
         // entirely once the reveal has settled (the hot streaming path).
-        firstVisible: F < 1 ? Z(e, t, v) : v,
-        introFront: F,
+        firstVisible: S < 1 ? Z(e, t, m) : m,
+        introFront: S,
         now: performance.now(),
-        glide: d,
+        glide: P,
         countUp: U,
-        settleMs: $,
-        reducedMotion: Q()
-      }), y = u.value;
-      (y === null || y.positionValue !== c.positionValue || y.textValue !== c.textValue || y.opacity !== c.opacity) && (u.value = { positionValue: c.positionValue, textValue: c.textValue, opacity: c.opacity }), c.animating && o === null && (o = requestAnimationFrame(L));
+        settleMs: q,
+        reducedMotion: K()
+      }), d = o.value;
+      (d === null || d.positionValue !== v.positionValue || d.textValue !== v.textValue || d.opacity !== v.opacity) && (o.value = { positionValue: v.positionValue, textValue: v.textValue, opacity: v.opacity }), v.animating && u === null && (u = requestAnimationFrame(L));
     }
-    function N() {
-      o === null && (o = requestAnimationFrame(L));
+    function R() {
+      u === null && (u = requestAnimationFrame(L));
     }
-    const m = () => {
-      i.value++, N();
+    const f = () => {
+      i.value++, R();
     };
     G(() => {
-      e.setYLabel(!0), e.on("overlayChange", m), e.on("viewportChange", m), e.getSeriesIds().length > 0 && m();
-    }), P(() => {
-      e.setYLabel(!1), e.off("overlayChange", m), e.off("viewportChange", m), o !== null && cancelAnimationFrame(o), o = null;
+      e.setYLabel(!0), e.on("overlayChange", f), e.on("viewportChange", f), e.getSeriesIds().length > 0 && f();
+    }), O(() => {
+      e.setYLabel(!1), e.off("overlayChange", f), e.off("viewportChange", f), u !== null && cancelAnimationFrame(u), u = null;
     });
-    function O(t, l) {
-      if (l !== void 0) return l;
-      const v = t.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 });
-      if (v.length > 0) return v[0];
-      const d = t.getSeriesIdsByType("time", { visibleOnly: !0 });
-      return d.length > 0 ? d[0] : null;
-    }
-    const s = n(() => (i.value, O(e, f.seriesId))), a = n(() => (i.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), b = n(() => (i.value, s.value !== null ? e.getPreviousClose(s.value) : null)), r = n(() => (i.value, e.getTheme())), R = n(() => u.value !== null ? u.value.positionValue : a.value?.value ?? 0), D = n(() => u.value !== null ? u.value.textValue : a.value?.value ?? 0), h = n(() => u.value !== null ? u.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), x = n(() => (i.value, a.value === null ? 0 : e.yScale.valueToY(R.value))), S = n(() => a.value === null || b.value === null ? "neutral" : a.value.value > b.value ? "up" : a.value.value < b.value ? "down" : "neutral"), V = n(() => {
-      if (a.value === null) return r.value.yLabel.neutralBackground;
-      if (!a.value.isLive) return r.value.axis.textColor;
-      if (f.color) return f.color;
-      switch (S.value) {
+    const s = a(() => (i.value, X(e, c.seriesId))), l = a(() => (i.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), x = a(() => (i.value, s.value !== null ? e.getPreviousClose(s.value) : null)), r = a(() => (i.value, e.getTheme())), T = a(() => o.value !== null ? o.value.positionValue : l.value?.value ?? 0), D = a(() => o.value !== null ? o.value.textValue : l.value?.value ?? 0), b = a(() => o.value !== null ? o.value.opacity : s.value === null ? 1 : e.getIntroFront(s.value) < 1 ? 0 : 1), h = a(() => (i.value, l.value === null ? 0 : e.yScale.valueToY(T.value))), k = a(() => l.value === null || x.value === null ? "neutral" : l.value.value > x.value ? "up" : l.value.value < x.value ? "down" : "neutral"), V = a(() => {
+      if (l.value === null) return r.value.yLabel.neutralBackground;
+      if (!l.value.isLive) return r.value.axis.textColor;
+      if (c.color) return c.color;
+      switch (k.value) {
         case "up":
           return r.value.yLabel.upBackground;
         case "down":
@@ -68,50 +61,50 @@ const ie = /* @__PURE__ */ q({
         default:
           return r.value.yLabel.neutralBackground;
       }
-    }), k = n(() => {
+    }), C = a(() => {
       i.value;
-      const t = e.yScale.getRange(), l = t.max - t.min;
-      return l < 0.1 ? 6 : l < 10 ? 4 : l < 1e3 ? 2 : 0;
-    }), C = n(() => {
-      if (f.format) return f.format;
+      const t = e.yScale.getRange(), n = t.max - t.min;
+      return n < 0.1 ? 6 : n < 10 ? 4 : n < 1e3 ? 2 : 0;
+    }), F = a(() => {
+      if (c.format) return c.format;
       const t = new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: k.value,
-        maximumFractionDigits: k.value,
+        minimumFractionDigits: C.value,
+        maximumFractionDigits: C.value,
         useGrouping: !1
       });
-      return (l) => t.format(l);
+      return (n) => t.format(n);
     });
-    return (t, l) => a.value !== null ? (w(), B(A, { key: 0 }, [
+    return (t, n) => l.value !== null ? (w(), A(B, { key: 0 }, [
       E.value ? W(t.$slots, "default", {
         key: 0,
-        value: a.value.value,
-        y: x.value,
+        value: l.value.value,
+        y: h.value,
         bgColor: V.value,
-        isLive: a.value.isLive,
-        direction: S.value,
-        format: C.value,
-        opacity: h.value
-      }) : (w(), B(A, { key: 1 }, [
+        isLive: l.value.isLive,
+        direction: k.value,
+        format: F.value,
+        opacity: b.value
+      }) : (w(), A(B, { key: 1 }, [
         _("div", {
-          style: T({
+          style: Y({
             position: "absolute",
-            left: "0",
-            right: H(e).yAxisWidth + "px",
-            top: x.value + "px",
+            left: g(e).plotLeft + "px",
+            right: (g(e).yAxisPosition === "left" ? 0 : g(e).yAxisWidth) + "px",
+            top: h.value + "px",
             height: "0",
             borderTop: "1px dashed " + V.value,
-            opacity: h.value * 0.5,
+            opacity: b.value * 0.5,
             pointerEvents: "none",
             zIndex: 2
           })
         }, null, 4),
         _("div", {
-          style: T({
+          style: Y({
             position: "absolute",
-            right: "4px",
-            top: x.value + "px",
+            [g(e).yAxisPosition]: "4px",
+            top: h.value + "px",
             transform: "translateY(-50%)",
-            opacity: h.value,
+            opacity: b.value,
             pointerEvents: "auto",
             zIndex: 3,
             background: V.value,
@@ -124,14 +117,14 @@ const ie = /* @__PURE__ */ q({
             transition: "background-color 0.3s ease"
           })
         }, [
-          J(ne, {
+          H(ae, {
             value: D.value,
-            format: C.value,
+            format: F.value,
             "spin-duration": 350
           }, null, 8, ["value", "format"])
         ], 4)
       ], 64))
-    ], 64)) : K("", !0);
+    ], 64)) : J("", !0);
   }
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.6.2"
+    "@wick-charts/core": "^0.6.4"
   },
   "scripts": {
     "build": "vite build"