Add untracked chart and schema files

components/charts/primitives/chart-tooltip.tsx

@@ -0,0 +1,79 @@
+import type { TooltipContentProps, TooltipPayloadEntry } from 'recharts';
+import { formatCurrency, formatCompactCurrency } from '@/lib/format';
+import { getChartColors } from '../utils/chart-colors';
+import { isOHLCVData } from '../utils/chart-data-transformers';
+
+type ChartTooltipProps = TooltipContentProps & {
+  formatters?: {
+    price?: (value: number) => string;
+    date?: (value: string) => string;
+    volume?: (value: number) => string;
+  };
+};
+
+export function ChartTooltip(props: ChartTooltipProps) {
+  const { active, payload, label, formatters } = props;
+
+  if (!active || !payload || payload.length === 0) return null;
+
+  const colors = getChartColors();
+  const formatDate = formatters?.date || ((date: string) => new Date(date).toLocaleDateString());
+  const formatPrice = formatters?.price || formatCurrency;
+  const formatVolume = formatters?.volume || formatCompactCurrency;
+
+  const data = payload[0].payload;
+
+  return (
+    <div
+      className="min-w-[180px] rounded-xl border p-3 backdrop-blur-sm"
+      style={{
+        backgroundColor: colors.tooltipBg,
+        borderColor: colors.tooltipBorder
+      }}
+    >
+      <div className="mb-2 text-xs uppercase tracking-wider" style={{ color: colors.muted }}>
+        {formatDate(label as string)}
+      </div>
+
+      {isOHLCVData(data) ? (
+        <div className="space-y-1.5">
+          <TooltipRow label="Open" value={formatPrice(data.open)} color={colors.text} />
+          <TooltipRow label="High" value={formatPrice(data.high)} color={colors.positive} />
+          <TooltipRow label="Low" value={formatPrice(data.low)} color={colors.negative} />
+          <TooltipRow label="Close" value={formatPrice(data.close)} color={colors.text} />
+          <div className="mt-2 border-t pt-2" style={{ borderColor: colors.tooltipBorder }}>
+            <TooltipRow label="Volume" value={formatVolume(data.volume)} color={colors.muted} />
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-1.5">
+          {payload.map((entry: TooltipPayloadEntry, index: number) => (
+            <TooltipRow
+              key={index}
+              label={String(entry.name || 'Value')}
+              value={formatPrice(entry.value as number)}
+              color={entry.color || colors.text}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type TooltipRowProps = {
+  label: string;
+  value: string;
+  color: string;
+};
+
+function TooltipRow({ label, value, color }: TooltipRowProps) {
+  return (
+    <div className="flex items-center justify-between gap-4 text-xs">
+      <span style={{ color: color }}>{label}:</span>
+      <span className="font-mono font-medium" style={{ color: color }}>
+        {value}
+      </span>
+    </div>
+  );
+}