Update app.py

app.py

@@ -804,33 +804,56 @@ with col1:
 
 
 # =============== COL 2: Front — Temperature / Speed (Boxplot) ===============
+# =============== COL 2: Front — Pressure vs (Temperature / Speed) ===============
 with col2:
-    st.markdown('<h5 style="text-align:center; margin-top: 0;">Front Tyres: Temperature / Speed (Boxplot)</h5>', unsafe_allow_html=True)
+    st.markdown('<h5 style="text-align:center; margin-top: 0;">Front Tyres: Pressure vs (Temperature / Speed)</h5>', unsafe_allow_html=True)
     
     if not front_df.empty:
-        # Hitung rasio suhu/kecepatan
+        # Filter kecepatan > 0 untuk hindari pembagian dengan nol
         front_df = front_df[front_df['Speed (km/h)'] > 0]
+        front_df['Temp_Speed_Ratio'] = front_df['Temperature (°C)'] / front_df['Speed (km/h)']
 
-        front_df['Temp_Speed_Ratio'] = front_df['Temperature (°C)'] / (front_df['Speed (km/h)'])
+        # Tambahkan kategori alarm status
+        front_df['Category'] = front_df.apply(
+            lambda row: f"Normal Front Tyre" if row['Alarm Status'] == 'No Alarm'
+            else f"Amber Pressure Front Tyre" if 'Amber' in row['Alarm Status']
+            else f"Red Pressure Front Tyre", axis=1
+        )
+        categories = ["Normal Front Tyre", "Amber Pressure Front Tyre", "Red Pressure Front Tyre"]
+        front_df['Category'] = pd.Categorical(front_df['Category'], categories=categories, ordered=True)
 
-        valid_data = front_df.dropna(subset=['Temp_Speed_Ratio'])
+        valid_data = front_df.dropna(subset=['Temp_Speed_Ratio', 'Pressure (psi)'])
         if not valid_data.empty:
-            fig2 = px.box(
+            fig2 = px.scatter(
                 valid_data,
-                y='Temp_Speed_Ratio',
+                x='Temp_Speed_Ratio',
+                y='Pressure (psi)',
+                color='Category',
+                color_discrete_map={
+                    "Normal Front Tyre": "#2E7D32",         # Hijau
+                    "Amber Pressure Front Tyre": "#FFC107", # Kuning
+                    "Red Pressure Front Tyre": "#D32F2F"    # Merah
+                },
+                category_orders={'Category': categories},
                 template="plotly_white",
-                labels={'Temp_Speed_Ratio': 'Temperature / Speed'}
+                labels={'Temp_Speed_Ratio': 'Temperature / Speed', 'Pressure (psi)': 'Pressure (psi)'}
             )
 
             fig2.update_traces(
-                marker_color='#003DA5',
-                name='Front Tyres'
+                hovertemplate="<b>%{marker.color}</b><br>T/S: %{x:.2f}<br>Pressure: %{y:.1f} psi<extra></extra>",
+                marker=dict(size=6)
             )
 
             fig2.update_layout(
                 margin=dict(t=40),
-                yaxis_title='Temperature / Speed',
-                showlegend=False
+                legend=dict(
+                    title_text='Tyre Status',
+                    bgcolor="white",
+                    bordercolor="lightgray",
+                    borderwidth=1,
+                    itemclick=False,
+                    itemdoubleclick=False
+                )
             )
             st.plotly_chart(fig2, use_container_width=True)
         else:
@@ -918,33 +941,56 @@ with col3:
     else:
         st.warning("No rear tyre data.")
 
-# =============== COL 4: Rear — Temperature / Speed (Boxplot) ===============
+
+# =============== COL 4: Rear — Pressure vs (Temperature / Speed) ===============
 with col4:
-    st.markdown('<h5 style="text-align:center; margin-top: 0;">Rear Tyres: Temperature / Speed (Boxplot)</h5>', unsafe_allow_html=True)
+    st.markdown('<h5 style="text-align:center; margin-top: 0;">Rear Tyres: Pressure vs (Temperature / Speed)</h5>', unsafe_allow_html=True)
     
     if not rear_df.empty:
+        # Filter kecepatan > 0 untuk hindari pembagian dengan nol
         rear_df = rear_df[rear_df['Speed (km/h)'] > 0]
+        rear_df['Temp_Speed_Ratio'] = rear_df['Temperature (°C)'] / rear_df['Speed (km/h)']
 
-        rear_df['Temp_Speed_Ratio'] = rear_df['Temperature (°C)'] / (rear_df['Speed (km/h)'] )
+        # Tambahkan kategori alarm status
+        rear_df['Category'] = rear_df.apply(
+            lambda row: f"Normal Rear Tyre" if row['Alarm Status'] == 'No Alarm'
+            else f"Amber Pressure Rear Tyre" if 'Amber' in row['Alarm Status']
+            else f"Red Pressure Rear Tyre", axis=1
+        )
+        categories = ["Normal Rear Tyre", "Amber Pressure Rear Tyre", "Red Pressure Rear Tyre"]
+        rear_df['Category'] = pd.Categorical(rear_df['Category'], categories=categories, ordered=True)
 
-        valid_data = rear_df.dropna(subset=['Temp_Speed_Ratio'])
+        valid_data = rear_df.dropna(subset=['Temp_Speed_Ratio', 'Pressure (psi)'])
         if not valid_data.empty:
-            fig4 = px.box(
+            fig4 = px.scatter(
                 valid_data,
-                y='Temp_Speed_Ratio',
-                template="plotly_white",
-                labels={'Temp_Speed_Ratio': 'Temperature / Speed'}
+                x='Temp_Speed_Ratio',
+                y='Pressure (psi)',
+                color='Category',
+                color_discrete_map={
+                    "Normal Rear Tyre": "#2E7D32",
+                    "Amber Pressure Rear Tyre": "#FFC107",
+                    "Red Pressure Rear Tyre": "#D32F2F"
+                },
+                category_orders={'Category': categories},
+                template="plotly_white"
             )
 
             fig4.update_traces(
-                marker_color='#FFB300',
-                name='Rear Tyres'
+                hovertemplate="<b>%{marker.color}</b><br>T/S: %{x:.2f}<br>Pressure: %{y:.1f} psi<extra></extra>",
+                marker=dict(size=6)
             )
 
             fig4.update_layout(
                 margin=dict(t=40),
-                yaxis_title='Temperature / Speed',
-                showlegend=False
+                legend=dict(
+                    title_text='Tyre Status',
+                    bgcolor="white",
+                    bordercolor="lightgray",
+                    borderwidth=1,
+                    itemclick=False,
+                    itemdoubleclick=False
+                )
             )
             st.plotly_chart(fig4, use_container_width=True)
         else: