@wick-charts/react 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wick-charts/react",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "High-performance canvas timeseries charts for React — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
   "license": "MIT",
   "repository": {
@@ -49,7 +49,7 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@wick-charts/core": "^0.3.2"
+    "@wick-charts/core": "^0.3.4"
   },
   "scripts": {
     "build": "vite build"

package/src/ChartContainer.tsx

@@ -11,7 +11,13 @@ import {
   useState,
 } from 'react';
 
-import { type AxisConfig, ChartInstance, type ChartOptions, type ChartTheme } from '@wick-charts/core';
+import {
+  type AnimationsConfig,
+  type AxisConfig,
+  ChartInstance,
+  type ChartOptions,
+  type ChartTheme,
+} from '@wick-charts/core';
 
 type PerfOption = NonNullable<ChartOptions['perf']>;
 
@@ -74,6 +80,36 @@ export interface ChartContainerProps {
    *   the title. The chart background still spans the full container.
    */
   headerLayout?: 'overlay' | 'inline';
+  /**
+   * Chart-level animation configuration. See {@link AnimationsConfig} for the
+   * full shape.
+   *
+   * Two layers — remember which is which:
+   *
+   * - **Chart-level (this prop)** — `animations.points.{enterMs, smoothMs,
+   *   pulseMs}` and `animations.viewport.{reboundMs, yAxisMs,
+   *   inputResponseMs}`. Acts as the default for every series.
+   * - **Per-series** — `<LineSeries options={{ entryMs, smoothMs, pulseMs }}>`
+   *   (and the analogous CandlestickSeries / BarSeries options). Overrides
+   *   the chart-level default for that one series. Note the spelling:
+   *   `entryMs` per-series, `enterMs` chart-level — historical artefact,
+   *   both refer to the same animation.
+   *
+   * Resolution: per-series option wins over chart-level numeric value.
+   * Chart-level wins only when its category is explicitly `false` — that's
+   * a hard disable that overrides per-series too.
+   *
+   * Shorthands:
+   * - `true` / omitted — built-in defaults (every settling animation 250 ms,
+   *   pulse cycle 600 ms, input ease 0 / off).
+   * - `false` — disables every animation category.
+   * - `{ points: false }` / `{ viewport: false }` — disables a category.
+   *
+   * Runtime updates: changing this prop after mount calls
+   * `chart.setAnimations(...)` so the new durations take effect on the next
+   * animation / render.
+   */
+  animations?: boolean | AnimationsConfig;
   /**
    * Enable runtime performance instrumentation. Off by default.
    *
@@ -183,6 +219,7 @@ export function ChartContainer({
   grid,
   headerLayout = 'overlay',
   perf,
+  animations,
   style,
   className,
 }: ChartContainerProps) {
@@ -208,6 +245,7 @@ export function ChartContainer({
     if (interactive !== undefined) options.interactive = interactive;
     if (grid !== undefined) options.grid = grid;
     if (perfRef.current !== undefined) options.perf = perfRef.current;
+    if (animations !== undefined) options.animations = animations;
     chartRef.current = new ChartInstance(containerRef.current, options);
 
     // Note: the init path above already propagated `grid` into the chart. The
@@ -241,6 +279,16 @@ export function ChartContainer({
     }
   }, [axis?.y?.width, axis?.y?.min, axis?.y?.max, axis?.y?.visible, axis?.x?.height, axis?.x?.visible]);
 
+  useEffect(() => {
+    if (chartRef.current && animations !== undefined) {
+      chartRef.current.setAnimations(animations);
+    }
+    // Dep array is the JSON shape of the config — covers both the boolean
+    // shorthand and the full object. Cheap to stringify (the object is tiny)
+    // and lets callers pass a fresh reference each render without thrashing
+    // animator state when nothing has actually changed.
+  }, [JSON.stringify(animations)]);
+
   // Top-overlay height (title + info bar) — measured below. Declared here so
   // the padding effect can fold it into `padding.top`.
   const topOverlayRef = useRef<HTMLDivElement>(null);

package/src/index.ts

@@ -9,6 +9,7 @@
  */
 
 export type {
+  AnimationsConfig,
   AxisBound,
   AxisConfig,
   BarSeriesOptions,

package/src/ui/TimeAxis.tsx

@@ -4,6 +4,7 @@ import { formatTime, resolveAxisFontSize, resolveAxisTextColor } from '@wick-cha
 
 import { useChartInstance } from '../context';
 import { useVisibleRange } from '../store-bridge';
+import { AXIS_LABEL_CLEANUP_MS, AXIS_LABEL_FADE_CSS } from './axisFade';
 
 interface TrackedTick {
   opacity: number;
@@ -61,9 +62,11 @@ export function TimeAxis({ labelCount, minLabelSpacing }: TimeAxisProps = {}) {
     }
   }
 
-  // Clean up ticks that have finished fading (400ms CSS transition + buffer)
+  // Clean up ticks that have finished fading. Buffer = AXIS_LABEL_FADE_MS + 250
+  // (one transition + a frame margin) so the DOM node sticks around past the
+  // visible fade.
   for (const [t, entry] of map) {
-    if (entry.opacity === 0 && entry.fadedAt !== undefined && now - entry.fadedAt > 600) {
+    if (entry.opacity === 0 && entry.fadedAt !== undefined && now - entry.fadedAt > AXIS_LABEL_CLEANUP_MS) {
       map.delete(t);
     }
   }
@@ -99,7 +102,7 @@ export function TimeAxis({ labelCount, minLabelSpacing }: TimeAxisProps = {}) {
               userSelect: 'none',
               whiteSpace: 'nowrap',
               opacity: entry.opacity,
-              transition: 'opacity 0.3s ease',
+              transition: AXIS_LABEL_FADE_CSS,
               willChange: 'opacity',
             }}
           >

package/src/ui/YAxis.tsx

@@ -4,6 +4,7 @@ import { resolveAxisFontSize, resolveAxisTextColor, type ValueFormatter } from '
 
 import { useChartInstance } from '../context';
 import { useYRange } from '../store-bridge';
+import { AXIS_LABEL_CLEANUP_MS, AXIS_LABEL_FADE_CSS } from './axisFade';
 
 interface TrackedTick {
   opacity: number;
@@ -74,8 +75,9 @@ export function YAxis({ format, labelCount, minLabelSpacing }: YAxisProps = {})
     }
   }
 
+  // Cleanup buffer matches the shared AXIS_LABEL_CLEANUP_MS — see axisFade.ts.
   for (const [p, entry] of map) {
-    if (entry.opacity === 0 && entry.fadedAt !== undefined && now - entry.fadedAt > 600) {
+    if (entry.opacity === 0 && entry.fadedAt !== undefined && now - entry.fadedAt > AXIS_LABEL_CLEANUP_MS) {
       map.delete(p);
     }
   }
@@ -109,7 +111,7 @@ export function YAxis({ format, labelCount, minLabelSpacing }: YAxisProps = {})
               fontVariantNumeric: 'tabular-nums',
               userSelect: 'none',
               opacity: entry.opacity,
-              transition: 'opacity 0.3s ease',
+              transition: AXIS_LABEL_FADE_CSS,
               willChange: 'opacity',
             }}
           >

package/src/ui/axisFade.ts

@@ -0,0 +1,23 @@
+/**
+ * Axis-label fade timing — shared between {@link TimeAxis} and {@link YAxis}.
+ *
+ * The fade is a pure CSS opacity transition, not Animator-driven, because the
+ * label set itself is rebuilt on every render: a tick that "leaves" the
+ * range becomes a separate DOM node fading out while a new node fades in,
+ * and inline `transition` is the cheapest way to crossfade them without a
+ * per-tick Animator instance.
+ *
+ * The duration matches the chart-level `DEFAULT_ENTER_MS` / `streamTick` so
+ * label transitions land in lockstep with the X re-fit, Y range chase, and
+ * series live-track. Cleanup buffer leaves the node mounted past the
+ * visible fade so React doesn't unmount it mid-transition.
+ */
+
+const AXIS_LABEL_FADE_MS = 250;
+
+/** Inline `style.transition` value the axis label spans use. */
+export const AXIS_LABEL_FADE_CSS = `opacity ${AXIS_LABEL_FADE_MS / 1000}s ease`;
+
+/** Time after which a faded-out tick can be dropped from the persistent map.
+ * `2 * AXIS_LABEL_FADE_MS` — one transition plus a frame margin. */
+export const AXIS_LABEL_CLEANUP_MS = AXIS_LABEL_FADE_MS * 2;