66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import Button from '../../ui/Button';
|
|
|
|
type Props = {
|
|
timeframe: string;
|
|
onTimeframeChange: (tf: string) => void;
|
|
showIndicators: boolean;
|
|
onToggleIndicators: () => void;
|
|
showBuild: boolean;
|
|
onToggleBuild: () => void;
|
|
priceAutoScale: boolean;
|
|
onTogglePriceAutoScale: () => void;
|
|
seriesLabel: string;
|
|
isFullscreen: boolean;
|
|
onToggleFullscreen: () => void;
|
|
};
|
|
|
|
const timeframes = ['1s', '3s', '5s', '15s', '30s', '1m', '3m', '5m', '15m', '30m', '1h', '4h', '12h', '1d'] as const;
|
|
|
|
export default function ChartToolbar({
|
|
timeframe,
|
|
onTimeframeChange,
|
|
showIndicators,
|
|
onToggleIndicators,
|
|
showBuild,
|
|
onToggleBuild,
|
|
priceAutoScale,
|
|
onTogglePriceAutoScale,
|
|
seriesLabel,
|
|
isFullscreen,
|
|
onToggleFullscreen,
|
|
}: Props) {
|
|
return (
|
|
<div className="chartToolbar">
|
|
<div className="chartToolbar__group">
|
|
{timeframes.map((tf) => (
|
|
<Button
|
|
key={tf}
|
|
size="sm"
|
|
variant={tf === timeframe ? 'primary' : 'ghost'}
|
|
onClick={() => onTimeframeChange(tf)}
|
|
type="button"
|
|
>
|
|
{tf}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="chartToolbar__group">
|
|
<Button size="sm" variant={showIndicators ? 'primary' : 'ghost'} onClick={onToggleIndicators} type="button">
|
|
Indicators
|
|
</Button>
|
|
<Button size="sm" variant={showBuild ? 'primary' : 'ghost'} onClick={onToggleBuild} type="button">
|
|
Build
|
|
</Button>
|
|
<Button size="sm" variant={priceAutoScale ? 'primary' : 'ghost'} onClick={onTogglePriceAutoScale} type="button">
|
|
Auto Scale
|
|
</Button>
|
|
<Button size="sm" variant={isFullscreen ? 'primary' : 'ghost'} onClick={onToggleFullscreen} type="button">
|
|
{isFullscreen ? 'Exit' : 'Fullscreen'}
|
|
</Button>
|
|
<div className="chartToolbar__meta">{seriesLabel}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|