Update app.py

app.py

@@ -731,9 +731,11 @@ st.markdown("""
 # Filter semua data (termasuk alarm normal)
 alarm_data = dff.copy()
 
-col1, col2 = st.columns(2)
+# Buat 2 baris × 4 kolom
+col1, col2, col3, col4 = st.columns(4)
+col5, col6, col7, col8 = st.columns(4)
 
-# =============== COL 1: Position 1 & 3 (Pagi & Sore) ===============
+# =============== ROW 1: Position 1 & 2 (Pagi & Sore) ===============
 with col1:
     # Position 1 Pagi
     st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 1 (06:00–18:00)</h6>', unsafe_allow_html=True)
@@ -794,6 +796,7 @@ with col1:
     else:
         st.warning("No data for Position 1")
 
+with col2:
     # Position 1 Sore
     st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 1 (18:00–06:00)</h6>', unsafe_allow_html=True)
     if not alarm_data[alarm_data['Position'] == 1].empty:
@@ -856,14 +859,15 @@ with col1:
     else:
         st.warning("No data for Position 1")
 
-    # Position 3 Pagi
-    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 3 (06:00–18:00)</h6>', unsafe_allow_html=True)
-    if not alarm_data[alarm_data['Position'] == 3].empty:
-        pos3_data = alarm_data[alarm_data['Position'] == 3].copy()
-        pos3_data = pos3_data[pos3_data['hour'].between(6, 17, inclusive='both')]
+with col3:
+    # Position 2 Pagi
+    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 2 (06:00–18:00)</h6>', unsafe_allow_html=True)
+    if not alarm_data[alarm_data['Position'] == 2].empty:
+        pos2_data = alarm_data[alarm_data['Position'] == 2].copy()
+        pos2_data = pos2_data[pos2_data['hour'].between(6, 17, inclusive='both')]
 
-        if not pos3_data.empty:
-            hourly_status_counts = pos3_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
+        if not pos2_data.empty:
+            hourly_status_counts = pos2_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
 
             hourly_normal = hourly_status_counts.get('No Alarm', pd.Series(0, index=range(6, 18))).reindex(range(6, 18), fill_value=0)
             hourly_amber = hourly_status_counts.get('Amber High Pressure', pd.Series(0, index=range(6, 18))).reindex(range(6, 18), fill_value=0)
@@ -911,18 +915,19 @@ with col1:
             )
             st.plotly_chart(fig3, use_container_width=True)
         else:
-            st.warning("No data for Position 3 (06:00–18:00)")
+            st.warning("No data for Position 2 (06:00–18:00)")
     else:
-        st.warning("No data for Position 3")
+        st.warning("No data for Position 2")
 
-    # Position 3 Sore
-    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 3 (18:00–06:00)</h6>', unsafe_allow_html=True)
-    if not alarm_data[alarm_data['Position'] == 3].empty:
-        pos3_data = alarm_data[alarm_data['Position'] == 3].copy()
-        pos3_data = pos3_data[~pos3_data['hour'].between(6, 17, inclusive='both')]
+with col4:
+    # Position 2 Sore
+    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 2 (18:00–06:00)</h6>', unsafe_allow_html=True)
+    if not alarm_data[alarm_data['Position'] == 2].empty:
+        pos2_data = alarm_data[alarm_data['Position'] == 2].copy()
+        pos2_data = pos2_data[~pos2_data['hour'].between(6, 17, inclusive='both')]
 
-        if not pos3_data.empty:
-            hourly_status_counts = pos3_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
+        if not pos2_data.empty:
+            hourly_status_counts = pos2_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
 
             hourly_normal = pd.concat([hourly_status_counts.get('No Alarm', pd.Series(0, index=range(18, 24))).reindex(range(18, 24), fill_value=0),
                                       hourly_status_counts.get('No Alarm', pd.Series(0, index=range(0, 6))).reindex(range(0, 6), fill_value=0)]).values
@@ -973,20 +978,20 @@ with col1:
             )
             st.plotly_chart(fig4, use_container_width=True)
         else:
-            st.warning("No data for Position 3 (18:00–06:00)")
+            st.warning("No data for Position 2 (18:00–06:00)")
     else:
-        st.warning("No data for Position 3")
+        st.warning("No data for Position 2")
 
-# =============== COL 2: Position 2 & 4 (Pagi & Sore) ===============
-with col2:
-    # Position 2 Pagi
-    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 2 (06:00–18:00)</h6>', unsafe_allow_html=True)
-    if not alarm_data[alarm_data['Position'] == 2].empty:
-        pos2_data = alarm_data[alarm_data['Position'] == 2].copy()
-        pos2_data = pos2_data[pos2_data['hour'].between(6, 17, inclusive='both')]
+# =============== ROW 2: Position 3 & 4 (Pagi & Sore) ===============
+with col5:
+    # Position 3 Pagi
+    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 3 (06:00–18:00)</h6>', unsafe_allow_html=True)
+    if not alarm_data[alarm_data['Position'] == 3].empty:
+        pos3_data = alarm_data[alarm_data['Position'] == 3].copy()
+        pos3_data = pos3_data[pos3_data['hour'].between(6, 17, inclusive='both')]
 
-        if not pos2_data.empty:
-            hourly_status_counts = pos2_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
+        if not pos3_data.empty:
+            hourly_status_counts = pos3_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
 
             hourly_normal = hourly_status_counts.get('No Alarm', pd.Series(0, index=range(6, 18))).reindex(range(6, 18), fill_value=0)
             hourly_amber = hourly_status_counts.get('Amber High Pressure', pd.Series(0, index=range(6, 18))).reindex(range(6, 18), fill_value=0)
@@ -1034,18 +1039,19 @@ with col2:
             )
             st.plotly_chart(fig5, use_container_width=True)
         else:
-            st.warning("No data for Position 2 (06:00–18:00)")
+            st.warning("No data for Position 3 (06:00–18:00)")
     else:
-        st.warning("No data for Position 2")
+        st.warning("No data for Position 3")
 
-    # Position 2 Sore
-    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 2 (18:00–06:00)</h6>', unsafe_allow_html=True)
-    if not alarm_data[alarm_data['Position'] == 2].empty:
-        pos2_data = alarm_data[alarm_data['Position'] == 2].copy()
-        pos2_data = pos2_data[~pos2_data['hour'].between(6, 17, inclusive='both')]
+with col6:
+    # Position 3 Sore
+    st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 3 (18:00–06:00)</h6>', unsafe_allow_html=True)
+    if not alarm_data[alarm_data['Position'] == 3].empty:
+        pos3_data = alarm_data[alarm_data['Position'] == 3].copy()
+        pos3_data = pos3_data[~pos3_data['hour'].between(6, 17, inclusive='both')]
 
-        if not pos2_data.empty:
-            hourly_status_counts = pos2_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
+        if not pos3_data.empty:
+            hourly_status_counts = pos3_data.groupby(['hour', 'Alarm Status']).size().unstack(fill_value=0)
 
             hourly_normal = pd.concat([hourly_status_counts.get('No Alarm', pd.Series(0, index=range(18, 24))).reindex(range(18, 24), fill_value=0),
                                       hourly_status_counts.get('No Alarm', pd.Series(0, index=range(0, 6))).reindex(range(0, 6), fill_value=0)]).values
@@ -1096,10 +1102,11 @@ with col2:
             )
             st.plotly_chart(fig6, use_container_width=True)
         else:
-            st.warning("No data for Position 2 (18:00–06:00)")
+            st.warning("No data for Position 3 (18:00–06:00)")
     else:
-        st.warning("No data for Position 2")
+        st.warning("No data for Position 3")
 
+with col7:
     # Position 4 Pagi
     st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 4 (06:00–18:00)</h6>', unsafe_allow_html=True)
     if not alarm_data[alarm_data['Position'] == 4].empty:
@@ -1159,6 +1166,7 @@ with col2:
     else:
         st.warning("No data for Position 4")
 
+with col8:
     # Position 4 Sore
     st.markdown('<h6 style="text-align:center; margin-top: 0;">Position 4 (18:00–06:00)</h6>', unsafe_allow_html=True)
     if not alarm_data[alarm_data['Position'] == 4].empty:
@@ -1265,7 +1273,6 @@ st.markdown(f"""
     </div>
 </div>
 """, unsafe_allow_html=True)
-
 # ================= OBJECTIVE 3 =================
 st.markdown('<h3 class="objective-title">OBJECTIVE 4: Correlation — How Does Heat Influence Pressure and Which Tyres Trigger Red Alarms?</h3>', unsafe_allow_html=True)