recharts-brush

1"use client";
2 
3import { motion, useMotionValue, useMotionValueEvent, useSpring, useTransform } from "motion/react";
4import { ResponsiveContainer, AreaChart, Area, LineChart, Line, BarChart, Bar } from "recharts";
5import { ChartStyle, getColorsCount, type ChartConfig } from "@/registry/ui/recharts-chart";
6import { useCallback, useEffect, type ComponentProps, type FC } from "react";
7import type { MotionValue } from "motion/react";
8import { cn } from "@/lib/utils";
9import * as React from "react";
10 
11// ─── Types ──────────────────────────────────────────────────────────────────
12 
13type EvilBrushVariant = "line" | "area" | "bar";
14type CurveType = ComponentProps<typeof Area>["type"];
15 
16interface EvilBrushRange {
17  startIndex: number;
18  endIndex: number;
19}
20 
21// ─── Brush marker — the declarative `<Chart.Brush/>` child ─────────────────────
22// Renders nothing; its PRESENCE turns the brush footer on (replacing the old
23// showBrush prop) and its props carry the brush's height, handle-label
24// formatter, and range callback. Shared so every cartesian chart attaches the
25// SAME component to its root.
26 
27export interface BrushProps {
28  height?: number; // brush preview strip height in px
29  formatLabel?: (value: unknown, index: number) => string; // formats the range-handle labels
30  onChange?: (range: EvilBrushRange) => void; // fires as the range moves
31}
32 
33/** Declares the zoom brush below the chart. Presence renders it; renders nothing itself. */
34export const Brush: FC<BrushProps> = () => null;
35 
36interface EvilBrushProps {
37  /** Full dataset – always rendered in the miniature chart */
38  data: Record<string, unknown>[];
39  /** Chart config with colour definitions */
40  chartConfig: ChartConfig;
41  /** Data keys to plot (default: all keys from chartConfig) */
42  dataKeys?: string[];
43  /** X-axis data key – used for handle labels */
44  xDataKey?: string;
45  /** Visual variant of the mini chart */
46  variant?: EvilBrushVariant;
47  /** Pixel height of the brush */
48  height?: number;
49  /** Extra className */
50  className?: string;
51  /** Whether areas/bars should be stacked in the mini chart */
52  stacked?: boolean;
53  /** Stroke variant for line / area strokes in the mini chart */
54  strokeVariant?: "solid" | "dashed" | "animated-dashed";
55  /** Whether to connect null data points in line / area variants */
56// … truncated