feat: Add Dynamic ATR Analysis UI to TP/SL Optimization page
- Added dynamicATRAnalysis interface to page component - New section displays after Current Configuration Performance - Progress bar shows data collection: 14/30 trades (46.7%) - Side-by-side comparison: Fixed vs Dynamic ATR targets - Highlights advantage: +.72 (+39.8%) with current sample - Color-coded recommendation: Yellow (WAIT) → Green (IMPLEMENT) - Shows avg ATR (0.32%), dynamic TP2 (0.64%), dynamic SL (0.48%) - Auto-updates as more v6 trades are collected - Responsive design with gradient backgrounds Enables user to track progress toward 30-trade threshold for implementation decision
This commit is contained in:
mindesbunister
@@ -64,6 +64,25 @@ interface TPSLAnalysis {
|
||||
slExits: number
|
||||
manualExits: number
|
||||
}
|
||||
|
||||
dynamicATRAnalysis?: {
|
||||
available: boolean
|
||||
sampleSize: number
|
||||
minSampleSize: number
|
||||
sufficientData: boolean
|
||||
avgATRPercent: number
|
||||
dynamicTP2Percent: number
|
||||
dynamicSLPercent: number
|
||||
actualPnL: number
|
||||
fixedSimulatedPnL: number
|
||||
dynamicSimulatedPnL: number
|
||||
dynamicAdvantage: number
|
||||
dynamicAdvantagePercent: number
|
||||
dynamicTP2HitRate: number
|
||||
dynamicSLHitRate: number
|
||||
recommendation: string
|
||||
reasoning: string
|
||||
}
|
||||
}
|
||||
error?: string
|
||||
}
|
||||
@@ -245,6 +264,142 @@ export default function OptimizationPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dynamic ATR Analysis */}
|
||||
{data.dynamicATRAnalysis?.available && (
|
||||
<div className={`rounded-xl p-6 border mb-8 ${
|
||||
data.dynamicATRAnalysis.sufficientData
|
||||
? 'bg-gradient-to-r from-purple-900/30 to-blue-900/30 border-purple-700'
|
||||
: 'bg-yellow-900/20 border-yellow-600'
|
||||
}`}>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
🎯 Dynamic ATR-Based TP/SL Analysis
|
||||
</h3>
|
||||
<div className="text-sm text-gray-400">
|
||||
{data.dynamicATRAnalysis.sampleSize}/{data.dynamicATRAnalysis.minSampleSize} trades collected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-sm text-gray-400">Data Collection Progress</span>
|
||||
<span className="text-sm font-semibold text-white">
|
||||
{((data.dynamicATRAnalysis.sampleSize / data.dynamicATRAnalysis.minSampleSize) * 100).toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-gray-700 rounded-full h-3 overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all duration-500 ${
|
||||
data.dynamicATRAnalysis.sufficientData ? 'bg-green-500' : 'bg-yellow-500'
|
||||
}`}
|
||||
style={{
|
||||
width: Math.min((data.dynamicATRAnalysis.sampleSize / data.dynamicATRAnalysis.minSampleSize) * 100, 100) + '%'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comparison Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
{/* Left: Current Fixed Targets */}
|
||||
<div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
|
||||
<h4 className="text-sm font-semibold text-gray-400 mb-3">📌 Fixed Targets (Current)</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-400">TP2:</span>
|
||||
<span className="text-blue-400 font-semibold">{data.currentLevels.tp2Percent}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-400">SL:</span>
|
||||
<span className="text-red-400 font-semibold">{data.currentLevels.slPercent}%</span>
|
||||
</div>
|
||||
<div className="border-t border-gray-700 pt-2 mt-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-400">Simulated P&L:</span>
|
||||
<span className="text-white font-bold">
|
||||
${data.dynamicATRAnalysis.fixedSimulatedPnL.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Dynamic ATR Targets */}
|
||||
<div className="bg-purple-900/30 rounded-lg p-4 border border-purple-600">
|
||||
<h4 className="text-sm font-semibold text-purple-300 mb-3">⚡ Dynamic ATR-Based</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-400">TP2 (2x ATR):</span>
|
||||
<span className="text-blue-400 font-semibold">
|
||||
{data.dynamicATRAnalysis.dynamicTP2Percent.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-400">SL (1.5x ATR):</span>
|
||||
<span className="text-red-400 font-semibold">
|
||||
{data.dynamicATRAnalysis.dynamicSLPercent.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="border-t border-purple-600 pt-2 mt-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm text-gray-400">Simulated P&L:</span>
|
||||
<span className="text-green-400 font-bold">
|
||||
${data.dynamicATRAnalysis.dynamicSimulatedPnL.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advantage Highlight */}
|
||||
<div className={`rounded-lg p-4 mb-4 ${
|
||||
data.dynamicATRAnalysis.dynamicAdvantage >= 0
|
||||
? 'bg-green-900/30 border border-green-600'
|
||||
: 'bg-red-900/30 border border-red-600'
|
||||
}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">Dynamic ATR Advantage</div>
|
||||
<div className="text-3xl font-bold text-white">
|
||||
{data.dynamicATRAnalysis.dynamicAdvantage >= 0 ? '+' : ''}
|
||||
${data.dynamicATRAnalysis.dynamicAdvantage.toFixed(2)}
|
||||
<span className="text-xl ml-2 text-gray-400">
|
||||
({data.dynamicATRAnalysis.dynamicAdvantagePercent >= 0 ? '+' : ''}
|
||||
{data.dynamicATRAnalysis.dynamicAdvantagePercent.toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-gray-400 mb-1">Avg ATR</div>
|
||||
<div className="text-lg font-semibold text-white">
|
||||
{data.dynamicATRAnalysis.avgATRPercent.toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recommendation */}
|
||||
<div className={`rounded-lg p-4 border ${
|
||||
data.dynamicATRAnalysis.sufficientData
|
||||
? data.dynamicATRAnalysis.recommendation.includes('IMPLEMENT')
|
||||
? 'bg-green-900/30 border-green-600'
|
||||
: data.dynamicATRAnalysis.recommendation.includes('CONSIDER')
|
||||
? 'bg-blue-900/30 border-blue-600'
|
||||
: 'bg-gray-800/50 border-gray-600'
|
||||
: 'bg-yellow-900/30 border-yellow-600'
|
||||
}`}>
|
||||
<div className="font-semibold text-white mb-2">
|
||||
{data.dynamicATRAnalysis.recommendation}
|
||||
</div>
|
||||
<div className="text-sm text-gray-300">
|
||||
{data.dynamicATRAnalysis.reasoning}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recommendations */}
|
||||
<div className="bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-700 rounded-xl p-6 mb-8">
|
||||
<h2 className="text-2xl font-bold mb-6 text-white">💡 Optimization Recommendations</h2>
|
||||
|
||||
Reference in New Issue
Block a user