feat: enhance responsiveness and styling of APR vs Agent Hash graph

app.py

@@ -3046,11 +3046,11 @@ def dashboard():
         gr.HTML("""
         <style>
             /* Make plots responsive */
-            #responsive_apr_plot, #responsive_roi_plot, #responsive_volume_plot {
+            #responsive_apr_plot, #responsive_roi_plot, #responsive_volume_plot, #responsive_apr_hash_plot {
                 width: 100% !important;
                 max-width: 100% !important;
             }
-            #responsive_apr_plot > div, #responsive_roi_plot > div, #responsive_volume_plot > div {
+            #responsive_apr_plot > div, #responsive_roi_plot > div, #responsive_volume_plot > div, #responsive_apr_hash_plot > div {
                 width: 100% !important;
                 height: auto !important;
                 min-height: 500px !important;

apr_vs_agent_hash.py

@@ -243,7 +243,7 @@ def create_apr_vs_agent_hash_graph(df):
         change_color = "green" if is_improvement else "red"
         change_text = "improvement" if is_improvement else "decrease"
         
-        # Add annotation showing improvement with better styling
+        # Add annotation showing improvement with better styling (black color)
         fig.add_annotation(
             x=(len(sorted_hashes) - 1) / 2,  # Center of the x-axis
             y=90,  # Top of the chart
@@ -252,11 +252,11 @@ def create_apr_vs_agent_hash_graph(df):
             font=dict(
                 family="Arial, sans-serif",
                 size=16,
-                color=change_color,
+                color="black",  # Changed to black
                 weight="bold"
             ),
             bgcolor="rgba(255, 255, 255, 0.9)",
-            bordercolor=change_color,
+            bordercolor="black",  # Changed to black
             borderwidth=2,
             borderpad=6,
             opacity=0.9
@@ -297,9 +297,9 @@ def create_apr_vs_agent_hash_graph(df):
         ),
         yaxis_title=None,  # Remove the y-axis title as we'll use annotations instead
         template="plotly_white",
-        height=700,  # Increased height for better visualization
-        width=900,   # Set a fixed width for better proportions
-        autosize=True,  # Still enable auto-sizing for responsiveness
+        height=900,  # Increased height for better visualization and more vertical space
+        # width parameter removed to allow full responsiveness
+        autosize=True,  # Enable auto-sizing for responsiveness
         boxmode='group',  # Group boxes together
         margin=dict(r=50, l=120, t=100, b=100),  # Reduced right margin since guide was removed
         hovermode="closest",
@@ -313,22 +313,10 @@ def create_apr_vs_agent_hash_graph(df):
         showlegend=False
     )
     
-    # Add annotations for y-axis regions
+    # Add single annotation for y-axis
     fig.add_annotation(
         x=-0.08,  # Position further from the y-axis to avoid overlapping with tick labels
-        y=-25,    # Middle of the negative region
-        xref="paper",
-        yref="y",
-        text="Percent drawdown [%]",
-        showarrow=False,
-        font=dict(size=16, family="Arial, sans-serif", color="black", weight="bold"),  # Adjusted font size
-        textangle=-90,  # Rotate text to be vertical
-        align="center"
-    )
-    
-    fig.add_annotation(
-        x=-0.08,  # Position further from the y-axis to avoid overlapping with tick labels
-        y=50,     # Middle of the positive region
+        y=0,      # Center of the y-axis
         xref="paper",
         yref="y",
         text="Agent APR [%]",
@@ -340,14 +328,13 @@ def create_apr_vs_agent_hash_graph(df):
     
     # Box plot guide removed as per user request
     
-    # Update y-axis with fixed range of -50 to +100 for psychological effect
+    # Update y-axis with autoscaling
     fig.update_yaxes(
         showgrid=True, 
         gridwidth=1, 
         gridcolor='rgba(0,0,0,0.1)',
-        # Use fixed range instead of autoscaling
-        autorange=False,  # Disable autoscaling
-        range=[-50, 100],  # Set fixed range from -50 to +100
+        # Use autoscaling
+        autorange=True,  # Enable autoscaling
         tickformat=".2f",  # Format tick labels with 2 decimal places
         tickfont=dict(size=14, family="Arial, sans-serif", color="black", weight="bold"),  # Adjusted font size
         title=None  # Remove the built-in axis title since we're using annotations