59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
}
|