@wick-charts/vue 0.5.1 → 0.6.0

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.0",
   "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.0"
   },
   "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>

package/src/ChartContainer.vue

@@ -5,9 +5,14 @@ import {
   ChartInstance,
   type ChartOptions,
   type ChartTheme,
+  type CrosshairPosition,
   type EdgeReachedInfo,
+  type PointClickInfo,
+  type SeriesHoverInfo,
+  type VisibleRange,
   type VisibleRangeSpec,
   catppuccin,
+  deepEqual,
 } from '@wick-charts/core';
 import { computed, nextTick, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
 
@@ -25,7 +30,9 @@ type PerfOption = NonNullable<ChartOptions['perf']>;
 
 const props = withDefaults(
   defineProps<{
+    /** Visual theme. Live — changing this at runtime updates all themed elements. */
     theme?: ChartTheme;
+    /** Grouped axis configuration (Y/X visibility, bounds, sizing). Live. */
     axis?: AxisConfig;
     /**
      * Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
@@ -61,14 +68,31 @@ const props = withDefaults(
        */
       initialRange?: VisibleRangeSpec;
     };
-    /** Show the chart background gradient. Defaults to true. */
+    /**
+     * Controlled visible range. Same shape as the imperative
+     * `chart.setVisibleRange` — a bar count, an explicit `{from, to}` window,
+     * or `{from, bars}`. Every reference/value change applies via
+     * `chart.setVisibleRange`, so pair it with `onVisibleRangeChange` for a
+     * two-way binding; a same-value literal (compared structurally) is a
+     * no-op, so an inline object doesn't re-apply on every render.
+     *
+     * For a one-shot initial window that isn't re-applied on every prop
+     * change, use `viewport.initialRange` instead.
+     */
+    visibleRange?: VisibleRangeSpec;
+    /** Show the chart background gradient. Live. Defaults to true. */
     gradient?: boolean;
-    /** Enable zoom, pan, and crosshair interactions. Defaults to true. */
+    /**
+     * Enable zoom, pan, and crosshair interactions. Defaults to true.
+     *
+     * Mount-only — core has no `setInteractive`, so changing this prop after
+     * mount is ignored.
+     */
     interactive?: boolean;
-    /** Background grid configuration. Default: `{ visible: true }`. */
+    /** Background grid configuration. Live. Default: `{ visible: true }`. */
     grid?: { visible: boolean };
     /**
-     * How `<Title>` and `<InfoBar>` are positioned relative to the canvas.
+     * How `<Title>` and `<InfoBar>` are positioned relative to the canvas. Live.
      * - `'overlay'` (default): absolute overlays on top of the canvas.
      * - `'inline'`: flex siblings above the canvas — the canvas (and grid) shift down.
      */
@@ -79,10 +103,10 @@ const props = withDefaults(
      * `<CandlestickSeries>` / `<BarSeries>` override these chart-level
      * defaults unless the category here is explicitly `false`.
      *
-     * **Init-only by reference identity.** A new `animations` reference
-     * recreates the underlying `ChartInstance`. Hoist the object outside
-     * the render scope — an inline literal tears the chart down on every
-     * re-render.
+     * **Init-only, but diffed by value, not reference.** A same-value
+     * inline object literal is a no-op — only a genuine change to the
+     * resolved config recreates the underlying `ChartInstance`, since the
+     * animation engine doesn't support live reconfiguration yet.
      */
     animations?: boolean | AnimationsConfig;
     /**
@@ -97,10 +121,52 @@ const props = withDefaults(
      * the prop identity later is ignored.
      */
     onEdgeReached?: (info: EdgeReachedInfo) => void;
+    /**
+     * Fired on a click (or tap) on the chart canvas that isn't the tail end
+     * of a pan drag. `info.spatialHit` resolves a pie/heatmap/custom-spatial
+     * series directly under the pointer; for a time-series series, resolve
+     * the point yourself from `info.time` (`chart.getDataAtTime` /
+     * `buildHoverSnapshots`). Live — the latest callback is always used.
+     */
+    onPointClick?: (info: PointClickInfo) => void;
+    /**
+     * Fired on a double-click on the chart canvas. The chart also responds
+     * by calling `fitContent()`. Live — the latest callback is always used.
+     */
+    onPointDoubleClick?: (info: PointClickInfo) => void;
+    /**
+     * Fired when the spatially-hovered series/index changes (pie, heatmap,
+     * or a custom spatial kind) — `null` when the pointer leaves every hit
+     * area. Live — the latest callback is always used.
+     */
+    onSeriesHover?: (hit: SeriesHoverInfo | null) => void;
+    /**
+     * Fired once the underlying `ChartInstance` is constructed — on mount,
+     * and again if the chart is ever rebuilt (a genuine `animations` value
+     * change). Live — the latest callback is always used for the next rebuild.
+     */
+    onReady?: (chart: ChartInstance) => void;
+    /**
+     * Fired whenever the committed visible range changes — pan, zoom,
+     * `fitContent()`, a data update that shifts the tail-scroll window, or a
+     * `visibleRange` prop change. Live — the latest callback is always used.
+     */
+    onVisibleRangeChange?: (range: VisibleRange) => void;
+    /**
+     * Fired on every crosshair move, with `null` when the pointer leaves the
+     * chart. Live — the latest callback is always used.
+     */
+    onCrosshairMove?: (position: CrosshairPosition | null) => void;
   }>(),
   {
     theme: () => catppuccin.theme,
     gradient: true,
+    // Vue's type-based `defineProps` casts an absent Boolean-typed prop to
+    // `false` (not `undefined`) — without this explicit default, every chart
+    // that didn't pass `:interactive="true"` silently got zero pan/zoom/
+    // crosshair/click interactivity. `gradient` dodges the same trap only
+    // because it already had a default.
+    interactive: true,
     headerLayout: 'overlay',
   },
 );
@@ -174,6 +240,21 @@ function syncHeaderObserver() {
   resizeObserver.observe(headerEl);
 }
 
+// `props` is a reactive proxy — reading `props.onX` inside these listeners
+// always sees the caller's latest callback, no ref-latch needed the way
+// React does. Shared between the mount path and the animations-triggered
+// rebuild below so the two don't drift.
+function subscribeDeclarativeEvents(instance: ChartInstance): void {
+  instance.on('pointClick', (info) => props.onPointClick?.(info));
+  instance.on('pointDoubleClick', (info) => props.onPointDoubleClick?.(info));
+  instance.on('seriesHover', (hit) => props.onSeriesHover?.(hit));
+  instance.on('crosshairMove', (position) => props.onCrosshairMove?.(position));
+  const emitVisibleRangeChange = () => props.onVisibleRangeChange?.(instance.getVisibleRange());
+  instance.on('viewportChange', emitVisibleRangeChange);
+  instance.on('dataUpdate', emitVisibleRangeChange);
+  instance.on('seriesChange', emitVisibleRangeChange);
+}
+
 onMounted(async () => {
   if (!containerRef.value) return;
 
@@ -188,6 +269,8 @@ onMounted(async () => {
   if (onEdgeReachedAtMount) options.onEdgeReached = onEdgeReachedAtMount;
   if (props.animations !== undefined) options.animations = props.animations;
   chart.value = new ChartInstance(containerRef.value, options);
+  subscribeDeclarativeEvents(chart.value);
+  props.onReady?.(chart.value);
 
   await nextTick();
   syncHeaderObserver();
@@ -236,9 +319,11 @@ watch(
   },
 );
 
-// Init-only: post-mount `animations` reference change tears down the
-// instance and rebuilds with the new config. Reference equality matters
-// — passing an inline literal recreates on every render.
+// Init-only: a post-mount `animations` VALUE change tears down the instance
+// and rebuilds with the new config. `deepEqual` (not reference equality)
+// gates the rebuild — a caller's brand-new inline literal with the same
+// values is a no-op, since Vue's `watch` fires this callback on every
+// reference change regardless of content.
 //
 // Children get the chart via `useChartInstance()` which snapshots
 // `chartRef.value` once at setup time. To force them to re-setup against
@@ -247,9 +332,12 @@ watch(
 // Vue commits the unmount before the new ChartInstance is constructed.
 // When `chart.value` becomes the new instance, the slot re-mounts and
 // every child's `setup()` runs again against the fresh chart.
+let lastAnimations = props.animations;
 watch(
   () => props.animations,
   async (next) => {
+    if (deepEqual(next, lastAnimations)) return;
+    lastAnimations = next;
     if (!chart.value || !containerRef.value) return;
     chart.value.destroy();
     chart.value = null;
@@ -265,7 +353,41 @@ watch(
     if (onEdgeReachedAtMount) opts.onEdgeReached = onEdgeReachedAtMount;
     if (next !== undefined) opts.animations = next;
     chart.value = new ChartInstance(containerRef.value, opts);
+    subscribeDeclarativeEvents(chart.value);
+    props.onReady?.(chart.value);
+  },
+);
+
+// Controlled visible range: only re-apply when the resolved value actually
+// differs from what we last applied ourselves, so feeding the range from
+// `onVisibleRangeChange` back into this prop (the standard two-way-binding
+// shape) doesn't re-trigger `setVisibleRange` with an unchanged spec on
+// every render. The latch remembers which instance it applied to — a chart
+// rebuild (an `animations` change) must receive the range again even though
+// the spec's value hasn't moved.
+let lastAppliedVisibleRange: { instance: ChartInstance; spec: VisibleRangeSpec } | undefined;
+watch(
+  () => [chart.value, props.visibleRange] as const,
+  async ([instance, next]) => {
+    if (!instance || next === undefined) return;
+    if (
+      lastAppliedVisibleRange !== undefined &&
+      lastAppliedVisibleRange.instance === instance &&
+      deepEqual(lastAppliedVisibleRange.spec, next)
+    ) {
+      return;
+    }
+
+    lastAppliedVisibleRange = { instance, spec: next };
+    // On the chart's first tick, a series child (e.g. `<CandlestickSeries>`)
+    // hasn't mounted and seeded its data yet, so the engine is still on the
+    // placeholder `dataInterval` (60s) — a `{from, to}` spec sized for the
+    // real interval would fail the 2-bar-minimum guard. Awaiting a tick lets
+    // the child's data-seed (and its `detectInterval` call) land first.
+    await nextTick();
+    instance.setVisibleRange(next);
   },
+  { immediate: true },
 );
 
 // Re-apply padding on any input that affects it — including `headerExtra`,
@@ -289,7 +411,7 @@ const rootStyle = computed(() => {
   const background = props.gradient ? `linear-gradient(to bottom, ${gtop} 0%, ${bg} 70%, ${gbot} 100%)` : bg;
 
   return (
-    'position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; ' +
+    'position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 240px; overflow: hidden; ' +
     `background: ${background}`
   );
 });

package/src/HeatmapSeries.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { HeatmapCellData, HeatmapSeriesOptions } from '@wick-charts/core';
+import { HeatmapSeriesDef } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useChartInstance } from './context';
+
+const props = withDefaults(
+  defineProps<{
+    data: HeatmapCellData[];
+    options?: Partial<HeatmapSeriesOptions>;
+    /** 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);
+
+onMounted(() => {
+  const id = chart.addSeries(HeatmapSeriesDef, { ...props.options, id: props.id });
+  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.setSeriesVisible(id, props.visible);
+});
+
+onUnmounted(() => {
+  if (seriesId.value) chart.removeSeries(seriesId.value);
+});
+
+watch(
+  () => props.data,
+  (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);
+    }
+  },
+);
+
+watch(
+  () => props.options,
+  (options) => {
+    if (seriesId.value && options) {
+      chart.updateSeriesOptions(seriesId.value, options);
+    }
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (seriesId.value) chart.setSeriesVisible(seriesId.value, visible);
+  },
+);
+</script>
+
+<template><span v-if="false" /></template>