@wick-charts/vue 0.5.1 → 0.6.1

package/dist/ui/YLabel.vue.js

@@ -1,105 +1,138 @@
-import { defineComponent as B, useSlots as F, computed as n, ref as _, onMounted as T, onUnmounted as z, openBlock as h, createElementBlock as b, Fragment as x, renderSlot as Y, createElementVNode as C, normalizeStyle as L, unref as E, createVNode as N, createCommentVNode as V } from "vue";
-import { useChartInstance as D } from "../context.js";
-import O from "./NumberFlow.vue.js";
-const A = /* @__PURE__ */ B({
+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 { resolveAnimate as Q, prefersReducedMotion 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 re = /* @__PURE__ */ q({
   __name: "YLabel",
   props: {
     seriesId: {},
     color: {},
-    format: { type: Function }
+    format: { type: Function },
+    animate: { type: [Boolean, Object] }
   },
-  setup(S) {
-    const u = S, e = D(), k = F(), I = n(() => typeof k.default == "function"), r = _(0), i = () => {
-      r.value++;
+  setup(z) {
+    const f = z, e = te(), Y = j(), E = n(() => typeof Y.default == "function"), i = I(0), u = I(null);
+    let m = null, g = null, o = null;
+    const M = n(() => Q(f.animate));
+    function S() {
+      o = null;
+      const t = s.value, l = t !== null ? e.getStackedLastValue(t) : null;
+      if (t === null || !l) {
+        m = null, g = null;
+        return;
+      }
+      const v = l.value;
+      (m === null || g !== t) && (m = new ee(v), g = t);
+      const { glide: d, countUp: U, settleMs: $ } = M.value, F = e.getIntroFront(t), c = m.frame({
+        target: v,
+        // 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,
+        now: performance.now(),
+        glide: d,
+        countUp: U,
+        settleMs: $,
+        reducedMotion: X()
+      }), 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(S));
+    }
+    function N() {
+      o === null && (o = requestAnimationFrame(S));
+    }
+    const p = () => {
+      i.value++, N();
     };
-    T(() => {
-      e.setYLabel(!0), e.on("overlayChange", i), e.on("viewportChange", i), e.getSeriesIds().length > 0 && r.value++;
-    }), z(() => {
-      e.setYLabel(!1), e.off("overlayChange", i), e.off("viewportChange", i);
+    G(() => {
+      e.setYLabel(!0), e.on("overlayChange", p), e.on("viewportChange", p), e.getSeriesIds().length > 0 && p();
+    }), P(() => {
+      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), o !== null && cancelAnimationFrame(o), o = null;
     });
-    function w(a, l) {
+    function O(t, l) {
       if (l !== void 0) return l;
-      const g = a.getSeriesIdsByType("time", { visibleOnly: !0, singleLayerOnly: !0 });
-      if (g.length > 0) return g[0];
-      const y = a.getSeriesIdsByType("time", { visibleOnly: !0 });
-      return y.length > 0 ? y[0] : null;
+      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(() => (r.value, w(e, u.seriesId))), t = n(() => (r.value, s.value !== null ? e.getStackedLastValue(s.value) : null)), v = n(() => (r.value, s.value !== null ? e.getPreviousClose(s.value) : null)), o = n(() => (r.value, e.getTheme())), c = n(() => (r.value, t.value === null ? 0 : e.yScale.valueToY(t.value.value))), f = n(() => t.value === null || v.value === null ? "neutral" : t.value.value > v.value ? "up" : t.value.value < v.value ? "down" : "neutral"), d = n(() => {
-      if (t.value === null) return o.value.yLabel.neutralBackground;
-      if (!t.value.isLive) return o.value.axis.textColor;
-      if (u.color) return u.color;
-      switch (f.value) {
+    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))), L = 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 (L.value) {
         case "up":
-          return o.value.yLabel.upBackground;
+          return r.value.yLabel.upBackground;
         case "down":
-          return o.value.yLabel.downBackground;
+          return r.value.yLabel.downBackground;
         default:
-          return o.value.yLabel.neutralBackground;
+          return r.value.yLabel.neutralBackground;
       }
-    }), m = n(() => {
-      r.value;
-      const a = e.yScale.getRange(), l = a.max - a.min;
+    }), k = n(() => {
+      i.value;
+      const t = e.yScale.getRange(), l = t.max - t.min;
       return l < 0.1 ? 6 : l < 10 ? 4 : l < 1e3 ? 2 : 0;
-    }), p = n(() => {
-      if (u.format) return u.format;
-      const a = new Intl.NumberFormat("en-US", {
-        minimumFractionDigits: m.value,
-        maximumFractionDigits: m.value,
+    }), C = n(() => {
+      if (f.format) return f.format;
+      const t = new Intl.NumberFormat("en-US", {
+        minimumFractionDigits: k.value,
+        maximumFractionDigits: k.value,
         useGrouping: !1
       });
-      return (l) => a.format(l);
+      return (l) => t.format(l);
     });
-    return (a, l) => t.value !== null ? (h(), b(x, { key: 0 }, [
-      I.value ? Y(a.$slots, "default", {
+    return (t, l) => a.value !== null ? (w(), B(A, { key: 0 }, [
+      E.value ? W(t.$slots, "default", {
         key: 0,
-        value: t.value.value,
-        y: c.value,
-        bgColor: d.value,
-        isLive: t.value.isLive,
-        direction: f.value,
-        format: p.value
-      }) : (h(), b(x, { key: 1 }, [
-        C("div", {
-          style: L({
+        value: a.value.value,
+        y: x.value,
+        bgColor: V.value,
+        isLive: a.value.isLive,
+        direction: L.value,
+        format: C.value,
+        opacity: h.value
+      }) : (w(), B(A, { key: 1 }, [
+        _("div", {
+          style: T({
             position: "absolute",
             left: "0",
-            right: E(e).yAxisWidth + "px",
-            top: c.value + "px",
+            right: H(e).yAxisWidth + "px",
+            top: x.value + "px",
             height: "0",
-            borderTop: "1px dashed " + d.value,
-            opacity: 0.5,
+            borderTop: "1px dashed " + V.value,
+            opacity: h.value * 0.5,
             pointerEvents: "none",
             zIndex: 2
           })
         }, null, 4),
-        C("div", {
-          style: L({
+        _("div", {
+          style: T({
             position: "absolute",
             right: "4px",
-            top: c.value + "px",
+            top: x.value + "px",
             transform: "translateY(-50%)",
+            opacity: h.value,
             pointerEvents: "auto",
             zIndex: 3,
-            background: d.value,
-            color: o.value.yLabel.textColor,
-            fontSize: o.value.yLabel.fontSize + "px",
-            fontFamily: o.value.typography.fontFamily,
+            background: V.value,
+            color: r.value.yLabel.textColor,
+            fontSize: r.value.yLabel.fontSize + "px",
+            fontFamily: r.value.typography.fontFamily,
             padding: "3px 8px",
             borderRadius: "3px",
             whiteSpace: "nowrap",
             transition: "background-color 0.3s ease"
           })
         }, [
-          N(O, {
-            value: t.value.value,
-            format: p.value,
+          J(ne, {
+            value: D.value,
+            format: C.value,
             "spin-duration": 350
           }, null, 8, ["value", "format"])
         ], 4)
       ], 64))
-    ], 64)) : V("", !0);
+    ], 64)) : K("", !0);
   }
 });
 export {
-  A as default
+  re as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "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.5.1"
+    "@wick-charts/core": "^0.6.1"
   },
   "scripts": {
     "build": "vite build"

package/src/BarSeries.vue

@@ -5,13 +5,21 @@ import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
-const props = defineProps<{
-  /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
-  data: MultiLayerData;
-  options?: Partial<BarSeriesOptions>;
-  /** Stable series ID — same value across remounts. */
-  id?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /** Flat `TimePoint[]`, `TimePoint[][]`, or named `{ label, color?, data }` layers. Time accepts ms or `Date`. */
+    data: MultiLayerData;
+    options?: Partial<BarSeriesOptions>;
+    /** Stable series ID — same value across remounts. */
+    id?: string;
+    /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
+    visible?: boolean;
+  }>(),
+  // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
+  // `false` (not `undefined`) without an explicit default — see the
+  // `interactive` fix in ChartContainer.vue for the full explanation.
+  { visible: true },
+);
 
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
@@ -35,6 +43,7 @@ onMounted(() => {
   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);
+  chart.setSeriesVisible(id, props.visible);
 });
 
 onUnmounted(() => {
@@ -60,6 +69,13 @@ watch(
   },
   { deep: true },
 );
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (seriesId.value) chart.setSeriesVisible(seriesId.value, visible);
+  },
+);
 </script>
 
 <template><span v-if="false" /></template>

package/src/CandlestickSeries.vue

@@ -5,13 +5,21 @@ import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
 
-const props = defineProps<{
-  /** Flat `OHLCInput[]`, or `{ label, data }` to name the stream. */
-  data: CandlestickData;
-  options?: Partial<CandlestickSeriesOptions>;
-  /** Stable series ID — same value across remounts. */
-  id?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /** Flat `OHLCInput[]`, or `{ label, data }` to name the stream. */
+    data: CandlestickData;
+    options?: Partial<CandlestickSeriesOptions>;
+    /** Stable series ID — same value across remounts. */
+    id?: string;
+    /** Show/hide the series without unmounting it — excludes it from the Y-range fit and tooltip/legend. Default `true`. Live. */
+    visible?: boolean;
+  }>(),
+  // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
+  // `false` (not `undefined`) without an explicit default — see the
+  // `interactive` fix in ChartContainer.vue for the full explanation.
+  { visible: true },
+);
 
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
@@ -37,6 +45,7 @@ onMounted(() => {
   // 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);
+  chart.setSeriesVisible(id, props.visible);
 });
 
 onUnmounted(() => {
@@ -62,6 +71,13 @@ watch(
   },
   { deep: true },
 );
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (seriesId.value) chart.setSeriesVisible(seriesId.value, visible);
+  },
+);
 </script>
 
 <template><span v-if="false" /></template>