@wick-charts/vue 0.8.0 → 0.8.2

package/dist/ui/Tooltip.vue.js

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

package/dist/ui/YLabel.vue.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Realtime, animated canvas charts for Vue: candlestick, line, bar, heatmap, pie and more. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -51,7 +51,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.8.0"
+    "@wick-charts/core": "^0.8.2"
   },
   "scripts": {
     "build": "vite build"

package/src/BandSeries.vue

@@ -3,6 +3,7 @@ import type { BandData, BandSeriesOptions, SeriesSyncState } from '@wick-charts/
 import { BandSeriesDef, EMPTY_SYNC_STATE, syncLayers, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { rawSeriesData, seriesDataSource } from './composables';
 import { useChartInstance } from './context';
 
 const props = withDefaults(
@@ -36,13 +37,14 @@ const seriesId = ref<string | null>(null);
 // reconciliation (plus per-layer labels/colors) so streaming eases instead of
 // snapping Y every tick.
 let prevSync: SeriesSyncState[] = [];
+let layerCount = 0;
 
 function applyData(id: string, data: BandData): void {
   prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
-onMounted(() => {
-  const layerCount = toLayers(props.data).length;
+function createSeries(data: BandData): void {
+  layerCount = toLayers(data).length;
   const id = chart.addSeries(BandSeriesDef, {
     ...props.options,
     scale: props.scale,
@@ -52,8 +54,12 @@ onMounted(() => {
   seriesId.value = id;
   prevSync = new Array(layerCount).fill(EMPTY_SYNC_STATE);
   // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
-  applyData(id, props.data);
+  applyData(id, data);
   chart.setSeriesVisible(id, props.visible);
+}
+
+onMounted(() => {
+  createSeries(rawSeriesData(props.data));
 });
 
 onUnmounted(() => {
@@ -61,11 +67,20 @@ onUnmounted(() => {
 });
 
 watch(
-  () => props.data,
-  (data) => {
+  seriesDataSource(() => props.data),
+  () => {
+    const data = rawSeriesData(props.data);
     const id = seriesId.value;
     if (!id) return;
 
+    // The layer count is fixed when a series is created; a new count re-creates it, as in React.
+    if (toLayers(data).length !== layerCount) {
+      chart.removeSeries(id);
+      createSeries(data);
+
+      return;
+    }
+
     applyData(id, data);
   },
 );