Update app.py

app.py

@@ -139,37 +139,37 @@ def update_performance_chart(trades):
         month = datetime.fromtimestamp(trade['time'] / 1000).strftime('%b')
         monthly_pl[month] = monthly_pl.get(month, 0) + trade['income']
     chart_data = {
-        'labels': list(monthly_pl.keys()),
-        'datasets': [{'label': 'Profit/Loss', 'data': list(monthly_pl.values()), 'borderColor': '#1E90FF', 'backgroundColor': 'rgba(30, 144, 255, 0.1)', 'tension': 0.4, 'fill': True}]
+        'x': list(monthly_pl.keys()),
+        'y': list(monthly_pl.values()),
+        'color': ['#1E90FF'] * len(monthly_pl),
+        'title': 'Monthly Performance',
+        'x_title': 'Month',
+        'y_title': 'Profit/Loss ($)'
     }
-    return gr.Chart(value=chart_data, type="line", options={
-        'responsive': True,
-        'plugins': {'legend': {'display': False}},
-        'scales': {'y': {'grid': {'color': 'rgba(0, 0, 0, 0.05)', 'borderDash': [5]}, 'ticks': {'callback': lambda value: f'${value}'}}, 'x': {'grid': {'display': False}}}
-    })
+    return gr.LinePlot(value=chart_data, x='x', y='y', color='color', title='Monthly Performance', x_title='Month', y_title='Profit/Loss ($)')
 
 def update_allocation_chart(allocation):
     chart_data = {
-        'labels': allocation['labels'],
-        'datasets': [{'data': allocation['data'], 'backgroundColor': ['#1E90FF', '#10b981', '#8b5cf6', '#f59e0b'], 'borderWidth': 0}]
+        'names': allocation['labels'],
+        'values': allocation['data'],
+        'colors': ['#1E90FF', '#10b981', '#8b5cf6', '#f59e0b'],
+        'title': 'Portfolio Allocation'
     }
     legend_html = "\n".join(f"""
         <div class="mb-3">
             <div class="flex justify-between mb-1">
                 <span class="text-gray-500 dark:text-gray-400 flex items-center">
-                    <span class="h-3 w-3 bg-[{chart_data['datasets'][0]['backgroundColor'][i]}] rounded-full mr-2"></span>
+                    <span class="h-3 w-3 bg-[{chart_data['colors'][i % 4]}] rounded-full mr-2"></span>
                     {label}
                 </span>
                 <span class="font-medium dark:text-white">{data:.1f}%</span>
             </div>
             <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                <div class="bg-[{chart_data['datasets'][0]['backgroundColor'][i]}] h-2 rounded-full" style="width: {data}%"></div>
+                <div class="bg-[{chart_data['colors'][i % 4]}] h-2 rounded-full" style="width: {data}%"></div>
             </div>
         </div>
     """ for i, (label, data) in enumerate(zip(allocation['labels'], allocation['data'])))
-    return gr.Chart(value=chart_data, type="doughnut", options={
-        'responsive': True, 'cutout': '65%', 'plugins': {'legend': {'display': False}, 'tooltip': {'callbacks': {'label': lambda context: f"{context['label']}: {context['parsed']}%"}}}
-    }), gr.HTML(legend_html)
+    return gr.PiePlot(value=chart_data, name='names', value='values', color='colors', title='Portfolio Allocation'), gr.HTML(legend_html)
 
 # Main Data Fetch and Update Function
 def update_dashboard(api_key, api_secret):
@@ -198,7 +198,7 @@ def update_dashboard(api_key, api_secret):
     except Exception as e:
         return (
             "$Loading...", 0, "0 Long • 0 Short", "$0.00", "Low", "0%", gr.HTML("<tr><td colspan='8' class='py-4 text-center'>Error: Failed to sync with BingX API - Check credentials</td></tr>"),
-            gr.HTML("<div>Error loading stats</div>"), gr.Chart(), (gr.Chart(), gr.HTML("")), "Just now", "Just now"
+            gr.HTML("<div>Error loading stats</div>"), gr.LinePlot(), (gr.PiePlot(), gr.HTML("")), "Just now", "Just now"
         )
 
 # Save Credentials Function
@@ -267,7 +267,7 @@ with gr.Blocks(title="Nakhoda4X Pro") as demo:
             # Charts and Statistics
             with gr.Row(elem_classes="grid grid-cols-1 lg:grid-cols-3 gap-6"):
                 with gr.Column(scale=2):
-                    performance_chart = gr.Chart()
+                    performance_chart = gr.LinePlot()
                     gr.HTML("<div class='flex justify-between items-center mb-6'><h3 class='text-lg font-bold text-gray-800 dark:text-white'>Monthly Performance</h3><div class='flex space-x-3'><button class='px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white'>1M</button><button class='px-3 py-1 rounded-lg text-sm bg-primary text-white'>3M</button><button class='px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white'>6M</button><button class='px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white'>1Y</button></div></div>")
                 with gr.Column(scale=1):
                     advanced_stats = gr.HTML()
@@ -294,7 +294,7 @@ with gr.Blocks(title="Nakhoda4X Pro") as demo:
                     portfolio_allocation = gr.Blocks()
                     with portfolio_allocation:
                         gr.HTML("<div class='bg-white dark:bg-darkCard rounded-2xl shadow-md p-6'><div class='flex justify-between items-center mb-6'><h3 class='text-lg font-bold text-gray-800 dark:text-white'>Portfolio Allocation</h3><div><span id='allocation-update' class='text-gray-500 dark:text-gray-400 text-sm'>Last updated: Just now</span></div></div>")
-                        allocation_chart, allocation_legend = gr.Chart(), gr.HTML()
+                        allocation_chart, allocation_legend = gr.PiePlot(), gr.HTML()
 
     # Event Handlers
     toggle_btn.click(fn=toggle_api_form, inputs=[show_form], outputs=[api_form], _js="() => !document.querySelector('.api-form').classList.contains('open')")