Hugging Face's logo

Spaces:
jsonet
/
tradeflow-pro-nexus
Running

App Files Community
tradeflow-pro-nexus / analytics.html
jsonet's picture
jsonet
implementa mas realismo y funcionalidad a todas las paginas y herramientas implementadas en la aplicacion actual, desarrolla cada herramienta y elemento de cada pagina hasta su maximo nivel de desarrollo posible dentro de tus capacidades maximas!
17fd0cc verified
raw
history blame contribute delete
29.5 kB
 <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TradeFlow Pro Nexus - Analytics</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#10b981'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.glass-effect { backdrop-filter: blur(16px) saturate(180%); background: rgba(17, 25, 40, 0.75); }
.gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; }
@media (min-width: 1024px) {
.mobile-bottom-nav { display: none; }
}
.analytics-chart { height: 300px; }
</style>
</head>
<body class="gradient-bg min-h-screen text-white">
<!-- Desktop Navigation -->
<nav class="hidden lg:flex glass-effect border-b border-gray-700 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="trending-up" class="text-primary"></i>
<span class="text-xl font-bold">TradeFlow Pro</span>
</div>
<div class="flex space-x-6">
<a href="index.html" class="flex items-center space-x-1 hover:text-gray-300">
<i data-feather="bar-chart-2"></i>
<span>Dashboard</span>
</a>
<a href="ea-control.html" class="flex items-center space-x-1 hover:text-gray-300">
<i data-feather="cpu"></i>
<span>EA Control</span>
</a>
<a href="trading.html" class="flex items-center space-x-1 hover:text-gray-300">
<i data-feather="activity"></i>
<span>Trading</span>
</a>
<a href="protection.html" class="flex items-center space-x-1 hover:text-gray-300">
<i data-feather="shield"></i>
<span>Protection</span>
</a>
<a href="analytics.html" class="flex items-center space-x-1 text-primary border-b-2 border-primary pb-1">
<i data-feather="pie-chart"></i>
<span>Analytics</span>
</a>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<i data-feather="bell" class="cursor-pointer"></i>
<span class="absolute -top-1 -right-1 bg-blue-500 text-xs rounded-full w-4 h-4 flex items-center justify-center">5</span>
</div>
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
<i data-feather="user" class="w-4 h-4"></i>
</div>
<span>Trader</span>
</div>
</div>
</div>
</nav>
<!-- Mobile Bottom Navigation -->
<nav class="mobile-bottom-nav glass-effect border-t border-gray-700 lg:hidden">
<div class="flex justify-around items-center py-3">
<a href="index.html" class="flex flex-col items-center text-gray-400">
<i data-feather="bar-chart-2" class="w-5 h-5"></i>
<span class="text-xs mt-1">Dashboard</span>
</a>
<a href="ea-control.html" class="flex flex-col items-center text-gray-400">
<i data-feather="cpu" class="w-5 h-5"></i>
<span class="text-xs mt-1">EAs</span>
</a>
<a href="trading.html" class="flex flex-col items-center text-gray-400">
<i data-feather="activity" class="w-5 h-5"></i>
<span class="text-xs mt-1">Trade</span>
</a>
<a href="protection.html" class="flex flex-col items-center text-gray-400">
<i data-feather="shield" class="w-5 h-5"></i>
<span class="text-xs mt-1">Shield</span>
</a>
<a href="analytics.html" class="flex flex-col items-center text-primary">
<i data-feather="pie-chart" class="w-5 h-5"></i>
<span class="text-xs mt-1">Stats</span>
</a>
</div>
</nav>
<!-- Main Content -->
<main class="container mx-auto px-4 py-6 lg:py-8 pb-20 lg:pb-8">
<!-- Analytics Header -->
<div class="glass-effect rounded-xl p-6 mb-6">
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
<div>
<h1 class="text-2xl font-bold mb-2">Advanced Analytics & Reporting</h1>
<p class="text-gray-400">Comprehensive performance analysis and trading insights</p>
</div>
<div class="flex space-x-3 mt-4 lg:mt-0">
<button class="bg-primary hover:bg-primary/80 px-4 py-2 rounded-lg flex items-center space-x-2">
<i data-feather="download" class="w-4 h-4"></i>
<span>Export Report</span>
</button>
<button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center space-x-2">
<i data-feather="filter" class="w-4 h-4"></i>
<span>Date Range</span>
</button>
</div>
</div>
</div>
<!-- Key Metrics -->
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
<div class="glass-effect rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-green-500 mb-1">$8,245</div>
<div class="text-xs text-gray-400">Total Profit</div>
</div>
<div class="glass-effect rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-red-500 mb-1">$2,156</div>
<div class="text-xs text-gray-400">Total Loss</div>
</div>
<div class="glass-effect rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-primary mb-1">3.82</div>
<div class="text-xs text-gray-400">Profit Factor</div>
</div>
<div class="glass-effect rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-yellow-500 mb-1">64.3%</div>
<div class="text-xs text-gray-400">Win Rate</div>
</div>
<div class="glass-effect rounded-xl p-4 text-center">
<div class="text-2xl font-bold text-blue-500 mb-1">2.47</div>
<div class="text-xs text-gray-400">Risk/Reward</div>
</div>
</div>
<!-- Advanced Equity Analysis -->
<div class="glass-effect rounded-xl p-6 mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Advanced Equity Analysis</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">1M</button>
<button class="px-3 py-1 bg-primary rounded text-sm">3M</button>
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">6M</button>
<button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">1Y</button>
</div>
</div>
<div class="analytics-chart bg-gray-900 rounded-lg relative">
<div class="absolute top-4 left-4 z-10 flex space-x-2">
<button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded text-sm">Linear</button>
<button class="bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded text-sm">Logarithmic</button>
</div>
<div class="absolute top-4 right-4 z-10 text-right">
<div class="text-sm text-gray-400">Current: <span class="text-green-500">$25,847.32</span></div>
<div class="text-sm text-gray-400">Peak: <span class="text-blue-500">$26,124.80</span></div>
</div>
<!-- Chart will be rendered here -->
</div>
<div class="grid grid-cols-4 gap-4 mt-4 text-center">
<div>
<div class="text-sm text-gray-400">Sharpe Ratio</div>
<div class="font-mono text-green-500">1.84</div>
</div>
<div>
<div class="text-sm text-gray-400">Max Drawdown</div>
<div class="font-mono text-red-500">-6.2%</div>
</div>
<div>
<div class="text-sm text-gray-400">Volatility</div>
<div class="font-mono text-yellow-500">12.4%</div>
</div>
<div>
<div class="text-sm text-gray-400">Calmar Ratio</div>
<div class="font-mono text-blue-500">2.31</div>
</div>
</div>
</div>
<!-- Performance Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- Win/Loss Distribution -->
<div class="glass-effect rounded-xl p-6">
<h3 class="font-semibold mb-4">Trade Distribution</h3>
<div class="analytics-chart bg-gray-900 rounded-lg flex items-center justify-center">
<div class="text-center text-gray-400">
<i data-feather="pie-chart" class="w-12 h-12 mx-auto mb-2"></i>
<p>Win/Loss Analysis</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mt-4">
<div class="text-center">
<div class="text-green-500 font-semibold">87</div>
<div class="text-xs text-gray-400">Winning Trades</div>
</div>
<div class="text-center">
<div class="text-red-500 font-semibold">48</div>
<div class="text-xs text-gray-400">Losing Trades</div>
</div>
</div>
</div>
<!-- Daily Performance -->
<div class="glass-effect rounded-xl p-6">
<h3 class="font-semibold mb-4">Daily Performance</h3>
<div class="analytics-chart bg-gray-900 rounded-lg flex items-center justify-center">
<div class="text-center text-gray-400">
<i data-feather="bar-chart-2" class="w-12 h-12 mx-auto mb-2"></i>
<p>Daily P&L Trends</p>
</div>
</div>
<div class="flex justify-between mt-4 text-sm">
<div class="text-center">
<div class="text-green-500">+$324</div>
<div class="text-gray-400">Today</div>
</div>
<div class="text-center">
<div class="text-green-500">+$1,245</div>
<div class="text-gray-400">This Week</div>
</div>
<div class="text-center">
<div class="text-green-500">+$3,892</div>
<div class="text-gray-400">This Month</div>
</div>
</div>
</div>
</div>
<!-- Detailed Statistics -->
<div class="glass-effect rounded-xl p-6">
<h2 class="text-lg font-semibold mb-4">Trading Statistics</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="space-y-4">
<h4 class="font-medium text-gray-400">Basic Metrics</h4>
<div class="space-y-3">
<div class="flex justify-between">
<span>Total Trades:</span>
<span class="font-mono">135</span>
</div>
<div class="flex justify-between">
<span>Win Rate:</span>
<span class="font-mono text-green-500">64.3%</span>
</div>
<div class="flex justify-between">
<span>Avg Win:</span>
<span class="font-mono">$94.75</span>
</div>
<div class="flex justify-between">
<span>Avg Loss:</span>
<span class="font-mono">-$44.92</span>
</div>
</div>
</div>
<div class="space-y-4">
<h4 class="font-medium text-gray-400">Risk Analysis</h4>
<div class="space-y-3">
<div class="flex justify-between">
<span>Max Drawdown:</span>
<span class="font-mono">-$1,245</span>
</div>
<div class="flex justify-between">
<span>Sharpe Ratio:</span>
<span class="font-mono">1.84</span>
</div>
<div class="flex justify-between">
<span>Expectancy:</span>
<span class="font-mono">$45.12</span>
</div>
<div class="flex justify-between">
<span>Profit Factor:</span>
<span class="font-mono text-primary">3.82</span>
</div>
</div>
</div>
<div class="space-y-4">
<h4 class="font-medium text-gray-400">Time Analysis</h4>
<div class="space-y-3">
<div class="flex justify-between">
<span>Avg Trade Duration:</span>
<span class="font-mono">4.2h</span>
</div>
<div class="flex justify-between">
<span>Best Day:</span>
<span class="font-mono text-green-500">+$892</span>
</div>
<div class="flex justify-between">
<span>Worst Day:</span>
<span class="font-mono text-red-500">-$356</span>
</div>
<div class="flex justify-between">
<span>Consistency:</span>
<span class="font-mono">78%</span>
</div>
</div>
</div>
<div class="space-y-4">
<h4 class="font-medium text-gray-400">Symbol Performance</h4>
<div class="space-y-3">
<div class="flex justify-between">
<span>EUR/USD:</span>
<span class="font-mono text-green-500">+$2,145</span>
</div>
<div class="flex justify-between">
<span>GBP/USD:</span>
<span class="font-mono text-green-500">+$892</span>
</div>
<div class="flex justify-between">
<span>XAU/USD:</span>
<span class="font-mono text-red-500">-$234</span>
</div>
<div class="flex justify-between">
<span>USD/JPY:</span>
<span class="font-mono text-green-500">+$567</span>
</div>
</div>
</div>
</div>
</div>
<!-- AI Insights -->
<div class="glass-effect rounded-xl p-6 mt-6">
<h2 class="text-lg font-semibold mb-4 flex items-center space-x-2">
<i data-feather="brain" class="text-secondary"></i>
<span>AI Trading Insights</span>
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-medium text-green-400 mb-2">Strengths</h4>
<ul class="text-sm space-y-2">
<li class="flex items-center space-x-2">
<i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
<span>Excellent risk management on EUR/USD trades</span>
</li>
<li class="flex items-center space-x-2">
<i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
<span>Strong consistency during London session</span>
</li>
<li class="flex items-center space-x-2">
<i data-feather="check-circle" class="w-4 h-4 text-green-500"></i>
<span>Effective use of trailing stops on winners</span>
</li>
</ul>
</div>
<div class="bg-gray-800/50 rounded-lg p-4">
<h4 class="font-medium text-yellow-400 mb-2">Opportunities</h4>
<ul class="text-sm space-y-2">
<li class="flex items-center space-x-2">
<i data-feather="alert-circle" class="w-4 h-4 text-yellow-500"></i>
<span>Reduce position size during high volatility</span>
</li>
<li class="flex items-center space-x-2">
<i data-feather="alert-circle" class="w-4 h-4 text-yellow-500"></i>
<span>Consider earlier profit-taking on GBP pairs</span>
</li>
<li class="flex items-center space-x-2">
<i data-feather="alert-circle" class="w-4 h-4 text-yellow-500"></i>
<span>Monitor correlation risk with current portfolio</span>
</li>
</ul>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
<script>
feather.replace();
// Advanced Analytics Engine
class AnalyticsEngine {
constructor() {
this.tradeData = this.generateTradeData();
this.performanceMetrics = this.calculateMetrics();
}
generateTradeData() {
const trades = [];
const startDate = luxon.DateTime.now().minus({ days: 90 });
for (let i = 0; i < 135; i++) {
const date = startDate.plus({ days: Math.random() * 90 });
const profit = (Math.random() - 0.3) * 500;
trades.push({
date: date.toISO(),
symbol: ['EUR/USD', 'GBP/USD', 'USD/JPY', 'XAU/USD'][Math.floor(Math.random() * 4)],
type: profit > 0 ? 'WIN' : 'LOSS',
profit: profit,
volume: Math.random() * 0.2 + 0.01
});
}
return trades.sort((a, b) => new Date(a.date) - new Date(b.date));
}
calculateMetrics() {
const wins = this.tradeData.filter(t => t.profit > 0);
const losses = this.tradeData.filter(t => t.profit <= 0);
return {
totalProfit: wins.reduce((sum, t) => sum + t.profit, 0),
totalLoss: Math.abs(losses.reduce((sum, t) => sum + t.profit, 0)),
winRate: (wins.length / this.tradeData.length * 100),
profitFactor: wins.reduce((sum, t) => sum + t.profit, 0) / Math.abs(losses.reduce((sum, t) => sum + t.profit, 0)),
avgWin: wins.reduce((sum, t) => sum + t.profit, 0) / wins.length,
avgLoss: Math.abs(losses.reduce((sum, t) => sum + t.profit, 0)) / losses.length
};
}
}
const analytics = new AnalyticsEngine();
// Initialize Advanced Charts
function initializeAnalyticsCharts() {
// Equity Curve Chart
const equityCtx = document.getElementById('equity-chart') || document.createElement('canvas');
equityCtx.id = 'equity-chart';
document.querySelector('.analytics-chart').innerHTML = '';
document.querySelector('.analytics-chart').appendChild(equityCtx);
new Chart(equityCtx, {
type: 'line',
data: {
labels: Array.from({length: 90}, (_, i) => luxon.DateTime.now().minus({days: 89-i}).toFormat('MMM dd')),
datasets: [{
label: 'Equity Curve',
data: Array.from({length: 90}, (_, i) => 25000 + i * 40 + Math.random() * 1000),
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
tension: 0.4,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
y: {
grid: { color: 'rgba(255,255,255,0.1)' },
ticks: { color: '#9ca3af' }
},
x: {
grid: { color: 'rgba(255,255,255,0.1)' },
ticks: { color: '#9ca3af' }
}
}
}
});
// Win/Loss Distribution
const distributionCtx = document.getElementById('distribution-chart') || document.createElement('canvas');
distributionCtx.id = 'distribution-chart';
document.querySelectorAll('.analytics-chart')[1].innerHTML = '';
document.querySelectorAll('.analytics-chart')[1].appendChild(distributionCtx);
new Chart(distributionCtx, {
type: 'doughnut',
data: {
labels: ['Winning Trades', 'Losing Trades'],
datasets: [{
data: [87, 48],
backgroundColor: ['#10b981', '#ef4444'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: { position: 'bottom' }
}
}
});
// Daily Performance
const dailyCtx = document.getElementById('daily-chart') || document.createElement('canvas');
dailyCtx.id = 'daily-chart';
document.querySelectorAll('.analytics-chart')[2].innerHTML = '';
document.querySelectorAll('.analytics-chart')[2].appendChild(dailyCtx);
new Chart(dailyCtx, {
type: 'bar',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Daily P&L',
data: [324, -156, 487, 234, 189, 0, 0],
backgroundColor: '#6366f1',
borderColor: '#6366f1',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
grid: { color: 'rgba(255,255,255,0.1)' },
ticks: { color: '#9ca3af' }
},
x: {
grid: { color: 'rgba(255,255,255,0.1)' },
ticks: { color: '#9ca3af' }
}
}
}
});
}
// Real-time Analytics Updates
setInterval(() => {
// Update key metrics with realistic fluctuations
const metrics = [
{ selector: '.text-green-500.text-2xl', base: 8245, volatility: 50 },
{ selector: '.text-red-500.text-2xl', base: 2156, volatility: 30 },
{ selector: '.text-primary.text-2xl', base: 3.82, volatility: 0.1 },
{ selector: '.text-yellow-500.text-2xl', base: 64.3, volatility: 0.5 },
{ selector: '.text-blue-500.text-2xl', base: 2.47, volatility: 0.05 }
];
metrics.forEach(metric => {
const element = document.querySelector(metric.selector);
if (element) {
const currentValue = parseFloat(element.textContent.replace('</body>
</html>
, '').replace('%', ''));
const change = (Math.random() - 0.5) * metric.volatility;
const newValue = Math.max(metric.base * 0.8, Math.min(metric.base * 1.2, currentValue + change));
if (metric.selector.includes('</body>
</html>
)) {
element.textContent = '</body>
</html>
+ Math.round(newValue);
} else if (metric.selector.includes('%')) {
element.textContent = newValue.toFixed(1) + '%';
} else {
element.textContent = newValue.toFixed(2);
}
}
});
// Update trade statistics
const stats = document.querySelectorAll('.font-mono');
if (stats.length >= 4) {
stats[0].textContent = analytics.tradeData.length;
stats[1].textContent = analytics.performanceMetrics.winRate.toFixed(1) + '%';
stats[2].textContent = '</body>
</html>
+ analytics.performanceMetrics.avgWin.toFixed(2);
stats[3].textContent = '-</body>
</html>
+ analytics.performanceMetrics.avgLoss.toFixed(2);
}
}, 3000);
// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
initializeAnalyticsCharts();
// Add export functionality
document.querySelector('button').addEventListener('click', function() {
const exportData = {
metrics: analytics.performanceMetrics,
trades: analytics.tradeData,
timestamp: new Date().toISOString()
};
const blob = new Blob([JSON.stringify(exportData, null, 2)], {type: 'application/json'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `trading-analytics-${luxon.DateTime.now().toFormat('yyyy-MM-dd')}.json`;
a.click();
URL.revokeObjectURL(url);
});
// AI Insights generator
setInterval(() => {
const insights = [
"Market volatility increasing - consider reducing position sizes",
"EUR/USD showing strong bullish momentum on 4H timeframe",
"Risk exposure optimal at current levels",
"Consider taking partial profits on winning positions",
"Weekly performance exceeds benchmark by 12.3%"
];
const randomInsight = insights[Math.floor(Math.random() * insights.length)];
console.log(`AI Insight: ${randomInsight}`);
}, 15000);
});
</script>
</body>
</html>