Update app.py

app.py

@@ -1,5 +1,6 @@
 import pandas as pd
 import gradio as gr
+import plotly.express as px
 import io
 
 # Helper function for categorization
@@ -23,11 +24,12 @@ def process_data(file):
     first_sheet = excel.sheet_names[0]
     df = pd.read_excel(file.name, sheet_name=first_sheet)
     
-    # Clean and Standardize Columns
+    # 1. Standardize Columns
     df.columns = df.columns.map(lambda x: str(x).strip())
     non_date_cols = ["Keyword", "Avg. monthly searches"]
     available_non_date = [c for c in non_date_cols if c in df.columns]
     
+    # 2. Identify and Rename Date Columns
     potential_date_cols = [col for col in df.columns if col not in non_date_cols and "Unnamed" not in col]
     rename_dict = {}
     for col in potential_date_cols:
@@ -41,7 +43,7 @@ def process_data(file):
     df.rename(columns=rename_dict, inplace=True)
     date_cols = list(rename_dict.values())
     
-    # Build Visualization Data
+    # 3. Build Visualization Data
     final_df = df[available_non_date].copy()
     viz_data = []
 
@@ -56,56 +58,69 @@ def process_data(file):
         counts['Month'] = col
         viz_data.append(counts)
 
-    full_viz_df = pd.concat(viz_data)
+    full_viz_df = pd.concat(viz_data) if viz_data else pd.DataFrame()
     
-    # Sort SEO buckets correctly
-    sort_order = ["01–03", "04–10", "11–20", "21–30", "31–40", "41–50", "51–100", "100+", "Not Talking (Intent Not Correct)"]
-    full_viz_df['Range'] = pd.Categorical(full_viz_df['Range'], categories=sort_order, ordered=True)
-    full_viz_df = full_viz_df.sort_values(['Range', 'Month'])
+    # 4. Enforce Exact Sorting Order
+    # We define the list explicitly so Plotly knows "04-10" comes after "01-03"
+    correct_order = [
+        "01–03", "04–10", "11–20", "21–30", "31–40", 
+        "41–50", "51–100", "100+", "Not Talking (Intent Not Correct)"
+    ]
     
-    return final_df, full_viz_df, final_df
+    # Create the Chart
+    if not full_viz_df.empty:
+        fig = px.bar(
+            full_viz_df, 
+            x='Range', 
+            y='Keyword Count', 
+            color='Month',
+            barmode='group', # <--- This creates the 3 separate bars side-by-side
+            text_auto=True,
+            title="Keyword Performance Distribution (Grouped)",
+            category_orders={"Range": correct_order} # <--- This fixes the sorting
+        )
+        fig.update_layout(clickmode='event+select')
+    else:
+        fig = None
+    
+    return final_df, fig, final_df
 
 def filter_table(full_data, selection_data: gr.SelectData):
-    # When clicking a bar, selection_data.value[0] is the X-axis value (The Range, e.g., "01-03")
-    if not selection_data or not selection_data.value:
-        return full_data
-        
-    clicked_range = selection_data.value[0]
+    if not selection_data: return full_data
     
-    # Filter Logic: Find rows where this range appears in ANY month column
-    range_cols = [c for c in full_data.columns if "Rank Range" in c]
+    # Get the clicked category (e.g., "04-10")
+    clicked_range = selection_data.value['x']
+    # Get the clicked series (e.g., "27_Oct_2025") from the legend group
+    clicked_month = selection_data.value.get('legendgroup', None) 
     
-    if not range_cols:
-        return full_data
-        
-    # We filter the master dataframe to show keywords that have this rank in any tracked month
+    # If we know the month, filter by that specific month's column
+    if clicked_month:
+        target_col = f"{clicked_month}_Rank Range"
+        if target_col in full_data.columns:
+             return full_data[full_data[target_col] == clicked_range]
+    
+    # Fallback: Filter where range appears in ANY month
+    range_cols = [c for c in full_data.columns if "Rank Range" in c]
     filtered_df = full_data[full_data[range_cols].apply(lambda row: clicked_range in row.values, axis=1)]
     return filtered_df
 
 def reset_table(full_data):
     return full_data
 
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
     full_data_state = gr.State()
 
     gr.Markdown("# 🚀 SEO Market Intelligence Dashboard")
-    gr.Markdown("### Click a bar segment below to filter the keyword list.")
+    gr.Markdown("Upload your file. The chart will show **3 side-by-side bars** for each rank range.")
     
     with gr.Row():
         file_input = gr.File(label="Upload SEO Excel", file_types=[".xlsx"])
         with gr.Column():
             process_btn = gr.Button("📊 Build Dashboard", variant="primary")
-            reset_btn = gr.Button("🔄 Reset Table Filters")
+            reset_btn = gr.Button("🔄 Reset Filters")
 
-    # FIX: Removed 'group' and 'vertical' arguments.
-    # 'color' handles the segmentation automatically.
-    plot_output = gr.BarPlot(
-        x="Range", 
-        y="Keyword Count", 
-        color="Month", 
-        title="Keyword Performance Distribution",
-        tooltip=["Month", "Range", "Keyword Count"]
-    )
+    # We use gr.Plot because it supports the 'barmode' grouping we need
+    plot_output = gr.Plot(label="Interactive Chart")
     
     gr.Markdown("### 🔍 Keywords List")
     table_output = gr.DataFrame(interactive=False)
@@ -116,6 +131,7 @@ with gr.Blocks() as demo:
         outputs=[table_output, plot_output, full_data_state]
     )
 
+    # Interactive filtering
     plot_output.select(
         fn=filter_table,
         inputs=[full_data_state],
@@ -129,4 +145,4 @@ with gr.Blocks() as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(theme=gr.themes.Soft())
+    demo.launch()