Usar dados reais usando essa api import { CandleData } from '@/types/trading'; const API_BASE_URL = 'https://api.binance.com/api/v3'; export const fetchMarketData = async (symbol: string, timeframe: string): Promise<CandleData[]> => { try { console.log('Fetching market data for:', symbol); // Convert forex pair to Binance spot format const formattedSymbol = symbol === 'EURUSD' ? 'EURUSDT' : symbol; // Convert timeframe to interval format expected by Binance const interval = timeframe.replace('m', 'm').replace('h', 'h').replace('d', 'd'); // Get current timestamp const endTime = Date.now(); const startTime = endTime - (30 * 60 * 1000); // Last 30 minutes of data console.log('Making API request with:', { symbol: formattedSymbol, interval, startTime, endTime }); // Fetch real market data from Binance Spot API const response = await fetch( `${API_BASE_URL}/klines?symbol=${formattedSymbol}&interval=${interval}&startTime=${startTime}&endTime=${endTime}&limit=30` ); if (!response.ok) { const errorText = await response.text(); console.error('API Error Response:', errorText); throw new Error(`Failed to fetch market data: ${response.statusText}. ${errorText}`); } const data = await response.json(); // Transform Binance data to CandleData format const candles: CandleData[] = data.map((candle: any) => ({ timestamp: candle[0], open: parseFloat(candle[1]), high: parseFloat(candle[2]), low: parseFloat(candle[3]), close: parseFloat(candle[4]), volume: parseFloat(candle[5]) })); console.log('Processed market data:', candles); return candles; } catch (error) { console.error('Error fetching market data:', error); throw error; } }; - Follow Up Deployment

index.html

@@ -7,7 +7,8 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script type="text/babel">
         tailwind.config = {
             theme: {
                 extend: {
@@ -22,6 +23,61 @@
                 }
             }
         }
+
+        // API functions
+        const API_BASE_URL = 'https://api.binance.com/api/v3';
+
+        const fetchMarketData = async (symbol, timeframe) => {
+            try {
+                console.log('Fetching market data for:', symbol);
+                
+                // Convert forex pair to Binance spot format
+                const formattedSymbol = symbol === 'EURUSD' ? 'EURUSDT' : symbol;
+                
+                // Convert timeframe to interval format expected by Binance
+                const interval = timeframe.replace('m', 'm').replace('h', 'h').replace('d', 'd');
+                
+                // Get current timestamp
+                const endTime = Date.now();
+                const startTime = endTime - (30 * 60 * 1000); // Last 30 minutes of data
+                
+                console.log('Making API request with:', {
+                    symbol: formattedSymbol,
+                    interval,
+                    startTime,
+                    endTime
+                });
+
+                // Fetch real market data from Binance Spot API
+                const response = await fetch(
+                    `${API_BASE_URL}/klines?symbol=${formattedSymbol}&interval=${interval}&startTime=${startTime}&endTime=${endTime}&limit=30`
+                );
+
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error('API Error Response:', errorText);
+                    throw new Error(`Failed to fetch market data: ${response.statusText}. ${errorText}`);
+                }
+
+                const data = await response.json();
+                
+                // Transform Binance data to CandleData format
+                const candles = data.map(candle => ({
+                    timestamp: candle[0],
+                    open: parseFloat(candle[1]),
+                    high: parseFloat(candle[2]),
+                    low: parseFloat(candle[3]),
+                    close: parseFloat(candle[4]),
+                    volume: parseFloat(candle[5])
+                }));
+
+                console.log('Processed market data:', candles);
+                return candles;
+            } catch (error) {
+                console.error('Error fetching market data:', error);
+                throw error;
+            }
+        };
     </script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@@ -306,9 +362,31 @@
                             <option>Últimas 24 horas</option>
                         </select>
                     </div>
-                    <canvas id="performanceChart" height="200"></canvas>
+                    <!-- Real-time Price Chart -->
+                    <div class="stat-card p-6 mb-8">
+                        <div class="flex justify-between items-center mb-6">
+                            <h2 class="text-xl font-bold">EUR/USD em Tempo Real</h2>
+                            <div class="flex items-center space-x-4">
+                                <div class="text-2xl font-bold" id="latestPrice">1.08420</div>
+                                <div class="text-sm font-medium" id="priceChange">+0.24%</div>
+                            </div>
+                        </div>
+                        <canvas id="priceChart" height="200"></canvas>
+                    </div>
+                    
+                    <!-- Performance Chart -->
+                    <div class="stat-card p-6">
+                        <div class="flex justify-between items-center mb-6">
+                            <h2 class="text-xl font-bold">Performance da Rede Neural</h2>
+                            <select class="bg-secondary border border-gray-700 rounded-lg px-3 py-1 text-sm">
+                                <option>Últimos 30 dias</option>
+                                <option>Últimos 7 dias</option>
+                                <option>Últimas 24 horas</option>
+                            </select>
+                        </div>
+                        <canvas id="performanceChart" height="200"></canvas>
+                    </div>
                 </div>
-            </div>
             
             <!-- Painel Lateral -->
             <div>
@@ -510,55 +588,109 @@
         </div>
     </footer>
 
-    <script>
-        // Inicializar gráfico de performance
-        const ctx = document.getElementById('performanceChart').getContext('2d');
-        const performanceChart = new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
-                datasets: [{
-                    label: 'Taxa de Acerto (%)',
-                    data: [82, 85, 87, 89, 90, 91, 92, 91, 93, 92, 94, 92.7],
-                    borderColor: '#3b82f6',
-                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                    borderWidth: 2,
-                    pointBackgroundColor: '#3b82f6',
-                    fill: true,
-                    tension: 0.3
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: {
-                        display: false
-                    }
+    <script type="text/babel">
+        // Initialize charts
+        let priceChart;
+        let performanceChart;
+
+        // Initialize price chart
+        const initPriceChart = () => {
+            const ctx = document.getElementById('priceChart').getContext('2d');
+            priceChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'EUR/USD Price',
+                        data: [],
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        borderWidth: 2,
+                        pointRadius: 0,
+                        fill: true,
+                        tension: 0.2
+                    }]
                 },
-                scales: {
-                    y: {
-                        beginAtZero: false,
-                        min: 80,
-                        max: 100,
-                        grid: {
-                            color: 'rgba(255, 255, 255, 0.1)'
-                        },
-                        ticks: {
-                            color: '#94a3b8'
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
                         }
                     },
-                    x: {
-                        grid: {
+                    scales: {
+                        y: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
+                        }
+                    }
+                }
+            });
+        };
+
+        // Initialize performance chart
+        const initPerformanceChart = () => {
+            const ctx = document.getElementById('performanceChart').getContext('2d');
+            performanceChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+                    datasets: [{
+                        label: 'Taxa de Acerto (%)',
+                        data: [82, 85, 87, 89, 90, 91, 92, 91, 93, 92, 94, 92.7],
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        borderWidth: 2,
+                        pointBackgroundColor: '#3b82f6',
+                        fill: true,
+                        tension: 0.3
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
                             display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: false,
+                            min: 80,
+                            max: 100,
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
                         },
-                        ticks: {
-                            color: '#94a3b8'
+                        x: {
+                            grid: {
+                                display: false
+                            },
+                            ticks: {
+                                color: '#94a3b8'
+                            }
                         }
                     }
                 }
-            }
-        });
+            });
+        };
         
         // Simular conexões na rede neural
         function drawNetworkConnections() {