Update app.py

app.py

@@ -17,34 +17,41 @@ st.markdown(
     """
     <style>
     .stApp {
-        background-image: url("https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/zNRb7r4eec-FQ0LUfJLfW.jpeg");
+        background-image: url("https://images.unsplash.com/photo-1587282022844-3146b57d8a36?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80");
         background-size: cover;
         background-repeat: no-repeat;
         background-attachment: fixed;
-        background-color: rgba(0, 0, 0, 0.5); /* Subtle overlay */
-        color: #ffffff;
+        background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for text contrast */
+        color: #ffffff; /* White text globally */
     }
     .sidebar .sidebar-content {
         background: linear-gradient(180deg, #1e3c72, #2a5298);
         border-radius: 10px;
         padding: 20px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        color: #ffffff;
     }
     h1 {
-        color: #ffcc00;
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        color: #ffcc00; /* Bright yellow for main headings */
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
         font-size: 48px;
         text-align: center;
     }
     h2 {
-        color: #4caf50;
+        color: #4caf50; /* Green for subheadings */
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
         font-size: 32px;
         margin-top: 20px;
     }
     h3 {
-        color: #ff5733;
+        color: #ff5733; /* Orange for sub-subheadings */
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
         font-size: 24px;
     }
+    p, div, span, label, select, option {
+        color: #ffffff !important; /* Ensure all text is white */
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    }
     .stButton>button {
         background-color: #ff5733;
         color: white;
@@ -63,7 +70,10 @@ st.markdown(
         padding: 20px;
         margin: 10px 0;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        color: #333;
+        color: #333; /* Dark text inside cards for contrast */
+    }
+    .card p, .card div, .card span {
+        color: #333 !important; /* Override white text inside cards */
     }
     </style>
     """,
@@ -200,17 +210,17 @@ if option == "Team Info" and team_info:
         fig_donut.update_traces(textinfo='percent+label', pull=[0.1, 0, 0])
         st.plotly_chart(fig_donut, use_container_width=True)
         
-        # Radar Chart
-        fig_radar = go.Figure()
-        for _, row in team_stats.iterrows():
-            fig_radar.add_trace(go.Scatterpolar(
-                r=[row['Mat'], row['Won'], row['Lost'], row['W/L']],
-                theta=['Matches', 'Wins', 'Losses', 'W/L Ratio'],
-                fill='toself',
-                name=row['Format']
-            ))
-        fig_radar.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=True, title="Format-wise Radar")
-        st.plotly_chart(fig_radar, use_container_width=True)
+        # Grouped Bar Chart (replacing Radar Chart)
+        st.markdown("<h3>Format-wise Metrics Comparison</h3>", unsafe_allow_html=True)
+        metrics_df = team_stats[['Format', 'Mat', 'Won', 'Lost', 'W/L']].melt(id_vars='Format', 
+                                                                             var_name='Metric', 
+                                                                             value_name='Value')
+        fig_grouped_bar = px.bar(metrics_df, x='Format', y='Value', color='Metric', barmode='group',
+                                 title="Team Metrics by Format",
+                                 color_discrete_sequence=px.colors.qualitative.Set1,
+                                 text_auto=True)
+        fig_grouped_bar.update_layout(transition_duration=500, showlegend=True)
+        st.plotly_chart(fig_grouped_bar, use_container_width=True)
         st.markdown("</div>", unsafe_allow_html=True)
 
 elif option == "Team Stats Comparison" and selected_teams_stats:
@@ -312,21 +322,20 @@ elif option == "Player Stats" and selected_player:
             fig_bar.update_layout(transition_duration=500)
             st.plotly_chart(fig_bar, use_container_width=True)
         with col2:
-            fig_radar = go.Figure()
+            st.markdown("<h3>Batting Metrics Comparison</h3>", unsafe_allow_html=True)
             avg_col = get_batting_avg_column(player_batting)
-            radar_metrics = ['Runs', 'SR']
-            radar_values = [player_batting['Runs'].mean(), player_batting['SR'].mean()]
+            metrics = ['Runs', 'SR']
             if avg_col:
-                radar_metrics.append('Average')
-                radar_values.append(player_batting[avg_col].mean())
-            fig_radar.add_trace(go.Scatterpolar(
-                r=radar_values,
-                theta=radar_metrics,
-                fill='toself',
-                name='Batting Stats'
-            ))
-            fig_radar.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=True, title="Batting Radar")
-            st.plotly_chart(fig_radar, use_container_width=True)
+                metrics.append('Average')
+            metrics_df = player_batting[metrics + ['Format']].melt(id_vars='Format', 
+                                                                  var_name='Metric', 
+                                                                  value_name='Value')
+            fig_grouped_bar = px.bar(metrics_df, x='Format', y='Value', color='Metric', barmode='group',
+                                     title="Batting Metrics by Format",
+                                     color_discrete_sequence=px.colors.qualitative.Set1,
+                                     text_auto=True)
+            fig_grouped_bar.update_layout(transition_duration=500, showlegend=True)
+            st.plotly_chart(fig_grouped_bar, use_container_width=True)
         fig_donut = px.pie(player_batting, values='Runs', names='Format', title="Runs Distribution",
                            hole=0.4, color_discrete_sequence=px.colors.qualitative.T10)
         fig_donut.update_traces(textinfo='percent+label')
@@ -364,25 +373,25 @@ elif option == "Player Comparison" and player1 and player2:
     bat2, bowl2 = get_player_data(player2)
 
     st.markdown("<div class='card'>", unsafe_allow_html=True)
-    # Batting Radar Chart
-    st.markdown("<h3>Batting Radar Chart</h3>", unsafe_allow_html=True)
-    fig_radar = go.Figure()
+    # Grouped Bar Chart (replacing Radar Chart)
+    st.markdown("<h3>Batting Metrics Comparison</h3>", unsafe_allow_html=True)
+    avg_col1 = get_batting_avg_column(bat1)
+    avg_col2 = get_batting_avg_column(bat2)
+    metrics_data = []
     for player, bat in [(player1, bat1), (player2, bat2)]:
         if not bat.empty:
+            player_data = {'Player': player, 'Runs': bat['Runs'].mean(), 'SR': bat['SR'].mean()}
             avg_col = get_batting_avg_column(bat)
-            radar_metrics = ['Runs', 'SR']
-            radar_values = [bat['Runs'].mean(), bat['SR'].mean()]
             if avg_col:
-                radar_metrics.append('Average')
-                radar_values.append(bat[avg_col].mean())
-            fig_radar.add_trace(go.Scatterpolar(
-                r=radar_values,
-                theta=radar_metrics,
-                fill='toself',
-                name=player
-            ))
-    fig_radar.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=True, title="Batting Comparison")
-    st.plotly_chart(fig_radar, use_container_width=True)
+                player_data['Average'] = bat[avg_col].mean()
+            metrics_data.append(player_data)
+    metrics_df = pd.DataFrame(metrics_data).melt(id_vars='Player', var_name='Metric', value_name='Value')
+    fig_grouped_bar = px.bar(metrics_df, x='Player', y='Value', color='Metric', barmode='group',
+                             title="Batting Metrics Comparison",
+                             color_discrete_sequence=px.colors.qualitative.Plotly,
+                             text_auto=True)
+    fig_grouped_bar.update_layout(transition_duration=500, showlegend=True)
+    st.plotly_chart(fig_grouped_bar, use_container_width=True)
 
     # Bowling Bar Chart
     st.markdown("<h3>Bowling Bar Chart</h3>", unsafe_allow_html=True)