Update app.py

app.py

@@ -10,15 +10,15 @@ plt.rcParams["figure.dpi"] = 100
 
 # ============================================================
 # Global font styling
-# - All non-title text: Arial Black size 12
-# - Titles: Arial Black size 14
+# - All non-title text: Arial Black size 10
+# - Titles: Arial Black size 14 (unchanged from your spec)
 # ============================================================
 plt.rcParams["font.family"] = "Arial"
 plt.rcParams["font.weight"] = "black"
-plt.rcParams["font.size"] = 12
+plt.rcParams["font.size"] = 10
 
 TITLE_FONTSIZE = 14
-TEXT_FONTSIZE = 12
+TEXT_FONTSIZE = 10
 
 # ============================================================
 # Class meaning (per your note)
@@ -125,13 +125,13 @@ def prob_leave_and_stay(X: pd.DataFrame) -> tuple[float, float]:
     return p_leave, p_stay
 
 
+def hex_to_rgb01(h: str):
+    h = h.lstrip("#")
+    return (int(h[0:2], 16) / 255.0, int(h[2:4], 16) / 255.0, int(h[4:6], 16) / 255.0)
+
+
 # =========================
-# Donut chart
-# Requirements implemented:
-# 1) remove "Probability of Leave" center text (keep only %)
-# 2) title = "Turnover Risk"
-# 3) legend: red turnover, blue retention
-# 4) fonts set globally; title uses size 14
+# Donut chart (Turnover Risk)
 # =========================
 def make_turnover_donut(p_leave: float, p_stay: float):
     p_leave = max(0.0, min(1.0, float(p_leave)))
@@ -143,7 +143,7 @@ def make_turnover_donut(p_leave: float, p_stay: float):
     else:
         p_leave, p_stay = p_leave / s, p_stay / s
 
-    fig, ax = plt.subplots(figsize=(4.6, 3.6))
+    fig, ax = plt.subplots(figsize=(4.8, 3.4))
 
     ax.pie(
         [p_leave, p_stay],
@@ -153,14 +153,14 @@ def make_turnover_donut(p_leave: float, p_stay: float):
         wedgeprops=dict(width=0.35, edgecolor="white"),
     )
 
