@wick-charts/vue 0.8.0 → 0.8.2

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(
@@ -32,13 +33,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: MultiLayerData): void {
   prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
-onMounted(() => {
-  const layerCount = toLayers(props.data).length;
+function createSeries(data: MultiLayerData): void {
+  layerCount = toLayers(data).length;
   const id = chart.addSeries(BarSeriesDef, {
     ...props.options,
     scale: props.scale,
@@ -48,8 +50,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(() => {
@@ -57,11 +63,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);
   },
 );

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;
@@ -62,19 +62,23 @@ const props = withDefaults(
      */
     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.
+       * Most bars the chart's own fit shows. The first data load fits every bar
+       * up to this count; while the data holds fewer, streamed bars widen the
+       * window, and once it is full the window keeps its width and follows the
+       * latest bar. `fitContent()` and an explicit bar count are not capped.
+       * Default: 200. Values below 2 are clamped.
        */
       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.
+       * a warm-up pair.
+       *
+       * It stays the chart's window until the user zooms or pans or the app
+       * sets a range, so a series that loads later or data set again keeps it.
+       * A bar count widens with streamed bars until it holds that many; a
+       * `{from, …}` window ends once streaming moves it. Captured at mount.
        */
       initialRange?: VisibleRangeSpec;
     };
@@ -86,7 +90,7 @@ const props = withDefaults(
      * 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
+     * For an initial window that isn't re-applied on every prop
      * change, use `viewport.initialRange` instead.
      */
     visibleRange?: VisibleRangeSpec;
@@ -211,6 +215,8 @@ const props = withDefaults(
     // distinguishable from an explicit `:fade="false"` all-off opt-out.
     // Declaring a default (even `undefined`) suppresses the cast.
     fade: undefined,
+    // Absent must reach the core as `undefined` (animations on), as in React and Svelte.
+    animations: undefined,
   },
 );
 

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(
@@ -32,13 +33,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: MultiLayerData): void {
   prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
-onMounted(() => {
-  const layerCount = toLayers(props.data).length;
+function createSeries(data: MultiLayerData): void {
+  layerCount = toLayers(data).length;
   const id = chart.addSeries(LineSeriesDef, {
     ...props.options,
     scale: props.scale,
@@ -48,8 +50,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(() => {
@@ -57,11 +63,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);
   },
 );

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>;

package/src/ui/InfoBar.vue

@@ -4,13 +4,13 @@ import {
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
-  type TimePoint,
   type TooltipFormatter,
   buildHoverSnapshots,
   buildLastSnapshots,
   formatCompact,
   formatHeaderX,
   formatPriceAdaptive,
+  formatRowValue,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, inject, onMounted, onUnmounted, ref, useSlots } from 'vue';
@@ -56,12 +56,15 @@ const onOverlayChange = () => {
 };
 onMounted(() => {
   chart.on('overlayChange', onOverlayChange);
+  // Rows read animated values (smoothing, fades, percent shares).
+  chart.on('seriesFrame', onOverlayChange);
   // Catch-up: a sibling series' mount effect may have registered data in the
   // same synchronous flush, so poke the computed now.
   if (chart.getSeriesIds().length > 0) bump.value++;
 });
 onUnmounted(() => {
   chart.off('overlayChange', onOverlayChange);
+  chart.off('seriesFrame', onOverlayChange);
 });
 
 // Hover-over-the-y-axis gap: the overlay canvas includes the y-axis strip,
@@ -89,7 +92,12 @@ const snapshots = computed<readonly SeriesSnapshot[]>(() =>
   isHover.value ? (hoverSnapshots.value as readonly SeriesSnapshot[]) : lastSnapshots.value,
 );
 
-const dataInterval = computed(() => chart.getDataInterval());
+// `chart` is not reactive: `bump` re-reads the interval once data lands after mount.
+const dataInterval = computed(() => {
+  void bump.value;
+
+  return chart.getDataInterval();
+});
 const displayTime = computed(() => {
   if (snapshots.value.length === 0) return 0;
   if (isHover.value && crosshair.value) return crosshair.value.time;
@@ -205,7 +213,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
               }"
             />
             <span :style="{ color: s.color, fontWeight: 500 }">
-              {{ effectiveFormat((s.data as TimePoint).value, 'value') }}
+              {{ formatRowValue(s, (v) => effectiveFormat(v, 'value')) }}
             </span>
           </span>
         </template>

package/src/ui/NumberFlow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 const props = withDefaults(
   defineProps<{
@@ -11,6 +11,7 @@ const props = withDefaults(
      */
     format?: ((value: number) => string) | Intl.NumberFormatOptions;
     locale?: string;
+    /** Per-digit spin duration in ms. A value that arrives sooner than this after the previous one snaps instead. */
     spinDuration?: number;
   }>(),
   {
@@ -50,6 +51,19 @@ const parts = computed<CharPart[]>(() => {
   return result;
 });
 
+// A spin retargeted mid-turn shows two half digits, so values faster than a spin snap.
+const duration = ref(props.spinDuration);
+let changedAt = Number.NEGATIVE_INFINITY;
+watch(
+  () => effectiveFormat.value(props.value),
+  () => {
+    const now = performance.now();
+    const tooFast = now - changedAt < props.spinDuration;
+    changedAt = now;
+    duration.value = tooFast ? 0 : props.spinDuration;
+  },
+);
+
 const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 </script>
 
@@ -77,8 +91,8 @@ const digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
             display: 'flex',
             flexDirection: 'column',
             transform: 'translateY(' + (-parseInt(part.value) * 1.2) + 'em)',
-            transition: mounted
-              ? 'transform ' + spinDuration + 'ms cubic-bezier(0.16, 1, 0.3, 1)'
+            transition: mounted && duration > 0
+              ? 'transform ' + duration + 'ms cubic-bezier(0.16, 1, 0.3, 1)'
               : 'none',
           }"
         >

package/src/ui/Tooltip.vue

@@ -4,14 +4,13 @@ import {
   type OHLCData,
   type SeriesSnapshot,
   type SnapshotSort,
-  type TimePoint,
   type TooltipFormatter,
   buildHoverSnapshots,
   computeTooltipPosition,
   formatCompact,
-  formatDate,
-  formatHeaderX,
   formatPriceAdaptive,
+  formatRowValue,
+  formatTooltipHeader,
   resolveCandlestickBodyColor,
 } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref, useSlots, watchEffect } from 'vue';
@@ -47,14 +46,26 @@ const onOverlayChange = () => {
 };
 onMounted(() => {
   chart.on('overlayChange', onOverlayChange);
+  // Rows read animated values (smoothing, fades, percent shares).
+  chart.on('seriesFrame', onOverlayChange);
   if (chart.getSeriesIds().length > 0) bump.value++;
 });
 onUnmounted(() => {
   chart.off('overlayChange', onOverlayChange);
+  chart.off('seriesFrame', onOverlayChange);
 });
 
-const theme = computed(() => chart.getTheme());
-const dataInterval = computed(() => chart.getDataInterval());
+const theme = computed(() => {
+  void bump.value;
+
+  return chart.getTheme();
+});
+// `chart` is not reactive: `bump` re-reads the interval once data lands after mount.
+const dataInterval = computed(() => {
+  void bump.value;
+
+  return chart.getDataInterval();
+});
 
 const snapshots = computed<readonly SeriesSnapshot[]>(() => {
   void bump.value;
@@ -127,9 +138,12 @@ const floatingPos = computed<{ left: number; top: number } | null>(() => {
 
   const hasOHLC = snapshots.value.some((s) => 'open' in s.data);
   const lineCount = snapshots.value.filter((s) => !('open' in s.data)).length;
-  // A band row carries two numbers, so it needs a wider box than a line row.
+  // A band row carries two numbers, and a percent-stack row a share and a value, so both need a wider box.
   const hasBand = snapshots.value.some((s) => 'high' in s.data && !('open' in s.data));
-  const tooltipWidth = hasBand ? 220 : 160;
+  const hasShare = snapshots.value.some((s) => s.share !== undefined);
+  let tooltipWidth = 160;
+  if (hasBand) tooltipWidth = 220;
+  if (hasShare) tooltipWidth = 240;
   const tooltipHeight = hasOHLC ? 140 : 40 + lineCount * 22;
 
   return computeTooltipPosition({
@@ -188,10 +202,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
         letterSpacing: '0.02em',
       }"
     >
-      <template v-if="chart.timeScale.getType() === 'time'">
-        {{ formatDate(displayTime, { locale: chart.timeScale.getLocale(), timeZone: chart.timeScale.getTimeZone() }) }}
-      </template>
-      {{ formatHeaderX(chart, { time: displayTime, snapshots, interval: dataInterval }) }}
+      {{ formatTooltipHeader(chart, { time: displayTime, snapshots, interval: dataInterval }) }}
     </div>
 
     <template v-for="s in snapshots" :key="s.id">
@@ -264,7 +275,7 @@ function isBand(data: SeriesSnapshot['data']): data is BandPoint {
         />
         <span :style="{ opacity: 0.6, flex: '1' }">{{ s.label ?? 'Value' }}</span>
         <span :style="{ fontWeight: 600, color: s.color }">
-          {{ effectiveFormat((s.data as TimePoint).value, 'value') }}
+          {{ formatRowValue(s, (v) => effectiveFormat(v, 'value')) }}
         </span>
       </div>
     </template>

package/src/ui/YLabel.vue

@@ -7,6 +7,7 @@ import {
   prefersReducedMotion,
   resolveAnimate,
   resolveYLabelSeriesId,
+  yLabelFractionDigits,
 } from '@wick-charts/core';
 import { computed, onMounted, onUnmounted, ref, useSlots } from 'vue';
 
@@ -21,28 +22,32 @@ export type { YLabelAnimate, YLabelAnimateOptions } from '@wick-charts/core';
 /** Direction of the current value vs. previous close. Drives the badge color in the default UI. */
 export type YLabelDirection = 'up' | 'down' | 'neutral';
 
-const props = defineProps<{
-  /**
-   * Owning series id. **Optional** — when omitted, the first visible
-   * single-layer time series is picked, falling back to the first visible
-   * multi-layer time series.
-   */
-  seriesId?: string;
-  color?: string;
-  /** Custom formatter; routed through NumberFlow's `formatter` so the digit animation still plays. Default: the scale's `<YAxis format>`, else a range-adaptive number. */
-  format?: ValueFormatter;
-  /**
-   * Badge motion. `true` (default) glides + counts up + fades in with the
-   * intro; `false` snaps with no easing; an object tunes individual parts.
-   */
-  animate?: YLabelAnimate;
-  /**
-   * Named Y scale (`ChartContainer` `scales`) the value maps through. Default:
-   * the series' own scale. The badge sits on that scale's axis side — the
-   * default axis side for an overlay scale.
-   */
-  scale?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Owning series id. **Optional** — when omitted, the first visible
+     * single-layer time series is picked, falling back to the first visible
+     * multi-layer time series.
+     */
+    seriesId?: string;
+    color?: string;
+    /** Custom formatter; routed through NumberFlow's `formatter` so the digit animation still plays. Default: the scale's `<YAxis format>`, else a range-adaptive number. */
+    format?: ValueFormatter;
+    /**
+     * Badge motion. `true` (default) glides + counts up + fades in with the
+     * intro; `false` snaps with no easing; an object tunes individual parts.
+     */
+    animate?: YLabelAnimate;
+    /**
+     * Named Y scale (`ChartContainer` `scales`) the value maps through. Default:
+     * the series' own scale. The badge sits on that scale's axis side — the
+     * default axis side for an overlay scale.
+     */
+    scale?: string;
+  }>(),
+  // Vue casts an absent Boolean prop to `false`; an absent `animate` must stay `undefined` (on).
+  { animate: undefined },
+);
 
 defineSlots<{
   default?(ctx: {
@@ -250,12 +255,8 @@ const bgColor = computed<string>(() => {
 const fractionDigits = computed(() => {
   void bump.value;
   const yRange = yScale.value.getRange();
-  const range = yRange.max - yRange.min;
-  if (range < 0.1) return 6;
-  if (range < 10) return 4;
-  if (range < 1000) return 2;
 
-  return 0;
+  return yLabelFractionDigits(yRange.max - yRange.min);
 });
 
 const effectiveFormat = computed<ValueFormatter>(() => {