Fixing metrics graph

app.py

@@ -21,6 +21,7 @@ from tabs.metrics import (
     metric_choices,
     default_metric,
     plot_trade_details,
+    plot2_trade_details,
 )
 
 from tabs.tool_win import (
@@ -191,15 +192,15 @@ with demo:
             with gr.Row():
                 gr.Markdown("# Trend of weekly trades")
             with gr.Row():
-                with gr.Column(min_width=350):
+                with gr.Column():
                     qs_trades_by_week = plot_trades_per_market_by_week(
                         trades_df=trades_by_market, market_type="quickstart"
                     )
-                with gr.Column(min_width=350):
+                with gr.Column():
                     pearl_trades_by_week = plot_trades_per_market_by_week(
                         trades_df=trades_by_market, market_type="pearl"
                     )
-                with gr.Column(min_width=350):
+                with gr.Column():
                     all_trades_by_week = plot_trades_per_market_by_week(
                         trades_df=trades_by_market, market_type="all"
                     )
@@ -207,16 +208,15 @@ with demo:
             with gr.Row():
                 gr.Markdown("# Percentage of winning trades per week")
             with gr.Row():
-                with gr.Column(min_width=350):
+                with gr.Column():
                     qs_wtrades_by_week = plot_winning_trades_per_market_by_week(
                         trades_df=winning_trades_by_market, market_type="quickstart"
                     )
-                with gr.Column(min_width=350):
-                    # gr.Markdown("# From Pearl market creator")
+                with gr.Column():
                     pearl_wtrades_by_week = plot_winning_trades_per_market_by_week(
                         trades_df=winning_trades_by_market, market_type="pearl"
                     )
-                with gr.Column(min_width=350):
+                with gr.Column():
                     all_wtrades_by_week = plot_winning_trades_per_market_by_week(
                         trades_df=winning_trades_by_market, market_type="all"
                     )
@@ -230,12 +230,14 @@ with demo:
                     value=default_metric,
                 )
             with gr.Row():
-                trade_details_plot = plot_trade_details(
+                trade_details_plot = plot2_trade_details(
                     metric_name=default_metric, trades_df=trades_df
                 )
 
             def update_trade_details(trade_detail):
-                return plot_trade_details(metric_name=trade_detail, trades_df=trades_df)
+                return plot2_trade_details(
+                    metric_name=trade_detail, trades_df=trades_df
+                )
 
             trade_details_selector.change(
                 update_trade_details,

tabs/metrics.py

@@ -1,5 +1,6 @@
 import pandas as pd
 import gradio as gr
+import plotly.express as px
 
 metric_choices = [
     "mech calls",
@@ -58,6 +59,62 @@ def plot_trade_details(metric_name: str, trades_df: pd.DataFrame) -> gr.LinePlot
     )
 
 
+def plot2_trade_details(metric_name: str, trades_df: pd.DataFrame) -> gr.Plot:
+    """Plots the trade details for the given trade detail."""
+
+    if metric_name == "mech calls":
+        metric_name = "mech_calls"
+        column_name = "num_mech_calls"
+        yaxis_title = "Nr of mech calls per trade"
+    elif metric_name == "ROI":
+        column_name = "roi"
+        yaxis_title = "ROI (net profit/cost)"
+    elif metric_name == "collateral amount":
+        metric_name = "collateral_amount"
+        column_name = metric_name
+        yaxis_title = "Collateral amount per trade (xDAI)"
+    elif metric_name == "net earnings":
+        metric_name = "net_earnings"
+        column_name = metric_name
+        yaxis_title = "Net profit per trade (xDAI)"
+    else:  # earnings
+        column_name = metric_name
+        yaxis_title = "Gross profit per trade (xDAI)"
+
+    # this is to filter out the data before 2023-09-01
+    trades_filtered = trades_df[trades_df["creation_timestamp"] > "2023-09-01"]
+    trades_filtered = (
+        trades_filtered.groupby("month_year_week", sort=False)[column_name]
+        .quantile([0.25, 0.5, 0.75])
+        .unstack()
+    )
+    trades_filtered.columns = trades_filtered.columns.astype(str)
+    trades_filtered.reset_index(inplace=True)
+    trades_filtered.columns = [
+        "month_year_week",
+        "25th_percentile",
+        "50th_percentile",
+        "75th_percentile",
+    ]
+    # reformat the data as percentile, date, value
+    trades_filtered = trades_filtered.melt(
+        id_vars=["month_year_week"], var_name="percentile", value_name=metric_name
+    )
+
+    fig = px.line(
+        trades_filtered, x="month_year_week", y=metric_name, color="percentile"
+    )
+    fig.update_layout(
+        xaxis_title="Week",
+        yaxis_title=yaxis_title,
+        legend=dict(yanchor="top", y=0.5),
+    )
+    fig.update_xaxes(tickformat="%b %d\n%Y")
+    return gr.Plot(
+        value=fig,
+    )
+
+
 def plot_average_roi_per_market_by_week(trades_df: pd.DataFrame) -> gr.LinePlot:
 
     mean_roi_per_market_by_week = (