"use client"; import { Area, Brush, AreaChart as RechartsAreaChart } from "recharts"; import { AreaChart } from "@/registry/default/charts/area-chart"; import { LineChart } from "@/registry/default/charts/line-chart"; import type { BaseChartProps } from "@/registry/default/lib/chart-utils"; import { cn } from "@/registry/default/lib/utils"; export type BrushChartProps> = BaseChartProps & { chartType?: "area" | "line"; /** Rows visible at first, counted from the end. Default: all rows. */ defaultWindow?: number; /** Called when the brush moves, with the first and last visible row index. */ onRangeChange?: (range: { startIndex: number; endIndex: number }) => void; }; export function BrushChart>({ chartType = "area", defaultWindow, onRangeChange, className, children, ...chartProps }: BrushChartProps) { const { data, index, categories, indexFormatter } = chartProps; const [first] = categories; const startIndex = defaultWindow === undefined ? 0 : Math.max(data.length - defaultWindow, 0); const brush = ( { if (range.startIndex !== undefined && range.endIndex !== undefined) { onRangeChange?.({ endIndex: range.endIndex, startIndex: range.startIndex, }); } }} startIndex={startIndex} stroke="var(--border)" tickFormatter={(value) => indexFormatter ? indexFormatter(String(value)) : String(value) } travellerWidth={8} > {/* The overview inside the brush: the first series, muted. */} {first ? ( ) : null} ); // Brush texts and travellers default to fixed greys; map them to theme tokens. const brushClasses = cn( "[&_.recharts-brush-texts_text]:fill-muted-foreground [&_.recharts-brush-traveller_rect]:fill-muted-foreground", className, ); return chartType === "line" ? ( {brush} {children} ) : ( {brush} {children} ); }