Spaces:
Runtime error
Runtime error
Update index.html
Browse files- index.html +45 -104
index.html
CHANGED
|
@@ -24,25 +24,11 @@
|
|
| 24 |
}
|
| 25 |
</script>
|
| 26 |
<style>
|
| 27 |
-
.trading-card:hover {
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
}
|
| 31 |
-
|
| 32 |
-
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
| 33 |
-
}
|
| 34 |
-
@keyframes pulse {
|
| 35 |
-
0%, 100% { opacity: 1; }
|
| 36 |
-
50% { opacity: 0.5; }
|
| 37 |
-
}
|
| 38 |
-
.coin-animation {
|
| 39 |
-
animation: float 3s ease-in-out infinite;
|
| 40 |
-
}
|
| 41 |
-
@keyframes float {
|
| 42 |
-
0% { transform: translateY(0px); }
|
| 43 |
-
50% { transform: translateY(-10px); }
|
| 44 |
-
100% { transform: translateY(0px); }
|
| 45 |
-
}
|
| 46 |
</style>
|
| 47 |
</head>
|
| 48 |
<body class="bg-gray-100 dark:bg-darkBg transition-colors duration-300">
|
|
@@ -263,90 +249,63 @@
|
|
| 263 |
const performanceCtx = document.getElementById('performanceChart').getContext('2d');
|
| 264 |
const performanceChart = new Chart(performanceCtx, {
|
| 265 |
type: 'line',
|
| 266 |
-
data: {
|
| 267 |
-
|
| 268 |
-
datasets: [{
|
| 269 |
-
label: 'Profit/Loss',
|
| 270 |
-
data: [],
|
| 271 |
-
borderColor: '#3b82f6',
|
| 272 |
-
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
| 273 |
-
tension: 0.4,
|
| 274 |
-
fill: true
|
| 275 |
-
}]
|
| 276 |
-
},
|
| 277 |
-
options: {
|
| 278 |
-
responsive: true,
|
| 279 |
-
plugins: { legend: { display: false } },
|
| 280 |
-
scales: {
|
| 281 |
-
y: { grid: { color: 'rgba(0, 0, 0, 0 ⎛05)', borderDash: [5] }, ticks: { callback: value => '$' + value } },
|
| 282 |
-
x: { grid: { display: false } }
|
| 283 |
-
}
|
| 284 |
-
}
|
| 285 |
});
|
| 286 |
|
| 287 |
const allocationCtx = document.getElementById('allocationChart').getContext('2d');
|
| 288 |
const allocationChart = new Chart(allocationCtx, {
|
| 289 |
type: 'doughnut',
|
| 290 |
-
data: {
|
| 291 |
-
|
| 292 |
-
datasets: [{
|
| 293 |
-
data: [],
|
| 294 |
-
backgroundColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b'],
|
| 295 |
-
borderWidth: 0
|
| 296 |
-
}]
|
| 297 |
-
},
|
| 298 |
-
options: {
|
| 299 |
-
responsive: true,
|
| 300 |
-
cutout: '65%',
|
| 301 |
-
plugins: { legend: { display: false }, tooltip: { callbacks: { label: context => `${context.label}: ${context.parsed}%` } } }
|
| 302 |
-
}
|
| 303 |
});
|
| 304 |
|
| 305 |
-
// API Configuration
|
| 306 |
-
const API_KEY = 'EXW9448ytbIhsoaEIqomKqVziRmWCAZ88OhLKmyMoPb7jFTtDnWjO1DFATt3sizsKi2hgn7SxQ06ALTDmU9w';
|
| 307 |
-
const API_SECRET = 'PCEzaYObtvi1DB3fmQy3XfFGl9ybRlFI6eVjpjSWykE1mJQ5mEDYlPsuJJ9mXfr2wjaxprMKzBCeitcY7xGdKQ';
|
| 308 |
-
const API_BASE_URL = 'https://api.bingx.com';
|
| 309 |
|
| 310 |
-
// Generate Signature
|
| 311 |
function generateSignature(params) {
|
|
|
|
|
|
|
|
|
|
| 312 |
const queryString = new URLSearchParams(params).toString();
|
| 313 |
return CryptoJS.HmacSHA256(queryString, API_SECRET).toString(CryptoJS.enc.Hex);
|
| 314 |
}
|
| 315 |
|
| 316 |
-
//
|
| 317 |
async function fetchFromAPI(endpoint, params = {}) {
|
| 318 |
params.timestamp = Date.now();
|
|
|
|
|
|
|
| 319 |
params.signature = generateSignature(params);
|
| 320 |
const url = `${API_BASE_URL}${endpoint}?${new URLSearchParams(params)}`;
|
| 321 |
-
const response = await fetch(url, {
|
| 322 |
-
method: 'GET',
|
| 323 |
-
headers: { 'X-BX-APIKEY': API_KEY }
|
| 324 |
-
});
|
| 325 |
if (!response.ok) throw new Error(`API Error: ${response.statusText}`);
|
| 326 |
return response.json();
|
| 327 |
}
|
| 328 |
|
| 329 |
// Fetch Specific Data
|
| 330 |
async function fetchBalance() {
|
| 331 |
-
const data = await fetchFromAPI('/
|
| 332 |
-
return data.data.balance; // Adjust based on actual
|
| 333 |
}
|
| 334 |
|
| 335 |
async function fetchOpenPositions() {
|
| 336 |
-
const data = await fetchFromAPI('/
|
| 337 |
-
return data.data
|
| 338 |
}
|
| 339 |
|
| 340 |
async function fetchTradeHistory() {
|
| 341 |
-
const data = await fetchFromAPI('/
|
| 342 |
-
return data.data
|
| 343 |
}
|
| 344 |
|
| 345 |
// Helper Functions
|
| 346 |
function calculateTodayProfit(trades) {
|
| 347 |
const today = new Date().toDateString();
|
| 348 |
-
return trades
|
| 349 |
-
.filter(trade => new Date(trade.closeTime).toDateString() === today)
|
| 350 |
.reduce((sum, trade) => sum + (trade.realizedProfit || 0), 0);
|
| 351 |
}
|
| 352 |
|
|
@@ -354,8 +313,7 @@
|
|
| 354 |
let totalProfit = 0, totalLoss = 0, wins = 0;
|
| 355 |
trades.forEach(trade => {
|
| 356 |
const pl = trade.realizedProfit || 0;
|
| 357 |
-
if (pl > 0) { totalProfit += pl; wins++; }
|
| 358 |
-
else { totalLoss += Math.abs(pl); }
|
| 359 |
});
|
| 360 |
const profitFactor = totalLoss ? (totalProfit / totalLoss) : 0;
|
| 361 |
const winRate = trades.length ? (wins / trades.length * 100) : 0;
|
|
@@ -363,15 +321,12 @@
|
|
| 363 |
}
|
| 364 |
|
| 365 |
function calculatePortfolioAllocation(positions) {
|
| 366 |
-
const totalValue = positions.reduce((sum, pos) => sum + (pos.
|
| 367 |
const bySymbol = positions.reduce((acc, pos) => {
|
| 368 |
-
acc[pos.symbol] = (acc[pos.symbol] || 0) + (pos.
|
| 369 |
return acc;
|
| 370 |
}, {});
|
| 371 |
-
return {
|
| 372 |
-
labels: Object.keys(bySymbol),
|
| 373 |
-
data: Object.values(bySymbol).map(val => totalValue ? (val / totalValue * 100) : 0)
|
| 374 |
-
};
|
| 375 |
}
|
| 376 |
|
| 377 |
// Update UI Functions
|
|
@@ -383,10 +338,10 @@
|
|
| 383 |
<tr class="border-b border-gray-200 dark:border-gray-700">
|
| 384 |
<td class="py-4">${pos.symbol}</td>
|
| 385 |
<td class="py-4"><span class="${pos.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${pos.side}</span></td>
|
| 386 |
-
<td class="py-4">${pos.
|
| 387 |
<td class="py-4">$${pos.entryPrice.toFixed(2)}</td>
|
| 388 |
-
<td class="py-4 font-medium">$${pos.
|
| 389 |
-
<td class="py-4 font-bold ${pos.
|
| 390 |
<td class="py-4"><span class="px-2 py-1 rounded bg-blue-100 text-blue-800">Open</span></td>
|
| 391 |
<td class="py-4 text-right"><button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-v"></i></button></td>
|
| 392 |
</tr>`;
|
|
@@ -396,7 +351,7 @@
|
|
| 396 |
<tr class="border-b border-gray-200 dark:border-gray-700">
|
| 397 |
<td class="py-4">${trade.symbol}</td>
|
| 398 |
<td class="py-4"><span class="${trade.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${trade.side}</span></td>
|
| 399 |
-
<td class="py-4">${trade.
|
| 400 |
<td class="py-4">$${trade.entryPrice.toFixed(2)}</td>
|
| 401 |
<td class="py-4 font-medium">$${trade.exitPrice.toFixed(2)}</td>
|
| 402 |
<td class="py-4 font-bold ${trade.realizedProfit > 0 ? 'text-green-500' : 'text-red-500'}">$${trade.realizedProfit.toFixed(2)}</td>
|
|
@@ -409,22 +364,12 @@
|
|
| 409 |
function updateAdvancedStats(stats) {
|
| 410 |
document.getElementById('advanced-stats').innerHTML = `
|
| 411 |
<div>
|
| 412 |
-
<div class="flex justify-between mb-1">
|
| 413 |
-
|
| 414 |
-
<span class="font-bold text-green-500">${stats.profitFactor}</span>
|
| 415 |
-
</div>
|
| 416 |
-
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
|
| 417 |
-
<div class="bg-green-600 h-2 rounded-full" style="width: ${Math.min(stats.profitFactor * 25, 100)}%"></div>
|
| 418 |
-
</div>
|
| 419 |
</div>
|
| 420 |
<div>
|
| 421 |
-
<div class="flex justify-between mb-1">
|
| 422 |
-
|
| 423 |
-
<span class="font-bold text-purple-500">${stats.winRate}%</span>
|
| 424 |
-
</div>
|
| 425 |
-
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
|
| 426 |
-
<div class="bg-purple-600 h-2 rounded-full" style="width: ${stats.winRate}%"></div>
|
| 427 |
-
</div>
|
| 428 |
</div>`;
|
| 429 |
}
|
| 430 |
|
|
@@ -462,7 +407,6 @@
|
|
| 462 |
// Main Data Fetch Function
|
| 463 |
async function fetchData() {
|
| 464 |
try {
|
| 465 |
-
// Show loading state
|
| 466 |
document.querySelectorAll('.trading-card h3').forEach(el => el.textContent = 'Loading...');
|
| 467 |
document.getElementById('trading-table-body').innerHTML = '<tr><td colspan="8" class="py-4 text-center">Loading...</td></tr>';
|
| 468 |
|
|
@@ -472,18 +416,16 @@
|
|
| 472 |
fetchTradeHistory()
|
| 473 |
]);
|
| 474 |
|
| 475 |
-
// Update Stats Cards
|
| 476 |
document.getElementById('total-balance').textContent = `$${balance.toFixed(2)}`;
|
| 477 |
document.getElementById('open-trades').textContent = positions.length;
|
| 478 |
const longCount = positions.filter(p => p.side === 'Long').length;
|
| 479 |
document.getElementById('trade-types').innerHTML = `<span class="font-medium">${longCount} Long</span><span class="text-gray-500 mx-2 dark:text-gray-400">•</span><span class="font-medium">${positions.length - longCount} Short</span>`;
|
| 480 |
const todayProfit = calculateTodayProfit(trades);
|
| 481 |
document.getElementById('today-profit').textContent = `$${todayProfit.toFixed(2)}`;
|
| 482 |
-
const riskPercent = balance ? (positions.reduce((sum, p) => sum + (p.
|
| 483 |
document.getElementById('risk-exposure').textContent = riskPercent < 20 ? 'Low' : riskPercent < 50 ? 'Medium' : 'High';
|
| 484 |
document.getElementById('exposure-percent').innerHTML = `<span class="font-medium">${riskPercent.toFixed(1)}%</span><span class="ml-2">of balance</span>`;
|
| 485 |
|
| 486 |
-
// Update Other Sections
|
| 487 |
updateTradingTable(positions, trades);
|
| 488 |
const stats = calculateAdvancedStats(trades);
|
| 489 |
updateAdvancedStats(stats);
|
|
@@ -491,12 +433,11 @@
|
|
| 491 |
const allocation = calculatePortfolioAllocation(positions);
|
| 492 |
updateAllocationChart(allocation);
|
| 493 |
|
| 494 |
-
|
| 495 |
-
document.getElementById('
|
| 496 |
-
document.getElementById('allocation-update').textContent = 'Last updated: Just now';
|
| 497 |
} catch (error) {
|
| 498 |
console.error('Error fetching data:', error);
|
| 499 |
-
alert('Failed to sync with BingX API. Please check your API credentials.');
|
| 500 |
}
|
| 501 |
}
|
| 502 |
|
|
@@ -504,7 +445,7 @@
|
|
| 504 |
document.getElementById('refresh-btn').addEventListener('click', fetchData);
|
| 505 |
document.getElementById('sync-now').addEventListener('click', fetchData);
|
| 506 |
window.addEventListener('load', fetchData);
|
| 507 |
-
setInterval(fetchData,
|
| 508 |
</script>
|
| 509 |
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px; position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle; display:inline-block; margin-right:3px; filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff; text-decoration: underline;" target="_blank">DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EricSam/bingx-monitoring" style="color: #fff; text-decoration: underline;" target="_blank">Remix</a></p>
|
| 510 |
</body>
|
|
|
|
| 24 |
}
|
| 25 |
</script>
|
| 26 |
<style>
|
| 27 |
+
.trading-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
|
| 28 |
+
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
| 29 |
+
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
|
| 30 |
+
.coin-animation { animation: float 3s ease-in-out infinite; }
|
| 31 |
+
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 32 |
</style>
|
| 33 |
</head>
|
| 34 |
<body class="bg-gray-100 dark:bg-darkBg transition-colors duration-300">
|
|
|
|
| 249 |
const performanceCtx = document.getElementById('performanceChart').getContext('2d');
|
| 250 |
const performanceChart = new Chart(performanceCtx, {
|
| 251 |
type: 'line',
|
| 252 |
+
data: { labels: [], datasets: [{ label: 'Profit/Loss', data: [], borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.1)', tension: 0.4, fill: true }] },
|
| 253 |
+
options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { grid: { color: 'rgba(0, 0, 0, 0.05)', borderDash: [5] }, ticks: { callback: value => '$' + value } }, x: { grid: { display: false } } } }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 254 |
});
|
| 255 |
|
| 256 |
const allocationCtx = document.getElementById('allocationChart').getContext('2d');
|
| 257 |
const allocationChart = new Chart(allocationCtx, {
|
| 258 |
type: 'doughnut',
|
| 259 |
+
data: { labels: [], datasets: [{ data: [], backgroundColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b'], borderWidth: 0 }] },
|
| 260 |
+
options: { responsive: true, cutout: '65%', plugins: { legend: { display: false }, tooltip: { callbacks: { label: context => `${context.label}: ${context.parsed}%` } } } }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 261 |
});
|
| 262 |
|
| 263 |
+
// API Configuration
|
| 264 |
+
const API_KEY = 'EXW9448ytbIhsoaEIqomKqVziRmWCAZ88OhLKmyMoPb7jFTtDnWjO1DFATt3sizsKi2hgn7SxQ06ALTDmU9w'; // Replace with your BingX API key
|
| 265 |
+
const API_SECRET = 'PCEzaYObtvi1DB3fmQy3XfFGl9ybRlFI6eVjpjSWykE1mJQ5mEDYlPsuJJ9mXfr2wjaxprMKzBCeitcY7xGdKQ'; // Replace with your BingX secret key
|
| 266 |
+
const API_BASE_URL = 'https://open-api.bingx.com';
|
| 267 |
|
| 268 |
+
// Generate Signature
|
| 269 |
function generateSignature(params) {
|
| 270 |
+
params.timestamp = Date.now();
|
| 271 |
+
params.apiKey = API_KEY;
|
| 272 |
+
params.recvWindow = 5000; // Optional, check BingX docs
|
| 273 |
const queryString = new URLSearchParams(params).toString();
|
| 274 |
return CryptoJS.HmacSHA256(queryString, API_SECRET).toString(CryptoJS.enc.Hex);
|
| 275 |
}
|
| 276 |
|
| 277 |
+
// Fetch from API
|
| 278 |
async function fetchFromAPI(endpoint, params = {}) {
|
| 279 |
params.timestamp = Date.now();
|
| 280 |
+
params.apiKey = API_KEY;
|
| 281 |
+
params.recvWindow = 5000;
|
| 282 |
params.signature = generateSignature(params);
|
| 283 |
const url = `${API_BASE_URL}${endpoint}?${new URLSearchParams(params)}`;
|
| 284 |
+
const response = await fetch(url, { method: 'GET', headers: { 'X-BX-APIKEY': API_KEY } });
|
|
|
|
|
|
|
|
|
|
| 285 |
if (!response.ok) throw new Error(`API Error: ${response.statusText}`);
|
| 286 |
return response.json();
|
| 287 |
}
|
| 288 |
|
| 289 |
// Fetch Specific Data
|
| 290 |
async function fetchBalance() {
|
| 291 |
+
const data = await fetchFromAPI('/openApi/v1/account/balance');
|
| 292 |
+
return data.data.balance.find(b => b.asset === 'USDT').free; // Adjust based on actual response
|
| 293 |
}
|
| 294 |
|
| 295 |
async function fetchOpenPositions() {
|
| 296 |
+
const data = await fetchFromAPI('/openApi/v1/position');
|
| 297 |
+
return data.data; // Adjust based on actual response structure
|
| 298 |
}
|
| 299 |
|
| 300 |
async function fetchTradeHistory() {
|
| 301 |
+
const data = await fetchFromAPI('/openApi/v1/trade/history', { limit: 100 });
|
| 302 |
+
return data.data; // Adjust based on actual response structure
|
| 303 |
}
|
| 304 |
|
| 305 |
// Helper Functions
|
| 306 |
function calculateTodayProfit(trades) {
|
| 307 |
const today = new Date().toDateString();
|
| 308 |
+
return trades.filter(trade => new Date(trade.closeTime).toDateString() === today)
|
|
|
|
| 309 |
.reduce((sum, trade) => sum + (trade.realizedProfit || 0), 0);
|
| 310 |
}
|
| 311 |
|
|
|
|
| 313 |
let totalProfit = 0, totalLoss = 0, wins = 0;
|
| 314 |
trades.forEach(trade => {
|
| 315 |
const pl = trade.realizedProfit || 0;
|
| 316 |
+
if (pl > 0) { totalProfit += pl; wins++; } else { totalLoss += Math.abs(pl); }
|
|
|
|
| 317 |
});
|
| 318 |
const profitFactor = totalLoss ? (totalProfit / totalLoss) : 0;
|
| 319 |
const winRate = trades.length ? (wins / trades.length * 100) : 0;
|
|
|
|
| 321 |
}
|
| 322 |
|
| 323 |
function calculatePortfolioAllocation(positions) {
|
| 324 |
+
const totalValue = positions.reduce((sum, pos) => sum + (pos.positionValue || 0), 0);
|
| 325 |
const bySymbol = positions.reduce((acc, pos) => {
|
| 326 |
+
acc[pos.symbol] = (acc[pos.symbol] || 0) + (pos.positionValue || 0);
|
| 327 |
return acc;
|
| 328 |
}, {});
|
| 329 |
+
return { labels: Object.keys(bySymbol), data: Object.values(bySymbol).map(val => totalValue ? (val / totalValue * 100) : 0) };
|
|
|
|
|
|
|
|
|
|
| 330 |
}
|
| 331 |
|
| 332 |
// Update UI Functions
|
|
|
|
| 338 |
<tr class="border-b border-gray-200 dark:border-gray-700">
|
| 339 |
<td class="py-4">${pos.symbol}</td>
|
| 340 |
<td class="py-4"><span class="${pos.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${pos.side}</span></td>
|
| 341 |
+
<td class="py-4">${pos.quantity}</td>
|
| 342 |
<td class="py-4">$${pos.entryPrice.toFixed(2)}</td>
|
| 343 |
+
<td class="py-4 font-medium">$${pos.markPrice.toFixed(2)}</td>
|
| 344 |
+
<td class="py-4 font-bold ${pos.unrealizedProfit > 0 ? 'text-green-500' : 'text-red-500'}">$${pos.unrealizedProfit.toFixed(2)}</td>
|
| 345 |
<td class="py-4"><span class="px-2 py-1 rounded bg-blue-100 text-blue-800">Open</span></td>
|
| 346 |
<td class="py-4 text-right"><button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-v"></i></button></td>
|
| 347 |
</tr>`;
|
|
|
|
| 351 |
<tr class="border-b border-gray-200 dark:border-gray-700">
|
| 352 |
<td class="py-4">${trade.symbol}</td>
|
| 353 |
<td class="py-4"><span class="${trade.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${trade.side}</span></td>
|
| 354 |
+
<td class="py-4">${trade.quantity}</td>
|
| 355 |
<td class="py-4">$${trade.entryPrice.toFixed(2)}</td>
|
| 356 |
<td class="py-4 font-medium">$${trade.exitPrice.toFixed(2)}</td>
|
| 357 |
<td class="py-4 font-bold ${trade.realizedProfit > 0 ? 'text-green-500' : 'text-red-500'}">$${trade.realizedProfit.toFixed(2)}</td>
|
|
|
|
| 364 |
function updateAdvancedStats(stats) {
|
| 365 |
document.getElementById('advanced-stats').innerHTML = `
|
| 366 |
<div>
|
| 367 |
+
<div class="flex justify-between mb-1"><span class="text-gray-500 dark:text-gray-400">Profit Factor</span><span class="font-bold text-green-500">${stats.profitFactor}</span></div>
|
| 368 |
+
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"><div class="bg-green-600 h-2 rounded-full" style="width: ${Math.min(stats.profitFactor * 25, 100)}%"></div></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 369 |
</div>
|
| 370 |
<div>
|
| 371 |
+
<div class="flex justify-between mb-1"><span class="text-gray-500 dark:text-gray-400">Win Rate</span><span class="font-bold text-purple-500">${stats.winRate}%</span></div>
|
| 372 |
+
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700"><div class="bg-purple-600 h-2 rounded-full" style="width: ${stats.winRate}%"></div></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 373 |
</div>`;
|
| 374 |
}
|
| 375 |
|
|
|
|
| 407 |
// Main Data Fetch Function
|
| 408 |
async function fetchData() {
|
| 409 |
try {
|
|
|
|
| 410 |
document.querySelectorAll('.trading-card h3').forEach(el => el.textContent = 'Loading...');
|
| 411 |
document.getElementById('trading-table-body').innerHTML = '<tr><td colspan="8" class="py-4 text-center">Loading...</td></tr>';
|
| 412 |
|
|
|
|
| 416 |
fetchTradeHistory()
|
| 417 |
]);
|
| 418 |
|
|
|
|
| 419 |
document.getElementById('total-balance').textContent = `$${balance.toFixed(2)}`;
|
| 420 |
document.getElementById('open-trades').textContent = positions.length;
|
| 421 |
const longCount = positions.filter(p => p.side === 'Long').length;
|
| 422 |
document.getElementById('trade-types').innerHTML = `<span class="font-medium">${longCount} Long</span><span class="text-gray-500 mx-2 dark:text-gray-400">•</span><span class="font-medium">${positions.length - longCount} Short</span>`;
|
| 423 |
const todayProfit = calculateTodayProfit(trades);
|
| 424 |
document.getElementById('today-profit').textContent = `$${todayProfit.toFixed(2)}`;
|
| 425 |
+
const riskPercent = balance ? (positions.reduce((sum, p) => sum + (p.positionValue || 0), 0) / balance * 100) : 0;
|
| 426 |
document.getElementById('risk-exposure').textContent = riskPercent < 20 ? 'Low' : riskPercent < 50 ? 'Medium' : 'High';
|
| 427 |
document.getElementById('exposure-percent').innerHTML = `<span class="font-medium">${riskPercent.toFixed(1)}%</span><span class="ml-2">of balance</span>`;
|
| 428 |
|
|
|
|
| 429 |
updateTradingTable(positions, trades);
|
| 430 |
const stats = calculateAdvancedStats(trades);
|
| 431 |
updateAdvancedStats(stats);
|
|
|
|
| 433 |
const allocation = calculatePortfolioAllocation(positions);
|
| 434 |
updateAllocationChart(allocation);
|
| 435 |
|
| 436 |
+
document.getElementById('last-sync').textContent = `Last synced: ${new Date().toLocaleTimeString()}`;
|
| 437 |
+
document.getElementById('allocation-update').textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
|
|
|
|
| 438 |
} catch (error) {
|
| 439 |
console.error('Error fetching data:', error);
|
| 440 |
+
alert('Failed to sync with BingX API. Please check your API credentials or network.');
|
| 441 |
}
|
| 442 |
}
|
| 443 |
|
|
|
|
| 445 |
document.getElementById('refresh-btn').addEventListener('click', fetchData);
|
| 446 |
document.getElementById('sync-now').addEventListener('click', fetchData);
|
| 447 |
window.addEventListener('load', fetchData);
|
| 448 |
+
setInterval(fetchData, 120000); // Increased to 2 minutes to avoid rate limiting
|
| 449 |
</script>
|
| 450 |
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px; position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle; display:inline-block; margin-right:3px; filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff; text-decoration: underline;" target="_blank">DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EricSam/bingx-monitoring" style="color: #fff; text-decoration: underline;" target="_blank">Remix</a></p>
|
| 451 |
</body>
|