Add untracked chart and schema files

components/charts/renderers/candlestick-chart-view.tsx

@@ -0,0 +1,71 @@
+import {
+  ComposedChart,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Scatter
+} from 'recharts';
+import type { ChartDataPoint } from '@/lib/types';
+import { getChartColors } from '../utils/chart-colors';
+import { ChartTooltip } from '../primitives/chart-tooltip';
+import { CandlestickShape } from '../utils/candlestick-shapes';
+import { isOHLCVData } from '../utils/chart-data-transformers';
+
+type CandlestickChartViewProps = {
+  data: ChartDataPoint[];
+  formatters?: {
+    price?: (value: number) => string;
+    date?: (value: string) => string;
+    volume?: (value: number) => string;
+  };
+};
+
+export function CandlestickChartView({
+  data,
+  formatters
+}: CandlestickChartViewProps) {
+  const colors = getChartColors();
+
+  const ohlcvData = data.filter(isOHLCVData);
+
+  if (ohlcvData.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-[color:var(--terminal-muted)]">
+        Candlestick chart requires OHLCV data
+      </div>
+    );
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <ComposedChart data={ohlcvData}>
+        <CartesianGrid strokeDasharray="2 2" stroke={colors.grid} />
+        <XAxis
+          dataKey="date"
+          stroke={colors.muted}
+          fontSize={11}
+          tickFormatter={formatters?.date}
+          minTickGap={32}
+        />
+        <YAxis
+          stroke={colors.muted}
+          fontSize={11}
+          tickFormatter={formatters?.price}
+          width={60}
+          domain={['auto', 'auto']}
+        />
+        <Tooltip
+          content={(tooltipProps) => <ChartTooltip {...tooltipProps} formatters={formatters} />}
+          cursor={{ stroke: colors.muted, strokeDasharray: '3 3' }}
+        />
+        <Scatter
+          dataKey="close"
+          shape={<CandlestickShape />}
+          isAnimationActive={false}
+        />
+      </ComposedChart>
+    </ResponsiveContainer>
+  );
+}