function MainComponent() { const [maxInvestment, setMaxInvestment] = React.useState(1000); const [maLength, setMaLength] = React.useState(200); const [startDate, setStartDate] = React.useState('2020-01-01'); const [endDate, setEndDate] = React.useState('2023-12-31'); const [maLengths, setMaLengths] = React.useState('50,100,200,300'); const [results, setResults] = React.useState(null); const [backtestResults, setBacktestResults] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [performanceMode, setPerformanceMode] = React.useState(false); const [alerts, setAlerts] = React.useState([]); const [realTimeBTCPrice, setRealTimeBTCPrice] = React.useState(null); const [realTimeRiskScore, setRealTimeRiskScore] = React.useState(null); React.useEffect(()=>{ const fetchRealTimeData = async ()=>{ try { const response = await fetch('/real_time_data'); if (!response.ok) throw new Error('Failed to fetch real-time data'); const data = await response.json(); setRealTimeBTCPrice(data.btc_price); setRealTimeRiskScore(data.risk_score); } catch (err) { console.error('Error fetching real-time data:', err); } }; fetchRealTimeData(); const intervalId = setInterval(fetchRealTimeData, 60000); return ()=>clearInterval(intervalId); }, []); const runStrategy = async ()=>{ setLoading(true); setError(null); try { const response = await fetch('/run_strategy', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ maxInvestment, maLength, startDate, endDate, performanceMode }) }); if (!response.ok) throw new Error('Strategy execution failed'); const data = await response.json(); setResults(data); setAlerts(data.alerts); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; const runBacktest = async ()=>{ setLoading(true); setError(null); try { const response = await fetch('/backtest', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ maxInvestment, maLengths: maLengths.split(',').map(Number), startDate, endDate }) }); if (!response.ok) throw new Error('Backtest execution failed'); const data = await response.json(); setBacktestResults(data); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "BTC Risk Metric Dynamic DCA Strategy"), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-4 rounded-lg mb-6 flex justify-between items-center", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Real-time BTC Price: "), realTimeBTCPrice !== null ? `$${realTimeBTCPrice.toFixed(2)}` : 'Loading...'), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Current Risk Score: "), realTimeRiskScore !== null ? `${realTimeRiskScore.toFixed(2)}` : 'Loading...')), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Max Monthly Investment ($)"), /*#__PURE__*/ React.createElement("input", { type: "number", value: maxInvestment, onChange: (e)=>setMaxInvestment(Number(e.target.value)), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Moving Average Length (days)"), /*#__PURE__*/ React.createElement("input", { type: "number", value: maLength, onChange: (e)=>setMaLength(Number(e.target.value)), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Start Date"), /*#__PURE__*/ React.createElement("input", { type: "date", value: startDate, onChange: (e)=>setStartDate(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "End Date"), /*#__PURE__*/ React.createElement("input", { type: "date", value: endDate, onChange: (e)=>setEndDate(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: performanceMode, onChange: (e)=>setPerformanceMode(e.target.checked), className: "mr-2", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, "Performance Mode")), /*#__PURE__*/ React.createElement("button", { onClick: runStrategy, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4", disabled: loading, __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, loading ? 'Running...' : 'Run Strategy'), /*#__PURE__*/ React.createElement("button", { onClick: runBacktest, className: "bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600", disabled: loading, __source: { fileName: "", lineNumber: 146, columnNumber: 7 }, __self: this }, loading ? 'Running...' : 'Run Backtest'), error && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-red-500", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, error), results && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, "Strategy Results"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 160, columnNumber: 16 }, __self: this }, "Total Investment:"), " $", results.total_investment.toFixed(2)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 161, columnNumber: 16 }, __self: this }, "Final Portfolio Value:"), " $", results.final_value.toFixed(2)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 162, columnNumber: 16 }, __self: this }, "ROI:"), " ", results.roi.toFixed(2), "%"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 163, columnNumber: 16 }, __self: this }, "Max Drawdown:"), " ", results.max_drawdown.toFixed(2), "%"))), backtestResults && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, "Backtest Results"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, "MA Length"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 176, columnNumber: 19 }, __self: this }, "Total Investment"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, "Final Value"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 178, columnNumber: 19 }, __self: this }, "ROI"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 179, columnNumber: 19 }, __self: this }, "Max Drawdown"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 182, columnNumber: 15 }, __self: this }, backtestResults.map((result, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, result.ma_length), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 186, columnNumber: 21 }, __self: this }, "$", result.total_investment.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }, "$", result.final_value.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 188, columnNumber: 21 }, __self: this }, result.roi.toFixed(2), "%"), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }, result.max_drawdown.toFixed(2), "%"))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 198, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 199, columnNumber: 9 }, __self: this }, "Alerts"), alerts.length > 0 ? alerts.map((alert, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 mb-2 rounded ${alert.type === 'BUY' ? 'bg-green-100' : 'bg-red-100'}`, __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, alert.date, ": ", alert.message)) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, "No alerts at the moment."))); }