Use dados reais do mercado , crie e crie os gráficos de Candes - Follow Up Deployment

index.html

@@ -237,6 +237,7 @@
         
         // Variáveis globais
         let tradingActive = false;
+        let candlestickChart;
         let simulationInterval;
         let currentBalance = 100;
         let transactionCount = 0;
@@ -248,10 +249,11 @@
         let modelUpdateCount = 0;
         
         // Inicialização
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             createNeuralNetworkVisualization();
             initializeBalanceChart();
             setupEventListeners();
+            await initializeCandlestickChart();
         });
         
         // Criar visualização da rede neural
@@ -356,6 +358,83 @@
             }
         }
         
+        // Buscar dados de candlestick da Binance
+        async function fetchCandlestickData(symbol = 'BTCUSDT', interval = '1h', limit = 100) {
+            try {
+                const response = await axios.get(`https://api.binance.com/api/v3/klines?symbol=${symbol}&interval=${interval}&limit=${limit}`);
+                return response.data.map(item => ({
+                    time: new Date(item[0]),
+                    open: parseFloat(item[1]),
+                    high: parseFloat(item[2]),
+                    low: parseFloat(item[3]),
+                    close: parseFloat(item[4]),
+                    volume: parseFloat(item[5])
+                }));
+            } catch (error) {
+                console.error('Error fetching candlestick data:', error);
+                return [];
+            }
+        }
+
+        // Inicializar gráfico de candlestick
+        async function initializeCandlestickChart() {
+            const candlestickData = await fetchCandlestickData();
+            
+            const ctx = document.getElementById('candlestickChart').getContext('2d');
+            candlestickChart = new Chart(ctx, {
+                type: 'candlestick',
+                data: {
+                    labels: candlestickData.map(item => item.time.toLocaleTimeString()),
+                    datasets: [{
+                        label: 'BTC/USDT',
+                        data: candlestickData.map(item => ({
+                            x: item.time,
+                            o: item.open,
+                            h: item.high,
+                            l: item.low,
+                            c: item.close
+                        })),
+                        color: {
+                            up: '#10b981',
+                            down: '#ef4444',
+                            unchanged: '#94a3b8',
+                        }
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            type: 'time',
+                            time: {
+                                unit: 'hour'
+                            },
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#cbd5e1'
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#cbd5e1'
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                }
+            });
+        }
+
         // Inicializar gráfico de saldo
         function initializeBalanceChart() {
             const ctx = document.getElementById('balanceChart').getContext('2d');