fix live updates

2025-12-10 14:39:06 +02:00
parent e200600a0a
commit 732c5b4941
6 changed files with 290 additions and 8 deletions
--- a/test_chart_updates.html
+++ b/test_chart_updates.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Chart Updates Test</title>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+</head>
+<body>
+    <div id="test-plot" style="width:100%;height:400px;"></div>
+    
+    <script>
+        // Test the fixed chart update logic
+        console.log('Testing chart update fix...');
+        
+        // Create initial chart with volume trace
+        const plotElement = document.getElementById('test-plot');
+        
+        const candlestickTrace = {
+            x: ['2025-12-10T09:00:00Z', '2025-12-10T09:01:00Z'],
+            open: [3320, 3322],
+            high: [3325, 3324],
+            low: [3318, 3320],
+            close: [3322, 3318],
+            type: 'candlestick',
+            name: 'Price'
+        };
+        
+        const volumeTrace = {
+            x: ['2025-12-10T09:00:00Z', '2025-12-10T09:01:00Z'],
+            y: [100, 150],
+            type: 'bar',
+            name: 'Volume',
+            yaxis: 'y2',
+            marker: {
+                color: ['#10b981', '#ef4444'],
+                opacity: 0.3
+            }
+        };
+        
+        const layout = {
+            title: 'Chart Update Test',
+            xaxis: { type: 'date' },
+            yaxis: { title: 'Price', domain: [0.3, 1] },
+            yaxis2: { title: 'Volume', domain: [0, 0.25] }
+        };
+        
+        Plotly.newPlot('test-plot', [candlestickTrace, volumeTrace], layout).then(() => {
+            console.log('✅ Initial chart created');
+            
+            // Test extending traces (simulating live update)
+            setTimeout(() => {
+                console.log('Testing extendTraces...');
+                
+                const newTimestamp = '2025-12-10T09:02:00Z';
+                const newCandle = { open: 3318, high: 3320, low: 3316, close: 3319, volume: 200 };
+                
+                // Test candlestick extension
+                Plotly.extendTraces('test-plot', {
+                    x: [[newTimestamp]],
+                    open: [[newCandle.open]],
+                    high: [[newCandle.high]],
+                    low: [[newCandle.low]],
+                    close: [[newCandle.close]]
+                }, [0]).then(() => {
+                    console.log('✅ Candlestick extended successfully');
+                    
+                    // Test volume extension (the fixed version)
+                    return Plotly.extendTraces('test-plot', {
+                        x: [[newTimestamp]],
+                        y: [[newCandle.volume]]
+                    }, [1]);
+                }).then(() => {
+                    console.log('✅ Volume extended successfully');
+                    
+                    // Update volume color separately
+                    const currentTrace = plotElement.data[1];
+                    if (currentTrace && currentTrace.marker && currentTrace.marker.color) {
+                        const volumeColor = newCandle.close >= newCandle.open ? '#10b981' : '#ef4444';
+                        const newColors = [...currentTrace.marker.color, volumeColor];
+                        return Plotly.restyle('test-plot', {'marker.color': [newColors]}, [1]);
+                    }
+                }).then(() => {
+                    console.log('✅ Volume color updated successfully');
+                    console.log('✅ Chart update fix working correctly!');
+                }).catch(err => {
+                    console.error('❌ Chart update failed:', err);
+                });
+            }, 2000);
+        });
+    </script>
+</body>
+</html>