@wick-charts/vue 0.8.1 → 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 $, onUnmounted as Y, useSlots as Z, watchEffect as K, openBlock as i, createElementBlock as n, Fragment as f, unref as d, normalizeStyle as m, createElementVNode as s, createTextVNode as H, toDisplayString as c, createCommentVNode as w, renderList as L, 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++;
     };
     $(() => {
-      t.on("overlayChange", W), t.getSeriesIds().length > 0 && C.value++;
-    }), Y(() => {
-      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 = Z(), 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 R(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 && !R(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 }, [
-            H(c(d(ee)(_.value, { locale: d(t).timeScale.getLocale(), timeZone: d(t).timeScale.getTimeZone() })), 1)
-          ], 64)) : w("", !0),
-          H(" " + c(d(q)(d(t), { time: _.value, snapshots: v.value, interval: V.value })), 1)
-        ], 4),
-        (i(!0), n(f, null, L(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
         }, [
-          R(e.data) ? (i(), n("div", ae, [
-            (i(!0), n(f, null, L([
+          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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.8.1",
+  "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.1"
+    "@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(
@@ -58,7 +59,7 @@ function createSeries(data: BandData): void {
 }
 
 onMounted(() => {
-  createSeries(props.data);
+  createSeries(rawSeriesData(props.data));
 });
 
 onUnmounted(() => {
@@ -66,8 +67,9 @@ onUnmounted(() => {
 });
 
 watch(
-  () => props.data,
-  (data) => {
+  seriesDataSource(() => props.data),
+  () => {
+    const data = rawSeriesData(props.data);
     const id = seriesId.value;
     if (!id) return;
 

package/src/BarSeries.vue

@@ -3,6 +3,7 @@ import type { BarSeriesOptions, MultiLayerData, SeriesSyncState } from '@wick-ch
 import { BarSeriesDef, 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(
@@ -54,7 +55,7 @@ function createSeries(data: MultiLayerData): void {
 }
 
 onMounted(() => {
-  createSeries(props.data);
+  createSeries(rawSeriesData(props.data));
 });
 
 onUnmounted(() => {
@@ -62,8 +63,9 @@ onUnmounted(() => {
 });
 
 watch(
-  () => props.data,
-  (data) => {
+  seriesDataSource(() => props.data),
+  () => {
+    const data = rawSeriesData(props.data);
     const id = seriesId.value;
     if (!id) return;
 

package/src/CandlestickSeries.vue

@@ -3,6 +3,7 @@ import type { CandlestickData, CandlestickSeriesOptions, OHLCInput, SeriesSyncSt
 import { CandlestickSeriesDef, EMPTY_SYNC_STATE, syncSeriesLayer, toLayers } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { rawSeriesData, seriesDataSource } from './composables';
 import { useChartInstance } from './context';
 
 const props = withDefaults(
@@ -47,7 +48,7 @@ onMounted(() => {
   // Initial data load — Vue's `watch` is lazy by default, so the watcher
   // below only fires on subsequent `data` prop mutations. Explicitly apply
   // the first value here so components with static data render immediately.
-  applyData(id, props.data);
+  applyData(id, rawSeriesData(props.data));
   chart.setSeriesVisible(id, props.visible);
 });
 
@@ -56,12 +57,12 @@ onUnmounted(() => {
 });
 
 watch(
-  () => props.data,
-  (data) => {
+  seriesDataSource(() => props.data),
+  () => {
     const id = seriesId.value;
     if (!id) return;
 
-    applyData(id, data);
+    applyData(id, rawSeriesData(props.data));
   },
 );
 

package/src/ChartContainer.vue

@@ -48,7 +48,7 @@ const props = withDefaults(
      * Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
      * or data intervals (`{ intervals: 3 }`). Set to 0 for edge-to-edge sparklines. Updates are
      * applied reactively when this prop or the measured header height changes.
-     * Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0 } }`.
+     * Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0.5 } }`.
      */
     padding?: {
       top?: number;

package/src/HeatmapSeries.vue

@@ -3,6 +3,7 @@ import type { HeatmapCellData, HeatmapSeriesOptions } from '@wick-charts/core';
 import { HeatmapSeriesDef } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { rawSeriesData, seriesDataSource } from './composables';
 import { useChartInstance } from './context';
 
 const props = withDefaults(
@@ -28,7 +29,7 @@ onMounted(() => {
   seriesId.value = id;
   // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
   if (props.data.length > 0) {
-    chart.setSeriesData(id, props.data);
+    chart.setSeriesData(id, rawSeriesData(props.data));
   }
   chart.setSeriesVisible(id, props.visible);
 });
@@ -38,12 +39,12 @@ onUnmounted(() => {
 });
 
 watch(
-  () => props.data,
-  (data) => {
+  seriesDataSource(() => props.data),
+  () => {
     // No length guard: an empty array is a legitimate update (filter yields
     // no rows) and must clear the previous cells, matching the React wrapper.
     if (seriesId.value) {
-      chart.setSeriesData(seriesId.value, data);
+      chart.setSeriesData(seriesId.value, rawSeriesData(props.data));
     }
   },
 );

package/src/LineSeries.vue

@@ -3,6 +3,7 @@ import type { LineSeriesOptions, MultiLayerData, SeriesSyncState } from '@wick-c
 import { EMPTY_SYNC_STATE, LineSeriesDef, 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(
@@ -54,7 +55,7 @@ function createSeries(data: MultiLayerData): void {
 }
 
 onMounted(() => {
-  createSeries(props.data);
+  createSeries(rawSeriesData(props.data));
 });
 
 onUnmounted(() => {
@@ -62,8 +63,9 @@ onUnmounted(() => {
 });
 
 watch(
-  () => props.data,
-  (data) => {
+  seriesDataSource(() => props.data),
+  () => {
+    const data = rawSeriesData(props.data);
     const id = seriesId.value;
     if (!id) return;
 

package/src/PieSeries.vue

@@ -3,6 +3,7 @@ import type { PieSeriesOptions, PieSliceData } from '@wick-charts/core';
 import { PieSeriesDef } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { rawSeriesData, seriesDataSource } from './composables';
 import { useChartInstance } from './context';
 
 const props = withDefaults(
@@ -28,7 +29,7 @@ onMounted(() => {
   seriesId.value = id;
   // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
   if (props.data.length > 0) {
-    chart.setSeriesData(id, props.data);
+    chart.setSeriesData(id, rawSeriesData(props.data));
   }
   chart.setSeriesVisible(id, props.visible);
 });
@@ -38,10 +39,10 @@ onUnmounted(() => {
 });
 
 watch(
-  () => props.data,
-  (data) => {
-    if (seriesId.value && data.length > 0) {
-      chart.setSeriesData(seriesId.value, data);
+  seriesDataSource(() => props.data),
+  () => {
+    if (seriesId.value && props.data.length > 0) {
+      chart.setSeriesData(seriesId.value, rawSeriesData(props.data));
     }
   },
 );

package/src/composables.ts

@@ -1,5 +1,68 @@
 import type { ChartInstance, CrosshairPosition, VisibleRange, YAxisPosition, YRange } from '@wick-charts/core';
-import { type Ref, onMounted, onUnmounted, ref } from 'vue';
+import { type Ref, onMounted, onUnmounted, ref, toRaw } from 'vue';
+
+/** A `{ label?, color?, data }` layer — an object carrying a `data` array. */
+function isLayerObject(value: unknown): value is { data: unknown[] } {
+  return (
+    typeof value === 'object' && value !== null && !Array.isArray(value) && Array.isArray(Reflect.get(value, 'data'))
+  );
+}
+
+/** Each layer's point array, read through whatever Proxy the prop arrived in. */
+function layerArrays(data: unknown): unknown[][] {
+  if (isLayerObject(data)) return [data.data];
+  if (!Array.isArray(data)) return [];
+
+  const layered = Array.isArray(data[0]) || isLayerObject(data[0]);
+  if (!layered) return [data];
+
+  return data.map((layer) => (isLayerObject(layer) ? layer.data : (layer as unknown[])));
+}
+
+/**
+ * A series `data` prop with Vue's reactive Proxies taken off the top level and
+ * each layer, so the chart reads plain arrays: a `ref` / `reactive` array of
+ * 100k points read through its Proxy costs the engine several times more.
+ */
+export function rawSeriesData<D>(data: D): D {
+  const raw = toRaw(data);
+  const rawLayer = (layer: unknown) => {
+    if (!isLayerObject(layer)) return toRaw(layer);
+
+    const plain = toRaw(layer);
+
+    return { ...plain, data: toRaw(plain.data) };
+  };
+
+  if (!Array.isArray(raw)) return rawLayer(raw) as D;
+
+  const layered = Array.isArray(raw[0]) || isLayerObject(raw[0]);
+  if (!layered) return raw;
+
+  return raw.map(rawLayer) as D;
+}
+
+/**
+ * Watch source for a series `data` prop. Besides a new array, it re-fires on
+ * an in-place `push` / `splice` or an edit of a layer's last point on a
+ * reactive array — it reads each layer's length and last point through the
+ * Proxy instead of deep-watching every point. A `shallowRef` still needs a
+ * new array (or `triggerRef`).
+ */
+export function seriesDataSource(getData: () => unknown): () => unknown[] {
+  return () => {
+    const data = getData();
+    const deps: unknown[] = [data];
+    for (const points of layerArrays(data)) {
+      deps.push(points, points.length);
+
+      const last = points[points.length - 1];
+      if (typeof last === 'object' && last !== null) deps.push(...Object.values(last));
+    }
+
+    return deps;
+  };
+}
 
 export function useVisibleRange(chart: ChartInstance): Ref<VisibleRange> {
   const range = ref<VisibleRange>(chart.getVisibleRange()) as Ref<VisibleRange>;