Update app.py

app.py

@@ -8,7 +8,6 @@ import folium
 from streamlit_folium import st_folium
 from sklearn.linear_model import LinearRegression
 import os 
-
 # ================= CONFIG =================
 st.set_page_config(
     page_title="Michelin Mining Tyre Analytics",
@@ -17,7 +16,7 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# ================= CUSTOM CSS =================
+# ================= CUSTOM CSS 
 st.markdown("""
 <style>
 /* ================= ROOT & COLORS ================= */
@@ -48,6 +47,7 @@ label, .stSelectbox label, .stMultiselect label, .stCheckbox label {
     text-align: center !important;
 }
 
+/* Fix bullet/number list centering */
 .stMarkdown ul, .stMarkdown ol {
     text-align: left !important;
     margin-left: auto;
@@ -68,6 +68,7 @@ label, .stSelectbox label, .stMultiselect label, .stCheckbox label {
     margin-bottom: 12px;
 }
 
+/* Power BI-style dropdowns */
 [data-testid="stSelectbox"] div[data-baseweb="select"],
 [data-testid="stMultiselect"] div[data-baseweb="select"] {
     background-color: white !important;
@@ -84,10 +85,12 @@ label, .stSelectbox label, .stMultiselect label, .stCheckbox label {
     font-weight: 500;
 }
 
+/* Remove red tags from multiselect */
 [data-testid="stMultiselect"] div[data-baseweb="select"] .stMultiSelectTag {
     display: none !important;
 }
 
+/* Submit button */
 [data-testid="stSidebar"] .stButton > button {
     width: 100%;
     background: var(--accent-yellow);
@@ -106,7 +109,20 @@ label, .stSelectbox label, .stMultiselect label, .stCheckbox label {
     box-shadow: 0 8px 16px rgba(0,0,0,0.12);
 }
 
-/* ================= OBJECTIVE TITLE ================= */
+/* ================= HEADER ================= */
+.main-header h1 {
+    font-size: 2.4rem;
+    margin-bottom: 6px;
+    font-weight: 800;
+    color: var(--michelin-blue);
+}
+.main-header p {
+    font-size: 1.15rem;
+    color: var(--text-muted);
+    margin-top: 0;
+}
+
+/* ================= OBJECTIVE TITLE (NO BACKGROUND BOX) ================= */
 .objective-title {
     text-align: center !important;
     font-size: 1.6rem;
@@ -115,7 +131,7 @@ label, .stSelectbox label, .stMultiselect label, .stCheckbox label {
     margin: 40px 0 24px 0;
 }
 
-/* ================= INSIGHT BOX ================= */
+/* ================= INSIGHT LLM-STYLE (Like Screenshot) ================= */
 .insight-box {
     background: var(--surface-alt);
     border: 1px solid var(--border);
@@ -137,42 +153,49 @@ label, .stSelectbox label, .stMultiselect label, .stCheckbox label {
     text-align: left;
 }
 
+.insight-box .tag {
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    background: var(--michelin-blue);
+    color: white;
+    font-size: 0.85rem;
+    font-weight: 700;
+    padding: 6px 12px;
+    border-radius: 8px;
+    letter-spacing: 0.5px;
+}
+
+/* ================= PLOTLY ================= */
+.plotly-graph-div {
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border);
+}
+
 /* ================= FOOTER ================= */
 .footer {
     text-align: center;
-    padding: 12px 0;
-    margin-top: 20px;
-    font-family: Arial, sans-serif;
-    border-top: 1px solid var(--border);
-}
-.footer-main {
-    font-weight: bold;
-    color: var(--michelin-blue);
-    margin-bottom: 4px;
-}
-.footer-copy {
-    font-size: 10px;
+    font-size: 0.9rem;
     color: var(--text-muted);
+    margin-top: 50px;
+    padding: 20px 0;
+    border-top: 1px solid var(--border);
 }
 
-/* ================= HEADER ================= */
-.header-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
-    background: white;
-    border-bottom: 1px solid var(--border);
-    margin-bottom: 20px;
+/* ================= STREAMLIT TWEAKS ================= */
+div.block-container {
+    padding-top: 2rem;
 }
-
-.header-title {
-    text-align: center;
-    flex: 1;
+section[data-testid="stSidebar"] {
+    width: 280px !important;
+    min-width: 280px !important;
 }
 </style>
 """, unsafe_allow_html=True)
 
+
 # ================= LOAD DATA =================
 @st.cache_data
 def load_data():
@@ -182,15 +205,20 @@ def load_data():
         st.error("❌ File `df_final.xlsx` not found. Please ensure it's in the same directory.")
         st.stop()
     
+    # Fix encoding (e.g., '°C' → '°C')
     df.columns = df.columns.str.replace("Â", "")
     for col in df.select_dtypes(include='object').columns:
         df[col] = df[col].astype(str).str.replace("Â", "")
     
+    # Parse datetime
     df['Time'] = pd.to_datetime(df['Time'], errors='coerce')
     df = df.dropna(subset=['Time'])
     df['hour'] = df['Time'].dt.hour
+    
+    # Alarm flag
     df['is_alarm'] = (~df['Alarm Status'].str.contains('No Alarm', na=False)).astype(int)
     
+    # Dynamic risk score
     p = df['Pressure (psi)']
     p_red_high = df['Red High Press (psi)']
     p_amber_high = df['Amber High Press (psi)']
@@ -208,44 +236,98 @@ def load_data():
         elif score >= 0.3: return 'Moderate Risk'
         else: return 'Slight Risk'
     df['Risk Level'] = df['risk_score'].apply(get_risk_label)
+    
+    # Add Position Group
     df['Position Group'] = df['Position'].apply(lambda x: 'Front' if x in [1, 2] else 'Rear')
+    
     return df
 
 df = load_data()
+# @st.cache_data
+# def load_data():
+#     try:
+#         # Load main data
+#         df = pd.read_excel("df_final.xlsx", sheet_name="Sheet1")
+#         # Load health index data
+#         hi_data = pd.read_excel("hi_final.xlsx")
+#     except FileNotFoundError as e:
+#         st.error(f"❌ File not found: `{e.filename}`")
+#         st.stop()
+#     except Exception as e:
+#         st.error(f"❌ Error loading data: {e}")
+#         st.stop()
+    
+#     # === Proses df_final.xlsx ===
+#     # Fix encoding
+#     df.columns = df.columns.str.replace("Â", "")
+#     for col in df.select_dtypes(include='object').columns:
+#         df[col] = df[col].astype(str).str.replace("Â", "")
+    
+#     # Parse datetime
+#     df['Time'] = pd.to_datetime(df['Time'], errors='coerce')
+#     df = df.dropna(subset=['Time']).copy()
+#     df['hour'] = df['Time'].dt.hour
+    
+#     # Alarm flag
+#     df['is_alarm'] = (~df['Alarm Status'].fillna('').str.contains('No Alarm', case=False)).astype(int)
+    
+#     # Dynamic risk score
+#     p = df['Pressure (psi)']
+#     p_red_high = df['Red High Press (psi)']
+#     p_amber_high = df['Amber High Press (psi)']
+#     t = df['Temperature (°C)']
+#     t_red = df['Absolute Red Temp (°C)']
+#     t_amber = df['Absolute Amber Temp (°C)']
+    
+#     # Avoid division by zero
+#     p_denom = (p_red_high - p_amber_high).replace(0, np.nan)
+#     p_norm = np.clip((p - p_amber_high) / p_denom, 0, 1).fillna(0)
+#     t_denom = (t_red - t_amber).replace(0, np.nan)
+#     t_norm = np.clip((t - t_amber) / t_denom, 0, 1).fillna(0)
+#     df['risk_score'] = 0.6 * p_norm + 0.4 * t_norm
+
+#     def get_risk_label(score):
+#         if score >= 0.8: return 'Very High Risk'
+#         elif score >= 0.6: return 'High Risk'
+#         elif score >= 0.3: return 'Moderate Risk'
+#         else: return 'Slight Risk'
+#     df['Risk Level'] = df['risk_score'].apply(get_risk_label)
+    
+#     # Position Group
+#     df['Position Group'] = df['Position'].map({1: 'Front', 2: 'Front', 3: 'Rear', 4: 'Rear'}).fillna('Other')
+
+#     return df, hi_data  # Kembalikan 2 data
+# # Load both datasets
+# df, hi_data = load_data()
+# # Optional: Info ringkas di sidebar (opsional)
+# with st.sidebar:
+#     st.markdown("### 📊 Dataset Overview")
+#     st.metric("Total Records", f"{len(df):,}")
+#     st.metric("Date Range", f"{df['Time'].min().date()} → {df['Time'].max().date()}")
+#     st.metric("Alarms (Red/Amber)", f"{df['is_alarm'].sum():,} ({df['is_alarm'].mean():.1%})")
+
+# ================= HEADER =================
+st.markdown("""
+<div style="text-align:center; font-family:Arial, sans-serif; margin-bottom:16px;">
+    <h1 style="color:#154D9C; font-weight:bold; margin:0;">
+        Tyre Pressure Monitoring System (TPMS) Analytics for Mining Equipments
+    </h1>
 
-# ================= HEADER — LOGO EMBEDDED (PASTI MUNCUL) =================
-st.markdown('<div class="header-box">', unsafe_allow_html=True)
-col1, col2, col3 = st.columns([1, 5, 1])
+    <p style="font-size:12px; color:#7d7d7d; margin:4px 0 2px 0;">
+        Daily trend insights derived from 13–16 December 2023 data
+    </p>
 
-# LEFT — MICHELIN (SAMA DENGAN PLN)
-with col1:
-    # Try to load logo.png with error handling
-    try:
-        st.image("logo.png", width=50)
-    except:
-        # If logo.png doesn't exist, show a placeholder or text
-        st.markdown("")
+    <p style="font-size:11px; color:#5DA698; margin:6px 0 2px 0; font-weight:600;">
+        Special Design from <span style="color:#154D9C;">Bukit Technology Digital</span>
+    </p>
 
-# CENTER — TITLE
-with col2:
-    st.markdown("""
-        <div class="header-title">
-            <h1 style="margin-bottom:6px;">
-                Proactive Safety Intelligence & Analytics Dashboard
-            </h1>
-        </div>
-    """, unsafe_allow_html=True)
+    <p style="font-size:10px; color:#7d7d7d; margin:2px 0 0 0;">
+        &copy; 2025 Bukit Technology Digital. All rights reserved.
+    </p>
+</div>
+""", unsafe_allow_html=True)
 
-# RIGHT — BTECH (SAMA DENGAN PLN)
-with col3:
-    # Try to load btech.png with error handling
-    try:
-        st.image("btech.png", width=50)
-    except:
-        # If btech.png doesn't exist, show a placeholder or text
-        st.markdown("")
 
-st.markdown('</div>', unsafe_allow_html=True)
 # ================= OBJECTIVES (1–6) =================
 
 # # ================= HEADER =================