@wick-charts/vue 0.3.5 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "git+https://github.com/mo4islona/wick-charts.git",
     "directory": "packages/vue"
   },
-  "homepage": "https://mo4islona.github.io/wick-charts/",
+  "homepage": "https://wick-charts.eeff.io/",
   "bugs": "https://github.com/mo4islona/wick-charts/issues",
   "keywords": [
     "charts",
@@ -45,7 +45,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.3.5"
+    "@wick-charts/core": "^0.4.0"
   },
   "scripts": {
     "build": "vite build"

package/src/BarSeries.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { BarSeriesOptions, TimePoint } from '@wick-charts/core';
+import type { BarSeriesOptions, SeriesSyncState, TimePoint } from '@wick-charts/core';
+import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
@@ -13,20 +14,28 @@ const props = defineProps<{
 
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
+// Per-layer sync state — drives the shared append/keepLast/update/replace
+// reconciliation so streaming eases instead of snapping Y every tick.
+let prevSync: SeriesSyncState[] = [];
+
+function applyData(id: string, data: TimePoint[][]): void {
+  chart.batch(() => {
+    for (let i = 0; i < data.length; i++) {
+      prevSync[i] = syncSeriesLayer({ chart, id, data: data[i], prev: prevSync[i] ?? EMPTY_SYNC_STATE, layerIndex: i });
+    }
+  });
+}
 
 onMounted(() => {
-  const id = chart.addBarSeries({
+  const id = chart.addSeries('bar', {
     ...props.options,
     layers: props.data.length,
     id: props.id,
   });
   seriesId.value = id;
+  prevSync = props.data.map(() => EMPTY_SYNC_STATE);
   // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
-  chart.batch(() => {
-    for (let i = 0; i < props.data.length; i++) {
-      chart.setSeriesData(id, props.data[i], i);
-    }
-  });
+  applyData(id, props.data);
 });
 
 onUnmounted(() => {
@@ -36,12 +45,10 @@ onUnmounted(() => {
 watch(
   () => props.data,
   (data) => {
-    if (!seriesId.value) return;
-    chart.batch(() => {
-      for (let i = 0; i < data.length; i++) {
-        chart.setSeriesData(seriesId.value!, data[i], i);
-      }
-    });
+    const id = seriesId.value;
+    if (!id) return;
+
+    applyData(id, data);
   },
 );
 

package/src/CandlestickSeries.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { CandlestickSeriesOptions, OHLCInput } from '@wick-charts/core';
+import type { CandlestickSeriesOptions, OHLCInput, SeriesSyncState } from '@wick-charts/core';
+import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
@@ -13,18 +14,18 @@ const props = defineProps<{
 
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
-let prevLen = 0;
+// Sync state — drives the shared append/keepLast/update/replace reconciliation
+// so a rolling-window stream eases instead of snapping Y (and a 6–20 candle
+// burst takes the smooth append path, matching React's 20-candle threshold).
+let prevSync: SeriesSyncState = EMPTY_SYNC_STATE;
 
 onMounted(() => {
-  const id = chart.addCandlestickSeries({ ...props.options, id: props.id });
+  const id = chart.addSeries('candlestick', { ...props.options, id: props.id });
   seriesId.value = id;
   // 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.
-  if (props.data.length > 0) {
-    chart.setSeriesData(id, props.data);
-    prevLen = props.data.length;
-  }
+  prevSync = syncSeriesLayer({ chart, id, data: props.data, prev: prevSync });
 });
 
 onUnmounted(() => {
@@ -37,23 +38,7 @@ watch(
     const id = seriesId.value;
     if (!id) return;
 
-    if (data.length === 0) {
-      chart.setSeriesData(id, []);
-      prevLen = 0;
-      return;
-    }
-
-    if (prevLen === 0 || data.length < prevLen || data.length - prevLen > 5) {
-      chart.setSeriesData(id, data);
-    } else if (data.length === prevLen) {
-      chart.updateData(id, data[data.length - 1]);
-    } else {
-      for (let i = prevLen; i < data.length; i++) {
-        chart.appendData(id, data[i]);
-      }
-    }
-
-    prevLen = data.length;
+    prevSync = syncSeriesLayer({ chart, id, data, prev: prevSync });
   },
 );
 

package/src/ChartContainer.vue

@@ -5,6 +5,8 @@ import {
   ChartInstance,
   type ChartOptions,
   type ChartTheme,
+  type EdgeReachedInfo,
+  type VisibleRangeSpec,
   catppuccin,
 } from '@wick-charts/core';
 import { computed, nextTick, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
@@ -37,6 +39,28 @@ const props = withDefaults(
       right?: number | { intervals: number };
       left?: number | { intervals: number };
     };
+    /**
+     * Viewport-level streaming behavior. Captured at mount only — changing
+     * this prop after the chart is created is ignored.
+     */
+    viewport?: {
+      /**
+       * Width of the visible window in data bars, set on the first data load
+       * to `maxVisibleBars * dataInterval`. While the dataset is smaller than
+       * this width, streaming ticks render into the empty right-side gap and
+       * the viewport stays put; once the data reaches the right edge, the
+       * viewport pans forward to keep the latest bar pinned (tail-scroll).
+       * Default: 200.
+       */
+      maxVisibleBars?: number;
+      /**
+       * Initial visible range applied before the first paint with data. Same
+       * shape as the imperative `chart.setVisibleRange` — pass a bar count
+       * (e.g. `35`), an explicit `{from, to}` window, or `{from, bars}` for
+       * a warm-up pair. Captured at mount.
+       */
+      initialRange?: VisibleRangeSpec;
+    };
     /** Show the chart background gradient. Defaults to true. */
     gradient?: boolean;
     /** Enable zoom, pan, and crosshair interactions. Defaults to true. */
@@ -50,16 +74,15 @@ const props = withDefaults(
      */
     headerLayout?: 'overlay' | 'inline';
     /**
-     * Chart-level animation configuration. See `AnimationsConfig` for the full shape.
+     * Animation control. `true` / omitted uses built-in defaults; `false`
+     * disables every category. Per-series options on `<LineSeries>` /
+     * `<CandlestickSeries>` / `<BarSeries>` override these chart-level
+     * defaults unless the category here is explicitly `false`.
      *
-     * Two layers — chart-level (this prop) sets defaults for every series; per-series
-     * options on `<LineSeries>`/`<CandlestickSeries>`/`<BarSeries>` override that
-     * default for that one series.
-     *
-     * Shorthands: `true` / omitted — built-in defaults; `false` — disables every
-     * animation category; `{ points: false }` / `{ viewport: false }` disables a
-     * category. Updating this prop calls `chart.setAnimations(...)` so the new
-     * durations take effect on the next animation / render.
+     * **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.
      */
     animations?: boolean | AnimationsConfig;
     /**
@@ -67,6 +90,13 @@ const props = withDefaults(
      * later changes are ignored.
      */
     perf?: PerfOption;
+    /**
+     * Fired after the user releases a pan/zoom gesture that pulled the viewport
+     * past a data edge by more than ~10% of the visible range. Hosts typically
+     * respond by prefetching more history. Captured at mount only; changing
+     * the prop identity later is ignored.
+     */
+    onEdgeReached?: (info: EdgeReachedInfo) => void;
   }>(),
   {
     theme: () => catppuccin.theme,
@@ -82,6 +112,8 @@ const themeRef = shallowRef<ChartTheme>(props.theme);
 // Capture perf at mount only — mirrors React's perfRef so a new object
 // identity later doesn't recreate the chart.
 const perfAtMount = props.perf;
+// Same mount-only capture for the edge callback — the chart binds it once.
+const onEdgeReachedAtMount = props.onEdgeReached;
 
 const topOverlayRef = ref<HTMLElement | null>(null);
 const titleAnchor = ref<HTMLElement | null>(null);
@@ -149,9 +181,11 @@ onMounted(async () => {
   if (props.axis) options.axis = props.axis;
   if (props.theme) options.theme = props.theme;
   if (props.padding) options.padding = props.padding;
+  if (props.viewport) options.viewport = props.viewport;
   if (props.interactive !== undefined) options.interactive = props.interactive;
   if (props.grid !== undefined) options.grid = props.grid;
   if (perfAtMount !== undefined) options.perf = perfAtMount;
+  if (onEdgeReachedAtMount) options.onEdgeReached = onEdgeReachedAtMount;
   if (props.animations !== undefined) options.animations = props.animations;
   chart.value = new ChartInstance(containerRef.value, options);
 
@@ -202,14 +236,35 @@ watch(
   },
 );
 
-// Stringify the animations config so callers can pass a fresh object identity
-// without thrashing animator state when nothing has actually changed.
+// 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.
+//
+// Children get the chart via `useChartInstance()` which snapshots
+// `chartRef.value` once at setup time. To force them to re-setup against
+// the new instance, we flip `chart.value` to `null` first — the `v-if`
+// guard in the template unmounts the slot — then `await nextTick()` so
+// 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.
 watch(
-  () => JSON.stringify(props.animations),
-  () => {
-    if (chart.value && props.animations !== undefined) {
-      chart.value.setAnimations(props.animations);
-    }
+  () => props.animations,
+  async (next) => {
+    if (!chart.value || !containerRef.value) return;
+    chart.value.destroy();
+    chart.value = null;
+    await nextTick();
+    const opts: ChartOptions = {};
+    if (props.axis) opts.axis = props.axis;
+    if (props.theme) opts.theme = props.theme;
+    if (props.padding) opts.padding = props.padding;
+    if (props.viewport) opts.viewport = props.viewport;
+    if (props.interactive !== undefined) opts.interactive = props.interactive;
+    if (props.grid !== undefined) opts.grid = props.grid;
+    if (perfAtMount !== undefined) opts.perf = perfAtMount;
+    if (onEdgeReachedAtMount) opts.onEdgeReached = onEdgeReachedAtMount;
+    if (next !== undefined) opts.animations = next;
+    chart.value = new ChartInstance(containerRef.value, opts);
   },
 );
 
@@ -231,9 +286,7 @@ const rootStyle = computed(() => {
   const t = themeRef.value;
   const [gtop, gbot] = t?.chartGradient ?? ['transparent', 'transparent'];
   const bg = t?.background ?? 'transparent';
-  const background = props.gradient
-    ? `linear-gradient(to bottom, ${gtop} 0%, ${bg} 70%, ${gbot} 100%)`
-    : bg;
+  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; ' +

package/src/LineSeries.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { LineSeriesOptions, TimePoint } from '@wick-charts/core';
+import type { LineSeriesOptions, SeriesSyncState, TimePoint } from '@wick-charts/core';
+import { EMPTY_SYNC_STATE, syncSeriesLayer } from '@wick-charts/core';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useChartInstance } from './context';
@@ -13,20 +14,28 @@ const props = defineProps<{
 
 const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
+// Per-layer sync state — drives the shared append/keepLast/update/replace
+// reconciliation so streaming eases instead of snapping Y every tick.
+let prevSync: SeriesSyncState[] = [];
+
+function applyData(id: string, data: TimePoint[][]): void {
+  chart.batch(() => {
+    for (let i = 0; i < data.length; i++) {
+      prevSync[i] = syncSeriesLayer({ chart, id, data: data[i], prev: prevSync[i] ?? EMPTY_SYNC_STATE, layerIndex: i });
+    }
+  });
+}
 
 onMounted(() => {
-  const id = chart.addLineSeries({
+  const id = chart.addSeries('line', {
     ...props.options,
     layers: props.data.length,
     id: props.id,
   });
   seriesId.value = id;
+  prevSync = props.data.map(() => EMPTY_SYNC_STATE);
   // Lazy watcher — apply initial data here so static-data mounts render without a no-op first frame.
-  chart.batch(() => {
-    for (let i = 0; i < props.data.length; i++) {
-      chart.setSeriesData(id, props.data[i], i);
-    }
-  });
+  applyData(id, props.data);
 });
 
 onUnmounted(() => {
@@ -36,12 +45,10 @@ onUnmounted(() => {
 watch(
   () => props.data,
   (data) => {
-    if (!seriesId.value) return;
-    chart.batch(() => {
-      for (let i = 0; i < data.length; i++) {
-        chart.setSeriesData(seriesId.value!, data[i], i);
-      }
-    });
+    const id = seriesId.value;
+    if (!id) return;
+
+    applyData(id, data);
   },
 );
 

package/src/PieSeries.vue

@@ -15,7 +15,7 @@ const chart = useChartInstance();
 const seriesId = ref<string | null>(null);
 
 onMounted(() => {
-  const id = chart.addPieSeries({ ...props.options, id: props.id });
+  const id = chart.addSeries('pie', { ...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) {

package/src/index.ts

@@ -13,7 +13,6 @@ export type {
   AxisConfig,
   BarSeriesOptions,
   /** @deprecated Use {@link StackingMode} instead. */
-  BarStacking,
   BuildHoverSnapshotsArgs,
   BuildLastSnapshotsArgs,
   CandlestickSeriesOptions,
@@ -24,7 +23,6 @@ export type {
   HoverInfo,
   LegendItem,
   /** @deprecated Use {@link TimePoint} instead. */
-  LineData,
   LineSeriesOptions,
   NavigatorCandlePoint,
   NavigatorControllerParams,
@@ -68,7 +66,6 @@ export {
   catppuccin,
   computeTooltipPosition,
   createTheme,
-  darkTheme,
   detectInterval,
   dracula,
   formatCompact,
@@ -81,7 +78,6 @@ export {
   highContrast,
   lavenderMist,
   lightPink,
-  lightTheme,
   materialPalenight,
   minimalLight,
   mintBreeze,

package/src/ui/TimeAxis.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { formatTime, resolveAxisFontSize, resolveAxisTextColor } from '@wick-charts/core';
-import { computed, onUnmounted, watch } from 'vue';
+import { mountAxisLabels } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { useVisibleRange } from '../composables';
 import { useChartInstance } from '../context';
 
 const props = defineProps<{
@@ -12,13 +11,8 @@ const props = defineProps<{
   minLabelSpacing?: number;
 }>();
 
-interface TrackedTick {
-  opacity: number;
-  addedAt: number;
-}
-
 const chart = useChartInstance();
-const visibleRange = useVisibleRange(chart);
+const containerRef = ref<HTMLDivElement | null>(null);
 
 const applyDensity = () => {
   chart.setTimeAxisLabelDensity({
@@ -32,51 +26,20 @@ onUnmounted(() => {
   chart.setTimeAxisLabelDensity({ labelCount: null, minLabelSpacing: null });
 });
 
-const tickMap = new Map<number, TrackedTick>();
-
-const theme = computed(() => chart.getTheme());
-
-const tickData = computed(() => {
-  // Access visibleRange.value to track dependency
-  void visibleRange.value;
-
-  const dataInterval = chart.getDataInterval();
-  const { ticks: currentTicks, tickInterval } = chart.timeScale.niceTickValues(dataInterval);
-  const currentSet = new Set(currentTicks);
-  const now = performance.now();
-
-  // Mark current ticks as visible
-  for (const t of currentTicks) {
-    if (!tickMap.has(t)) {
-      tickMap.set(t, { opacity: 1, addedAt: now });
-    } else {
-      tickMap.get(t)!.opacity = 1;
-    }
-  }
-
-  // Mark missing ticks for fade-out
-  for (const [t, entry] of tickMap) {
-    if (!currentSet.has(t)) {
-      entry.opacity = 0;
-    }
-  }
-
-  // Clean up old faded-out ticks
-  for (const [t, entry] of tickMap) {
-    if (entry.opacity === 0 && now - entry.addedAt > 5000) {
-      tickMap.delete(t);
-    }
-  }
-
-  return {
-    allTicks: Array.from(tickMap.entries()),
-    tickInterval,
-  };
+let cleanup: (() => void) | null = null;
+onMounted(() => {
+  if (containerRef.value === null) return;
+  cleanup = mountAxisLabels({ chart, container: containerRef.value, axis: 'x' });
+});
+onUnmounted(() => {
+  cleanup?.();
+  cleanup = null;
 });
 </script>
 
 <template>
   <div
+    ref="containerRef"
     :style="{
       position: 'absolute',
       left: '0',
@@ -87,25 +50,5 @@ const tickData = computed(() => {
       display: 'flex',
       alignItems: 'center',
     }"
-  >
-    <span
-      v-for="[time, entry] in tickData.allTicks"
-      :key="time"
-      :style="{
-        position: 'absolute',
-        left: chart.timeScale.timeToX(time) + 'px',
-        transform: 'translateX(-50%)',
-        color: resolveAxisTextColor(theme, 'x'),
-        fontSize: resolveAxisFontSize(theme, 'x') + 'px',
-        fontFamily: theme.typography.fontFamily,
-        userSelect: 'none',
-        whiteSpace: 'nowrap',
-        opacity: entry.opacity,
-        transition: 'opacity 0.25s ease',
-        willChange: 'opacity',
-      }"
-    >
-      {{ formatTime(time, tickData.tickInterval) }}
-    </span>
-  </div>
+  />
 </template>

package/src/ui/Title.vue

@@ -59,7 +59,7 @@ if (!theme) {
         display: 'flex',
         alignItems: 'baseline',
         gap: '6px',
-        padding: '6px 8px 4px',
+        padding: '6px 8px 0',
         flexShrink: 0,
         fontFamily: theme.typography.fontFamily,
         fontSize: theme.typography.fontSize + 'px',

package/src/ui/YAxis.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { resolveAxisFontSize, resolveAxisTextColor, type ValueFormatter } from '@wick-charts/core';
-import { computed, onMounted, onUnmounted, watch } from 'vue';
+import { type ValueFormatter, mountAxisLabels } from '@wick-charts/core';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { useVisibleRange } from '../composables';
 import { useChartInstance } from '../context';
 
 const props = defineProps<{
@@ -17,14 +16,8 @@ const props = defineProps<{
   minLabelSpacing?: number;
 }>();
 
-interface TrackedTick {
-  opacity: number;
-  addedAt: number;
-}
-
 const chart = useChartInstance();
-// Subscribe to visible range to trigger re-renders on viewport changes
-const visibleRange = useVisibleRange(chart);
+const containerRef = ref<HTMLDivElement | null>(null);
 
 // Route the formatter through yScale so Crosshair / YLabel fallback use
 // the same function as the axis labels.
@@ -39,53 +32,24 @@ const applyDensity = () => {
     minLabelSpacing: props.minLabelSpacing ?? null,
   });
 };
-// Run during setup (before first paint) to match TimeAxis.vue and avoid a
-// post-mount density change that would cause a visible tick "jump".
 applyDensity();
 watch(() => [props.labelCount, props.minLabelSpacing], applyDensity);
 onUnmounted(() => chart.setYAxisLabelDensity({ labelCount: null, minLabelSpacing: null }));
 
-const tickMap = new Map<number, TrackedTick>();
-
-const theme = computed(() => chart.getTheme());
-
-const allTicks = computed(() => {
-  // Access visibleRange.value to track dependency
-  void visibleRange.value;
-
-  const currentTicks = chart.yScale.niceTickValues();
-  const currentSet = new Set(currentTicks);
-  const now = performance.now();
-
-  // Mark current ticks as visible
-  for (const p of currentTicks) {
-    if (!tickMap.has(p)) {
-      tickMap.set(p, { opacity: 1, addedAt: now });
-    } else {
-      tickMap.get(p)!.opacity = 1;
-    }
-  }
-
-  // Mark missing ticks for fade-out
-  for (const [p, entry] of tickMap) {
-    if (!currentSet.has(p)) {
-      entry.opacity = 0;
-    }
-  }
-
-  // Clean up old faded-out ticks
-  for (const [p, entry] of tickMap) {
-    if (entry.opacity === 0 && now - entry.addedAt > 5000) {
-      tickMap.delete(p);
-    }
-  }
-
-  return Array.from(tickMap.entries());
+let cleanup: (() => void) | null = null;
+onMounted(() => {
+  if (containerRef.value === null) return;
+  cleanup = mountAxisLabels({ chart, container: containerRef.value, axis: 'y' });
+});
+onUnmounted(() => {
+  cleanup?.();
+  cleanup = null;
 });
 </script>
 
 <template>
   <div
+    ref="containerRef"
     :style="{
       position: 'absolute',
       right: '0',
@@ -94,26 +58,5 @@ const allTicks = computed(() => {
       width: chart.yAxisWidth + 'px',
       pointerEvents: 'none',
     }"
-  >
-    <span
-      v-for="[price, entry] in allTicks"
-      :key="price"
-      :style="{
-        position: 'absolute',
-        right: '8px',
-        top: chart.yScale.valueToY(price) + 'px',
-        transform: 'translateY(-50%)',
-        color: resolveAxisTextColor(theme, 'y'),
-        fontSize: resolveAxisFontSize(theme, 'y') + 'px',
-        fontFamily: theme.typography.fontFamily,
-        fontVariantNumeric: 'tabular-nums',
-        userSelect: 'none',
-        opacity: entry.opacity,
-        transition: 'opacity 0.25s ease',
-        willChange: 'opacity',
-      }"
-    >
-      {{ chart.yScale.formatY(price) }}
-    </span>
-  </div>
+  />
 </template>