recharts-background

1"use client";
2 
3import { ZIndexLayer } from "recharts";
4import { useId } from "react";
5 
6// ── Background Variant Types ─────────────────────────────────────────────────
7// To add a new variant:
8// 1. Add its name to the BackgroundVariant union type below
9// 2. Create a pattern component with PatternProps
10// 3. Register it in PATTERN_MAP
11 
12export type BackgroundVariant =
13  | "dots"
14  | "grid"
15  | "cross-hatch"
16  | "diagonal-lines"
17  | "plus"
18  | "falling-triangles"
19  | "4-pointed-star"
20  | "tiny-checkers"
21  | "overlapping-circles"
22  | "wiggle-lines"
23  | "bubbles";
24 
25// ── Pattern Components ───────────────────────────────────────────────────────
26 
27type PatternProps = { id: string };
28 
29const DotsPattern = ({ id }: PatternProps) => (
30  <pattern id={id} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
31    <circle className="text-border dark:text-border" cx="2" cy="2" r="1" fill="currentColor" />
32  </pattern>
33);
34 
35const GridPattern = ({ id }: PatternProps) => (
36  <pattern id={id} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
37    <path
38      className="text-border dark:text-border"
39      d="M 20 0 L 0 0 0 20"
40      fill="none"
41      stroke="currentColor"
42      strokeWidth="0.5"
43    />
44  </pattern>
45);
46 
47const CrossHatchPattern = ({ id }: PatternProps) => (
48  <pattern id={id} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
49    <path
50      className="text-border/60 dark:text-border/50"
51      d="M 0 0 L 20 20 M 20 0 L 0 20"
52      fill="none"
53      stroke="currentColor"
54      strokeWidth="0.5"
55    />
56  </pattern>
57);
58 
59const DiagonalLinesPattern = ({ id }: PatternProps) => (
60  <pattern
61    id={id}
62    x="0"
63    y="0"
64    width="6"
65    height="6"
66    patternUnits="userSpaceOnUse"
67    patternTransform="rotate(45)"
68  >
69    <line
70      className="text-border dark:text-border"
71      x1="0"
72      y1="0"
73      x2="0"
74      y2="6"
75      stroke="currentColor"
76      strokeWidth="0.5"
77    />
78  </pattern>
79);
80 
81const PlusPattern = ({ id }: PatternProps) => (
82  <pattern id={id} x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
83    <path
84      className="text-border dark:text-border"
85      d="M 8 4 L 8 12 M 4 8 L 12 8"
86      fill="none"
87      stroke="currentColor"
88      strokeWidth="0.5"
89// … truncated