Macbook
111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import type { Timeframe } from '../types';
|
|
import TimezonePicker from './TimezonePicker';
|
|
|
|
interface BottomBarProps {
|
|
timeframe: Timeframe;
|
|
logScale: boolean;
|
|
percentScale: boolean;
|
|
showGrid: boolean;
|
|
lastTime: number;
|
|
displayTimezone: string;
|
|
onTimezoneChange: (tz: string) => void;
|
|
onTimeframe: (t: Timeframe) => void;
|
|
onLogScale: () => void;
|
|
onPercentScale: () => void;
|
|
onAutoScale: () => void;
|
|
onFitContent: () => void;
|
|
onToggleGrid: () => void;
|
|
}
|
|
|
|
const PERIODS: { label: string; tf: Timeframe }[] = [
|
|
{ label: '1M', tf: '1M' },
|
|
{ label: '1W', tf: '1W' },
|
|
{ label: '1D', tf: '1D' },
|
|
{ label: '4h', tf: '4h' },
|
|
{ label: '1h', tf: '1h' },
|
|
{ label: '30m',tf: '30m' },
|
|
{ label: '15m',tf: '15m' },
|
|
{ label: '10m',tf: '10m' },
|
|
{ label: '5m', tf: '5m' },
|
|
{ label: '3m', tf: '3m' },
|
|
{ label: '1m', tf: '1m' },
|
|
];
|
|
|
|
const IcCalendar = () => (
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.3">
|
|
<rect x="1" y="3" width="12" height="10" rx="1"/>
|
|
<line x1="1" y1="6" x2="13" y2="6"/>
|
|
<line x1="4" y1="1" x2="4" y2="4"/>
|
|
<line x1="10" y1="1" x2="10" y2="4"/>
|
|
</svg>
|
|
);
|
|
|
|
const IcGrid = () => (
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
|
|
<rect x="1" y="1" width="12" height="12" rx="1"/>
|
|
<line x1="5" y1="1" x2="5" y2="13"/>
|
|
<line x1="9" y1="1" x2="9" y2="13"/>
|
|
<line x1="1" y1="5" x2="13" y2="5"/>
|
|
<line x1="1" y1="9" x2="13" y2="9"/>
|
|
</svg>
|
|
);
|
|
|
|
const BottomBar: React.FC<BottomBarProps> = ({
|
|
timeframe, logScale, percentScale, showGrid, lastTime,
|
|
displayTimezone, onTimezoneChange,
|
|
onTimeframe, onLogScale, onPercentScale, onAutoScale, onFitContent, onToggleGrid,
|
|
}) => {
|
|
return (
|
|
<div className="tv-bottom-bar">
|
|
<div className="tv-period-group">
|
|
{PERIODS.map(p => (
|
|
<button
|
|
key={p.label}
|
|
className={`tv-period-btn ${timeframe === p.tf ? 'active' : ''}`}
|
|
onClick={() => onTimeframe(p.tf)}
|
|
>{p.label}</button>
|
|
))}
|
|
</div>
|
|
|
|
<button className="tv-period-btn" title="화면 맞춤 (F)" onClick={onFitContent}>
|
|
<IcCalendar />
|
|
</button>
|
|
|
|
<div className="tv-bottom-spacer" />
|
|
|
|
<TimezonePicker
|
|
variant="bar"
|
|
value={displayTimezone}
|
|
displayUnix={lastTime}
|
|
onChange={onTimezoneChange}
|
|
/>
|
|
|
|
<div className="tv-period-group tv-right-toggles">
|
|
<button
|
|
className={`tv-period-btn tv-toggle-btn ${showGrid ? 'active' : ''}`}
|
|
title={showGrid ? '그리드 숨기기' : '그리드 표시'}
|
|
onClick={onToggleGrid}
|
|
><IcGrid /></button>
|
|
<button
|
|
className={`tv-period-btn tv-toggle-btn ${percentScale ? 'active' : ''}`}
|
|
title="퍼센트(%) 스케일"
|
|
onClick={onPercentScale}
|
|
>%</button>
|
|
<button
|
|
className={`tv-period-btn tv-toggle-btn ${logScale ? 'active' : ''}`}
|
|
onClick={onLogScale}
|
|
title="로그 스케일 (L)"
|
|
>log</button>
|
|
<button
|
|
className="tv-period-btn tv-toggle-btn"
|
|
title="가격 스케일 자동 맞춤"
|
|
onClick={onAutoScale}
|
|
>auto</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BottomBar;
|