Chart Animation

1"use client";
2 
3import type { Transition } from "motion/react";
4import { motion } from "motion/react";
5import { clipRevealTransition } from "./animation";
6 
7export type ChartRevealClipMode = "reveal" | "conceal";
8 
9export interface ChartRevealClipProps {
10  clipPathId: string;
11  height: number;
12  targetWidth: number;
13  enterTransition?: Transition;
14  /** Bumps when motion settings change to replay the reveal. */
15  revealEpoch: number;
16  /** Extra inset around the clip rect so edge glyphs are not cut off. */
17  padding?: number;
18  /** When false, clip stays at full width (no grow animation). */
19  animating?: boolean;
20  /** Reveal grows 0 → full; conceal shrinks full → 0 (ready → loading). */
21  mode?: ChartRevealClipMode;
22  /** Called when a conceal animation finishes. */
23  onComplete?: () => void;
24}
25 
26/**
27 * Left-to-right clip reveal for cartesian series.
28 * Grows clip rect width from 0 → full (true LTR; scaleX is avoided — it reveals from center).
29 */
30export function ChartRevealClip({
31  clipPathId,
32  height,
33  targetWidth,
34  enterTransition,
35  revealEpoch,
36  padding = 0,
37  animating = true,
38  mode = "reveal",
39  onComplete,
40}: ChartRevealClipProps) {
41  const transition = clipRevealTransition(enterTransition);
42  const paddedWidth = Math.max(0, targetWidth + padding * 2);
43  const paddedHeight = height + padding * 2;
44 
45  if (!animating) {
46    return (
47      <clipPath id={clipPathId}>
48        <rect
49          height={paddedHeight}
50          width={paddedWidth}
51          x={-padding}
52          y={-padding}
53        />
54      </clipPath>
55    );
56  }
57 
58  if (mode === "conceal") {
59    // Mirror the LTR reveal: advance the clip's left edge rightward while width
60    // shrinks (same geometry as `LineLoadingPulseStroke` exit half-cycle).
61    const rightEdge = -padding + paddedWidth;
62 
63    return (
64      <clipPath id={clipPathId}>
65        <motion.rect
66          animate={{ width: 0, x: rightEdge }}
67          height={paddedHeight}
68          initial={{ width: paddedWidth, x: -padding }}
69          key={`conceal-${revealEpoch}`}
70          onAnimationComplete={() => onComplete?.()}
71          transition={transition}
72          y={-padding}
73        />
74      </clipPath>
75    );
76  }
77 
78  return (
79    <clipPath id={clipPathId}>
80      <motion.rect
81        animate={{ width: paddedWidth }}
82        height={paddedHeight}
83        initial={{ width: 0 }}
84        key={`reveal-${revealEpoch}`}
85        transition={transition}
86        width={paddedWidth}
87        x={-padding}
88        y={-padding}
89// … truncated