From c218d47f141de4806cc5859b4409e8d96499b75c Mon Sep 17 00:00:00 2001
From: Melchior Reimers <melchiorreimers@Melchiors-MacBook-Pro-8.local>
Date: Sun, 25 Jan 2026 18:03:47 +0100
Subject: [PATCH] updated

---
 dashboard/public/index.html | 446 ++++++++++++++++++++++++++++++++++++
 1 file changed, 446 insertions(+)
 create mode 100644 dashboard/public/index.html
diff --git a/dashboard/public/index.html b/dashboard/public/index.html
new file mode 100644
index 0000000..e5e1a7f
--- /dev/null
+++ b/dashboard/public/index.html
@@ -0,0 +1,446 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trading Intelligence Hub</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Outfit', sans-serif; background-color: #0b1120; color: #e2e8f0; }
+        .glass { background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; }
+        .active-nav { background: rgba(56, 189, 248, 0.1); color: #38bdf8; border-right: 3px solid #38bdf8; }
+        .input-glass { width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 10px; outline: none; transition: all 0.2s; color: #e2e8f0; }
+        .input-glass:focus { border-color: #38bdf8; background: rgba(56, 189, 248, 0.05); }
+        .spinner { width: 40px; height: 40px; border: 3px solid rgba(56, 189, 248, 0.1); border-top: 3px solid #38bdf8; border-radius: 50%; animation: spin 1s linear infinite; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    </style>
+</head>
+<body class="flex min-h-screen overflow-hidden">
+    <aside class="w-20 lg:w-64 glass m-4 mr-0 flex flex-col hidden sm:flex">
+        <div class="p-6 hidden lg:block">
+            <h1 class="text-2xl font-bold bg-gradient-to-r from-sky-400 to-blue-500 bg-clip-text text-transparent">Trading Hub</h1>
+        </div>
+        <nav class="flex-1 px-4 space-y-2 mt-4" id="sidebar">
+            <a href="#" onclick="showView('dashboard')" id="nav-dashboard" class="flex items-center p-3 rounded-xl transition active-nav">
+                <span class="mr-3">📊</span> <span class="hidden lg:inline">Dashboard</span>
+            </a>
+        </nav>
+    </aside>
+
+    <main class="flex-1 flex flex-col min-w-0">
+        <header class="p-8 pb-4 flex justify-between items-center flex-shrink-0">
+            <div>
+                <h2 class="text-3xl font-bold" id="pageTitle">Market Overview</h2>
+            </div>
+            <button onclick="fetchData()" class="glass p-2 px-6 text-sky-400 font-bold hover:text-sky-200 transition">↻ REFRESH</button>
+        </header>
+
+        <div id="view-dashboard" class="view flex-1 p-8 pt-4 overflow-y-auto">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+                <div class="glass p-8 border-l-4 border-sky-400">
+                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-2">Volume (7d)</p>
+                    <h3 id="statVolume" class="text-4xl font-bold">€0.0</h3>
+                </div>
+                <div class="glass p-8 border-l-4 border-amber-400">
+                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-2">Total Trades</p>
+                    <h3 id="statTrades" class="text-4xl font-bold">0</h3>
+                </div>
+                <div class="glass p-8 border-l-4 border-emerald-400">
+                    <p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-2">Assets</p>
+                    <h3 id="statIsins" class="text-4xl font-bold">0</h3>
+                </div>
+            </div>
+
+            <div class="mt-10 mb-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-2xl font-bold text-slate-200">Erweiterte Statistiken</h2>
+                    <select id="statisticsPeriod" class="input-glass px-4 py-2" onchange="loadStatistics()">
+                        <option value="7">7 Tage</option>
+                        <option value="30">30 Tage</option>
+                        <option value="42">42 Tage</option>
+                        <option value="69">69 Tage</option>
+                        <option value="180">180 Tage</option>
+                        <option value="365">365 Tage</option>
+                    </select>
+                </div>
+                
+                <div class="glass p-8 mb-8">
+                    <h3 class="text-lg font-bold mb-6 text-slate-300">Moving Average: Tradezahlen & Volumen je Exchange</h3>
+                    <div class="h-96"><canvas id="movingAverageChart"></canvas></div>
+                </div>
+                
+                <div class="glass p-8 mb-8">
+                    <h3 class="text-lg font-bold mb-6 text-slate-300">Tradingvolumen & Anzahl Änderungen</h3>
+                    <div class="h-96"><canvas id="volumeChangesChart"></canvas></div>
+                </div>
+                
+                <div class="glass p-8">
+                    <h3 class="text-lg font-bold mb-6 text-slate-300">Trendanalyse: Häufig gehandelte Aktien</h3>
+                    <div class="h-96"><canvas id="stockTrendsChart"></canvas></div>
+                    <div id="stockTrendsTable" class="mt-6 overflow-x-auto"></div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        const API = '/api';
+        let store = { trades: [], metadata: [], summary: [], totalTrades: 0 };
+        let charts = {};
+
+        async function fetchData() {
+            try {
+                // Lade alle Trades (aggregiert) und Total Trades aus vorberechneten Daten
+                const [t, m, s, totalTrades] = await Promise.all([
+                    fetch(`${API}/trades?days=7`).then(r => r.json()),
+                    fetch(`${API}/metadata`).then(r => r.json()),
+                    fetch(`${API}/summary`).then(r => r.json()),
+                    fetch(`${API}/statistics/total-trades`).then(r => r.json())
+                ]);
+                store = { ...store, trades: t.dataset || [], metadata: m.dataset || [], summary: s.dataset || [] };
+                store.totalTrades = totalTrades.total_trades || 0;
+                updateDashboard();
+            } catch (err) { 
+                console.error('Error fetching data:', err); 
+            }
+        }
+
+        function updateDashboard() {
+            // Volumen aus den letzten 7 Tagen (aggregiert)
+            let vol = 0;
+            if (store.trades && store.trades.length > 0) {
+                // Trades sind jetzt aggregiert: [date, exchange, trade_count, volume]
+                vol = store.trades.reduce((acc, r) => acc + (parseFloat(r[3] || 0)), 0);
+            }
+            document.getElementById('statVolume').innerText = vol >= 1e6 ? `€${(vol / 1e6).toFixed(1)}M` : `€${(vol / 1e3).toFixed(0)}k`;
+            
+            // Total Trades aus vorberechneten Daten (ALLE Trades)
+            document.getElementById('statTrades').innerText = (store.totalTrades || 0).toLocaleString();
+            document.getElementById('statIsins').innerText = store.metadata.length.toLocaleString();
+            
+            // Lade Statistiken
+            loadStatistics();
+        }
+
+        function showView(viewId) {
+            window.activeView = viewId;
+            document.querySelectorAll('.view').forEach(v => v.classList.add('hidden'));
+            document.getElementById(`view-${viewId}`).classList.remove('hidden');
+            document.querySelectorAll('#sidebar a').forEach(a => a.classList.remove('active-nav'));
+            document.getElementById(`nav-${viewId}`).classList.add('active-nav');
+        }
+
+        async function loadStatistics() {
+            const days = document.getElementById('statisticsPeriod').value;
+            await Promise.all([
+                loadMovingAverage(days),
+                loadVolumeChanges(days),
+                loadStockTrends(days)
+            ]);
+        }
+
+        async function loadMovingAverage(days) {
+            try {
+                const res = await fetch(`${API}/statistics/moving-average?days=${days}`).then(r => r.json());
+                const data = res.dataset || [];
+                const columns = res.columns || [];
+                
+                if (!data.length) {
+                    console.log('No moving average data available');
+                    return;
+                }
+                
+                const ctx = document.getElementById('movingAverageChart').getContext('2d');
+                if (charts.movingAverage) charts.movingAverage.destroy();
+                
+                const dateIdx = columns.findIndex(c => c.name === 'date' || c.name === 'timestamp');
+                const exchangeIdx = columns.findIndex(c => c.name === 'exchange');
+                const countIdx = columns.findIndex(c => c.name === 'trade_count');
+                const volumeIdx = columns.findIndex(c => c.name === 'volume');
+                const maCountIdx = columns.findIndex(c => c.name === 'ma_count');
+                const maVolumeIdx = columns.findIndex(c => c.name === 'ma_volume');
+                
+                const exchanges = [...new Set(data.map(r => r[exchangeIdx]))];
+                const dates = [...new Set(data.map(r => r[dateIdx]))].sort();
+                
+                const datasets = [];
+                const colors = ['#38bdf8', '#f43f5e', '#10b981', '#fbbf24', '#8b5cf6'];
+                
+                exchanges.forEach((exchange, idx) => {
+                    datasets.push({
+                        label: `${exchange} - Trade Count`,
+                        data: dates.map(d => {
+                            const row = data.find(r => r[dateIdx] === d && r[exchangeIdx] === exchange);
+                            return row ? (row[countIdx] || 0) : 0;
+                        }),
+                        borderColor: colors[idx % colors.length],
+                        backgroundColor: colors[idx % colors.length] + '33',
+                        borderWidth: 2,
+                        yAxisID: 'y',
+                        tension: 0.3
+                    });
+                    
+                    datasets.push({
+                        label: `${exchange} - MA Count`,
+                        data: dates.map(d => {
+                            const row = data.find(r => r[dateIdx] === d && r[exchangeIdx] === exchange);
+                            return row ? (row[maCountIdx] || 0) : 0;
+                        }),
+                        borderColor: colors[idx % colors.length],
+                        backgroundColor: 'transparent',
+                        borderWidth: 2,
+                        borderDash: [5, 5],
+                        yAxisID: 'y',
+                        tension: 0.3
+                    });
+                    
+                    datasets.push({
+                        label: `${exchange} - Volume`,
+                        data: dates.map(d => {
+                            const row = data.find(r => r[dateIdx] === d && r[exchangeIdx] === exchange);
+                            return row ? (row[volumeIdx] || 0) : 0;
+                        }),
+                        borderColor: colors[(idx + 2) % colors.length],
+                        backgroundColor: colors[(idx + 2) % colors.length] + '33',
+                        borderWidth: 2,
+                        yAxisID: 'y1',
+                        tension: 0.3
+                    });
+                });
+                
+                charts.movingAverage = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: dates.map(d => new Date(d).toLocaleDateString()),
+                        datasets: datasets
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        interaction: { mode: 'index', intersect: false },
+                        scales: {
+                            y: {
+                                type: 'linear',
+                                display: true,
+                                position: 'left',
+                                title: { display: true, text: 'Trade Count', color: '#94a3b8' },
+                                grid: { color: 'rgba(255,255,255,0.05)' },
+                                ticks: { color: '#64748b' }
+                            },
+                            y1: {
+                                type: 'linear',
+                                display: true,
+                                position: 'right',
+                                title: { display: true, text: 'Volume (€)', color: '#94a3b8' },
+                                grid: { drawOnChartArea: false },
+                                ticks: { color: '#64748b' }
+                            },
+                            x: {
+                                grid: { display: false },
+                                ticks: { color: '#64748b' }
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                display: true,
+                                position: 'bottom',
+                                labels: { color: '#94a3b8', boxWidth: 12, usePointStyle: true, padding: 15 }
+                            }
+                        }
+                    }
+                });
+            } catch (err) {
+                console.error('Error loading moving average:', err);
+            }
+        }
+
+        async function loadVolumeChanges(days) {
+            try {
+                const res = await fetch(`${API}/statistics/volume-changes?days=${days}`).then(r => r.json());
+                const data = res.dataset || [];
+                const columns = res.columns || [];
+                
+                if (!data.length) {
+                    console.log('No volume changes data available');
+                    return;
+                }
+                
+                const ctx = document.getElementById('volumeChangesChart').getContext('2d');
+                if (charts.volumeChanges) charts.volumeChanges.destroy();
+                
+                const exchangeIdx = columns.findIndex(c => c.name === 'exchange');
+                const countChangeIdx = columns.findIndex(c => c.name === 'count_change_pct');
+                const volumeChangeIdx = columns.findIndex(c => c.name === 'volume_change_pct');
+                const trendIdx = columns.findIndex(c => c.name === 'trend');
+                
+                const exchanges = data.map(r => r[exchangeIdx]);
+                const countChanges = data.map(r => r[countChangeIdx] || 0);
+                const volumeChanges = data.map(r => r[volumeChangeIdx] || 0);
+                
+                charts.volumeChanges = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: exchanges,
+                        datasets: [
+                            {
+                                label: 'Anzahl Änderung (%)',
+                                data: countChanges,
+                                backgroundColor: '#38bdf866',
+                                borderColor: '#38bdf8',
+                                borderWidth: 2,
+                                yAxisID: 'y'
+                            },
+                            {
+                                label: 'Volumen Änderung (%)',
+                                data: volumeChanges,
+                                backgroundColor: '#fbbf2466',
+                                borderColor: '#fbbf24',
+                                borderWidth: 2,
+                                yAxisID: 'y'
+                            }
+                        ]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            y: {
+                                type: 'linear',
+                                display: true,
+                                title: { display: true, text: 'Änderung (%)', color: '#94a3b8' },
+                                grid: { color: 'rgba(255,255,255,0.05)' },
+                                ticks: { color: '#64748b' }
+                            },
+                            x: {
+                                grid: { display: false },
+                                ticks: { color: '#64748b' }
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                display: true,
+                                position: 'top',
+                                labels: { color: '#94a3b8', boxWidth: 12, usePointStyle: true, padding: 15 }
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    afterLabel: (context) => {
+                                        const idx = context.dataIndex;
+                                        const trend = data[idx][trendIdx];
+                                        return `Trend: ${trend || 'N/A'}`;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            } catch (err) {
+                console.error('Error loading volume changes:', err);
+            }
+        }
+
+        async function loadStockTrends(days) {
+            try {
+                const res = await fetch(`${API}/statistics/stock-trends?days=${days}&limit=20`).then(r => r.json());
+                const data = res.dataset || [];
+                const columns = res.columns || [];
+                
+                if (!data.length) {
+                    console.log('No stock trends data available');
+                    return;
+                }
+                
+                const ctx = document.getElementById('stockTrendsChart').getContext('2d');
+                const tableContainer = document.getElementById('stockTrendsTable');
+                
+                if (charts.stockTrends) charts.stockTrends.destroy();
+                
+                const isinIdx = columns.findIndex(c => c.name === 'isin');
+                const volumeIdx = columns.findIndex(c => c.name === 'volume');
+                const countIdx = columns.findIndex(c => c.name === 'trade_count');
+                const countChangeIdx = columns.findIndex(c => c.name === 'count_change_pct');
+                const volumeChangeIdx = columns.findIndex(c => c.name === 'volume_change_pct');
+                
+                const sorted = [...data].sort((a, b) => (b[volumeIdx] || 0) - (a[volumeIdx] || 0)).slice(0, 10);
+                
+                const isins = sorted.map(r => r[isinIdx]);
+                const volumes = sorted.map(r => r[volumeIdx] || 0);
+                
+                charts.stockTrends = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: isins.map(i => i ? i.substring(0, 12) + '...' : 'N/A'),
+                        datasets: [{
+                            label: 'Volumen (€)',
+                            data: volumes,
+                            backgroundColor: '#10b98166',
+                            borderColor: '#10b981',
+                            borderWidth: 2,
+                            yAxisID: 'y'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            y: {
+                                type: 'linear',
+                                display: true,
+                                title: { display: true, text: 'Volumen (€)', color: '#94a3b8' },
+                                grid: { color: 'rgba(255,255,255,0.05)' },
+                                ticks: { color: '#64748b' }
+                            },
+                            x: {
+                                grid: { display: false },
+                                ticks: { color: '#64748b', maxRotation: 45, minRotation: 45 }
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                display: true,
+                                position: 'top',
+                                labels: { color: '#94a3b8', boxWidth: 12, usePointStyle: true, padding: 15 }
+                            }
+                        }
+                    }
+                });
+                
+                tableContainer.innerHTML = `
+                    <table class="w-full text-left text-sm">
+                        <thead>
+                            <tr class="border-b border-white/10">
+                                <th class="p-3 text-slate-400 font-bold">ISIN</th>
+                                <th class="p-3 text-slate-400 font-bold">Trades</th>
+                                <th class="p-3 text-slate-400 font-bold">Volumen (€)</th>
+                                <th class="p-3 text-slate-400 font-bold">Anzahl Δ (%)</th>
+                                <th class="p-3 text-slate-400 font-bold">Volumen Δ (%)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${sorted.map(r => `
+                                <tr class="border-b border-white/5 hover:bg-white/5">
+                                    <td class="p-3 font-mono text-sky-400">${r[isinIdx] || 'N/A'}</td>
+                                    <td class="p-3 text-slate-300">${(r[countIdx] || 0).toLocaleString()}</td>
+                                    <td class="p-3 text-slate-300">€${((r[volumeIdx] || 0) / 1e6).toFixed(2)}M</td>
+                                    <td class="p-3 ${(r[countChangeIdx] || 0) >= 0 ? 'text-green-400' : 'text-red-400'}">${((r[countChangeIdx] || 0)).toFixed(2)}%</td>
+                                    <td class="p-3 ${(r[volumeChangeIdx] || 0) >= 0 ? 'text-green-400' : 'text-red-400'}">${((r[volumeChangeIdx] || 0)).toFixed(2)}%</td>
+                                </tr>
+                            `).join('')}
+                        </tbody>
+                    </table>
+                `;
+            } catch (err) {
+                console.error('Error loading stock trends:', err);
+            }
+        }
+
+        window.onload = async () => { 
+            await fetchData(); 
+            setInterval(fetchData, 30000);
+            setTimeout(() => loadStatistics(), 1000);
+        };
+    </script>
+</body>
+</html>