-    # Center: ONLY percent (no "Probability of Leave")
+    # Center: ONLY percent
     ax.text(
         0,
         0.00,
         f"{p_leave*100:.0f}%",
         ha="center",
         va="center",
-        fontsize=20,
+        fontsize=18,
         fontweight="black",
         color=RED,
         family="Arial",
@@ -184,12 +184,14 @@ def make_turnover_donut(p_leave: float, p_stay: float):
 
 # =========================
 # Plot: Average of key drivers + Goal Average
+# (Longer + intended for bottom full-width placement)
 # =========================
 def make_driver_plot(driver_vals: dict):
     values = [driver_vals[v] for v in ALL_DRIVER_VARS]
     goals = [GOAL_AVG[v] for v in ALL_DRIVER_VARS]
 
-    fig, ax = plt.subplots(figsize=(8.6, 3.1))
+    fig, ax = plt.subplots(figsize=(13.0, 3.2))  # longer/wider
+
     bars = ax.bar(range(len(ALL_DRIVER_LABELS)), values, tick_label=ALL_DRIVER_LABELS)
 
     # dashed goal segment per bar
@@ -217,7 +219,7 @@ def make_driver_plot(driver_vals: dict):
 
     ax.margins(x=0.06)
     plt.tight_layout()
-    plt.subplots_adjust(bottom=0.30)
+    plt.subplots_adjust(bottom=0.28)
 
     plt.close(fig)
     return fig
@@ -225,7 +227,7 @@ def make_driver_plot(driver_vals: dict):
 
 # =========================
 # SHAP waterfall
-# Make "pink/red" theme consistent by setting SHAP colors to red/blue.
+# Make positive = RED, negative = BLUE
 # =========================
 def make_catboost_shap_plot(X: pd.DataFrame):
     fig, ax = plt.subplots(figsize=(8.6, 3.6))
@@ -234,10 +236,10 @@ def make_catboost_shap_plot(X: pd.DataFrame):
         import shap
         from catboost import Pool
 
-        # Set SHAP waterfall colors (pos = turnover = red; neg = retention = blue)
-        # These affect shap.plots.waterfall styling.
+        # force SHAP waterfall color theme (pos=red, neg=blue)
         try:
-            shap.plots.colors.red_blue = [BLUE, RED]  # keep fallback attempt harmless
+            shap.plots.colors.red_rgb = hex_to_rgb01(RED)
+            shap.plots.colors.blue_rgb = hex_to_rgb01(BLUE)
         except Exception:
             pass
 
@@ -277,13 +279,12 @@ def make_catboost_shap_plot(X: pd.DataFrame):
 
         plt.close(fig)
 
-        # SHAP will create its own matplotlib figure
         shap.plots.waterfall(exp, max_display=8, show=False)
 
         fig2 = plt.gcf()
         fig2.set_size_inches(8.6, 3.6)
 
-        # Make SHAP title font consistent (if present)
+        # enforce tick font sizes
         try:
             ax2 = fig2.axes[0]
             if ax2.get_title():
@@ -324,6 +325,7 @@ def make_catboost_shap_plot(X: pd.DataFrame):
 
 # =========================
 # Core predict
+# Returns: donut, shap, drivers (so we can lay them out how you want)
 # =========================
 def predict(
     Engagement,
@@ -350,10 +352,10 @@ def predict(
     p_leave, p_stay = prob_leave_and_stay(X)
 
     donut_fig = make_turnover_donut(p_leave, p_stay)
-    drivers_fig = make_driver_plot(driver_vals)
     shap_fig = make_catboost_shap_plot(X)
+    drivers_fig = make_driver_plot(driver_vals)
 
-    return donut_fig, drivers_fig, shap_fig
+    return donut_fig, shap_fig, drivers_fig
 
 
 # =========================
@@ -363,7 +365,7 @@ def load_at_risk_group():
     # At-risk group = average of the two lowest clusters (Cluster 2 and 3)
     target = {v: (CLUSTER_2[v] + CLUSTER_3[v]) / 2.0 for v in ALL_DRIVER_VARS}
 
-    donut_fig, drivers_fig, shap_fig = predict(
+    donut_fig, shap_fig, drivers_fig = predict(
         target["Engagement"],
         target["SupportiveGM"],
         target["WellBeing"],
@@ -382,8 +384,8 @@ def load_at_risk_group():
         target["DecisionAutonomy"],
         target["Workload"],
         donut_fig,
-        drivers_fig,
         shap_fig,
+        drivers_fig,
     )
 
 
@@ -391,7 +393,7 @@ def apply_recommendation():
     # Recommendation = highest cluster (Cluster 1)
     target = {v: CLUSTER_1[v] for v in ALL_DRIVER_VARS}
 
-    donut_fig, drivers_fig, shap_fig = predict(
+    donut_fig, shap_fig, drivers_fig = predict(
         target["Engagement"],
         target["SupportiveGM"],
         target["WellBeing"],
@@ -410,31 +412,24 @@ def apply_recommendation():
         target["DecisionAutonomy"],
         target["Workload"],
         donut_fig,
-        drivers_fig,
         shap_fig,
+        drivers_fig,
     )
 
 
 # =========================
-# UI Layout (tight, no big gaps)
-# Buttons at the TOP:
-# - At risk group = red
-# - Apply recommendation = blue
+# UI Layout
+# - Right side: donut then SHAP directly below
+# - Bottom: wide drivers bar chart centered under everything
 # =========================
 CSS = f"""
 #app-wrap {{ max-width: 1200px; margin: 0 auto; }}
-/* Remove extra padding/margins from blocks */
 .gr-block {{ padding: 10px 12px !important; }}
 .gr-form {{ gap: 8px !important; }}
 .gr-row {{ gap: 10px !important; }}
 
-/* Button colors */
 #btn_atrisk button {{ background: {RED} !important; color: white !important; border: none !important; }}
 #btn_reco button {{ background: {BLUE} !important; color: white !important; border: none !important; }}
-
-/* Make markdown tighter */
-.compact h2 {{ margin: 0 0 6px 0; }}
-.compact p {{ margin: 0 0 8px 0; }}
 """
 
 with gr.Blocks(css=CSS) as demo:
@@ -451,8 +446,9 @@ with gr.Blocks(css=CSS) as demo:
         btn_reco = gr.Button("Apply recommendation", elem_id="btn_reco")
         btn_predict = gr.Button("Predict")
 
+    # TOP MAIN ROW
     with gr.Row():
-        # LEFT SIDE — SLIDERS
+        # LEFT: sliders
         with gr.Column(scale=4):
             Engagement = gr.Slider(1, 5, value=CLUSTER_3["Engagement"], step=0.01, label="Engagement")
             SupportiveGM = gr.Slider(1, 5, value=CLUSTER_3["SupportiveGM"], step=0.01, label="Supportive GM")
@@ -462,12 +458,15 @@ with gr.Blocks(css=CSS) as demo:
             DecisionAutonomy = gr.Slider(1, 5, value=CLUSTER_3["DecisionAutonomy"], step=0.01, label="Decision Autonomy")
             Workload = gr.Slider(1, 5, value=CLUSTER_3["Workload"], step=0.01, label="Workload")
 
-        # RIGHT SIDE — DONUT + CHARTS
+        # RIGHT: donut + SHAP stacked
         with gr.Column(scale=6):
             donut_plot = gr.Plot(label="Turnover Risk")
-            drivers_plot = gr.Plot(label="Average of key drivers")
             shap_plot = gr.Plot(label="Feature Importance (Shap)")
 
+    # BOTTOM ROW: wide driver bars centered under everything
+    with gr.Row():
+        drivers_plot = gr.Plot(label="Average of key drivers")
+
     # =========================
     # WIRE UP EVENTS
     # =========================
@@ -476,7 +475,7 @@ with gr.Blocks(css=CSS) as demo:
     btn_predict.click(
         fn=predict,
         inputs=slider_inputs,
-        outputs=[donut_plot, drivers_plot, shap_plot],
+        outputs=[donut_plot, shap_plot, drivers_plot],
     )
 
     btn_atrisk.click(
@@ -491,8 +490,8 @@ with gr.Blocks(css=CSS) as demo:
             DecisionAutonomy,
             Workload,
             donut_plot,
-            drivers_plot,
             shap_plot,
+            drivers_plot,
         ],
     )
 
@@ -508,8 +507,8 @@ with gr.Blocks(css=CSS) as demo:
             DecisionAutonomy,
             Workload,
             donut_plot,
-            drivers_plot,
             shap_plot,
+            drivers_plot,
         ],
     )