line-chart-draw

1import { useId } from "react";
2import { getLength, getPointAtLength } from "@remotion/paths";
3import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
4import {
5  buildAreaPath,
6  buildLinePath,
7  buildSmoothPath,
8  formatAxisValue,
9  getPlotArea,
10  niceDomain,
11  plotPoints,
12  type ChartPoint,
13} from "@/remotion/lib/chart-utils";
14import { EASING } from "@/remotion/lib/motion-tokens";
15import { getPathDrawStyles } from "@/remotion/lib/path-utils";
16 
17export type LineChartDrawProps = {
18  points: ChartPoint[];
19  /** Drawing width. Defaults to the composition width. */
20  width?: number;
21  /** Drawing height. Defaults to 40% of the composition height. */
22  height?: number;
23  color?: string;
24  strokeWidth?: number;
25  /** Cardinal spline through the points, or straight segments. */
26  variant?: "smooth" | "linear";
27  /** Gridlines and value labels down the left gutter. */
28  showAxis?: boolean;
29  /** Category labels under the plot, read from `point.label`. */
30  showXLabels?: boolean;
31  /** Gradient fill under the line, wiped in with the draw. */
32  showArea?: boolean;
33  /** Dot deposited on each data point as the line passes it. */
34  showDots?: boolean;
35  /** Glowing dot riding the tip of the line while it draws. */
36  showHead?: boolean;
37  /** Value callout pinned to the final point once the draw lands. */
38  showEndLabel?: boolean;
39  /**
40   * Anchor the value axis at zero. Turn it off for sparklines, where the shape
41   * of the recent range matters more than its distance from zero.
42   */
43  includeZero?: boolean;
44  /** Formats axis ticks and the end label. */
45  valueFormatter?: (value: number) => string;
46  /** Text colour for axis and category labels. */
47  labelColor?: string;
48  gridColor?: string;
49  /** Ink behind the dots — match the surface the chart sits on. */
50  surfaceColor?: string;
51  durationInFrames?: number;
52  delayInFrames?: number;
53  /** Frame override — pass the parent frame inside a `<Sequence>`. */
54  frame?: number;
55};
56 
57const clamp01 = (value: number) => Math.min(1, Math.max(0, value));
58 
59/**
60 * A line chart that draws itself on.
61 *
62 * The line, its fill, gridlines and labels are all projected from one plot
63 * rectangle (see `chart-utils`), so the geometry stays locked together at any
64 * size. The draw is a single progress value: the stroke evolves along its own
65 * length, the fill is wiped by a clip rect, and each dot lands as the tip
66 * passes it — one gesture instead of several animations that merely overlap.
67 */
68// … truncated