53:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:Tad31,"use client"; import { Bar as RechartsBar, BarChart as RechartsBarChart, CartesianGrid, Rectangle, ReferenceLine, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from "recharts"; import { Children, createContext, isValidElement, use, useCallback, useId, useMemo, useRef, useState, type ComponentProps, type ReactNode, } from "react"; import { type ChartConfig, ChartContainer, getColorsCount, getLoadingData, LoadingIndicator, } from "@/registry/ui/recharts-chart"; import { ChartTooltip, ChartTooltipContent, type TooltipRoundness, type TooltipVariant, } from "@/registry/ui/recharts-tooltip"; import { ChartLegend, ChartLegendContent, type ChartLegendVariant } from "@/registry/ui/recharts-legend"; import { Brush, EvilBrush, useEvilBrush, type BrushProps, type EvilBrushRange } from "@/registry/ui/recharts-brush"; import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background"; import { RectRadius } from "recharts/types/shape/Rectangle"; import { motion, useReducedMotion } from "motion/react"; // Constants const DEFAULT_BAR_RADIUS = 2; const LOADING_BAR_DATA_KEY = "loading"; const LOADING_ANIMATION_DURATION = 2000; // in milliseconds const STACK_ID = "evil-stacked"; const BAR_GROW_DURATION = 0.5; // per-bar grow-in length, in seconds const BAR_STAGGER = 0.05; // delay between consecutive bars, in seconds const REVEAL_EASE: [number, number, number, number] = [0, 0.7, 0.5, 1]; // grow-in easing type BarVariant = "default" | "hatched" | "duotone" | "duotone-reverse" | "gradient" | "stripped"; type StackType = "default" | "stacked" | "percent"; type BarLayout = "vertical" | "horizontal"; /** * Order in which bars grow into view. Recharts' own bar animation is permanently * disabled — every bar instead grows from its baseline (bottom for vertical * layout, left for horizontal), and this controls the stagger sequence. * * NOTE: the grow-in is a per-frame animation, so it is heavier than a static * chart. `"none"` opts out entirely; it is also what a device with the OS * "reduce motion" preference falls back to automatically. */ type BarAnimationType = "none" | "left-to-right" | "right-to-left" | "center-out" | "edges-in"; // ───────────────────────────────────────────────────────────────────────────── // Shared context // ───────────────────────────────────────────────────────────────────────────── /** * Shared state for every part of the chart. Lifted into so that * , , , and friends can read it without prop drilling. * Sub-components are composed freely — the provider is the single source of truth. */ type BarChartContextValue = { config: ChartConfig; // colors + labels for every series isStacked: boolean; // whether bars stack on top of each other isHorizontal: boolean; // whether bars are laid out horizontally isLoading: boolean; // whether the chart shows its loading skeleton barRadius: number; // default corner radius each inherits animationType: BarAnimationType; // default grow-in order each inherits introStartedAt: number; // timestamp the chart mounted — anchors the one-shot grow-in dataLength: number; // number of rows currently rendered selectedDataKey: string | null; // currently selected series, or null when none selectDataKey: (dataKey: string | null) => void; // sets the selected series isMouseInChart: boolean; // whether the pointer is currently over the chart }; const BarChartContext = createContext(null); // Reads the chart context, throwing a helpful error when used outside function useBarChart() { const context = use(BarChartContext); if (!context) { throw new Error("Bar chart parts (, , …) must be used within "); } return context; } // ───────────────────────────────────────────────────────────────────────────── // Root container // ───────────────────────────────────────────────────────────────────────────── // Validates that every config key also exists on the data row type type ValidateConfigKeys = { [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never; }; type EvilBarChartBaseProps< TData extends Record, TConfig extends Record, > = { config: TConfig & ValidateConfigKeys; // series colors + labels data: TData[]; // rows rendered by the chart children: ReactNode; // composed parts — , , , … className?: string; // extra classes for the chart container chartProps?: ComponentProps; // escape hatch for the raw Recharts chart stackType?: StackType; // how multiple bars combine layout?: BarLayout; // orientation of the bars barRadius?: number; // default corner radius for every animationType?: BarAnimationType; // default grow-in order for every barGap?: number; // gap between bars within the same category barCategoryGap?: number; // gap between categories of bars backgroundVariant?: BackgroundVariant; // background pattern drawn behind the chart defaultSelectedDataKey?: string | null; // series selected on first render onSelectionChange?: (selectedDataKey: string | null) => void; // fires when the selected series changes isLoading?: boolean; // shows the animated loading skeleton loadingBars?: number; // number of bars in the loading skeleton xDataKey?: keyof TData & string; // x-axis key — only needed for the footer }; type EvilBarChartProps< TData extends Record, TConfig extends Record, > = EvilBarChartBaseProps; /** * Root of the composible bar chart. Owns the data, the shared context, the * loading skeleton, and the optional zoom brush. Everything visual — axes, * grid, tooltip, legend, and the bars themselves — is composed as children, * so a consumer renders exactly the parts they need. */ export function EvilBarChart< TData extends Record, TConfig extends Record, >({ config, data, children, className, chartProps, stackType = "default", layout = "vertical", barRadius = DEFAULT_BAR_RADIUS, animationType = "left-to-right", barGap, barCategoryGap, backgroundVariant, defaultSelectedDataKey = null, onSelectionChange, isLoading = false, loadingBars, xDataKey, }: EvilBarChartProps) { const chartId = useId().replace(/:/g, ""); // colon-free id keeps CSS/SVG selectors valid // Anchors the grow-in to a fixed moment so it plays exactly once — re-renders // and Recharts' bar remounts read elapsed time from here instead of replaying. // Lazy useState stamps the time once, on the initial render only. const [introStartedAt] = useState(() => Date.now()); const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey); const [isMouseInChart, setIsMouseInChart] = useState(false); const { loadingData, onShimmerExit } = useLoadingData(isLoading, loadingBars); const { visibleData, brushProps } = useEvilBrush({ data }); // Brush is a child now (not props): pull it out of the children so // it never reaches the Recharts tree, and drive the footer from its props. const brush = useMemo(() => { // Pull the element out of the children (config-only, never rendered // into the Recharts tree); toArray also assigns stable keys to the rest. const parts = Children.toArray(children); const brushEl = parts.find((child) => isValidElement(child) && child.type === Brush); const bp = (isValidElement(brushEl) ? brushEl.props : {}) as BrushProps; return { slot: { present: isValidElement(brushEl), height: bp.height, formatLabel: bp.formatLabel, onChange: bp.onChange, }, chartChildren: parts.filter((child) => !(isValidElement(child) && child.type === Brush)), }; }, [children]); const showBrush = brush.slot.present; const isStacked = stackType === "stacked" || stackType === "percent"; const isHorizontal = layout === "horizontal"; const displayData = showBrush && !isLoading ? visibleData : data; // Updates selection state and notifies the parent const selectDataKey = useCallback( (newSelectedDataKey: string | null) => { setSelectedDataKey(newSelectedDataKey); onSelectionChange?.(newSelectedDataKey); }, [onSelectionChange], ); const contextValue = useMemo( () => ({ config, isStacked, isHorizontal, isLoading, barRadius, animationType, introStartedAt, dataLength: displayData.length, selectedDataKey, selectDataKey, isMouseInChart, }), [ config, isStacked, isHorizontal, isLoading, barRadius, animationType, introStartedAt, displayData.length, selectedDataKey, selectDataKey, isMouseInChart, ], ); return ( { brushProps.onChange(range); brush.slot.onChange?.(range); }} /> ) } > setIsMouseInChart(true)} onMouseLeave={() => setIsMouseInChart(false)} {...chartProps} > {backgroundVariant && } {brush.chartChildren} {isLoading && } ); } // ───────────────────────────────────────────────────────────────────────────── // Composible parts // ───────────────────────────────────────────────────────────────────────────── type BarProps = { dataKey: string; // series key — must exist on the data and config variant?: BarVariant; // fill style for this bar only radius?: number; // corner radius — falls back to the chart default animationType?: BarAnimationType; // grow-in order — falls back to the chart default isClickable?: boolean; // lets this bar be selected by clicking it enableHoverHighlight?: boolean; // dims this bar while another bar is hovered glowing?: boolean; // applies a soft outer glow to this bar bufferBar?: boolean; // renders the last data point as a hatched "buffer" bar barProps?: ComponentProps; // escape hatch for raw Recharts Bar props }; /** * A single bar series. Each is fully self-contained: it generates its * own gradient/pattern definitions under a unique id, so any number of bars — * each with its own variant, radius, glow, and clickability — can live in one * chart without style collisions. */ function Bar({ dataKey, variant = "default", radius, animationType, isClickable = false, enableHoverHighlight = false, glowing = false, bufferBar = false, barProps, }: BarProps) { const { config, isStacked, isHorizontal, isLoading, barRadius: defaultRadius, animationType: defaultAnimation, introStartedAt, dataLength, selectedDataKey, selectDataKey, isMouseInChart, } = useBarChart(); const id = useId().replace(/:/g, ""); // unique id scopes this bar's style defs // Devices set to "reduce motion" skip the grow-in animation entirely const shouldReduceMotion = useReducedMotion(); // The root renders the skeleton bar while loading, so real bars step aside if (isLoading) return null; const resolvedRadius = radius ?? defaultRadius; const isSelected = selectedDataKey === dataKey; // The grow-in is a per-frame animation — heavier than a static chart — so // `"none"` and the OS reduce-motion preference both opt out of it. const revealType: BarAnimationType = shouldReduceMotion ? "none" : (animationType ?? defaultAnimation); const customBarProps = { id, dataKey, variant, barRadius: resolvedRadius, glowing, bufferBar, isClickable, enableHoverHighlight, isMouseInChart, isHorizontal, introStartedAt, selectedDataKey, dataLength, onClick: () => { if (!isClickable) return; // Clicking the selected bar clears the selection, otherwise selects it selectDataKey(isSelected ? null : dataKey); }, }; return ( <> ( )} activeBar={(props: unknown) => ( // The active (hovered) bar must never re-run the grow-in animation )} {...barProps} /> {variant === "hatched" && } {variant === "duotone" && } {variant === "duotone-reverse" && ( )} {variant === "gradient" && } {variant === "stripped" && } {bufferBar && } {glowing && } ); } type XAxisProps = ComponentProps; /** * The category axis. Ships with the chart's flat default styling and forwards * every Recharts XAxis prop, so `dataKey`, `tickFormatter`, etc. are passed * straight through. Hidden automatically while the chart is loading. Resolves * its axis type from the chart layout — categorical when vertical, numeric * when the bars run horizontally. */ function XAxis({ tickLine = false, axisLine = false, tickMargin = 8, minTickGap = 8, type, ...props }: XAxisProps) { const { isLoading, isHorizontal } = useBarChart(); if (isLoading) return null; return ( ); } type YAxisProps = ComponentProps; /** * The value axis. Forwards every Recharts YAxis prop and resolves its axis type * from the chart layout — numeric when vertical, categorical when the bars run * horizontally. Hidden automatically while the chart is loading. */ function YAxis({ tickLine = false, axisLine = false, tickMargin = 8, minTickGap = 8, width = "auto", type, ...props }: YAxisProps) { const { isLoading, isHorizontal } = useBarChart(); if (isLoading) return null; return ( ); } type GridProps = ComponentProps; /** * The background grid lines. Defaults to dashed lines aligned to the value * axis based on the chart layout, and forwards every Recharts CartesianGrid * prop for full control. */ function Grid({ strokeDasharray = "3 3", vertical, horizontal, ...props }: GridProps) { const { isHorizontal } = useBarChart(); return ( ); } type TooltipProps = { variant?: TooltipVariant; // visual style of the tooltip surface roundness?: TooltipRoundness; // border-radius of the tooltip defaultIndex?: number; // data index shown by default with no hover }; /** * The hover tooltip. Reads the chart's selection from context so its content * dims unselected series. Hidden automatically while the chart is loading. */ function Tooltip({ variant, roundness, defaultIndex }: TooltipProps) { const { isLoading, selectedDataKey } = useBarChart(); if (isLoading) return null; return ( } /> ); } type LegendProps = { variant?: ChartLegendVariant; // visual style of the legend indicators align?: "left" | "center" | "right"; // horizontal placement verticalAlign?: "top" | "middle" | "bottom"; // vertical placement isClickable?: boolean; // lets each entry toggle selection of its series }; /** * The series legend. When `isClickable` is set, each entry toggles selection of * its series, driving the shared selection state read by every . */ function Legend({ variant, align = "right", verticalAlign = "top", isClickable = false, }: LegendProps) { const { selectedDataKey, selectDataKey } = useBarChart(); return ( } /> ); } // ───────────────────────────────────────────────────────────────────────────── // Custom bar shape // ───────────────────────────────────────────────────────────────────────────── // Raw geometry Recharts hands to a custom bar shape type BarShapeProps = { x?: number; y?: number; width?: number; height?: number; fill?: string; fillOpacity?: number; dataKey?: string; index?: number; [key: string]: unknown; }; // Per-series config the threads into every CustomBar render type CustomBarProps = { id: string; dataKey: string; variant: BarVariant; barRadius: number; glowing?: boolean; bufferBar?: boolean; isClickable?: boolean; enableHoverHighlight?: boolean; isMouseInChart?: boolean; isHorizontal?: boolean; animationType?: BarAnimationType; introStartedAt?: number; selectedDataKey?: string | null; isActive?: boolean; dataLength?: number; onClick?: () => void; } & BarShapeProps; /** * Custom bar shape. Renders the visible bar painted by the owning 's * variant pattern, with an invisible full-height rectangle behind it to keep * the whole column hoverable and clickable. */ const CustomBar = (props: CustomBarProps) => { const { x = 0, y = 0, width = 0, height = 0, id, dataKey, variant, barRadius, glowing, bufferBar, isClickable, enableHoverHighlight, isMouseInChart, isHorizontal = false, animationType = "none", introStartedAt = 0, selectedDataKey, isActive, dataLength = 0, onClick, } = props; const index = typeof props.index === "number" ? props.index : -1; const isLastBar = bufferBar && dataLength > 0 && index === dataLength - 1; const isStripped = variant === "stripped"; const grow = getBarGrowAnimation(animationType, index, dataLength, isHorizontal, introStartedAt); const fill = isLastBar ? `url(#${id}-buffer-hatched-${dataKey})` : getVariantFill(variant, id, dataKey); const filter = glowing ? `url(#${id}-bar-glow-${dataKey})` : undefined; const fillOpacity = getBarOpacity({ isClickable, selectedDataKey, dataKey, enableHoverHighlight, isMouseInChart, isActive, }); const cursorStyle = isClickable || enableHoverHighlight ? { cursor: "pointer" } : undefined; // Stripped bars round only their top corners; every other variant rounds all four const radius: RectRadius = isStripped ? [barRadius, barRadius, 0, 0] : barRadius; // The visible, painted bar — plus the stripped variant's solid top strip const visibleBar = ( <> {isStripped && ( )} ); return ( {/* Full-height invisible rect keeps the whole column hoverable/clickable */} {/* The painted bar grows in from its baseline; the hit rect above stays put */} {grow ? ( {visibleBar} ) : ( visibleBar )} ); }; /** * Builds the motion.dev grow-in animation for a single bar, or returns `null` * when the bar should render statically (`"none"`, reduced motion, an unknown * index, or — crucially — once the bar has already finished growing). * * Every bar grows from its baseline — `scaleY` from the bottom for vertical * layout, `scaleX` from the left for horizontal — and `animationType` decides * the stagger order, so the chart fills in one bar at a time. * * The intro is anchored to `introStartedAt` (stamped once when the chart * mounts) rather than to component mount. Recharts remounts every bar whenever * the chart re-renders — e.g. on hover-highlight — so a mount-based animation * would replay endlessly. Reading elapsed time instead makes it a true * one-shot: a bar past its window renders static, and a bar caught mid-grow * resumes from the progress it should already be at. */ const getBarGrowAnimation = ( animationType: BarAnimationType, index: number, dataLength: number, isHorizontal: boolean, introStartedAt: number, ) => { if (animationType === "none" || index < 0 || dataLength <= 0) return null; const lastIndex = dataLength - 1; const center = lastIndex / 2; // How many bars this one waits behind before it starts growing let step: number; switch (animationType) { case "right-to-left": step = lastIndex - index; break; case "center-out": step = Math.abs(index - center); break; case "edges-in": step = center - Math.abs(index - center); break; default: // left-to-right step = index; } const startMs = step * BAR_STAGGER * 1000; const durationMs = BAR_GROW_DURATION * 1000; const endMs = startMs + durationMs; const elapsed = Date.now() - introStartedAt; // Already finished — render static so re-renders/remounts can't replay it if (elapsed >= endMs) return null; // Resume from wherever this bar should already be: 0 before it starts, // partway through if a remount caught it mid-grow. const from = elapsed <= startMs ? 0 : (elapsed - startMs) / durationMs; const transition = { duration: (endMs - Math.max(elapsed, startMs)) / 1000, ease: REVEAL_EASE, delay: Math.max(0, startMs - elapsed) / 1000, }; // Horizontal bars grow rightward from the left edge, vertical from the bottom return isHorizontal ? { initial: { scaleX: from }, animate: { scaleX: 1 }, transition, style: { originX: 0 } } : { initial: { scaleY: from }, animate: { scaleY: 1 }, transition, style: { originY: 1 } }; }; // ───────────────────────────────────────────────────────────────────────────── // Selection + fill helpers // ───────────────────────────────────────────────────────────────────────────── // Resolves the SVG paint reference for a bar's fill based on its variant const getVariantFill = (variant: BarVariant, id: string, dataKey: string): string => { switch (variant) { case "hatched": return `url(#${id}-hatched-${dataKey})`; case "duotone": return `url(#${id}-duotone-${dataKey})`; case "duotone-reverse": return `url(#${id}-duotone-reverse-${dataKey})`; case "gradient": return `url(#${id}-gradient-${dataKey})`; case "stripped": return `url(#${id}-stripped-${dataKey})`; default: return `url(#${id}-colors-${dataKey})`; } }; // Computes bar opacity from the click selection and hover-highlight state const getBarOpacity = ({ isClickable, selectedDataKey, dataKey, enableHoverHighlight, isMouseInChart, isActive, }: { isClickable?: boolean; selectedDataKey?: string | null; dataKey: string; enableHoverHighlight?: boolean; isMouseInChart?: boolean; isActive?: boolean; }) => { const isSelectedDataKey = selectedDataKey === null || selectedDataKey === dataKey; const clickOpacity = isClickable && selectedDataKey !== null ? (isSelectedDataKey ? 1 : 0.15) : 1; // While hovering, the hovered bar keeps its click opacity and the rest dim further if (enableHoverHighlight && isMouseInChart) { return isActive ? clickOpacity : clickOpacity * 0.3; } return clickOpacity; }; // ───────────────────────────────────────────────────────────────────────────── // Style definitions — one set per , scoped to its unique id // ───────────────────────────────────────────────────────────────────────────── type StyleProps = { id: string; // unique id of the owning dataKey: string; // series key the colors belong to }; /** * Vertical top-to-bottom color gradient for a series. Always rendered — every * fill variant and the buffer-bar stroke paint from this single gradient. */ const ColorGradient = ({ id, dataKey, config }: StyleProps & { config: ChartConfig }) => { const colorsCount = getColorsCount(config[dataKey] ?? {}); return ( {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => { const offset = `${(index / (colorsCount - 1)) * 100}%`; return ( ); }) )} ); }; /** Diagonal hatched-stripe fill, masked from the series color gradient. */ const HatchedPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Hatched diagonal lines with no background fill, used for the buffer bar. */ const BufferHatchedPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Two-tone fill — a half-faded, half-solid split applied per bar bounding box. */ const DuotonePattern = ({ id, dataKey, config }: StyleProps & { config: ChartConfig }) => { const colorsCount = getColorsCount(config[dataKey] ?? {}); return ( <> {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => { const offset = `${(index / (colorsCount - 1)) * 100}%`; return ( ); }) )} ); }; /** Two-tone fill with the solid and faded halves reversed from `duotone`. */ const DuotoneReversePattern = ({ id, dataKey, config }: StyleProps & { config: ChartConfig }) => { const colorsCount = getColorsCount(config[dataKey] ?? {}); return ( <> {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => { const offset = `${(index / (colorsCount - 1)) * 100}%`; return ( ); }) )} ); }; /** Gradient fill that fades the series color from solid at the top to clear. */ const GradientPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Low-opacity body fill, paired with a solid top strip drawn by CustomBar. */ const StrippedPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Soft outer-glow filter applied to a glowing bar. */ const GlowFilter = ({ id, dataKey }: StyleProps) => { return ( ); }; // ───────────────────────────────────────────────────────────────────────────── // Loading skeleton // ───────────────────────────────────────────────────────────────────────────── // Builds bell-curve eased gradient stops for the loading shimmer const generateEasedGradientStops = ( steps: number = 17, minOpacity: number = 0.05, maxOpacity: number = 0.9, ) => { return Array.from({ length: steps }, (_, i) => { const t = i / (steps - 1); // 0 to 1 // Sine-based bell curve easing: peaks at center (t=0.5), smooth falloff at edges const eased = Math.sin(t * Math.PI) ** 2; const opacity = minOpacity + eased * (maxOpacity - minOpacity); return { offset: `${(t * 100).toFixed(0)}%`, opacity: Number(opacity.toFixed(3)) }; }); }; /** * Hook to manage loading data with pixel-perfect shimmer synchronization. * * Uses motion.dev's onUpdate callback to ensure chart data is only regenerated * when the shimmer has completely exited the visible area. This eliminates * timing drift issues from setTimeout/setInterval. */ export function useLoadingData(isLoading: boolean, loadingBars: number = 12) { const [loadingDataKey, setLoadingDataKey] = useState(false); // Callback fired by motion.dev when the shimmer exits the visible area const onShimmerExit = useCallback(() => { if (isLoading) { setLoadingDataKey((prev) => !prev); } }, [isLoading]); const loadingData = useMemo( () => getLoadingData(loadingBars, 20, 80), // loadingDataKey toggle triggers re-computation when the shimmer exits // eslint-disable-next-line react-hooks/exhaustive-deps [loadingBars, loadingDataKey], ); return { loadingData, onShimmerExit }; } /** * The skeleton bar shown while the chart is loading. Rendered by the root in * place of the real bars, paired with its own masked shimmer pattern. */ const LoadingBar = ({ chartId, onShimmerExit }: { chartId: string; onShimmerExit: () => void }) => { return ( <> ); }; /** * Animated shimmer pattern for the loading skeleton. * * The visible chart area is normalized to 0-1, the shimmer gradient has width 1, * and the pattern is 3x wide so the shimmer has buffer on both sides. The motion * rect travels x from -1 to 2; onShimmerExit fires as it crosses x=1, letting the * data swap happen while the shimmer is off-screen for a seamless loop. */ const LoadingBarPattern = ({ chartId, onShimmerExit, }: { chartId: string; onShimmerExit: () => void; }) => { const gradientStops = generateEasedGradientStops(); // 1 (left buffer) + 1 (visible) + 1 (right buffer) const patternWidth = 3; const startX = -1; const endX = 2; // Tracks the last x value to detect the exit threshold crossing const lastXRef = useRef(startX); return ( <> {gradientStops.map(({ offset, opacity }) => ( ))} { const xValue = typeof latest.x === "number" ? latest.x : startX; const lastX = lastXRef.current; // Fire once per loop, when the shimmer fully exits the visible area if (xValue >= 1 && lastX < 1) { onShimmerExit(); } lastXRef.current = xValue; }} /> ); }; // Compound API: every part hangs off the root as a static member, so a consumer // writes , , … from a single import // — no colliding named marker exports when several charts share one file. EvilBarChart.Bar = Bar; EvilBarChart.XAxis = XAxis; EvilBarChart.YAxis = YAxis; EvilBarChart.Grid = Grid; EvilBarChart.Tooltip = Tooltip; EvilBarChart.Legend = Legend; EvilBarChart.Brush = Brush; 52:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L53",null,{"namespace":"@blockdex","registryDependencies":["@evilcharts/recharts-chart","@evilcharts/recharts-tooltip","@evilcharts/recharts-legend","@evilcharts/recharts-brush","@evilcharts/recharts-background"]}]]}],null]}],["$","$L54",null,{"files":[{"path":"src/registry/charts/recharts-bar-chart.tsx","content":"$55","type":"registry:component","target":"components/evilcharts/charts/recharts-bar-chart.tsx"}],"className":"h-[70svh] min-h-80"}]]}]