{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "trade-chart", "title": "Trade Chart", "description": "A professional candlestick chart using lightweight-charts for trading interfaces.", "dependencies": [ "lightweight-charts" ], "files": [ { "path": "src/registry/sol/trade-chart.tsx", "content": "\"use client\";\n\nimport type {\n CandlestickData,\n CandlestickSeriesPartialOptions,\n DeepPartial,\n TimeChartOptions,\n} from \"lightweight-charts\";\nimport { CandlestickSeries, ColorType, createChart } from \"lightweight-charts\";\nimport React from \"react\";\n\ninterface TradeChartProps {\n data: CandlestickData[];\n visibleBars?: number;\n className?: string;\n chartOptions?: DeepPartial;\n seriesOptions?: DeepPartial;\n}\n\nconst LIGHT_COLORS = {\n background: \"rgb(255, 255, 255)\",\n foreground: \"rgb(37, 37, 37)\",\n border: \"rgb(235, 235, 235)\",\n mutedForeground: \"rgb(142, 142, 142)\",\n};\n\nconst DARK_COLORS = {\n background: \"rgb(37, 37, 37)\",\n foreground: \"rgb(251, 251, 251)\",\n border: \"rgba(255, 255, 255, 0.1)\",\n mutedForeground: \"rgb(180, 180, 180)\",\n};\n\nconst TradeChart = ({\n data,\n visibleBars,\n className = \"h-[320px] w-full\",\n chartOptions,\n seriesOptions,\n}: TradeChartProps) => {\n const containerRef = React.useRef(null);\n const chartRef = React.useRef | null>(null);\n const [isDark, setIsDark] = React.useState(() => {\n if (typeof window === \"undefined\") return false;\n return document.documentElement.classList.contains(\"dark\");\n });\n\n // Watch for theme changes on class\n React.useEffect(() => {\n const observer = new MutationObserver(() => {\n setIsDark(document.documentElement.classList.contains(\"dark\"));\n });\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"class\"],\n });\n return () => observer.disconnect();\n }, []);\n\n // Stable serialized keys so inline object literals don't cause re-renders\n const chartOptionsKey = JSON.stringify(chartOptions);\n const seriesOptionsKey = JSON.stringify(seriesOptions);\n\n React.useEffect(() => {\n if (!containerRef.current) return;\n\n const parsedChartOptions = chartOptionsKey\n ? (JSON.parse(chartOptionsKey) as DeepPartial)\n : undefined;\n const parsedSeriesOptions = seriesOptionsKey\n ? (JSON.parse(\n seriesOptionsKey,\n ) as DeepPartial)\n : undefined;\n\n const colors = isDark ? DARK_COLORS : LIGHT_COLORS;\n\n const defaultChartOptions: DeepPartial = {\n layout: {\n textColor: colors.foreground,\n background: {\n type: ColorType.Solid as const,\n color: colors.background,\n },\n fontFamily: \"var(--font-geist-sans)\",\n },\n grid: {\n vertLines: { color: colors.border, style: 1 },\n horzLines: { color: colors.border, style: 1 },\n },\n crosshair: {\n vertLine: {\n color: colors.mutedForeground,\n width: 1,\n style: 3,\n },\n horzLine: {\n color: colors.mutedForeground,\n width: 1,\n style: 3,\n },\n },\n rightPriceScale: { borderColor: colors.border },\n timeScale: { borderColor: colors.border, timeVisible: true },\n autoSize: true,\n ...parsedChartOptions,\n };\n\n chartRef.current = createChart(containerRef.current, defaultChartOptions);\n\n const candlestick = chartRef.current.addSeries(CandlestickSeries, {\n borderVisible: false,\n ...parsedSeriesOptions,\n });\n candlestick.setData(data);\n\n if (visibleBars && data.length > visibleBars) {\n chartRef.current.timeScale().setVisibleLogicalRange({\n from: data.length - visibleBars - 0.5,\n to: data.length - 0.5,\n });\n } else {\n chartRef.current.timeScale().fitContent();\n }\n\n return () => {\n chartRef.current?.remove();\n };\n }, [data, visibleBars, isDark, chartOptionsKey, seriesOptionsKey]);\n\n return
;\n};\n\nexport type { TradeChartProps };\nexport { TradeChart };\n", "type": "registry:component", "target": "components/sol/trade-chart.tsx" } ], "type": "registry:component" }