@wick-charts/vue 0.7.0 → 0.8.1

package/dist/ui/YLabel.vue.js

@@ -1,85 +1,85 @@
-import { defineComponent as O, useSlots as W, computed as t, ref as w, onMounted as H, onUnmounted as J, openBlock as A, createElementBlock as B, Fragment as Y, renderSlot as K, createElementVNode as _, normalizeStyle as z, unref as M, createVNode as Q, createCommentVNode as X } from "vue";
+import { defineComponent as O, useSlots as W, computed as t, ref as w, onMounted as H, onUnmounted as J, openBlock as A, createElementBlock as B, Fragment as Y, renderSlot as K, createElementVNode as _, normalizeStyle as z, unref as D, createVNode as Q, createCommentVNode as X } from "vue";
 import { prefersReducedMotion as Z } from "../core/dist/animation/reduced-motion.js";
-import { resolveAnimate as ee, resolveYLabelSeriesId as te, firstVisibleValue as ae, BadgeAnimator as le } from "../core/dist/chart/badge-animator.js";
-import { useChartInstance as ne } from "../context.js";
-import oe from "./NumberFlow.vue.js";
-const ce = /* @__PURE__ */ O({
+import { resolveAnimate as ee, resolveYLabelSeriesId as te, yLabelFractionDigits as ae, firstVisibleValue as le, BadgeAnimator as ne } from "../core/dist/chart/badge-animator.js";
+import { useChartInstance as oe } from "../context.js";
+import ue from "./NumberFlow.vue.js";
+const fe = /* @__PURE__ */ O({
   __name: "YLabel",
   props: {
     seriesId: {},
     color: {},
-    format: { type: Function },
-    animate: { type: [Boolean, Object] },
+    format: {},
+    animate: { type: [Boolean, Object], default: void 0 },
     scale: {}
   },
   setup(E) {
-    const r = E, e = ne(), N = W(), R = t(() => typeof N.default == "function"), l = w(0), i = w(null);
-    let m = null, g = null, s = null;
-    const T = t(() => ee(r.animate));
+    const u = E, e = oe(), M = W(), N = t(() => typeof M.default == "function"), l = w(0), r = w(null);
+    let m = null, g = null, i = null;
+    const R = t(() => ee(u.animate));
     function S() {
-      s = null;
-      const a = o.value, u = a !== null ? e.getStackedLastValue(a) : null;
-      if (a === null || !u) {
+      i = null;
+      const a = o.value, d = a !== null ? e.getStackedLastValue(a) : null;
+      if (a === null || !d) {
         m = null, g = null;
         return;
       }
-      const f = u.value;
-      (m === null || g !== a) && (m = new le(f), g = a);
-      const { glide: $, countUp: j, settleMs: G } = T.value, I = e.getIntroFront(a), c = m.frame({
-        target: f,
+      const c = d.value;
+      (m === null || g !== a) && (m = new ne(c), g = a);
+      const { glide: $, countUp: j, settleMs: G } = R.value, I = e.getIntroFront(a), v = m.frame({
+        target: c,
         // Only needed for the intro count-up; skip the visible-range binary search
         // entirely once the reveal has settled (the hot streaming path).
-        firstVisible: I < 1 ? ae(e, a, f) : f,
+        firstVisible: I < 1 ? le(e, a, c) : c,
         introFront: I,
         now: performance.now(),
         glide: $,
         countUp: j,
         settleMs: G,
         reducedMotion: Z()
-      }), d = i.value;
-      (d === null || d.positionValue !== c.positionValue || d.textValue !== c.textValue || d.opacity !== c.opacity) && (i.value = { positionValue: c.positionValue, textValue: c.textValue, opacity: c.opacity }), c.animating && s === null && (s = requestAnimationFrame(S));
+      }), p = r.value;
+      (p === null || p.positionValue !== v.positionValue || p.textValue !== v.textValue || p.opacity !== v.opacity) && (r.value = { positionValue: v.positionValue, textValue: v.textValue, opacity: v.opacity }), v.animating && i === null && (i = requestAnimationFrame(S));
     }
-    function D() {
-      s === null && (s = requestAnimationFrame(S));
+    function T() {
+      i === null && (i = requestAnimationFrame(S));
     }
-    const p = () => {
-      l.value++, D();
+    const f = () => {
+      l.value++, T();
     };
     H(() => {
-      e.setYLabel(!0), e.on("overlayChange", p), e.on("viewportChange", p), e.getSeriesIds().length > 0 && p();
+      e.setYLabel(!0), e.on("overlayChange", f), e.on("viewportChange", f), e.getSeriesIds().length > 0 && f();
     }), J(() => {
-      e.setYLabel(!1), e.off("overlayChange", p), e.off("viewportChange", p), s !== null && cancelAnimationFrame(s), s = null;
+      e.setYLabel(!1), e.off("overlayChange", f), e.off("viewportChange", f), i !== null && cancelAnimationFrame(i), i = null;
     });
-    const o = t(() => (l.value, te(e, r.seriesId))), n = t(() => (l.value, o.value !== null ? e.getStackedLastValue(o.value) : null)), y = t(() => (l.value, o.value !== null ? e.getPreviousClose(o.value) : null)), v = t(() => (l.value, e.getTheme())), C = t(() => (l.value, r.scale !== void 0 ? r.scale : o.value !== null ? e.getSeriesScale(o.value) : void 0)), x = t(() => (l.value, e.getYScale(C.value))), U = t(() => (l.value, e.getYScaleColumn(C.value)?.position ?? e.yAxisPosition)), q = t(() => i.value !== null ? i.value.positionValue : n.value?.value ?? 0), P = t(() => i.value !== null ? i.value.textValue : n.value?.value ?? 0), b = t(() => i.value !== null ? i.value.opacity : o.value === null ? 1 : e.getIntroFront(o.value) < 1 ? 0 : 1), h = t(() => (l.value, n.value === null ? 0 : x.value.valueToY(q.value))), F = t(() => n.value === null || y.value === null ? "neutral" : n.value.value > y.value ? "up" : n.value.value < y.value ? "down" : "neutral"), V = t(() => {
-      if (n.value === null) return v.value.yLabel.neutralBackground;
-      if (!n.value.isLive) return v.value.axis.textColor;
-      if (r.color) return r.color;
+    const o = t(() => (l.value, te(e, u.seriesId))), n = t(() => (l.value, o.value !== null ? e.getStackedLastValue(o.value) : null)), y = t(() => (l.value, o.value !== null ? e.getPreviousClose(o.value) : null)), s = t(() => (l.value, e.getTheme())), C = t(() => (l.value, u.scale !== void 0 ? u.scale : o.value !== null ? e.getSeriesScale(o.value) : void 0)), x = t(() => (l.value, e.getYScale(C.value))), U = t(() => (l.value, e.getYScaleColumn(C.value)?.position ?? e.yAxisPosition)), q = t(() => r.value !== null ? r.value.positionValue : n.value?.value ?? 0), P = t(() => r.value !== null ? r.value.textValue : n.value?.value ?? 0), b = t(() => r.value !== null ? r.value.opacity : o.value === null ? 1 : e.getIntroFront(o.value) < 1 ? 0 : 1), h = t(() => (l.value, n.value === null ? 0 : x.value.valueToY(q.value))), F = t(() => n.value === null || y.value === null ? "neutral" : n.value.value > y.value ? "up" : n.value.value < y.value ? "down" : "neutral"), V = t(() => {
+      if (n.value === null) return s.value.yLabel.neutralBackground;
+      if (!n.value.isLive) return s.value.axis.textColor;
+      if (u.color) return u.color;
       switch (F.value) {
         case "up":
-          return v.value.yLabel.upBackground;
+          return s.value.yLabel.upBackground;
         case "down":
-          return v.value.yLabel.downBackground;
+          return s.value.yLabel.downBackground;
         default:
-          return v.value.yLabel.neutralBackground;
+          return s.value.yLabel.neutralBackground;
       }
     }), L = t(() => {
       l.value;
-      const a = x.value.getRange(), u = a.max - a.min;
-      return u < 0.1 ? 6 : u < 10 ? 4 : u < 1e3 ? 2 : 0;
+      const a = x.value.getRange();
+      return ae(a.max - a.min);
     }), k = t(() => {
-      if (r.format) return r.format;
+      if (u.format) return u.format;
       l.value;
       const a = x.value.getFormat();
       if (a) return a;
-      const u = new Intl.NumberFormat("en-US", {
+      const d = new Intl.NumberFormat("en-US", {
         minimumFractionDigits: L.value,
         maximumFractionDigits: L.value,
         useGrouping: !1
       });
-      return (f) => u.format(f);
+      return (c) => d.format(c);
     });
-    return (a, u) => n.value !== null ? (A(), B(Y, { key: 0 }, [
-      R.value ? K(a.$slots, "default", {
+    return (a, d) => n.value !== null ? (A(), B(Y, { key: 0 }, [
+      N.value ? K(a.$slots, "default", {
         key: 0,
         value: n.value.value,
         y: h.value,
@@ -92,8 +92,8 @@ const ce = /* @__PURE__ */ O({
         _("div", {
           style: z({
             position: "absolute",
-            left: M(e).plotLeft + "px",
-            right: M(e).getAxisColumnWidth("right") + "px",
+            left: D(e).plotLeft + "px",
+            right: D(e).getAxisColumnWidth("right") + "px",
             top: h.value + "px",
             height: "0",
             borderTop: "1px dashed " + V.value,
@@ -112,16 +112,16 @@ const ce = /* @__PURE__ */ O({
             pointerEvents: "auto",
             zIndex: 3,
             background: V.value,
-            color: v.value.yLabel.textColor,
-            fontSize: v.value.yLabel.fontSize + "px",
-            fontFamily: v.value.typography.fontFamily,
+            color: s.value.yLabel.textColor,
+            fontSize: s.value.yLabel.fontSize + "px",
+            fontFamily: s.value.typography.fontFamily,
             padding: "3px 8px",
             borderRadius: "3px",
             whiteSpace: "nowrap",
             transition: "background-color 0.3s ease"
           })
         }, [
-          Q(oe, {
+          Q(ue, {
             value: P.value,
             format: k.value,
             "spin-duration": 350
@@ -132,5 +132,5 @@ const ce = /* @__PURE__ */ O({
   }
 });
 export {
-  ce as default
+  fe as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wick-charts/vue",
-  "version": "0.7.0",
-  "description": "High-performance canvas timeseries charts for Vue — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
+  "version": "0.8.1",
+  "description": "Realtime, animated canvas charts for Vue: candlestick, line, bar, heatmap, pie and more. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -14,10 +14,16 @@
     "charts",
     "charting",
     "canvas",
+    "realtime",
+    "streaming",
+    "animation",
     "candlestick",
     "line-chart",
+    "area-chart",
     "bar-chart",
+    "heatmap",
     "pie-chart",
+    "sparkline",
     "timeseries",
     "vue",
     "visualization"
@@ -45,7 +51,7 @@
     "vue": ">=3.3.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.7.0"
+    "@wick-charts/core": "^0.8.1"
   },
   "scripts": {
     "build": "vite build"

package/src/BandSeries.vue

@@ -36,13 +36,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: BandData): void {
   prevSync = syncLayers({ chart, id, data, prev: prevSync });
 }
 
-onMounted(() => {
-  const layerCount = toLayers(props.data).length;
+function createSeries(data: BandData): void {
+  layerCount = toLayers(data).length;
   const id = chart.addSeries(BandSeriesDef, {
     ...props.options,
     scale: props.scale,
@@ -52,8 +53,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(props.data);
 });
 
 onUnmounted(() => {
@@ -66,6 +71,14 @@ watch(
     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/BarSeries.vue

@@ -32,13 +32,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 +49,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(props.data);
 });
 
 onUnmounted(() => {
@@ -62,6 +67,14 @@ watch(
     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/ChartContainer.vue

@@ -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/LineSeries.vue

@@ -32,13 +32,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 +49,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(props.data);
 });
 
 onUnmounted(() => {
@@ -62,6 +67,14 @@ watch(
     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/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>(() => {