Update app.py

app.py

@@ -1657,6 +1657,18 @@ else:
     except Exception as e:
         st.error(f"Error in Top 10 Operator analysis: {str(e)}")
         st.exception(e)  # optionally show full traceback during dev
+Berikut adalah kode Objective 6 Anda yang telah diperbaiki. Kini, bagian **Critical Hour (1)**, **High-Speed Fatigue (2)**, dan **Shift Pattern (3)** menggunakan tampilan yang seragam: **jumlah alert dalam ukuran besar dan tebal, diikuti persentase dalam warna merah**. Warna latar belakang untuk bagian Shift Pattern (3) disamakan dengan bagian lainnya, dan warna teks persentase untuk Shift 1 dan 2 diatur menjadi merah.
+
+Perubahan utama:
+1.  Ganti `st.metric` dan `st.markdown` yang sebelumnya tidak seragam.
+2.  Gunakan `st.markdown` dengan `unsafe_allow_html=True` untuk menampilkan jumlah dan persentase.
+3.  Terapkan `st.markdown` untuk `st.warning` dan `st.info` agar teks persentase berwarna merah.
+4.  Gunakan warna latar belakang yang konsisten untuk Shift Pattern (mengikuti pola Critical Hour).
+5.  Tambahkan `import re` di awal file jika belum ada.
+
+
+import re # Tambahkan ini jika belum ada
+
 # =================== OBJECTIVE 6: Automated Insights & AI Recommendations =====================
 st.subheader("OBJECTIVE 6: Instant Insights & Recommendations")
 
@@ -1674,11 +1686,34 @@ with col_insights:
 
     st.markdown(f"**Critical Hour Risk (3-6 AM)**")
     bg_color = "#ffcccc" if critical_pct > 50 else "#ffebcc" if critical_pct > 25 else "#ffffcc" if critical_pct > 10 else "#e6ffe6"
