Bar Chart

1"use client";
2 
3import { localPoint } from "@visx/event";
4import { ParentSize } from "@visx/responsive";
5import { scaleBand, scaleLinear } from "@visx/scale";
6import type { Transition } from "motion/react";
7import {
8  memo,
9  type ReactElement,
10  type ReactNode,
11  useCallback,
12  useEffect,
13  useMemo,
14  useRef,
15  useState,
16} from "react";
17import { cn } from "@/lib/utils";
18import { DEFAULT_ANIMATION_EASING } from "./animation";
19import type { BarProps } from "./bar";
20import { topSquareCenterY } from "./bar-squares-layout";
21import {
22  forEachChartChild,
23  isChartClipPassthrough,
24  isClipExcludedComponent,
25  isPostOverlayComponent,
26  isUnderlayComponent,
27  renderKeyedChartLayers,
28  resolveChartChildElement,
29} from "./chart-child-passthrough";
30import {
31  ChartProvider,
32  type LineConfig,
33  type Margin,
34  type TooltipData,
35} from "./chart-context";
36import { isGradientDefComponent, isPatternDefComponent } from "./chart-defs";
37import { shortDateFmt } from "./chart-formatters";
38import {
39  type ChartPhase,
40  type ChartStatus,
41  DEFAULT_CHART_LIFECYCLE,
42  resolveRestingChartPhase,
43} from "./chart-phase";
44import { BarLoadingSkeleton } from "./loading-sweep";
45import { extractReferenceAreaConfigs } from "./reference-area-config";
46import { useScheduledTooltip } from "./use-scheduled-tooltip";
47import {
48  buildYScalesForLines,
49  getPrimaryYScale,
50  normalizeYAxisId,
51  wrapSingleYScale,
52} from "./y-axis-scales";
53 
54/** Skeleton bars to show when `status="loading"` and `data` is empty. */
55const FALLBACK_LOADING_BARS = 12;
56 
57export type BarOrientation = "vertical" | "horizontal";
58 
59export interface BarChartProps {
60  /** Data array - each item should have an x-axis key and numeric values */
61  data: Record<string, unknown>[];
62  /** Key in data for the categorical axis. Default: "name" */
63  xDataKey?: string;
64  /** Chart margins */
65  margin?: Partial<Margin>;
66  /** Animation duration in milliseconds. Default: 1100 */
67  animationDuration?: number;
68  /** CSS easing for bar grow transitions. */
69  animationEasing?: string;
70  /** Motion enter transition (spring or cubic-bezier tween). */
71  enterTransition?: Transition;
72  /** Signature of motion URL state — triggers enter replay when it changes. */
73  revealSignature?: string;
74  /** Aspect ratio as "width / height". Default: "2 / 1" */
75  aspectRatio?: string;
76  /** Additional class name for the container */
77  className?: string;
78  /** Gap between bar groups as a fraction of band width (0-1). Default: 0.2 */
79  barGap?: number;
80// … truncated