updated

dashboard/public/index.html

@@ -125,8 +125,8 @@
                     </div>
                 </div>
                 
-                <button onclick="updateCustomGraph()" class="btn-primary px-6 py-2">Graph aktualisieren</button>
-                <button onclick="shareCustomGraph()" class="glass px-6 py-2 ml-2 text-sky-400 hover:text-sky-200">🔗 Link teilen</button>
+                <button onclick="updateCustomGraph()" class="glass px-6 py-3 bg-sky-500 hover:bg-sky-600 text-white font-bold rounded-lg transition-colors cursor-pointer">Graph aktualisieren</button>
+                <button onclick="shareCustomGraph()" class="glass px-6 py-3 ml-2 text-sky-400 hover:text-sky-200 font-bold rounded-lg transition-colors cursor-pointer">🔗 Link teilen</button>
             </div>
             
             <div class="glass p-8">
@@ -140,8 +140,16 @@
         const API = '/api';
         let store = { trades: [], metadata: [], summary: [], totalTrades: 0 };
         let charts = {};
+        let isRefreshing = false;
+        let refreshInterval = null;
 
-        async function fetchData() {
+        let isRefreshing = false;
+        let refreshInterval = null;
+
+        async function fetchData(skipCharts = false) {
+            if (isRefreshing) return; // Verhindere parallele Aufrufe
+            isRefreshing = true;
+            
             try {
                 const days = parseInt(document.getElementById('statisticsPeriod')?.value || '7');
                 // Lade alle Trades (aggregiert) und Total Trades aus vorberechneten Daten
@@ -153,13 +161,15 @@
                 ]);
                 store = { ...store, trades: t.dataset || [], metadata: m.dataset || [], summary: s.dataset || [] };
                 store.totalTrades = totalTrades.total_trades || 0;
-                updateDashboard(days);
+                updateDashboard(days, skipCharts);
             } catch (err) { 
                 console.error('Error fetching data:', err); 
+            } finally {
+                isRefreshing = false;
             }
         }
 
-        function updateDashboard(days = 7) {
+        function updateDashboard(days = 7, skipCharts = false) {
             // Volumen aus dem gewählten Zeitraum (aggregiert)
             let vol = 0;
             if (store.trades && store.trades.length > 0) {
@@ -174,8 +184,10 @@
             document.getElementById('statTradesLabel').innerText = `Total Trades (${days}d)`;
             document.getElementById('statIsins').innerText = store.metadata.length.toLocaleString();
             
-            // Lade Statistiken
-            loadStatistics();
+            // Lade Statistiken nur wenn nicht übersprungen (verhindert Graph-Zucken)
+            if (!skipCharts) {
+                loadStatistics();
+            }
         }
 
         function showView(viewId) {
@@ -193,14 +205,13 @@
 
         async function loadStatistics() {
             const days = parseInt(document.getElementById('statisticsPeriod')?.value || '7');
-            // Aktualisiere auch die Statistik-Karten
-            await fetchData();
-            // Lade dann die Graphen
+            // Lade die Graphen (ohne fetchData aufzurufen, um Zucken zu vermeiden)
             await Promise.all([
                 loadMovingAverage(days),
                 loadVolumeChanges(days),
                 loadStockTrends(days)
             ]);
+            updateUrlParams();
         }
 
         async function loadMovingAverage(days) {
@@ -730,7 +741,12 @@
             
             await fetchData(); 
             loadFromUrlParams();
-            setInterval(fetchData, 30000);
+            
+            // Automatisches Refresh: Aktualisiere nur Daten, nicht die Graphen (verhindert Zucken)
+            refreshInterval = setInterval(() => {
+                fetchData(true); // skipCharts = true
+            }, 30000);
+            
             setTimeout(() => loadStatistics(), 1000);
         };
     </script>