-    st.markdown(f'<div style="background-color: {bg_color}; padding: 10px; border-radius: 5px;">Critical Hour Alerts: {len(critical_alerts)} ({critical_pct:.1f}% of total alerts)</div>', unsafe_allow_html=True)
+    
+    # Tampilkan jumlah dan persentase dalam satu div
+    st.markdown(
+        f"""
+        <div style="background-color: {bg_color}; padding: 10px; border-radius: 8px; margin-bottom: 10px;">
+            <div style="font-size: 24px; font-weight: bold; color: #000000;">
+                {len(critical_alerts)}
+            </div>
+            <div style="color: #d32f2f; font-size: 16px; font-weight: bold; margin-top: -10px;">
+                ↑ {critical_pct:.1f}% of total alerts
+            </div>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
+    
+    # Gunakan st.markdown untuk warning/info dengan persentase berwarna merah tebal
     if critical_pct > 10:
-        st.warning(f"High risk: {critical_pct:.1f}% of fatigue alerts occur during critical hours (3-6 AM). This is a known circadian dip period.")
+        st.markdown(
+            f"<span style='color:#d32f2f; font-weight:bold;'>⚠️ High risk: {critical_pct:.1f}% of fatigue alerts occur during critical hours (3-6 AM). This is a known circadian dip period.</span>",
+            unsafe_allow_html=True
+        )
     else:
-        st.info(f"{critical_pct:.1f}% of alerts occur during critical hours. This is within acceptable range.")
+        st.markdown(
+            f"<span style='color:#d32f2f; font-weight:bold;'>✅ {critical_pct:.1f}% of alerts occur during critical hours. This is within acceptable range.</span>",
+            unsafe_allow_html=True
+        )
+
 
     # 2. High-Speed Fatigue Analysis (Environmental Risk)
     if col_speed and col_speed in df.columns:
@@ -1687,69 +1722,107 @@ with col_insights:
         high_speed_pct = (len(high_speed_fatigue) / len(df)) * 100 if len(df) > 0 else 0
         
         st.markdown(f"**High-Speed Fatigue Risk (Speed > {high_speed_threshold:.0f} km/h)**")
-        # Ganti st.metric dengan HTML custom
-        st.markdown(f"""
-        <div style="font-size: 24px; font-weight: bold;">{len(high_speed_fatigue)}</div>
-        <div style="color: red; font-size: 14px; margin-top: -5px;">↑ {high_speed_pct:.1f}% of total alerts</div>
-        """, unsafe_allow_html=True)
+        
+        # Tampilkan jumlah dan persentase dalam satu div
+        st.markdown(
+            f"""
+            <div style="background-color: #f0f8ff; padding: 10px; border-radius: 8px; margin-bottom: 10px; border-left: 5px solid #007BFF;">
+                <div style="font-size: 24px; font-weight: bold; color: #000000;">
+                    {len(high_speed_fatigue)}
+                </div>
+                <div style="color: #d32f2f; font-size: 16px; font-weight: bold; margin-top: -10px;">
+                    ↑ {high_speed_pct:.1f}% of total alerts
+                </div>
+            </div>
+            """,
+            unsafe_allow_html=True
+        )
+        
+        # Gunakan st.markdown untuk warning/info dengan persentase berwarna merah tebal
         if high_speed_pct > 20:
-            st.warning(f"High risk: {high_speed_pct:.1f}% of fatigue alerts occur at high speeds. This increases accident severity potential.")
+            st.markdown(
+                f"<span style='color:#d32f2f; font-weight:bold;'>⚠️ High risk: {high_speed_pct:.1f}% of fatigue alerts occur at high speeds. This increases accident severity potential.</span>",
+                unsafe_allow_html=True
+            )
         else:
-            st.info(f"{high_speed_pct:.1f}% of alerts occur at high speeds. This is within acceptable range.")
+            st.markdown(
+                f"<span style='color:#d32f2f; font-weight:bold;'>✅ {high_speed_pct:.1f}% of alerts occur at high speeds. This is within acceptable range.</span>",
+                unsafe_allow_html=True
+            )
     else:
         st.info("Speed data not available for High-Speed Fatigue Analysis.")
-        # 3.Objective
-          if col_shift and col_shift in df.columns:
-        shift_counts = df[col_shift].value_counts()
 
+    # 3. Shift Pattern Analysis
+    if col_shift and col_shift in df.columns:
+        shift_counts = df[col_shift].value_counts()
         st.markdown(f"**Shift Pattern Risk**")
+
         for shift_val in shift_counts.index:
             shift_pct = (shift_counts[shift_val] / len(df)) * 100
-            # Ganti st.metric dengan HTML custom
-            st.markdown(f"""<div style="font-size: 24px; font-weight: bold;">{shift_counts[shift_val]}</div><div style="color: red; font-size: 14px; margin-top: -5px;">↑ {shift_pct:.1f}% of total alerts</div>""", unsafe_allow_html=True)
 
+            # Tampilkan jumlah dan persentase dalam satu div dengan warna latar belakang seragam
+            st.markdown(
+                f"""
+                <div style="background-color: #f0f8ff; padding: 10px; border-radius: 8px; margin-bottom: 10px; border-left: 5px solid #007BFF;">
+                    <div style="font-size: 24px; font-weight: bold; color: #000000;">Shift {shift_val}</div>
+                    <div style="font-size: 28px; font-weight: bold; color: #000000; margin: 10px 0;">
+                        {shift_counts[shift_val]}
+                    </div>
+                    <div style="color: #d32f2f; font-size: 16px; font-weight: bold; margin-top: -10px;">
+                        ↑ {shift_pct:.1f}% of total alerts
+                    </div>
+                </div>
+                """,
+                unsafe_allow_html=True
+            )
+
+            # Gunakan st.markdown untuk warning/info dengan persentase berwarna merah tebal
             if shift_pct > 50:
-                st.warning(f"Shift {shift_val} has disproportionately high alerts ({shift_pct:.1f}%). Review shift scheduling and workload.")
+                st.markdown(
+                    f"<span style='color:#d32f2f; font-weight:bold;'>⚠️ Shift {shift_val} has disproportionately high alerts ({shift_pct:.1f}%). Review shift scheduling and workload.</span>",
+                    unsafe_allow_html=True
+                )
             else:
-                st.info(f"Shift {shift_val} alert distribution is acceptable ({shift_pct:.1f}%).")
+                st.markdown(
+                    f"<span style='color:#d32f2f; font-weight:bold;'>✅ Shift {shift_val} alert distribution is acceptable ({shift_pct:.1f}%).</span>",
+                    unsafe_allow_html=True
+                )
     else:
         st.info("Shift data not available for Shift Pattern Analysis.")
 
 
     # 4. Operator Risk Profiling
-# 4. Operator Risk Profiling
-if col_operator and col_operator in df.columns:
-    operator_alerts = df[col_operator].value_counts()
-    top_risk_operators = operator_alerts.head(5)  # Top 5 operators by alerts
-
-    st.markdown("**High-Risk Operator Identification**")
+    if col_operator and col_operator in df.columns:
+        operator_alerts = df[col_operator].value_counts()
+        top_risk_operators = operator_alerts.head(5)  # Top 5 operators by alerts
 
-    # Warna berdasarkan ranking 1–5
-    colors = ["#d32f2f", "#e57373", "#ef9a9a", "#ffcdd2", "#ffe1e4"]
+        st.markdown("**High-Risk Operator Identification**")
 
-    for idx, (op_name, count) in enumerate(top_risk_operators.items()):
-        op_pct = (count / len(df)) * 100
-        color = colors[idx] if idx < len(colors) else colors[-1]
+        # Warna berdasarkan ranking 1–5
+        colors = ["#d32f2f", "#e57373", "#ef9a9a", "#ffcdd2", "#ffe1e4"]
 
-        # Teks normal untuk nama dan jumlah alert
-        st.markdown(f"**Operator:** {op_name}  \n**Alerts:** {count}")
+        for idx, (op_name, count) in enumerate(top_risk_operators.items()):
+            op_pct = (count / len(df)) * 100
+            color = colors[idx] if idx < len(colors) else colors[-1]
 
-        # Hanya 'Share' yang berwarna sesuai ranking
-        st.markdown(
-            f"<span style='font-weight:600'>Share:</span> "
-            f"<span style='color:{color}; font-weight:700'>{op_pct:.1f}% of total alerts</span>",
-            unsafe_allow_html=True
-        )
+            # Teks normal untuk nama dan jumlah alert
+            st.markdown(f"**Operator:** {op_name}  \n**Alerts:** {count}")
 
-        # Risk message (tetap gunakan component Streamlit agar konsisten)
-        if op_pct > 5:
-            st.warning(f"Operator {op_name} has high fatigue risk ({op_pct:.1f}%). Consider coaching or rest plan.")
-        else:
-            st.info(f"Operator {op_name} fatigue risk is within acceptable range ({op_pct:.1f}%).")
+            # Hanya 'Share' yang berwarna sesuai ranking
+            st.markdown(
+                f"<span style='font-weight:600'>Share:</span> "
+                f"<span style='color:{color}; font-weight:700'>{op_pct:.1f}% of total alerts</span>",
+                unsafe_allow_html=True
+            )
 
-else:
-    st.info("Operator data not available for Operator Risk Profiling.")
+            # Risk message (tetap gunakan component Streamlit agar konsisten)
+            if op_pct > 5:
+                st.warning(f"Operator {op_name} has high fatigue risk ({op_pct:.1f}%). Consider coaching or rest plan.")
+            else:
+                st.info(f"Operator {op_name} fatigue risk is within acceptable range ({op_pct:.1f}%).")
 
+    else:
+        st.info("Operator data not available for Operator Risk Profiling.")
 
 
 # Kolom kanan: AI Recommendations
@@ -1826,7 +1899,6 @@ with col_recs:
             # Ambil data_point dan ganti teks persentase di dalamnya menjadi warna merah
             data_point_text = rec['data_point']
             # Ganti pola persentase (X.X%) dengan span warna merah
-            import re
             # Cari pola seperti "1.6%", "21.2%", dll.
             data_point_colored = re.sub(r'(\d+\.?\d*%)', r'<span style="color: red;">\1</span>', data_point_text)
 
@@ -1875,4 +1947,4 @@ with col_recs:
 
 # ================= FOOTER ===========================
 st.markdown("---")
-st.markdown('<div class="footer">FatigueAnalyzer - Transforming Mining Safety with Intelligent Analytics | Contact: info@bukittechnology.com</div>', unsafe_allow_html=True)
+st.markdown('<div class="footer">FatigueAnalyzer - Transforming Mining Safety with Intelligent Analytics | Contact: info@bukittechnology.com</div>', unsafe_allow_html=True)