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
|
slExits: number
|
||||||
manualExits: 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
|
error?: string
|
||||||
}
|
}
|
||||||
@@ -245,6 +264,142 @@ export default function OptimizationPage() {
|
|||||||
</div>
|
</div>
|
||||||
</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 */}
|
{/* 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">
|
<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>
|
<h2 className="text-2xl font-bold mb-6 text-white">💡 Optimization Recommendations</h2>
|
||||||
|
|||||||
Reference in New Issue
Block a user