80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
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>
|
|
);
|
|
}
|