@wick-charts/react 0.3.5 → 0.4.0

package/src/ui/YAxis.tsx

@@ -1,16 +1,9 @@
 import { useLayoutEffect, useRef } from 'react';
 
-import { resolveAxisFontSize, resolveAxisTextColor, type ValueFormatter } from '@wick-charts/core';
+import { type ValueFormatter, mountAxisLabels } from '@wick-charts/core';
 
 import { useChartInstance } from '../context';
 import { useYRange } from '../store-bridge';
-import { AXIS_LABEL_CLEANUP_MS, AXIS_LABEL_FADE_CSS } from './axisFade';
-
-interface TrackedTick {
-  opacity: number;
-  addedAt: number;
-  fadedAt?: number;
-}
 
 export interface YAxisProps {
   /**
@@ -29,7 +22,9 @@ export interface YAxisProps {
 
 export function YAxis({ format, labelCount, minLabelSpacing }: YAxisProps = {}) {
   const chart = useChartInstance();
-  useYRange(chart); // subscribe to viewport changes so ticks re-render
+  useYRange(chart);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   // Route the prop through yScale so the *same* formatter drives every
   // surface that reads `yScale.formatY()` (Crosshair, YLabel fallback).
@@ -50,42 +45,16 @@ export function YAxis({ format, labelCount, minLabelSpacing }: YAxisProps = {})
     };
   }, [chart, labelCount, minLabelSpacing]);
 
-  const theme = chart.getTheme();
-  const currentTicks = chart.yScale.niceTickValues();
-  const currentSet = new Set(currentTicks);
-
-  const mapRef = useRef<Map<number, TrackedTick>>(new Map());
-  const map = mapRef.current;
-  const now = performance.now();
-
-  for (const p of currentTicks) {
-    if (!map.has(p)) {
-      map.set(p, { opacity: 1, addedAt: now });
-    } else {
-      map.get(p)!.opacity = 1;
-    }
-  }
-
-  for (const [p, entry] of map) {
-    if (!currentSet.has(p)) {
-      if (entry.opacity !== 0) {
-        entry.opacity = 0;
-        entry.fadedAt = now;
-      }
-    }
-  }
-
-  // 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 > AXIS_LABEL_CLEANUP_MS) {
-      map.delete(p);
-    }
-  }
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (container === null) return;
 
-  const allTicks = Array.from(map.entries());
+    return mountAxisLabels({ chart, container, axis: 'y' });
+  }, [chart]);
 
   return (
     <div
+      ref={containerRef}
       style={{
         position: 'absolute',
         right: 0,
@@ -94,31 +63,6 @@ export function YAxis({ format, labelCount, minLabelSpacing }: YAxisProps = {})
         width: chart.yAxisWidth,
         pointerEvents: 'none',
       }}
-    >
-      {allTicks.map(([price, entry]) => {
-        const y = chart.yScale.valueToY(price);
-        return (
-          <span
-            key={price}
-            style={{
-              position: 'absolute',
-              right: 8,
-              top: y,
-              transform: 'translateY(-50%)',
-              color: resolveAxisTextColor(theme, 'y'),
-              fontSize: resolveAxisFontSize(theme, 'y'),
-              fontFamily: theme.typography.fontFamily,
-              fontVariantNumeric: 'tabular-nums',
-              userSelect: 'none',
-              opacity: entry.opacity,
-              transition: AXIS_LABEL_FADE_CSS,
-              willChange: 'opacity',
-            }}
-          >
-            {chart.yScale.formatY(price)}
-          </span>
-        );
-      })}
-    </div>
+    />
   );
 }

package/src/ui/axisFade.ts

@@ -1,23 +0,0 @@
-/**
- * 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;