Candlestick Chart

1"use client";
2 
3import { ParentSize } from "@visx/responsive";
4import { scaleLinear, scaleTime } from "@visx/scale";
5import { bisector } from "d3-array";
6import type { Transition } from "motion/react";
7import {
8  Children,
9  isValidElement,
10  memo,
11  type ReactElement,
12  type ReactNode,
13  useCallback,
14  useEffect,
15  useMemo,
16  useRef,
17  useState,
18} from "react";
19import { cn } from "@/lib/utils";
20import {
21  isClipExcludedComponent,
22  isPostOverlayComponent,
23  isUnderlayComponent,
24} from "./chart-child-passthrough";
25import { ChartProvider, type LineConfig, type Margin } from "./chart-context";
26import { shortDateFmt } from "./chart-formatters";
27import { DEFAULT_CHART_LIFECYCLE } from "./chart-phase";
28import {
29  decimateOhlcData,
30  maxRenderPointsForWidth,
31} from "./decimate-time-series";
32import { extractReferenceAreaConfigs } from "./reference-area-config";
33import { useChartInteraction } from "./use-chart-interaction";
34import { wrapSingleYScale } from "./y-axis-scales";
35 
36export interface OHLCDataPoint {
37  date: Date;
38  open: number;
39  high: number;
40  low: number;
41  close: number;
42}
43 
44export interface CandlestickChartProps {
45  /** OHLC data array */
46  data: OHLCDataPoint[];
47  /** Key in data for the x-axis (date). Default: "date" */
48  xDataKey?: string;
49  /** Chart margins */
50  margin?: Partial<Margin>;
51  /** Animation duration in milliseconds. Default: 1500 */
52  animationDuration?: number;
53  /** Motion enter transition (spring or cubic-bezier tween). */
54  enterTransition?: Transition;
55  /** Signature of motion URL state — triggers enter replay when it changes. */
56  revealSignature?: string;
57  /** Aspect ratio as "width / height". Default: "2 / 1" */
58  aspectRatio?: string;
59  /** Additional class name for the container */
60  className?: string;
61  /** Inline styles for the container (e.g. { height: 320 }) */
62  style?: React.CSSProperties;
63  /** Gap between candles as fraction of slot width (0–1). Default: 0.2. Ignored when candleWidth is set. */
64  candleGap?: number;
65  /** Fixed candle body width in pixels. If set, overrides candleGap. */
66  candleWidth?: number;
67  /** When set, xScale uses this domain instead of deriving from data. Use with brush so main chart and strip share the same scale. */
68  xDomain?: [Date, Date];
69  /** When xDomain is set, use this as the number of slots for scale padding (e.g. full data length). */
70  xDomainSlotCount?: number;
71  /** Child components (Candlestick, Grid, XAxis, YAxis, ChartTooltip, etc.) */
72  children: ReactNode;
73}
74 
75// … truncated