refactor(ui): align backtest compare controls
This commit is contained in:
parent
c429488358
commit
979983d3ef
@ -9,6 +9,7 @@ import type {
|
||||
} from '../types';
|
||||
import { parseSymbolsInput, toDateInputValue } from '../utils';
|
||||
import { BacktestResultsDashboard } from './BacktestResultsDashboard';
|
||||
import { Button, Checkbox, Input, Select } from '../../components/ui/Primitives';
|
||||
|
||||
type SourceType = 'csv' | 'json' | 'replay' | 'kraken';
|
||||
|
||||
@ -256,27 +257,30 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[11px] font-bold uppercase tracking-wider text-zinc-300">Profiles</span>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className="rounded-md bg-white/10 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-300 hover:bg-white/20"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="min-h-7 px-2 text-[10px]"
|
||||
onClick={() => setSelectedProfileIds(profiles.map((profile) => profile.id))}
|
||||
>
|
||||
Select All
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
className="rounded-md bg-white/10 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-300 hover:bg-white/20"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="min-h-7 px-2 text-[10px]"
|
||||
onClick={() => setSelectedProfileIds([])}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-h-[180px] overflow-auto">
|
||||
{profiles.map((profile) => (
|
||||
<label key={profile.id} className="flex items-center gap-2 rounded-lg border border-white/10 bg-zinc-900/60 px-2 py-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
<Checkbox
|
||||
checked={selectedProfileIds.includes(profile.id)}
|
||||
onChange={(event) => toggleProfile(profile.id, event.target.checked)}
|
||||
/>
|
||||
@ -290,20 +294,21 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Timeframe</span>
|
||||
<select
|
||||
<Select
|
||||
value={timeframe}
|
||||
onChange={(event) => setTimeframe(event.target.value as BacktestTimeframe)}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
>
|
||||
<option value="1m">1m</option>
|
||||
<option value="15m">15m</option>
|
||||
<option value="1h">1h</option>
|
||||
<option value="4h">4h</option>
|
||||
</select>
|
||||
controlSize="sm"
|
||||
options={[
|
||||
{ value: '1m', label: '1m' },
|
||||
{ value: '15m', label: '15m' },
|
||||
{ value: '1h', label: '1h' },
|
||||
{ value: '4h', label: '4h' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Historical Data Type</span>
|
||||
<select
|
||||
<Select
|
||||
value={sourceType}
|
||||
onChange={(event) => {
|
||||
const nextType = event.target.value as SourceType;
|
||||
@ -316,126 +321,131 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
|
||||
setSourceName('');
|
||||
}
|
||||
}}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
>
|
||||
<option value="kraken">Kraken Historical API</option>
|
||||
<option value="csv">CSV</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="replay">Replay JSON</option>
|
||||
</select>
|
||||
controlSize="sm"
|
||||
options={[
|
||||
{ value: 'kraken', label: 'Kraken Historical API' },
|
||||
{ value: 'csv', label: 'CSV' },
|
||||
{ value: 'json', label: 'JSON' },
|
||||
{ value: 'replay', label: 'Replay JSON' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">From</span>
|
||||
<input
|
||||
<Input
|
||||
type="date"
|
||||
value={fromDate}
|
||||
onChange={(event) => setFromDate(event.target.value)}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
controlSize="sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">To</span>
|
||||
<input
|
||||
<Input
|
||||
type="date"
|
||||
value={toDate}
|
||||
onChange={(event) => setToDate(event.target.value)}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
controlSize="sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Slippage (bps)</span>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={slippageBps}
|
||||
onChange={(event) => setSlippageBps(Number(event.target.value))}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
controlSize="sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Fee (bps)</span>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
value={feeBps}
|
||||
onChange={(event) => setFeeBps(Number(event.target.value))}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
controlSize="sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Partial Fill %</span>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={100}
|
||||
value={Math.round(partialFillPct * 100)}
|
||||
onChange={(event) => setPartialFillPct(Math.max(0.01, Math.min(1, Number(event.target.value) / 100)))}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
controlSize="sm"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Signal Fill Timing</span>
|
||||
<select
|
||||
<Select
|
||||
value={fillOnNextBar ? 'next_open' : 'same_close'}
|
||||
onChange={(event) => setFillOnNextBar(event.target.value === 'next_open')}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
>
|
||||
<option value="next_open">Next bar open</option>
|
||||
<option value="same_close">Same bar close</option>
|
||||
</select>
|
||||
controlSize="sm"
|
||||
options={[
|
||||
{ value: 'next_open', label: 'Next bar open' },
|
||||
{ value: 'same_close', label: 'Same bar close' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Intra-candle Conflict</span>
|
||||
<select
|
||||
<Select
|
||||
value={intraCandlePolicy}
|
||||
onChange={(event) => setIntraCandlePolicy(event.target.value as BacktestIntraCandlePolicy)}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
>
|
||||
<option value="ohlc_path">OHLC path</option>
|
||||
<option value="stop_loss_first">Stop-loss first</option>
|
||||
<option value="take_profit_first">Take-profit first</option>
|
||||
</select>
|
||||
controlSize="sm"
|
||||
options={[
|
||||
{ value: 'ohlc_path', label: 'OHLC path' },
|
||||
{ value: 'stop_loss_first', label: 'Stop-loss first' },
|
||||
{ value: 'take_profit_first', label: 'Take-profit first' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Trigger Resolution</span>
|
||||
<select
|
||||
<Select
|
||||
value={triggerTimeframe}
|
||||
onChange={(event) => setTriggerTimeframe(event.target.value as BacktestTriggerTimeframe)}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
>
|
||||
<option value="1m">1m trigger candles</option>
|
||||
<option value="off">Base timeframe only</option>
|
||||
</select>
|
||||
controlSize="sm"
|
||||
options={[
|
||||
{ value: '1m', label: '1m trigger candles' },
|
||||
{ value: 'off', label: 'Base timeframe only' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">End-of-Window Position Handling</span>
|
||||
<select
|
||||
<Select
|
||||
value={forceCloseAtWindowEnd ? 'force_close' : 'open_at_end'}
|
||||
onChange={(event) => setForceCloseAtWindowEnd(event.target.value === 'force_close')}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
>
|
||||
<option value="open_at_end">Mark as OPEN_AT_END (Default)</option>
|
||||
<option value="force_close">Force close at last candle</option>
|
||||
</select>
|
||||
controlSize="sm"
|
||||
options={[
|
||||
{ value: 'open_at_end', label: 'Mark as OPEN_AT_END (Default)' },
|
||||
{ value: 'force_close', label: 'Force close at last candle' },
|
||||
]}
|
||||
/>
|
||||
</label>
|
||||
{sourceType === 'kraken' ? (
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Kraken Warm-up Lookback Candles</span>
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
min={100}
|
||||
value={krakenLookbackCandles}
|
||||
onChange={(event) => setKrakenLookbackCandles(Math.max(100, Number(event.target.value || 0)))}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
controlSize="sm"
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<label className="space-y-1">
|
||||
<span className="text-[10px] uppercase tracking-wider text-zinc-400">Upload Historical File</span>
|
||||
<input
|
||||
<Input
|
||||
type="file"
|
||||
accept={sourceType === 'csv' ? '.csv,text/csv' : '.json,application/json'}
|
||||
onChange={async (event) => {
|
||||
@ -448,7 +458,7 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
|
||||
setError(uploadError.message || 'Failed to read file');
|
||||
}
|
||||
}}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-zinc-300"
|
||||
controlSize="sm"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
@ -456,8 +466,7 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<label className="flex items-center gap-2 text-xs text-zinc-300">
|
||||
<input
|
||||
type="checkbox"
|
||||
<Checkbox
|
||||
checked={useNormalizedCapital}
|
||||
onChange={(event) => setUseNormalizedCapital(event.target.checked)}
|
||||
/>
|
||||
@ -468,12 +477,12 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
|
||||
{useNormalizedCapital ? 'Normalized Capital (USD)' : 'Capital Source'}
|
||||
</span>
|
||||
{useNormalizedCapital ? (
|
||||
<input
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={normalizedCapitalUsd}
|
||||
onChange={(event) => setNormalizedCapitalUsd(Number(event.target.value))}
|
||||
className="w-full rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-white"
|
||||
controlSize="sm"
|
||||
/>
|
||||
) : (
|
||||
<div className="rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs text-zinc-400">
|
||||
@ -493,18 +502,17 @@ export const BacktestComparePanel: React.FC<BacktestComparePanelProps> = ({ prof
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => { void runCompare(); }}
|
||||
disabled={running}
|
||||
className={`w-full rounded-xl px-4 py-2 text-xs font-black uppercase tracking-wider transition-colors ${running
|
||||
? 'bg-zinc-800 text-zinc-500 cursor-not-allowed'
|
||||
: 'bg-indigo-400 text-black hover:bg-indigo-300'
|
||||
}`}
|
||||
size="lg"
|
||||
className="w-full"
|
||||
>
|
||||
{running
|
||||
? `Running compare... (${runningIndex}/${selectedProfiles.length})`
|
||||
: 'Run Strategy Comparison'}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{rows.length > 0 && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user