/** * Spectrum UI — Candlestick Chart * * OHLC candles with optional volume, hollow-up bodies, and a Motion grow-in. * Built for trading desks, token pages, and market dashboards. * * Dependencies: recharts, framer-motion, @/lib/utils */ 'use client'; import * as React from 'react'; import { motion } from 'framer-motion'; import { Bar, ComposedChart, Customized, Line, ResponsiveContainer, Tooltip, } from 'recharts'; import { cn } from '@/lib/utils'; import { BAR_GROW, BAR_STAGGER, AAPL_CANDLES, type CandlePoint, ChartFrame, ChartGlowFilter, ChartGrid, ChartLoadingBars, ChartPlotSurface, ChartXAxis, ChartYAxis, EASE_OUT, HOVER_OPACITY, HOVER_TRANSITION, HoverIndexProvider, RevealMask, SOL_CANDLES, formatPct, formatUsd, readActiveTooltipIndex, useChartId, useChartMotion, useIntroStartedAt, } from './chart-kit'; export interface SpectrumCandlestickChartProps { className?: string; data?: CandlePoint[]; showVolume?: boolean; hollowUp?: boolean; glowing?: boolean; isLoading?: boolean; } type AxisLike = { scale?: ((value: number | string) => number) & { bandwidth?: () => number }; }; type CandleLayerProps = { xAxisMap?: Record; yAxisMap?: Record; offset?: { left: number; width: number }; data?: CandlePoint[]; hollowUp?: boolean; glowing?: boolean; glowId?: string; introStartedAt: number; reduce: boolean; maskId?: string; activeIndex: number | null; }; function firstAxis(map?: Record) { if (!map) return null; return Object.values(map)[0] ?? null; } function priceAxis(map?: Record) { if (!map) return null; const axes = Object.values(map); return axes.find((axis) => axis.yAxisId !== 'volume') ?? axes[0] ?? null; } function CandleLayer({ xAxisMap, yAxisMap, offset, data = [], hollowUp = false, glowing = false, glowId, introStartedAt, reduce, maskId, activeIndex, }: CandleLayerProps) { const xAxis = firstAxis(xAxisMap); const yAxis = priceAxis(yAxisMap); const xScale = xAxis?.scale; const yScale = yAxis?.scale; if (!xScale || !yScale || !offset) return null; const band = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : offset.width / Math.max(data.length, 1); const bodyW = Math.max(3, band * 0.58); return ( {data.map((row, index) => { const x = xScale(row.date); if (!Number.isFinite(x)) return null; const cx = x + band / 2; const yHigh = yScale(row.high); const yLow = yScale(row.low); const yOpen = yScale(row.open); const yClose = yScale(row.close); if (![yHigh, yLow, yOpen, yClose].every(Number.isFinite)) return null; const up = row.close >= row.open; const color = up ? 'var(--spectrum-chart-up)' : 'var(--spectrum-chart-down)'; const bodyTop = Math.min(yOpen, yClose); const bodyH = Math.max(1, Math.abs(yClose - yOpen)); const dimmed = activeIndex != null && activeIndex !== index; // eslint-disable-next-line react-hooks/purity -- one-shot intro is anchored to mount time const elapsed = Date.now() - introStartedAt; const startMs = index * BAR_STAGGER * 1000; const durationMs = BAR_GROW * 1000; const done = reduce || elapsed >= startMs + durationMs; const from = elapsed <= startMs ? 0 : Math.min(1, (elapsed - startMs) / durationMs); const candle = ( ); if (done) { return {candle}; } return ( {candle} ); })} ); } function CandleTooltip({ active, payload, label, }: { active?: boolean; payload?: { payload?: CandlePoint }[]; label?: string; }) { if (!active || !payload?.length) { return ; } const row = payload[0]?.payload; if (!row) return null; const delta = ((row.close - row.open) / row.open) * 100; return (

{String(label)}

O {formatUsd(row.open)} H {formatUsd(row.high)} L {formatUsd(row.low)} C {formatUsd(row.close)} {formatPct(delta)} Vol {formatUsd(row.volume, true)}

); } export function CandlestickChart({ className, data = SOL_CANDLES, showVolume = false, hollowUp = false, glowing = false, isLoading = false, }: SpectrumCandlestickChartProps) { const id = useChartId('candle'); const { reduce } = useChartMotion(); const introStartedAt = useIntroStartedAt(); const [activeIndex, setActiveIndex] = React.useState(null); const maskId = `${id}-reveal`; const maxVolume = Math.max(...data.map((row) => row.volume), 1); const glowId = `${id}-glow`; const layer = React.useCallback( (props: CandleLayerProps) => ( ), [data, hollowUp, glowing, glowId, introStartedAt, reduce, maskId, activeIndex], ); return ( {isLoading ? ( ) : ( { const next = readActiveTooltipIndex(state); setActiveIndex((current) => (current === next ? current : next)); }} onMouseLeave={() => setActiveIndex(null)} > {glowing ? : null} formatUsd(value, true)} width={48} /> {showVolume ? ( ) : null} } /> {showVolume ? ( ) : null} )} ); } export function DefaultCandlestickChart(props: SpectrumCandlestickChartProps) { return ; } export function StockCandlestickChart(props: SpectrumCandlestickChartProps) { return ; } export function VolumeCandlestickChart(props: SpectrumCandlestickChartProps) { return ; } export function HollowCandlestickChart(props: SpectrumCandlestickChartProps) { return ; } export function GlowingCandlestickChart(props: SpectrumCandlestickChartProps) { return ; }

Candlestick Chart

SOL / USD

Installation

AAPL

showVolume

hollowUp