Add untracked chart and schema files

2026-03-13 00:11:59 -04:00
parent 8a8c4f7177
commit 01199d489a
16 changed files with 1794 additions and 0 deletions
--- a/components/charts/primitives/volume-indicator.tsx
+++ b/components/charts/primitives/volume-indicator.tsx
@@ -0,0 +1,58 @@
+import { BarChart, Bar, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import type { OHLCVDataPoint } from '@/lib/types';
+import { getChartColors } from '../utils/chart-colors';
+import { formatCompactCurrency } from '@/lib/format';
+
+type VolumeIndicatorProps = {
+  data: OHLCVDataPoint[];
+  height?: number;
+  formatters?: {
+    volume?: (value: number) => string;
+  };
+};
+
+export function VolumeIndicator({
+  data,
+  height = 80,
+  formatters
+}: VolumeIndicatorProps) {
+  const colors = getChartColors();
+  if (data.length === 0) return null;
+
+  const formatVolume = formatters?.volume || formatCompactCurrency;
+
+  return (
+    <div style={{ height: `${height}px`, width: '100%' }} className="mt-2">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data}>
+          <YAxis
+            orientation="right"
+            tickFormatter={formatVolume}
+            stroke={colors.muted}
+            fontSize={10}
+            width={60}
+          />
+          <Tooltip
+            formatter={(value) => [
+              formatVolume(typeof value === 'number' ? value : Number(value ?? 0)),
+              'Volume'
+            ]}
+            labelFormatter={(label) => `Date: ${label}`}
+            contentStyle={{
+              backgroundColor: colors.tooltipBg,
+              border: `1px solid ${colors.tooltipBorder}`,
+              borderRadius: '0.75rem',
+              fontSize: '0.75rem'
+            }}
+          />
+          <Bar
+            dataKey="volume"
+            fill={colors.volume}
+            opacity={0.3}
+            isAnimationActive={data.length <= 500}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}