reorganized data files and enhance backtesting structure, monte carlo sim
This commit is contained in:
moen0
@@ -1,184 +0,0 @@
|
||||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
+585
-393
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,942 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import {
|
||||
CandlestickSeries,
|
||||
LineSeries,
|
||||
createChart,
|
||||
createSeriesMarkers,
|
||||
} from 'lightweight-charts';
|
||||
|
||||
const CHART_THEME = {
|
||||
layout: { background: { color: '#0a0a0a' }, textColor: '#737373', fontFamily: 'Inter, system-ui, sans-serif', fontSize: 11 },
|
||||
grid: { vertLines: { color: '#1a1a1a' }, horzLines: { color: '#1a1a1a' } },
|
||||
crosshair: {
|
||||
vertLine: { color: 'rgba(250, 250, 250, 0.15)', labelBackgroundColor: '#262626' },
|
||||
horzLine: { color: 'rgba(250, 250, 250, 0.15)', labelBackgroundColor: '#262626' },
|
||||
},
|
||||
rightPriceScale: { borderColor: '#262626', textColor: '#737373' },
|
||||
timeScale: { borderColor: '#262626', timeVisible: true, secondsVisible: false },
|
||||
};
|
||||
|
||||
const TIMEFRAMES = [
|
||||
{ label: '1m', value: 1 },
|
||||
{ label: '3m', value: 3 },
|
||||
{ label: '5m', value: 5 },
|
||||
{ label: '15m', value: 15 },
|
||||
{ label: '30m', value: 30 },
|
||||
{ label: '1H', value: 60 },
|
||||
];
|
||||
|
||||
const RR_OPTIONS = [1, 1.5, 2, 2.5, 3];
|
||||
const SESSIONS = ['london', 'new_york', 'asian', 'london_close', 'london_ny_overlap', 'all'];
|
||||
const DAYS = [
|
||||
{ label: 'Mon', value: 0 },
|
||||
{ label: 'Tue', value: 1 },
|
||||
{ label: 'Wed', value: 2 },
|
||||
{ label: 'Thu', value: 3 },
|
||||
{ label: 'Fri', value: 4 },
|
||||
];
|
||||
const STARTING_BALANCE = 10000;
|
||||
const PRESETS_KEY = 'nq_backtest_presets';
|
||||
const RESULT_HISTORY_KEY = 'nq_backtest_recent_results';
|
||||
|
||||
function formatMoney(v) {
|
||||
return v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
function calculateProfitFactor(trades) {
|
||||
const winners = trades.filter((trade) => trade.pnl > 0).reduce((sum, trade) => sum + trade.pnl, 0);
|
||||
const losers = Math.abs(trades.filter((trade) => trade.pnl < 0).reduce((sum, trade) => sum + trade.pnl, 0));
|
||||
if (losers <= 0) return winners > 0 ? 999 : 0;
|
||||
return Number((winners / losers).toFixed(2));
|
||||
}
|
||||
|
||||
function calculateMaxDrawdown(trades, startingBalance = STARTING_BALANCE) {
|
||||
if (!trades.length) return 0;
|
||||
let equity = startingBalance;
|
||||
let peak = startingBalance;
|
||||
let maxDrawdown = 0;
|
||||
trades
|
||||
.slice()
|
||||
.sort((a, b) => new Date(a.exit_time) - new Date(b.exit_time))
|
||||
.forEach((trade) => {
|
||||
equity += trade.pnl;
|
||||
if (equity > peak) peak = equity;
|
||||
const drawdown = ((peak - equity) / peak) * 100;
|
||||
if (drawdown > maxDrawdown) maxDrawdown = drawdown;
|
||||
});
|
||||
return Number(maxDrawdown.toFixed(2));
|
||||
}
|
||||
|
||||
function loadPresets() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(PRESETS_KEY) || '{}');
|
||||
} catch { return {}; }
|
||||
}
|
||||
|
||||
function savePresets(presets) {
|
||||
localStorage.setItem(PRESETS_KEY, JSON.stringify(presets));
|
||||
}
|
||||
|
||||
function loadRecentResults() {
|
||||
try {
|
||||
const parsed = JSON.parse(localStorage.getItem(RESULT_HISTORY_KEY) || '[]');
|
||||
return Array.isArray(parsed) ? parsed.slice(0, 5) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveRecentResults(results) {
|
||||
localStorage.setItem(RESULT_HISTORY_KEY, JSON.stringify(results.slice(0, 5)));
|
||||
}
|
||||
|
||||
function NumberInput({ label, value, onChange, min, max, step = 1 }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">{label}</label>
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
onChange={(e) => onChange(Number(e.target.value))}
|
||||
className="w-full border border-[#262626] bg-black text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToggleInput({ label, value, onChange, color = '#10b981' }) {
|
||||
return (
|
||||
<button
|
||||
className={`flex items-center gap-2 px-3 py-2 text-[12px] font-mono border transition-colors ${
|
||||
value ? 'border-[#404040] text-[#fafafa]' : 'border-[#262626] text-[#525252]'
|
||||
}`}
|
||||
onClick={() => onChange(!value)}
|
||||
>
|
||||
<span className="w-1.5 h-1.5" style={{ background: value ? color : '#525252' }} />
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeader({ title, subtitle }) {
|
||||
return (
|
||||
<div className="mb-4 mt-2">
|
||||
<h3 className="text-[14px] font-semibold tracking-tight">{title}</h3>
|
||||
{subtitle && <p className="text-[11px] text-[#525252] font-mono mt-0.5">{subtitle}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BacktestingTab({ datasets = [], selectedDataset, onDatasetChange, onBacktestComplete }) {
|
||||
const chartContainerRef = useRef(null);
|
||||
const equityChartRef = useRef(null);
|
||||
const chartRef = useRef(null);
|
||||
const equityChartObjRef = useRef(null);
|
||||
const candleSeriesRef = useRef(null);
|
||||
const equitySeriesRef = useRef(null);
|
||||
const markersRef = useRef(null);
|
||||
const progressIntervalRef = useRef(null);
|
||||
const progressResetTimeoutRef = useRef(null);
|
||||
|
||||
const [chartsReady, setChartsReady] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [results, setResults] = useState(null);
|
||||
const [autoRun, setAutoRun] = useState(false);
|
||||
const [progressPct, setProgressPct] = useState(0);
|
||||
const [mcLoading, setMcLoading] = useState(false);
|
||||
const [mcErrorMessage, setMcErrorMessage] = useState('');
|
||||
const [mcResult, setMcResult] = useState(null);
|
||||
const [mcRuns, setMcRuns] = useState(500);
|
||||
const [mcVariationPct, setMcVariationPct] = useState(15);
|
||||
const [mcPriceNoisePct, setMcPriceNoisePct] = useState(0);
|
||||
const [mcSlippage, setMcSlippage] = useState(0);
|
||||
const [mcSpread, setMcSpread] = useState(0);
|
||||
const [mcRuinDrawdownPct, setMcRuinDrawdownPct] = useState(20);
|
||||
const [mcShuffleTrades, setMcShuffleTrades] = useState(true);
|
||||
|
||||
const [timeframe, setTimeframe] = useState(1);
|
||||
const [riskReward, setRiskReward] = useState(2.5);
|
||||
const [lookback, setLookback] = useState(7);
|
||||
const [atrMult, setAtrMult] = useState(2.5);
|
||||
const [session, setSession] = useState('london');
|
||||
|
||||
const [useFvg, setUseFvg] = useState(true);
|
||||
const [useOb, setUseOb] = useState(true);
|
||||
const [useLiquiditySweep, setUseLiquiditySweep] = useState(true);
|
||||
const [obMaxAge, setObMaxAge] = useState(50);
|
||||
const [proximityPct, setProximityPct] = useState(0.5);
|
||||
const [sweepLookback, setSweepLookback] = useState(5);
|
||||
|
||||
const [minGapSize, setMinGapSize] = useState(0.0);
|
||||
const [impulseMultiplier, setImpulseMultiplier] = useState(0.0);
|
||||
const [requireUnmitigatedFvg, setRequireUnmitigatedFvg] = useState(true);
|
||||
const [requireBosConfluence, setRequireBosConfluence] = useState(false);
|
||||
|
||||
const [minObSize, setMinObSize] = useState(0.0);
|
||||
const [requireFvgObConfluence, setRequireFvgObConfluence] = useState(false);
|
||||
|
||||
const [asianSweepOnly, setAsianSweepOnly] = useState(false);
|
||||
const [useBreakEven, setUseBreakEven] = useState(false);
|
||||
const [beTriggerRr, setBeTriggerRr] = useState(1.0);
|
||||
const [usePartialTp, setUsePartialTp] = useState(false);
|
||||
const [partialTpRr, setPartialTpRr] = useState(1.0);
|
||||
const [partialTpPercent, setPartialTpPercent] = useState(50);
|
||||
|
||||
const [dayFilter, setDayFilter] = useState([0, 1, 2, 3, 4]);
|
||||
|
||||
const [maxDailyLoss, setMaxDailyLoss] = useState(0.0);
|
||||
const [maxConsecutiveLosses, setMaxConsecutiveLosses] = useState(0);
|
||||
|
||||
// Presets
|
||||
const [presets, setPresets] = useState(loadPresets);
|
||||
const [presetName, setPresetName] = useState('');
|
||||
const [showPresets, setShowPresets] = useState(false);
|
||||
const [recentResults, setRecentResults] = useState(loadRecentResults);
|
||||
|
||||
const getSettings = () => ({
|
||||
timeframe, riskReward, lookback, atrMult, session,
|
||||
useFvg, useOb, useLiquiditySweep, obMaxAge, proximityPct, sweepLookback,
|
||||
minGapSize, impulseMultiplier, requireUnmitigatedFvg, requireBosConfluence,
|
||||
minObSize, requireFvgObConfluence, asianSweepOnly, dayFilter,
|
||||
useBreakEven, beTriggerRr,
|
||||
usePartialTp, partialTpRr, partialTpPercent,
|
||||
maxDailyLoss, maxConsecutiveLosses,
|
||||
});
|
||||
|
||||
const applySettings = (s) => {
|
||||
if (s.timeframe !== undefined) setTimeframe(s.timeframe);
|
||||
if (s.riskReward !== undefined) setRiskReward(s.riskReward);
|
||||
if (s.lookback !== undefined) setLookback(s.lookback);
|
||||
if (s.atrMult !== undefined) setAtrMult(s.atrMult);
|
||||
if (s.session !== undefined) setSession(s.session);
|
||||
if (s.useFvg !== undefined) setUseFvg(s.useFvg);
|
||||
if (s.useOb !== undefined) setUseOb(s.useOb);
|
||||
if (s.useLiquiditySweep !== undefined) setUseLiquiditySweep(s.useLiquiditySweep);
|
||||
if (s.obMaxAge !== undefined) setObMaxAge(s.obMaxAge);
|
||||
if (s.proximityPct !== undefined) setProximityPct(s.proximityPct);
|
||||
if (s.sweepLookback !== undefined) setSweepLookback(s.sweepLookback);
|
||||
if (s.minGapSize !== undefined) setMinGapSize(s.minGapSize);
|
||||
if (s.impulseMultiplier !== undefined) setImpulseMultiplier(s.impulseMultiplier);
|
||||
if (s.requireUnmitigatedFvg !== undefined) setRequireUnmitigatedFvg(s.requireUnmitigatedFvg);
|
||||
if (s.requireBosConfluence !== undefined) setRequireBosConfluence(s.requireBosConfluence);
|
||||
if (s.minObSize !== undefined) setMinObSize(s.minObSize);
|
||||
if (s.requireFvgObConfluence !== undefined) setRequireFvgObConfluence(s.requireFvgObConfluence);
|
||||
if (s.asianSweepOnly !== undefined) setAsianSweepOnly(s.asianSweepOnly);
|
||||
if (s.useBreakEven !== undefined) setUseBreakEven(s.useBreakEven);
|
||||
if (s.beTriggerRr !== undefined) setBeTriggerRr(s.beTriggerRr);
|
||||
if (s.usePartialTp !== undefined) setUsePartialTp(s.usePartialTp);
|
||||
if (s.partialTpRr !== undefined) setPartialTpRr(s.partialTpRr);
|
||||
if (s.partialTpPercent !== undefined) setPartialTpPercent(s.partialTpPercent);
|
||||
if (s.dayFilter !== undefined) setDayFilter(s.dayFilter);
|
||||
if (s.maxDailyLoss !== undefined) setMaxDailyLoss(s.maxDailyLoss);
|
||||
if (s.maxConsecutiveLosses !== undefined) setMaxConsecutiveLosses(s.maxConsecutiveLosses);
|
||||
};
|
||||
|
||||
const handleSavePreset = () => {
|
||||
const name = presetName.trim();
|
||||
if (!name) return;
|
||||
const updated = { ...presets, [name]: getSettings() };
|
||||
setPresets(updated);
|
||||
savePresets(updated);
|
||||
setPresetName('');
|
||||
};
|
||||
|
||||
const handleLoadPreset = (name) => {
|
||||
const preset = presets[name];
|
||||
if (preset) applySettings(preset);
|
||||
setShowPresets(false);
|
||||
};
|
||||
|
||||
const handleDeletePreset = (name) => {
|
||||
const updated = { ...presets };
|
||||
delete updated[name];
|
||||
setPresets(updated);
|
||||
savePresets(updated);
|
||||
};
|
||||
|
||||
const toggleDay = (day) => {
|
||||
setDayFilter((prev) => {
|
||||
if (prev.includes(day)) {
|
||||
const next = prev.filter((d) => d !== day);
|
||||
return next.length ? next : prev;
|
||||
}
|
||||
return [...prev, day].sort();
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!chartContainerRef.current) return;
|
||||
|
||||
const chart = createChart(chartContainerRef.current, {
|
||||
width: chartContainerRef.current.clientWidth,
|
||||
height: 420,
|
||||
...CHART_THEME,
|
||||
});
|
||||
|
||||
const candleSeries = chart.addSeries(CandlestickSeries, {
|
||||
upColor: '#10b981',
|
||||
downColor: '#ef4444',
|
||||
borderVisible: false,
|
||||
wickUpColor: '#10b981',
|
||||
wickDownColor: '#ef4444',
|
||||
});
|
||||
|
||||
chartRef.current = chart;
|
||||
candleSeriesRef.current = candleSeries;
|
||||
|
||||
if (equityChartRef.current) {
|
||||
const eqChart = createChart(equityChartRef.current, {
|
||||
width: equityChartRef.current.clientWidth,
|
||||
height: 160,
|
||||
...CHART_THEME,
|
||||
layout: { ...CHART_THEME.layout, fontSize: 10 },
|
||||
});
|
||||
equityChartObjRef.current = eqChart;
|
||||
equitySeriesRef.current = eqChart.addSeries(LineSeries, {
|
||||
color: '#10b981',
|
||||
lineWidth: 2,
|
||||
priceLineVisible: false,
|
||||
lastValueVisible: true,
|
||||
});
|
||||
}
|
||||
|
||||
setChartsReady(true);
|
||||
|
||||
const handleResize = () => {
|
||||
if (chartContainerRef.current) chart.applyOptions({ width: chartContainerRef.current.clientWidth });
|
||||
if (equityChartRef.current && equityChartObjRef.current) equityChartObjRef.current.applyOptions({ width: equityChartRef.current.clientWidth });
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
chart.remove();
|
||||
equityChartObjRef.current?.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const runBacktest = useCallback(async () => {
|
||||
if (!chartsReady) return;
|
||||
|
||||
if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
|
||||
if (progressResetTimeoutRef.current) clearTimeout(progressResetTimeoutRef.current);
|
||||
setProgressPct(8);
|
||||
progressIntervalRef.current = setInterval(() => {
|
||||
setProgressPct((prev) => (prev < 92 ? prev + 3 : prev));
|
||||
}, 140);
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
timeframe: timeframe.toString(),
|
||||
rr: riskReward.toString(),
|
||||
lookback: lookback.toString(),
|
||||
atr_mult: atrMult.toString(),
|
||||
session,
|
||||
sweep: useLiquiditySweep.toString(),
|
||||
sweep_lookback: sweepLookback.toString(),
|
||||
ob_age: obMaxAge.toString(),
|
||||
dataset: selectedDataset,
|
||||
use_fvg: useFvg.toString(),
|
||||
use_ob: useOb.toString(),
|
||||
proximity_pct: proximityPct.toString(),
|
||||
min_gap_size: minGapSize.toString(),
|
||||
impulse_multiplier: impulseMultiplier.toString(),
|
||||
require_unmitigated_fvg: requireUnmitigatedFvg.toString(),
|
||||
require_bos_confluence: requireBosConfluence.toString(),
|
||||
min_ob_size: minObSize.toString(),
|
||||
require_fvg_ob_confluence: requireFvgObConfluence.toString(),
|
||||
asian_sweep_only: asianSweepOnly.toString(),
|
||||
use_break_even: useBreakEven.toString(),
|
||||
be_trigger_rr: beTriggerRr.toString(),
|
||||
use_partial_tp: usePartialTp.toString(),
|
||||
partial_tp_rr: partialTpRr.toString(),
|
||||
partial_tp_percent: partialTpPercent.toString(),
|
||||
day_filter: dayFilter.join(','),
|
||||
max_daily_loss: maxDailyLoss.toString(),
|
||||
max_consecutive_losses: maxConsecutiveLosses.toString(),
|
||||
});
|
||||
|
||||
const [candleRes, backtestRes] = await Promise.all([
|
||||
fetch(`http://localhost:8000/api/candles?timeframe=${timeframe}&dataset=${encodeURIComponent(selectedDataset)}`),
|
||||
fetch(`http://localhost:8000/api/backtest?${params}`),
|
||||
]);
|
||||
|
||||
const candleData = await candleRes.json();
|
||||
const backtestData = await backtestRes.json();
|
||||
|
||||
const candles = candleData.candles.map((c) => ({
|
||||
time: Math.floor(new Date(c.time).getTime() / 1000),
|
||||
open: c.open,
|
||||
high: c.high,
|
||||
low: c.low,
|
||||
close: c.close,
|
||||
}));
|
||||
candleSeriesRef.current?.setData(candles);
|
||||
|
||||
const markers = [];
|
||||
if (backtestData.trades) {
|
||||
backtestData.trades.forEach((trade) => {
|
||||
const isWin = trade.pnl > 0;
|
||||
markers.push({
|
||||
time: Math.floor(new Date(trade.enter_time).getTime() / 1000),
|
||||
position: trade.direction === 'long' ? 'belowBar' : 'aboveBar',
|
||||
color: isWin ? '#10b981' : '#ef4444',
|
||||
shape: trade.direction === 'long' ? 'arrowUp' : 'arrowDown',
|
||||
text: trade.direction === 'long' ? 'BUY' : 'SELL',
|
||||
});
|
||||
markers.push({
|
||||
time: Math.floor(new Date(trade.exit_time).getTime() / 1000),
|
||||
position: 'inBar',
|
||||
color: isWin ? '#10b981' : '#ef4444',
|
||||
shape: 'circle',
|
||||
text: isWin ? `+${trade.pnl.toFixed(2)}` : trade.pnl.toFixed(2),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
markers.sort((a, b) => a.time - b.time);
|
||||
markersRef.current?.setMarkers([]);
|
||||
markersRef.current = createSeriesMarkers(candleSeriesRef.current, markers);
|
||||
chartRef.current?.timeScale().fitContent();
|
||||
|
||||
if (backtestData.trades?.length) {
|
||||
let equity = STARTING_BALANCE;
|
||||
const sortedTrades = backtestData.trades.slice().sort((a, b) => new Date(a.exit_time) - new Date(b.exit_time));
|
||||
const eqData = sortedTrades.map((t) => {
|
||||
equity += t.pnl;
|
||||
return {
|
||||
time: Math.floor(new Date(t.exit_time).getTime() / 1000),
|
||||
value: Number(equity.toFixed(2)),
|
||||
};
|
||||
});
|
||||
equitySeriesRef.current?.setData(eqData);
|
||||
equityChartObjRef.current?.timeScale().fitContent();
|
||||
} else {
|
||||
equitySeriesRef.current?.setData([]);
|
||||
}
|
||||
|
||||
setResults(backtestData);
|
||||
onBacktestComplete?.(backtestData);
|
||||
|
||||
if (backtestData?.stats) {
|
||||
const snapshot = {
|
||||
id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
runAt: new Date().toISOString(),
|
||||
dataset: selectedDataset,
|
||||
timeframe,
|
||||
riskReward,
|
||||
totalPnl: Number(backtestData.stats.total_pnl ?? 0),
|
||||
winRate: Number(backtestData.stats.win_rate ?? 0),
|
||||
totalTrades: Number(backtestData.stats.total_trades ?? 0),
|
||||
};
|
||||
setRecentResults((prev) => {
|
||||
const next = [snapshot, ...prev].slice(0, 5);
|
||||
saveRecentResults(next);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Backtest failed:', err);
|
||||
} finally {
|
||||
if (progressIntervalRef.current) {
|
||||
clearInterval(progressIntervalRef.current);
|
||||
progressIntervalRef.current = null;
|
||||
}
|
||||
setProgressPct(100);
|
||||
setLoading(false);
|
||||
progressResetTimeoutRef.current = setTimeout(() => {
|
||||
setProgressPct(0);
|
||||
}, 500);
|
||||
}
|
||||
}, [
|
||||
chartsReady, timeframe, riskReward, lookback, atrMult, session,
|
||||
useFvg, useOb, useLiquiditySweep, sweepLookback, obMaxAge,
|
||||
selectedDataset, proximityPct, minGapSize, impulseMultiplier,
|
||||
requireUnmitigatedFvg, requireBosConfluence, minObSize,
|
||||
requireFvgObConfluence, asianSweepOnly, dayFilter,
|
||||
useBreakEven, beTriggerRr,
|
||||
usePartialTp, partialTpRr, partialTpPercent,
|
||||
maxDailyLoss, maxConsecutiveLosses, onBacktestComplete,
|
||||
]);
|
||||
|
||||
const runMonteCarlo = useCallback(async () => {
|
||||
if (!results?.trades?.length) {
|
||||
setMcErrorMessage('Run a backtest first so Monte Carlo has trades to simulate.');
|
||||
return;
|
||||
}
|
||||
|
||||
const trades = results.trades;
|
||||
const totalTradesLocal = trades.length;
|
||||
const totalPnlLocal = trades.reduce((sum, trade) => sum + Number(trade.pnl ?? 0), 0);
|
||||
const winRateLocal = totalTradesLocal ? (trades.filter((trade) => trade.pnl > 0).length / totalTradesLocal) * 100 : 0;
|
||||
|
||||
setMcLoading(true);
|
||||
setMcErrorMessage('');
|
||||
setMcResult(null);
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:8000/api/backtest/monte-carlo', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
trade_r_multiples: results.trades.map((trade) => Number(trade.r_multiple ?? 0)),
|
||||
runs: mcRuns,
|
||||
starting_balance: STARTING_BALANCE,
|
||||
risk_per_trade_pct: 1,
|
||||
sampling_method: mcShuffleTrades ? 'shuffle' : 'bootstrap',
|
||||
missed_trade_pct: 0,
|
||||
pnl_variation_pct: mcVariationPct,
|
||||
price_noise_pct: mcPriceNoisePct,
|
||||
slippage_per_trade: mcSlippage,
|
||||
spread_per_trade: mcSpread,
|
||||
ruin_drawdown_pct: mcRuinDrawdownPct,
|
||||
base_trade_count: totalTradesLocal,
|
||||
base_net_pnl: totalPnlLocal,
|
||||
base_win_rate: winRateLocal,
|
||||
base_profit_factor: calculateProfitFactor(results.trades),
|
||||
base_max_drawdown_pct: calculateMaxDrawdown(results.trades, STARTING_BALANCE),
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(data?.detail ?? 'Monte Carlo run failed');
|
||||
}
|
||||
|
||||
setMcResult(data);
|
||||
} catch (err) {
|
||||
setMcErrorMessage(err instanceof Error ? err.message : 'Monte Carlo run failed');
|
||||
} finally {
|
||||
setMcLoading(false);
|
||||
}
|
||||
}, [
|
||||
results,
|
||||
mcRuns,
|
||||
mcVariationPct,
|
||||
mcPriceNoisePct,
|
||||
mcSlippage,
|
||||
mcSpread,
|
||||
mcRuinDrawdownPct,
|
||||
mcShuffleTrades,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (chartsReady && autoRun) runBacktest();
|
||||
}, [runBacktest, chartsReady, autoRun]);
|
||||
|
||||
useEffect(() => {
|
||||
let f2 = 0;
|
||||
const f1 = requestAnimationFrame(() => {
|
||||
f2 = requestAnimationFrame(() => {
|
||||
if (chartRef.current && chartContainerRef.current) {
|
||||
chartRef.current.applyOptions({ width: chartContainerRef.current.clientWidth });
|
||||
chartRef.current.timeScale().fitContent();
|
||||
}
|
||||
if (equityChartObjRef.current && equityChartRef.current) {
|
||||
equityChartObjRef.current.applyOptions({ width: equityChartRef.current.clientWidth });
|
||||
equityChartObjRef.current.timeScale().fitContent();
|
||||
}
|
||||
});
|
||||
});
|
||||
return () => { cancelAnimationFrame(f1); cancelAnimationFrame(f2); };
|
||||
}, []);
|
||||
|
||||
useEffect(() => () => {
|
||||
if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
|
||||
if (progressResetTimeoutRef.current) clearTimeout(progressResetTimeoutRef.current);
|
||||
}, []);
|
||||
|
||||
const stats = results?.stats;
|
||||
const totalTrades = stats?.total_trades ?? 0;
|
||||
const winRate = stats?.win_rate ?? 0;
|
||||
const totalPnl = stats?.total_pnl ?? 0;
|
||||
const partialTpTrades = stats?.partial_tp_trades ?? 0;
|
||||
const partialTpRate = stats?.partial_tp_rate ?? 0;
|
||||
const partialTpRealized = stats?.partial_tp_realized_total ?? 0;
|
||||
const presetNames = Object.keys(presets);
|
||||
const mcRunsData = mcResult?.sample_runs ?? mcResult?.distribution ?? [];
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 18 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.52, ease: [0.22, 1, 0.36, 1] } },
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center justify-between mb-6 flex-wrap gap-4">
|
||||
<div>
|
||||
<h2 className="text-[20px] font-semibold tracking-tight mb-1">Backtesting Engine</h2>
|
||||
<p className="text-[13px] text-[#525252] font-mono">Adjust parameters and run strategy</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<ToggleInput label="Auto Run" value={autoRun} onChange={setAutoRun} color="#fafafa" />
|
||||
{loading && <div className="w-2 h-2 bg-[#10b981] animate-pulse" />}
|
||||
<button
|
||||
onClick={() => setShowPresets((p) => !p)}
|
||||
className="px-4 py-2 text-[13px] font-mono border border-[#262626] text-[#737373] hover:text-[#fafafa] hover:border-[#404040] transition-colors"
|
||||
>
|
||||
Presets
|
||||
</button>
|
||||
<button
|
||||
onClick={runBacktest}
|
||||
disabled={loading}
|
||||
className="px-5 py-2 text-[13px] font-semibold font-mono bg-[#fafafa] text-black hover:bg-[#e5e5e5] transition-colors disabled:opacity-40"
|
||||
>
|
||||
{loading ? 'Running...' : 'Run Backtest'}
|
||||
</button>
|
||||
<button
|
||||
onClick={runMonteCarlo}
|
||||
disabled={loading || mcLoading || !results?.trades?.length}
|
||||
className="px-5 py-2 text-[13px] font-semibold font-mono border border-[#6366f1] text-[#6366f1] hover:bg-[#6366f1] hover:text-white transition-colors disabled:opacity-40"
|
||||
>
|
||||
{mcLoading ? 'Running MC...' : 'Monte Carlo'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between text-[11px] font-mono text-[#737373] mb-1">
|
||||
<span>{loading ? 'Running backtest...' : 'Backtest progress'}</span>
|
||||
<span>{Math.round(progressPct)}%</span>
|
||||
</div>
|
||||
<div className="h-2 border border-[#1f1f1f] bg-black/50 overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-150 ${loading ? 'bg-[#10b981]' : 'bg-[#404040]'}`}
|
||||
style={{ width: `${progressPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Presets panel */}
|
||||
{showPresets && (
|
||||
<div className="mb-6 p-5 border border-[#262626] bg-black">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-[14px] font-semibold tracking-tight">Presets</h3>
|
||||
<button
|
||||
onClick={() => setShowPresets(false)}
|
||||
className="text-[#525252] hover:text-[#fafafa] text-[18px] leading-none transition-colors"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Save */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Preset name..."
|
||||
value={presetName}
|
||||
onChange={(e) => setPresetName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSavePreset()}
|
||||
className="flex-1 border border-[#262626] bg-[#0a0a0a] text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSavePreset}
|
||||
disabled={!presetName.trim()}
|
||||
className="px-4 py-2 text-[13px] font-mono bg-[#fafafa] text-black hover:bg-[#e5e5e5] transition-colors disabled:opacity-30"
|
||||
>
|
||||
Save Current
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
{presetNames.length === 0 ? (
|
||||
<p className="text-[13px] text-[#525252] font-mono">No saved presets yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{presetNames.map((name) => (
|
||||
<div key={name} className="flex items-center justify-between p-3 border border-[#1a1a1a] hover:border-[#262626] transition-colors">
|
||||
<span className="text-[13px] font-mono text-[#fafafa]">{name}</span>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleLoadPreset(name)}
|
||||
className="px-3 py-1 text-[12px] font-mono border border-[#262626] text-[#737373] hover:text-[#fafafa] hover:border-[#404040] transition-colors"
|
||||
>
|
||||
Load
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeletePreset(name)}
|
||||
className="px-3 py-1 text-[12px] font-mono border border-[#262626] text-[#ef4444] hover:border-[#ef4444] transition-colors"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Core Strategy */}
|
||||
<SectionHeader title="Core Strategy" />
|
||||
<div className="flex flex-wrap gap-6 items-end mb-6">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Timeframe</span>
|
||||
<div className="flex border border-[#262626]">
|
||||
{TIMEFRAMES.map((tf) => (
|
||||
<button key={tf.value} className={`px-3 py-1.5 text-[12px] font-mono transition-colors ${timeframe === tf.value ? 'bg-[#fafafa] text-black' : 'text-[#737373] hover:text-[#fafafa]'}`} onClick={() => setTimeframe(tf.value)}>{tf.label}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Risk : Reward</span>
|
||||
<div className="flex border border-[#262626]">
|
||||
{RR_OPTIONS.map((rr) => (
|
||||
<button key={rr} className={`px-3 py-1.5 text-[12px] font-mono transition-colors ${riskReward === rr ? 'bg-[#fafafa] text-black' : 'text-[#737373] hover:text-[#fafafa]'}`} onClick={() => setRiskReward(rr)}>1:{rr}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Session</span>
|
||||
<div className="flex flex-wrap border border-[#262626]">
|
||||
{SESSIONS.map((s) => (
|
||||
<button key={s} className={`px-3 py-1.5 text-[12px] font-mono transition-colors capitalize ${session === s ? 'bg-[#fafafa] text-black' : 'text-[#737373] hover:text-[#fafafa]'}`} onClick={() => setSession(s)}>{s.replace(/_/g, ' ')}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-[11px] text-[#525252] font-mono uppercase tracking-widest">Dataset</span>
|
||||
<select className="border border-[#262626] bg-black text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors" value={selectedDataset} onChange={(e) => onDatasetChange(e.target.value)}>
|
||||
{datasets.map((d) => (<option key={d.id} value={d.id}>{d.label}</option>))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
|
||||
<NumberInput label="Lookback" value={lookback} onChange={setLookback} min={1} max={50} />
|
||||
<NumberInput label="ATR Multiplier" value={atrMult} onChange={setAtrMult} min={0.1} max={10} step={0.1} />
|
||||
<NumberInput label="OB Max Age" value={obMaxAge} onChange={setObMaxAge} min={1} max={200} />
|
||||
<NumberInput label="Proximity %" value={proximityPct} onChange={setProximityPct} min={0.01} max={5} step={0.01} />
|
||||
<NumberInput label="Sweep Lookback" value={sweepLookback} onChange={setSweepLookback} min={1} max={50} />
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#1a1a1a] my-6" />
|
||||
<SectionHeader title="FVG Settings" subtitle="Fair Value Gap quality filters" />
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-4">
|
||||
<NumberInput label="Min Gap Size" value={minGapSize} onChange={setMinGapSize} min={0} max={0.01} step={0.0001} />
|
||||
<NumberInput label="Impulse Multiplier" value={impulseMultiplier} onChange={setImpulseMultiplier} min={0} max={5} step={0.1} />
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<ToggleInput label="Fair Value Gaps" value={useFvg} onChange={setUseFvg} />
|
||||
<ToggleInput label="Require Unmitigated" value={requireUnmitigatedFvg} onChange={setRequireUnmitigatedFvg} />
|
||||
<ToggleInput label="Require BOS Confluence" value={requireBosConfluence} onChange={setRequireBosConfluence} />
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#1a1a1a] my-6" />
|
||||
<SectionHeader title="Order Block Settings" subtitle="Order block quality filters" />
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-4">
|
||||
<NumberInput label="Min OB Size" value={minObSize} onChange={setMinObSize} min={0} max={0.01} step={0.0001} />
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<ToggleInput label="Order Blocks" value={useOb} onChange={setUseOb} />
|
||||
<ToggleInput label="Require FVG + OB Confluence" value={requireFvgObConfluence} onChange={setRequireFvgObConfluence} />
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#1a1a1a] my-6" />
|
||||
<SectionHeader title="Liquidity Settings" subtitle="Sweep and liquidity filters" />
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<ToggleInput label="Liquidity Sweep" value={useLiquiditySweep} onChange={setUseLiquiditySweep} />
|
||||
<ToggleInput label="Asian Range Sweep Only" value={asianSweepOnly} onChange={setAsianSweepOnly} />
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#1a1a1a] my-6" />
|
||||
<SectionHeader title="Day Filter" subtitle="Select which days to trade" />
|
||||
<div className="flex gap-2 mb-6">
|
||||
{DAYS.map((d) => (
|
||||
<button key={d.value} className={`px-4 py-2 text-[12px] font-mono border transition-colors ${dayFilter.includes(d.value) ? 'bg-[#fafafa] text-black border-[#fafafa]' : 'border-[#262626] text-[#525252] hover:text-[#fafafa]'}`} onClick={() => toggleDay(d.value)}>{d.label}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#1a1a1a] my-6" />
|
||||
<SectionHeader title="Risk Management" subtitle="Daily loss limits and streak protection" />
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
<NumberInput label="Max Daily Loss %" value={maxDailyLoss} onChange={setMaxDailyLoss} min={0} max={10} step={0.5} />
|
||||
<NumberInput label="Max Consecutive Losses" value={maxConsecutiveLosses} onChange={setMaxConsecutiveLosses} min={0} max={20} step={1} />
|
||||
<NumberInput label="BE Trigger (RR)" value={beTriggerRr} onChange={setBeTriggerRr} min={0.1} max={10} step={0.1} />
|
||||
<NumberInput label="Partial TP RR" value={partialTpRr} onChange={setPartialTpRr} min={0.1} max={10} step={0.1} />
|
||||
<NumberInput label="Partial TP %" value={partialTpPercent} onChange={setPartialTpPercent} min={1} max={100} step={1} />
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3 mt-4">
|
||||
<ToggleInput label="Use Break-Even" value={useBreakEven} onChange={setUseBreakEven} />
|
||||
<ToggleInput label="Use Partial TP" value={usePartialTp} onChange={setUsePartialTp} />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Chart */}
|
||||
<motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
|
||||
<div className="mb-4">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Backtest Chart</p>
|
||||
<h2 className="text-[20px] font-semibold tracking-tight">Trade entries and exits</h2>
|
||||
</div>
|
||||
<div ref={chartContainerRef} className="h-[420px] border border-[#1a1a1a] overflow-hidden" />
|
||||
</motion.div>
|
||||
|
||||
{/* Equity */}
|
||||
<motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
|
||||
<div className="mb-4">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Equity Curve</p>
|
||||
<h2 className="text-[20px] font-semibold tracking-tight">Balance progression</h2>
|
||||
</div>
|
||||
<div ref={equityChartRef} className="h-[160px] border border-[#1a1a1a] overflow-hidden" />
|
||||
</motion.div>
|
||||
|
||||
{/* Results */}
|
||||
{stats && (
|
||||
<motion.div variants={itemVariants} className="border border-[#262626] bg-[#0a0a0a] p-6">
|
||||
<div className="mb-6">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Results</p>
|
||||
<h2 className="text-[20px] font-semibold tracking-tight">Backtest Summary</h2>
|
||||
<p className="text-[12px] text-[#737373] font-mono mt-2">CSV: {selectedDataset}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 border border-[#1a1a1a] bg-black/30 p-4">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-3">Last 5 Runs</p>
|
||||
{recentResults.length === 0 ? (
|
||||
<p className="text-[12px] text-[#737373] font-mono">No previous runs saved yet.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{recentResults.map((run) => (
|
||||
<div key={run.id} className="grid grid-cols-2 md:grid-cols-6 gap-2 text-[12px] font-mono border border-[#1a1a1a] bg-black/40 px-3 py-2">
|
||||
<span className="text-[#a3a3a3]">{new Date(run.runAt).toLocaleString()}</span>
|
||||
<span className="text-[#fafafa]">{run.dataset}</span>
|
||||
<span className="text-[#a3a3a3]">{run.timeframe}m</span>
|
||||
<span className={run.totalPnl >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}>${formatMoney(run.totalPnl)}</span>
|
||||
<span className="text-[#60a5fa]">{run.winRate.toFixed(1)}%</span>
|
||||
<span className="text-[#fafafa]">{run.totalTrades} trades</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-[#1a1a1a] my-6" />
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-1">Monte Carlo</p>
|
||||
<h3 className="text-[16px] font-semibold tracking-tight">Stress test the current trade set</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={runMonteCarlo}
|
||||
disabled={mcLoading || !results?.trades?.length}
|
||||
className="px-4 py-2 text-[13px] font-semibold font-mono bg-[#6366f1] text-white hover:bg-[#4f46e5] transition-colors disabled:opacity-40"
|
||||
>
|
||||
{mcLoading ? 'Running Monte Carlo...' : 'Run Monte Carlo'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<NumberInput label="Runs" value={mcRuns} onChange={setMcRuns} min={1} step={1} />
|
||||
<NumberInput label="PnL Var %" value={mcVariationPct} onChange={setMcVariationPct} min={0} step={1} />
|
||||
<NumberInput label="Price Noise %" value={mcPriceNoisePct} onChange={setMcPriceNoisePct} min={0} step={1} />
|
||||
<NumberInput label="Slippage" value={mcSlippage} onChange={setMcSlippage} min={0} step={0.01} />
|
||||
<NumberInput label="Spread" value={mcSpread} onChange={setMcSpread} min={0} step={0.01} />
|
||||
<NumberInput label="Ruin DD %" value={mcRuinDrawdownPct} onChange={setMcRuinDrawdownPct} min={0} step={1} />
|
||||
</div>
|
||||
|
||||
<label className="inline-flex items-center gap-2 text-[12px] font-mono text-[#a3a3a3]">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mcShuffleTrades}
|
||||
onChange={(e) => setMcShuffleTrades(e.target.checked)}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
Shuffle trade order each simulation run
|
||||
</label>
|
||||
|
||||
{mcErrorMessage && (
|
||||
<div className="border border-[#7f1d1d] bg-[#1b0a0a] text-[#fca5a5] px-4 py-3 text-[12px] font-mono">
|
||||
{mcErrorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mcResult && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
<div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Avg PnL</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.avg_pnl ?? 0).toFixed(2)}</p></div>
|
||||
<div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Profitable %</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.profitable_run_pct ?? 0).toFixed(2)}%</p></div>
|
||||
<div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Worst DD %</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.worst_max_drawdown_pct ?? 0).toFixed(2)}%</p></div>
|
||||
<div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Avg WR</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.avg_win_rate ?? 0).toFixed(2)}%</p></div>
|
||||
<div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Avg PF</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.avg_profit_factor ?? 0).toFixed(2)}</p></div>
|
||||
<div className="p-3 border border-[#1a1a1a] bg-black/40"><p className="text-[10px] text-[#737373] font-mono uppercase">Ruin %</p><p className="text-[16px] font-semibold">{Number(mcResult.summary?.probability_of_ruin ?? 0).toFixed(2)}%</p></div>
|
||||
</div>
|
||||
|
||||
<div className="border border-[#1a1a1a] bg-black/40 overflow-auto">
|
||||
<div className="grid grid-cols-[60px_100px_120px_100px_100px_80px] gap-3 px-4 py-3 text-[10px] font-mono uppercase tracking-widest text-[#737373] border-b border-[#1a1a1a]">
|
||||
<span>Run</span>
|
||||
<span>Net PnL</span>
|
||||
<span>Max DD %</span>
|
||||
<span>Win Rate</span>
|
||||
<span>PF</span>
|
||||
<span>Ruin</span>
|
||||
</div>
|
||||
{mcRunsData.map((run) => (
|
||||
<div key={run.run} className="grid grid-cols-[60px_100px_120px_100px_100px_80px] gap-3 px-4 py-2 text-[12px] font-mono border-b border-[#111111]">
|
||||
<span>{run.run}</span>
|
||||
<span className={run.net_pnl >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}>{Number(run.net_pnl).toFixed(2)}</span>
|
||||
<span>{Number(run.max_drawdown_pct).toFixed(2)}</span>
|
||||
<span>{Number(run.win_rate).toFixed(2)}%</span>
|
||||
<span>{Number(run.profit_factor).toFixed(2)}</span>
|
||||
<span className={run.ruin ? 'text-[#ef4444]' : 'text-[#737373]'}>{run.ruin ? 'Yes' : 'No'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-10 gap-4">
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Net P/L</p>
|
||||
<p className={`text-[24px] font-semibold ${totalPnl >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>${formatMoney(totalPnl)}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Win Rate</p>
|
||||
<p className={`text-[24px] font-semibold ${winRate > 50 ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>{winRate.toFixed(1)}%</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Total Trades</p>
|
||||
<p className="text-[24px] font-semibold text-[#fafafa]">{totalTrades}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Winners</p>
|
||||
<p className="text-[24px] font-semibold text-[#10b981]">{stats.winners}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Losers</p>
|
||||
<p className="text-[24px] font-semibold text-[#ef4444]">{stats.losers}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Avg Win</p>
|
||||
<p className="text-[24px] font-semibold text-[#10b981]">${formatMoney(stats.avg_win)}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Avg Loss</p>
|
||||
<p className="text-[24px] font-semibold text-[#ef4444]">${formatMoney(Math.abs(stats.avg_loss))}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Partials</p>
|
||||
<p className="text-[24px] font-semibold text-[#fafafa]">{partialTpTrades}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Partial Rate</p>
|
||||
<p className="text-[24px] font-semibold text-[#60a5fa]">{partialTpRate.toFixed(1)}%</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[11px] text-[#525252] font-mono uppercase tracking-widest mb-2">Partial P/L</p>
|
||||
<p className={`text-[24px] font-semibold ${partialTpRealized >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>${formatMoney(partialTpRealized)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
CartesianGrid,
|
||||
} from 'recharts';
|
||||
|
||||
function CustomTooltip({ active, payload }) {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-[#0a0a0a] border border-[#262626] px-4 py-3 shadow-xl">
|
||||
<p className="text-[13px] text-[#737373] mb-1">{payload[0].payload.date}</p>
|
||||
<p className="text-[18px] font-semibold text-[#10b981]">
|
||||
${payload[0].value.toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function EquityCurve({ data = [], startingBalance = 10000 }) {
|
||||
if (!data.length) {
|
||||
return (
|
||||
<div className="border border-[#262626] bg-[#0a0a0a] p-8">
|
||||
<h2 className="text-[20px] font-semibold tracking-tight mb-1">Equity Curve</h2>
|
||||
<p className="text-[13px] text-[#737373] mb-6">Account balance progression</p>
|
||||
<div className="text-[#525252] text-sm py-12 text-center border border-dashed border-[#262626]">
|
||||
No trade data available yet.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const lastEquity = data[data.length - 1]?.equity ?? startingBalance;
|
||||
const changePct = ((lastEquity - startingBalance) / startingBalance) * 100;
|
||||
|
||||
return (
|
||||
<div className="border border-[#262626] bg-[#0a0a0a] p-8">
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h2 className="text-[20px] font-semibold tracking-tight mb-1">Equity Curve</h2>
|
||||
<p className="text-[13px] text-[#737373]">Account balance progression</p>
|
||||
</div>
|
||||
<div className="flex gap-6 text-[13px] text-[#737373] font-mono">
|
||||
<span>Start ${startingBalance.toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
|
||||
<span>End ${lastEquity.toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
|
||||
<span className={changePct >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}>
|
||||
{changePct >= 0 ? '+' : ''}{changePct.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ResponsiveContainer width="100%" height={360}>
|
||||
<LineChart data={data} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
|
||||
<defs>
|
||||
<linearGradient id="equityGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#10b981" stopOpacity={0.3} />
|
||||
<stop offset="100%" stopColor="#10b981" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1a1a1a" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
stroke="#525252"
|
||||
tick={{ fill: '#737373', fontSize: 12 }}
|
||||
axisLine={{ stroke: '#262626' }}
|
||||
tickLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="#525252"
|
||||
tick={{ fill: '#737373', fontSize: 12 }}
|
||||
axisLine={{ stroke: '#262626' }}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} cursor={{ stroke: '#404040', strokeWidth: 1 }} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="equity"
|
||||
stroke="#10b981"
|
||||
strokeWidth={2.5}
|
||||
dot={false}
|
||||
activeDot={{ r: 6, fill: '#10b981', stroke: '#000', strokeWidth: 2 }}
|
||||
fill="url(#equityGradient)"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { motion, useInView } from 'motion/react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
export function MetricCard({ label, value, change, isPositive, isPrimary = false, neutral = false }) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, amount: 0.3 });
|
||||
const [displayValue, setDisplayValue] = useState('0');
|
||||
|
||||
useEffect(() => {
|
||||
if (!isInView) return;
|
||||
|
||||
const numericValue = parseFloat(value.replace(/[^0-9.-]/g, ''));
|
||||
if (isNaN(numericValue)) {
|
||||
setDisplayValue(value);
|
||||
return;
|
||||
}
|
||||
|
||||
const duration = 1200;
|
||||
const startTime = Date.now();
|
||||
|
||||
const animate = () => {
|
||||
const progress = Math.min((Date.now() - startTime) / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - progress, 3);
|
||||
const current = numericValue * eased;
|
||||
|
||||
if (value.includes('$')) {
|
||||
setDisplayValue(`$${current.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
|
||||
} else if (value.includes('%')) {
|
||||
setDisplayValue(`${current.toFixed(1)}%`);
|
||||
} else {
|
||||
setDisplayValue(current % 1 === 0 ? Math.round(current).toString() : current.toFixed(2));
|
||||
}
|
||||
|
||||
if (progress < 1) requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animate();
|
||||
}, [isInView, value]);
|
||||
|
||||
const color = neutral ? 'text-[#fafafa]' : isPositive ? 'text-[#10b981]' : 'text-[#ef4444]';
|
||||
const changeLabel = typeof change === 'number' ? `${change >= 0 ? '+' : ''}${change.toFixed(1)}%` : change;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
className={isPrimary ? 'col-span-2 md:col-span-1' : ''}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<div className="relative p-6 border border-[#262626] bg-[#0a0a0a] hover:border-[#404040] transition-colors h-full">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[13px] text-[#737373] uppercase tracking-wider font-medium">
|
||||
{label}
|
||||
</span>
|
||||
{!neutral && (
|
||||
<span className={color}>
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
{isPositive ? (
|
||||
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
|
||||
) : (
|
||||
<polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
|
||||
)}
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={`text-[32px] font-semibold tracking-tight ${color}`}>
|
||||
{displayValue}
|
||||
</div>
|
||||
{changeLabel && (
|
||||
<div className="flex items-center gap-1.5 text-[13px]">
|
||||
<span className={color}>{changeLabel}</span>
|
||||
<span className="text-[#525252]">vs. initial</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,111 @@
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Cell,
|
||||
CartesianGrid,
|
||||
} from 'recharts';
|
||||
|
||||
function formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
}
|
||||
|
||||
function CustomTooltip({ active, payload }) {
|
||||
if (active && payload && payload.length) {
|
||||
const value = payload[0].value;
|
||||
return (
|
||||
<div className="bg-[#0a0a0a] border border-[#262626] px-4 py-3 shadow-xl">
|
||||
<p className="text-[13px] text-[#737373] mb-1">{payload[0].payload.month}</p>
|
||||
<p className={`text-[18px] font-semibold ${value >= 0 ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>
|
||||
{value >= 0 ? '+' : ''}{value.toFixed(1)}%
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function PerformanceBreakdown({ monthlyReturns = [], largestWin = 0, largestLoss = 0, maxDrawdown = 0, sharpeRatio = 0 }) {
|
||||
const chartData = monthlyReturns.map((item) => ({
|
||||
month: item.month,
|
||||
returnPct: item.returnPct,
|
||||
}));
|
||||
|
||||
const sorted = [...monthlyReturns];
|
||||
const bestMonth = sorted.reduce((best, item) => (item.returnPct > best.returnPct ? item : best), sorted[0] ?? { month: '-', returnPct: 0 });
|
||||
const worstMonth = sorted.reduce((worst, item) => (item.returnPct < worst.returnPct ? item : worst), sorted[0] ?? { month: '-', returnPct: 0 });
|
||||
|
||||
return (
|
||||
<div className="border border-[#262626] bg-[#0a0a0a] p-8">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-[20px] font-semibold tracking-tight mb-1">Performance Breakdown</h2>
|
||||
<p className="text-[13px] text-[#737373]">Monthly returns</p>
|
||||
</div>
|
||||
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<BarChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#1a1a1a" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
stroke="#525252"
|
||||
tick={{ fill: '#737373', fontSize: 12 }}
|
||||
axisLine={{ stroke: '#262626' }}
|
||||
tickLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="#525252"
|
||||
tick={{ fill: '#737373', fontSize: 12 }}
|
||||
axisLine={{ stroke: '#262626' }}
|
||||
tickLine={false}
|
||||
tickFormatter={(v) => `${v}%`}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#1a1a1a' }} />
|
||||
<Bar dataKey="returnPct" radius={0}>
|
||||
{chartData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.returnPct >= 0 ? '#10b981' : '#ef4444'} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-[#1a1a1a] grid grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[13px] text-[#737373] mb-2">Max Drawdown</p>
|
||||
<p className="text-[24px] font-semibold text-[#ef4444]">{maxDrawdown.toFixed(1)}%</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[13px] text-[#737373] mb-2">Sharpe Ratio</p>
|
||||
<p className={`text-[24px] font-semibold ${sharpeRatio >= 1 ? 'text-[#10b981]' : 'text-[#f59e0b]'}`}>
|
||||
{sharpeRatio.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[13px] text-[#737373] mb-2">Best Month</p>
|
||||
<p className="text-[16px] font-semibold text-[#10b981]">
|
||||
{bestMonth.month} ({bestMonth.returnPct > 0 ? '+' : ''}{bestMonth.returnPct.toFixed(1)}%)
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[13px] text-[#737373] mb-2">Worst Month</p>
|
||||
<p className="text-[16px] font-semibold text-[#ef4444]">
|
||||
{worstMonth.month} ({worstMonth.returnPct > 0 ? '+' : ''}{worstMonth.returnPct.toFixed(1)}%)
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[13px] text-[#737373] mb-2">Largest Win</p>
|
||||
<p className="text-[24px] font-semibold text-[#10b981]">${formatCurrency(largestWin)}</p>
|
||||
</div>
|
||||
<div className="p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<p className="text-[13px] text-[#737373] mb-2">Largest Loss</p>
|
||||
<p className="text-[24px] font-semibold text-[#ef4444]">${formatCurrency(largestLoss)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
|
||||
|
||||
function formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
}
|
||||
|
||||
function CustomTooltip({ active, payload, total }) {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-[#0a0a0a] border border-[#262626] px-4 py-3 shadow-xl">
|
||||
<p className="text-[13px] text-[#fafafa] font-semibold mb-1">{payload[0].name}</p>
|
||||
<p className="text-[15px] text-[#737373]">
|
||||
{payload[0].value} trades ({((payload[0].value / total) * 100).toFixed(1)}%)
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function TradeDistribution({ wins = 0, losses = 0, avgWin = 0, avgLoss = 0, largestWin = 0, largestLoss = 0 }) {
|
||||
const total = wins + losses;
|
||||
const data = [
|
||||
{ name: 'Wins', value: wins },
|
||||
{ name: 'Losses', value: losses },
|
||||
];
|
||||
const COLORS = ['#10b981', '#ef4444'];
|
||||
|
||||
return (
|
||||
<div className="border border-[#262626] bg-[#0a0a0a] p-8">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-[20px] font-semibold tracking-tight mb-1">Trade Distribution</h2>
|
||||
<p className="text-[13px] text-[#737373]">Win/Loss breakdown</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row items-center gap-8">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={60}
|
||||
outerRadius={90}
|
||||
paddingAngle={2}
|
||||
dataKey="value"
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index]} stroke="none" />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip content={<CustomTooltip total={total} />} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:w-1/2 space-y-4">
|
||||
<div className="flex items-center justify-between p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<div>
|
||||
<p className="text-[13px] text-[#737373] mb-1">Winning Trades</p>
|
||||
<p className="text-[24px] font-semibold text-[#10b981]">{wins}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-[13px] text-[#737373] mb-1">Avg. Win</p>
|
||||
<p className="text-[16px] font-semibold text-[#10b981]">${formatCurrency(avgWin)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-4 border border-[#1a1a1a] bg-black/40">
|
||||
<div>
|
||||
<p className="text-[13px] text-[#737373] mb-1">Losing Trades</p>
|
||||
<p className="text-[24px] font-semibold text-[#ef4444]">{losses}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-[13px] text-[#737373] mb-1">Avg. Loss</p>
|
||||
<p className="text-[16px] font-semibold text-[#ef4444]">${formatCurrency(avgLoss)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
|
||||
function formatCurrency(value) {
|
||||
const abs = Math.abs(value);
|
||||
const formatted = abs.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
return value >= 0 ? `+$${formatted}` : `$-${formatted}`;
|
||||
}
|
||||
|
||||
const ROWS_PER_PAGE = 10;
|
||||
|
||||
export function TradeHistory({ trades = [] }) {
|
||||
const [page, setPage] = useState(1);
|
||||
const [pairFilter, setPairFilter] = useState('all');
|
||||
const [timeFilter, setTimeFilter] = useState('all');
|
||||
|
||||
const pairs = useMemo(() => {
|
||||
const set = new Set(trades.map((t) => t.pair ?? 'GBP/JPY'));
|
||||
return ['all', ...Array.from(set).sort()];
|
||||
}, [trades]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let result = trades.slice().sort((a, b) => new Date(b.exit_time) - new Date(a.exit_time));
|
||||
|
||||
if (pairFilter !== 'all') {
|
||||
result = result.filter((t) => (t.pair ?? 'GBP/JPY') === pairFilter);
|
||||
}
|
||||
|
||||
if (timeFilter !== 'all') {
|
||||
const now = new Date();
|
||||
const cutoff = new Date(now);
|
||||
if (timeFilter === '7d') cutoff.setDate(now.getDate() - 7);
|
||||
else if (timeFilter === '30d') cutoff.setDate(now.getDate() - 30);
|
||||
else if (timeFilter === '90d') cutoff.setDate(now.getDate() - 90);
|
||||
result = result.filter((t) => new Date(t.exit_time) >= cutoff);
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [trades, pairFilter, timeFilter]);
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(filtered.length / ROWS_PER_PAGE));
|
||||
const safeCurrentPage = Math.min(page, totalPages);
|
||||
const pageSlice = filtered.slice((safeCurrentPage - 1) * ROWS_PER_PAGE, safeCurrentPage * ROWS_PER_PAGE);
|
||||
|
||||
const getPageNumbers = () => {
|
||||
const pages = [];
|
||||
const start = Math.max(1, safeCurrentPage - 2);
|
||||
const end = Math.min(totalPages, start + 4);
|
||||
for (let i = start; i <= end; i++) pages.push(i);
|
||||
return pages;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border border-[#262626] bg-[#0a0a0a]">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-4 p-6 border-b border-[#262626]">
|
||||
<div>
|
||||
<h2 className="text-[20px] font-semibold tracking-tight mb-1">Trade History</h2>
|
||||
<p className="text-[13px] text-[#525252] font-mono">{filtered.length} trades</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<select
|
||||
className="border border-[#262626] bg-black text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors"
|
||||
value={pairFilter}
|
||||
onChange={(e) => { setPairFilter(e.target.value); setPage(1); }}
|
||||
>
|
||||
{pairs.map((p) => (
|
||||
<option key={p} value={p}>{p === 'all' ? 'All Pairs' : p}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="border border-[#262626] bg-black text-[#fafafa] font-mono text-[13px] px-3 py-2 outline-none focus:border-[#404040] transition-colors"
|
||||
value={timeFilter}
|
||||
onChange={(e) => { setTimeFilter(e.target.value); setPage(1); }}
|
||||
>
|
||||
<option value="all">All Time</option>
|
||||
<option value="7d">Last 7 days</option>
|
||||
<option value="30d">Last 30 days</option>
|
||||
<option value="90d">Last 90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="border-b border-[#262626]">
|
||||
{['ID', 'Date', 'Time', 'Pair', 'Type', 'Entry', 'Exit', 'P/L', 'Status'].map((h) => (
|
||||
<th key={h} className="px-6 py-4 text-[11px] text-[#525252] font-mono uppercase tracking-widest font-medium">
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pageSlice.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={9} className="px-6 py-12 text-center text-[#525252] font-mono text-sm">
|
||||
No trades found.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
pageSlice.map((trade, index) => {
|
||||
const globalIndex = (safeCurrentPage - 1) * ROWS_PER_PAGE + index;
|
||||
const isWin = trade.pnl > 0;
|
||||
const enterDate = new Date(trade.enter_time);
|
||||
const exitDate = new Date(trade.exit_time);
|
||||
const dateStr = exitDate.toLocaleDateString('en-CA');
|
||||
const timeStr = exitDate.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
const pair = trade.pair ?? 'GBP/JPY';
|
||||
const direction = trade.direction === 'long' ? 'BUY' : 'SELL';
|
||||
|
||||
return (
|
||||
<motion.tr
|
||||
key={`${trade.enter_time}-${index}`}
|
||||
className="border-b border-[#1a1a1a] hover:bg-[#111111] transition-colors"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: index * 0.03 }}
|
||||
>
|
||||
<td className="px-6 py-4 text-[13px] text-[#525252] font-mono">#{globalIndex + 1}</td>
|
||||
<td className="px-6 py-4 text-[14px] font-mono">{dateStr}</td>
|
||||
<td className="px-6 py-4 text-[14px] text-[#737373] font-mono">{timeStr}</td>
|
||||
<td className="px-6 py-4 text-[14px] font-semibold">{pair}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`inline-block px-3 py-1 text-[12px] font-semibold font-mono ${
|
||||
direction === 'BUY'
|
||||
? 'bg-[#10b981] text-black'
|
||||
: 'bg-[#ef4444] text-black'
|
||||
}`}>
|
||||
{direction}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-[14px] font-mono text-[#737373]">{trade.enter_price.toFixed(5)}</td>
|
||||
<td className="px-6 py-4 text-[14px] font-mono text-[#737373]">{trade.exit_price.toFixed(5)}</td>
|
||||
<td className={`px-6 py-4 text-[14px] font-semibold font-mono ${isWin ? 'text-[#10b981]' : 'text-[#ef4444]'}`}>
|
||||
{formatCurrency(trade.pnl)}
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="px-3 py-1 border border-[#262626] text-[12px] font-mono text-[#737373]">
|
||||
Closed
|
||||
</span>
|
||||
</td>
|
||||
</motion.tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-6 py-4 border-t border-[#262626]">
|
||||
<p className="text-[13px] text-[#525252] font-mono">
|
||||
Showing {(safeCurrentPage - 1) * ROWS_PER_PAGE + 1}–{Math.min(safeCurrentPage * ROWS_PER_PAGE, filtered.length)} of {filtered.length} trades
|
||||
</p>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
className="px-3 py-1.5 text-[13px] font-mono border border-[#262626] text-[#737373] hover:text-[#fafafa] hover:border-[#404040] transition-colors disabled:opacity-30 disabled:pointer-events-none"
|
||||
disabled={safeCurrentPage <= 1}
|
||||
onClick={() => setPage(safeCurrentPage - 1)}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
{getPageNumbers().map((p) => (
|
||||
<button
|
||||
key={p}
|
||||
className={`px-3 py-1.5 text-[13px] font-mono border transition-colors ${
|
||||
p === safeCurrentPage
|
||||
? 'bg-[#fafafa] text-black border-[#fafafa]'
|
||||
: 'border-[#262626] text-[#737373] hover:text-[#fafafa] hover:border-[#404040]'
|
||||
}`}
|
||||
onClick={() => setPage(p)}
|
||||
>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className="px-3 py-1.5 text-[13px] font-mono border border-[#262626] text-[#737373] hover:text-[#fafafa] hover:border-[#404040] transition-colors disabled:opacity-30 disabled:pointer-events-none"
|
||||
disabled={safeCurrentPage >= totalPages}
|
||||
onClick={() => setPage(safeCurrentPage + 1)}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #000000;
|
||||
--foreground: #fafafa;
|
||||
--card: #0a0a0a;
|
||||
--card-foreground: #fafafa;
|
||||
--muted: #737373;
|
||||
--border: #262626;
|
||||
--border-hover: #404040;
|
||||
--success: #10b981;
|
||||
--loss: #ef4444;
|
||||
--accent: #fafafa;
|
||||
--subtle: #1a1a1a;
|
||||
--input-bg: #0a0a0a;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
Reference in New Issue
Block a user