Chart Background

1"use client";
2 
3import { motion } from "motion/react";
4import { useId, useMemo } from "react";
5import { useChartStable } from "./chart-context";
6import {
7  type PatternPresetId,
8  type PatternPresetOptions,
9  renderPatternPreset,
10} from "./pattern-preset";
11 
12export type BackgroundPatternPreset = PatternPresetId;
13 
14export interface BackgroundProps extends PatternPresetOptions {
15  /** Pattern preset. `"none"` renders nothing. */
16  pattern?: BackgroundPatternPreset;
17  /** Pattern stroke color. Default: `var(--chart-grid)` */
18  color?: string;
19  /** Apply the pattern texture to the plot area. Default: true */
20  showFill?: boolean;
21  /** Pattern fill opacity. Default: 1 */
22  opacity?: number;
23  /** Fade pattern at the left and right chart edges. Default: true */
24  fadeHorizontal?: boolean;
25  /** Fade pattern at the top and bottom chart edges. Default: true */
26  fadeVertical?: boolean;
27  /** Horizontal fade zone as % of plot width per edge. Default: 10 */
28  fadeHorizontalLength?: number;
29  /** Vertical fade zone as % of plot height per edge. Default: 10 */
30  fadeVerticalLength?: number;
31}
32 
33const BACKGROUND_ENTER_FADE_MS = 420;
34 
35function clampFadeLength(length: number): number {
36  return Math.min(45, Math.max(0, length));
37}
38 
39function fadeMaskStops(lengthPercent: number): Array<{
40  offset: string;
41  opacity: number;
42}> {
43  const edge = clampFadeLength(lengthPercent);
44  return [
45    { offset: "0%", opacity: 0 },
46    { offset: `${edge}%`, opacity: 1 },
47    { offset: `${100 - edge}%`, opacity: 1 },
48    { offset: "100%", opacity: 0 },
49  ];
50}
51 
52/** Plot-area pattern fill for charts without a grid. Renders behind series layers. */
53export function Background({
54  pattern = "diagonal",
55  color = "var(--chart-grid)",
56  scale = 1,
57  strokeWidth,
58  radius,
59  complement,
60  fill,
61  dotFill,
62  tileBackground,
63  showFill = true,
64  opacity = 1,
65  fadeHorizontal = true,
66  fadeVertical = true,
67  fadeHorizontalLength = 10,
68  fadeVerticalLength = 10,
69}: BackgroundProps) {
70  const { innerWidth, innerHeight, isLoaded, enterTransition } =
71    useChartStable();
72  const uniqueId = useId();
73  const patternId = `chart-background-${uniqueId.replace(/:/g, "")}`;
74 
75  const hStops = useMemo(
76    () => fadeMaskStops(fadeHorizontalLength),
77    [fadeHorizontalLength]
78  );
79  const vStops = useMemo(
80    () => fadeMaskStops(fadeVerticalLength),
81    [fadeVerticalLength]
82  );
83 
84  if (pattern === "none" || !showFill || innerWidth <= 0 || innerHeight <= 0) {
85    return null;
86  }
87 
88// … truncated