Update app.py

app.py

@@ -1620,6 +1620,112 @@ if not df_issue.empty:
 
 st.markdown("</div>", unsafe_allow_html=True)
 
+
+# =================== WHITEBOARD STYLE CHART FOR PANEL 3 ===================
+st.markdown("<h4 style='text-align: center; color: #2c3e50;'>Whiteboard Insight: Trend vs Frequency</h4>", unsafe_allow_html=True)
+
+# Buat chart scatter dengan gaya whiteboard
+if not df_issue.empty:
+    # Ambil data untuk scatter
+    df_plot = df_issue.copy()
+    df_plot['Size'] = df_plot['Avg/Month']  # Ukuran lingkaran = frekuensi (Avg/Month)
+    df_plot['Y'] = df_plot['Trend Slope']   # Y = Trend Slope
+
+    # Buat scatter plot
+    fig = go.Figure()
+
+    # Tambahkan scatter
+    fig.add_trace(go.Scatter(
+        x=df_plot['Category'],
+        y=df_plot['Y'],
+        mode='markers+text',
+        marker=dict(
+            size=df_plot['Size'] * 0.5,  # Skala ukuran agar tidak terlalu besar
+            color='#003DA5',
+            line=dict(width=2, color='white'),
+            opacity=0.8
+        ),
+        text=df_plot['Category'],
+        textposition="top center",
+        textfont=dict(size=10, color="#003DA5", family="Arial"),
+        hovertemplate="<b>%{text}</b><br>Trend Slope: %{y:.3f}<br>Avg/Month: %{marker.size:.1f}<extra></extra>",
+    ))
+
+    # Layout
+    fig.update_layout(
+        title=dict(text="<b>Issue Trend vs Frequency (Non-Positive)</b>", x=0.5, y=0.95),
+        xaxis=dict(
+            title="Category",
+            tickangle=45,
+            showgrid=True,
+            gridcolor="#e0e0e0",
+            gridwidth=1,
+            tickfont=dict(size=10, color="#003DA5")
+        ),
+        yaxis=dict(
+            title="Trend Slope",
+            showgrid=True,
+            gridcolor="#e0e0e0",
+            gridwidth=1,
+            tickfont=dict(size=10, color="#003DA5")
+        ),
+        plot_bgcolor="white",
+        paper_bgcolor="white",
+        height=500,
+        margin=dict(t=60, b=60, l=60, r=60),
+        font=dict(family="Arial", size=12, color="#003DA5"),
+        showlegend=False
+    )
+
+    # Tambahkan teks manual seperti whiteboard
+    fig.add_annotation(
+        xref="paper", yref="paper",
+        x=0.05, y=0.95,
+        text="Trend<br>(Slope)",
+        showarrow=False,
+        font=dict(size=12, color="#003DA5"),
+        textangle=-90,
+        align="center"
+    )
+    fig.add_annotation(
+        xref="paper", yref="paper",
+        x=0.5, y=0.05,
+        text="Category",
+        showarrow=False,
+        font=dict(size=12, color="#003DA5"),
+        align="center"
+    )
+    fig.add_annotation(
+        xref="paper", yref="paper",
+        x=0.95, y=0.95,
+        text="<b>Legend of Frequency</b><br>• 10<br>•• 20<br>••• 30<br>•••• 40",
+        showarrow=False,
+        font=dict(size=12, color="#003DA5"),
+        align="left"
+    )
+    fig.add_annotation(
+        xref="paper", yref="paper",
+        x=0.05, y=0.1,
+        text="<b>Semakin tinggi = semakin sering ditemukan deviasi</b><br><b>Semakin besar = semakin banyak ditemukan deviasi</b><br><b>Non-positive</b>",
+        showarrow=False,
+        font=dict(size=12, color="#003DA5"),
+        align="left"
+    )
+
+    st.plotly_chart(fig, use_container_width=True)
+
+    # Insight
+    st.markdown("### 💡 Insight")
+    insight_text = (
+        f"<div class='ai-insight'>"
+        f"The scatter plot visualizes issue categories with 100% coverage and positive trend. "
+        f"Categories higher on the Y-axis indicate stronger upward trends, while larger circles indicate higher average monthly frequency. "
+        f"This helps identify which non-positive issues are both increasing in trend and frequently reported — these should be prioritized for intervention."
+        f"</div>"
+    )
+    st.markdown(insight_text, unsafe_allow_html=True)
+else:
+    st.info("No data available for non-positive issues with 100% coverage and positive trend.")
 # =================== 6. ✅ AI INSIGHT ENGINE (BARU - BERDASARKAN DATA & RATIO) ===================
 
 st.markdown("<h3 class='section-title'>OBJECTIVE 7 - Insight and Recommendation</h3>", unsafe_allow_html=True)