Update app.py

app.py

@@ -664,202 +664,266 @@ else:
     </div>
     """, unsafe_allow_html=True)
 # ================= OBJECTIVE 3 =================
-st.markdown("""
-<h3 class="objective-title">OBJECTIVE 3: Alarm Frequency Analysis — When, Where, and Which Tyres Matter Most?</h3>
-<small>*Showing only Red High Pressure Alarms</small>
-""", unsafe_allow_html=True)
-
+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)
 
-# Filter hanya Position 1 & 2 untuk Objective 2
-dff_obj2 = dff[dff['Position'].isin([1, 2])].copy()
+# Prepare data
+front_df = dff[dff['Position'].isin([1, 2])].copy()
+rear_df = dff[dff['Position'].isin([3, 4])].copy()
 
-col_a, col_b = st.columns(2)
+col1, col2 = st.columns(2)
 
-# --- COL A: Alarm Distribution by Hour (Hanya Position 1 & 2) ---
-with col_a:
-    st.markdown('<h5 style="text-align:center; margin-top: 0;">Alarm Distribution by Hour</h5>', unsafe_allow_html=True)
-    
-    alarm_hour_pos = dff_obj2[dff_obj2['is_alarm'] == 1][['hour', 'Position']].copy()
+# =============== COL 1: Front — Temperature → Pressure (Scatter + Regression Area) ===============
+with col1:
+    st.markdown('<h5 style="text-align:center; margin-top: 0;">Front Tyres: Temperature → Pressure</h5>', unsafe_allow_html=True)
     
-    if alarm_hour_pos.empty:
-        st.warning("No alarm data to display.")
+    if not front_df.empty:
+        # Filter valid data
+        valid_data = front_df.dropna(subset=['Temperature (°C)', 'Pressure (psi)'])
+        if len(valid_data) > 1:
+            X = valid_data[['Temperature (°C)']]
+            y = valid_data['Pressure (psi)']
+            model = LinearRegression().fit(X, y)
+            x_line = np.linspace(X.min(), X.max(), 100).reshape(-1, 1)
+            y_line = model.predict(x_line)
+            corr = np.corrcoef(valid_data['Temperature (°C)'], valid_data['Pressure (psi)'])[0, 1]
+
+            # Buat scatter plot
+            fig1 = px.scatter(
+                valid_data,
+                x='Temperature (°C)',
+                y='Pressure (psi)',
+                color_discrete_sequence=['#003DA5'],
+                template="plotly_white",
+                labels={'Temperature (°C)': 'Temperature (°C)', 'Pressure (psi)': 'Pressure (psi)'}
+            )
+
+            # Tambahkan garis regresi
+            fig1.add_trace(go.Scatter(
+                x=x_line.flatten(), y=y_line,
+                mode='lines',
+                name='Linear Regression',
+                line=dict(color='#D32F2F', width=2)
+            ))
+
+            # Tambahkan area confidence interval (soft background)
+            # Hitung standard error
+            y_pred = model.predict(X)
+            residuals = y - y_pred
+            mse = np.mean(residuals**2)
+            std_error = np.sqrt(mse)
+            y_upper = y_line + 1.96 * std_error
+            y_lower = y_line - 1.96 * std_error
+
+            # Tambahkan area
+            fig1.add_trace(go.Scatter(
+                x=np.concatenate([x_line.flatten(), x_line.flatten()[::-1]]),
+                y=np.concatenate([y_upper, y_lower[::-1]]),
+                fill='toself',
+                fillcolor='rgba(211, 47, 47, 0.1)',  # Merah transparan
+                line=dict(color='rgba(255,255,255,0)'),
+                showlegend=False,
+                name='Confidence Interval'
+            ))
+
+            fig1.update_layout(
+                margin=dict(t=40),
+                annotations=[
+                    dict(
+                        x=0.95, y=0.95,
+                        xref="paper", yref="paper",
+                        text=f"r = {corr:.2f}",
+                        showarrow=False,
+                        bgcolor="white",
+                        bordercolor="black",
+                        borderwidth=1,
+                        font=dict(color="black")
+                    )
+                ],
+                legend=dict(
+                    title_text='Data & Regression',
+                    bgcolor="white",
+                    bordercolor="lightgray",
+                    borderwidth=1,
+                    itemclick=False,
+                    itemdoubleclick=False
+                ),
+                showlegend=True
+            )
+            st.plotly_chart(fig1, use_container_width=True)
+        else:
+            st.warning("Insufficient data for front tyres.")
     else:
-        # Hitung alarm per jam & posisi
-        hourly_pos_counts = alarm_hour_pos.groupby(['hour', 'Position']).size().unstack(fill_value=0)
-        positions = sorted([p for p in [1, 2] if p in hourly_pos_counts.columns])  # hanya 1 & 2
-        color_map = {1: '#d50000', 2: '#ff6d00'}
-        
-        fig_polar = go.Figure()
-        max_r = max(hourly_pos_counts.sum(axis=1)) * 1.05 if not hourly_pos_counts.empty else 10
-        
-        for pos in positions:
-            if pos in hourly_pos_counts.columns:
-                counts = hourly_pos_counts[pos].reindex(range(24), fill_value=0).values
-                theta = [h * 15 for h in range(24)]  # 24 jam → 360° / 24 = 15° per jam
-                fig_polar.add_trace(go.Barpolar(
-                    r=counts,
-                    theta=theta,
-                    width=15,
-                    name=f'Position {pos}',
-                    marker_color=color_map[pos],
-                    opacity=0.85,
-                    hovertemplate='<b>Hour:</b> %{theta:0f}:00<br><b>Alarms:</b> %{r}<extra></extra>'
-                ))
-        
-        fig_polar.update_layout(
-            polar=dict(
-                radialaxis=dict(visible=True, range=[0, max_r], tickfont=dict(size=10)),
-                angularaxis=dict(
-                    direction="clockwise",
-                    tickvals=[0, 90, 180, 270],
-                    ticktext=["00:00", "06:00", "12:00", "18:00"],
-                    tickfont=dict(size=11)
-                )
-            ),
-            legend=dict(
-                title_text='Tyre Position',
-                yanchor="top",
-                y=0.98,
-                xanchor="left",
-                x=1.02,
-                bgcolor="rgba(255,255,255,0.7)",
-                borderwidth=0.5,
-                itemclick=False,
-                itemdoubleclick=False
-            ),
-            margin=dict(t=40, b=20, l=20, r=120),
-            hovermode="closest"
-        )
-        st.plotly_chart(fig_polar, use_container_width=True)
+        st.warning("No front tyre data.")
 
-# --- COL B: Alarm Hotspots (Front Tyres Only: Pos 1 & 2) ---
-with col_b:
-    st.markdown('<h5 style="text-align:center; margin-top: 0;">Alarm Hotspots by Tyre, Position & Zone</h5>', unsafe_allow_html=True)
-    
-    # Filter hanya alarm di front tyres (Pos 1 & 2)
-    front_alarm_data = dff_obj2[(dff_obj2['is_alarm'] == 1) & (dff_obj2['Position'].isin([1, 2]))].copy()
+# =============== COL 2: Front — Temperature / Speed (Boxplot) ===============
+with col2:
+    st.markdown('<h5 style="text-align:center; margin-top: 0;">Front Tyres: Temperature / Speed (Boxplot)</h5>', unsafe_allow_html=True)
     
-    if front_alarm_data.empty:
-        st.warning("No alarm data for front tyres to display.")
+    if not front_df.empty:
+        # Hitung rasio suhu/kecepatan
+        front_df['Temp_Speed_Ratio'] = front_df['Temperature (°C)'] / (front_df['Speed (km/h)'] + 1e-6)
+
+        valid_data = front_df.dropna(subset=['Temp_Speed_Ratio'])
+        if not valid_data.empty:
+            fig2 = px.box(
+                valid_data,
+                y='Temp_Speed_Ratio',
+                template="plotly_white",
+                labels={'Temp_Speed_Ratio': 'Temperature / Speed'}
+            )
+
+            fig2.update_traces(
+                marker_color='#003DA5',
+                name='Front Tyres'
+            )
+
+            fig2.update_layout(
+                margin=dict(t=40),
+                yaxis_title='Temperature / Speed',
+                showlegend=False
+            )
+            st.plotly_chart(fig2, use_container_width=True)
+        else:
+            st.warning("Insufficient data for front tyres.")
     else:
-        agg_data = (
-            front_alarm_data
-            .groupby(['TyreSN', 'Position', 'Zone'])
-            .size()
-            .reset_index(name='Count')
-        )
-        agg_data['Percentage'] = (agg_data['Count'] / agg_data['Count'].sum()) * 100
-
-        # Warna eksplisit untuk 1 & 2
-        color_map_front = {1: '#d50000', 2: '#ff6d00'}
-        
-        fig_bubble = px.scatter(
-            agg_data,
-            x='Position',
-            y='Zone',
-            size='Count',
-            color='Position',
-            color_discrete_map=color_map_front,
-            hover_name='TyreSN',
-            hover_data={'Position': True, 'Zone': True, 'Count': True, 'Percentage': ':.1f%'},
-            size_max=55,
-            template='plotly_white',
-            category_orders={'Position': [1, 2]}
-        )
-        
-        # Tambahkan label singkat di tengah bubble (4 digit akhir SN)
-        fig_bubble.update_traces(
-            text=agg_data['TyreSN'].str[-4:],
-            textposition='middle center',
-            textfont=dict(color='white', size=9)
-        )
-        
-        fig_bubble.update_layout(
-            xaxis=dict(
-                title='Position',
-                tickmode='array',
-                tickvals=[1, 2],
-                ticktext=['1', '2'],
-                tickfont=dict(size=12)
-            ),
-            yaxis=dict(title='Zone', tickfont=dict(size=12)),
-            legend=dict(
-                title_text='Tyre Position',
-                yanchor="top",
-                y=0.98,
-                xanchor="left",
-                x=1.02,
-                bgcolor="rgba(255,255,255,0.7)",
-                borderwidth=0.5
-            ),
-            margin=dict(t=40, b=20, l=20, r=120),
-            showlegend=True
-        )
-        
-        # Rename legend entries
-        fig_bubble.for_each_trace(lambda t: t.update(
-            name=f'Position {int(t.name)}'
-        ))
-        
-        st.plotly_chart(fig_bubble, use_container_width=True)
-
-# --- INSIGHT 2: Actionable, Numeric, Time-Group Based ---
-alarm_hours = dff_obj2[dff_obj2['is_alarm'] == 1]['hour']
-
-if alarm_hours.empty:
-    insight_text = "• No alarm data available for analysis."
-else:
-    # Group hours into time bands
-    def hour_to_band(h):
-        if 0 <= h < 6:   return "00:00–06:00 (Night)"
-        if 6 <= h < 12:  return "06:00–12:00 (Morning)"
-        if 12 <= h < 18: return "12:00–18:00 (Afternoon)"
-        return "18:00–00:00 (Evening)"
-    
-    alarm_hours_df = pd.DataFrame({'hour': alarm_hours})
-    alarm_hours_df['band'] = alarm_hours_df['hour'].apply(hour_to_band)
-    band_counts = alarm_hours_df['band'].value_counts().sort_index()  # sort by natural order
-
-    # Identify dominant & second-dominant bands
-    top_bands = band_counts.nlargest(2)
-    dominant_band = top_bands.index[0] if len(top_bands) > 0 else "N/A"
-    second_dominant_band = top_bands.index[1] if len(top_bands) > 1 else "N/A"
+        st.warning("No front tyre data.")
+
+# =============== COL 3: Rear — Temperature → Pressure (Scatter + Regression Area) ===============
+col3, col4 = st.columns(2)
+
+with col3:
+    st.markdown('<h5 style="text-align:center; margin-top: 0;">Rear Tyres: Temperature → Pressure</h5>', unsafe_allow_html=True)
     
-    dominant_pct = (top_bands.iloc[0] / band_counts.sum() * 100) if len(top_bands) > 0 else 0
-    second_pct = (top_bands.iloc[1] / band_counts.sum() * 100) if len(top_bands) > 1 else 0
+    if not rear_df.empty:
+        valid_data = rear_df.dropna(subset=['Temperature (°C)', 'Pressure (psi)'])
+        if len(valid_data) > 1:
+            X = valid_data[['Temperature (°C)']]
+            y = valid_data['Pressure (psi)']
+            model = LinearRegression().fit(X, y)
+            x_line = np.linspace(X.min(), X.max(), 100).reshape(-1, 1)
+            y_line = model.predict(x_line)
+            corr = np.corrcoef(valid_data['Temperature (°C)'], valid_data['Pressure (psi)'])[0, 1]
 
-    # Front vs Rear alarm share (hanya pos 1-2 vs 3-4)
-    front_alarms = dff_obj2[(dff_obj2['is_alarm'] == 1) & (dff_obj2['Position'].isin([1, 2]))].shape[0]
-    rear_alarms = dff_obj2[(dff_obj2['is_alarm'] == 1) & (dff_obj2['Position'].isin([3, 4]))].shape[0]
-    total_alarms = front_alarms + rear_alarms
-    front_pct = front_alarms / total_alarms * 100 if total_alarms > 0 else 0
+            fig3 = px.scatter(
+                valid_data,
+                x='Temperature (°C)',
+                y='Pressure (psi)',
+                color_discrete_sequence=['#FFB300'],
+                template="plotly_white",
+                labels={'Temperature (°C)': 'Temperature (°C)', 'Pressure (psi)': 'Pressure (psi)'}
+            )
 
-    # Top zone
-    top_zone = dff_obj2[dff_obj2['is_alarm'] == 1]['Zone'].value_counts().index[0] if not dff_obj2[dff_obj2['is_alarm'] == 1].empty else "N/A"
+            fig3.add_trace(go.Scatter(
+                x=x_line.flatten(), y=y_line,
+                mode='lines',
+                name='Linear Regression',
+                line=dict(color='#D32F2F', width=2)
+            ))
+
+            # Confidence interval area
+            y_pred = model.predict(X)
+            residuals = y - y_pred
+            mse = np.mean(residuals**2)
+            std_error = np.sqrt(mse)
+            y_upper = y_line + 1.96 * std_error
+            y_lower = y_line - 1.96 * std_error
+
+            fig3.add_trace(go.Scatter(
+                x=np.concatenate([x_line.flatten(), x_line.flatten()[::-1]]),
+                y=np.concatenate([y_upper, y_lower[::-1]]),
+                fill='toself',
+                fillcolor='rgba(211, 47, 47, 0.1)',
+                line=dict(color='rgba(255,255,255,0)'),
+                showlegend=False,
+                name='Confidence Interval'
+            ))
+
+            fig3.update_layout(
+                margin=dict(t=40),
+                annotations=[
+                    dict(
+                        x=0.95, y=0.95,
+                        xref="paper", yref="paper",
+                        text=f"r = {corr:.2f}",
+                        showarrow=False,
+                        bgcolor="white",
+                        bordercolor="black",
+                        borderwidth=1,
+                        font=dict(color="black")
+                    )
+                ],
+                legend=dict(
+                    title_text='Data & Regression',
+                    bgcolor="white",
+                    bordercolor="lightgray",
+                    borderwidth=1,
+                    itemclick=False,
+                    itemdoubleclick=False
+                ),
+                showlegend=True
+            )
+            st.plotly_chart(fig3, use_container_width=True)
+        else:
+            st.warning("Insufficient data for rear tyres.")
+    else:
+        st.warning("No rear tyre data.")
+
+# =============== COL 4: Rear — Temperature / Speed (Boxplot) ===============
+with col4:
+    st.markdown('<h5 style="text-align:center; margin-top: 0;">Rear Tyres: Temperature / Speed (Boxplot)</h5>', unsafe_allow_html=True)
     
-    # Build insight bullets
-    insight_lines = [
-        f"• {dominant_band} is the dominant alarm period ({dominant_pct:.1f}% of all alarms).",
-        f"• {second_dominant_band} is the second-highest period ({second_pct:.1f}% of alarms)."
-    ]
-    if front_alarms > 0:
-        insight_lines.append(f"• Front tyres (Pos 1 & 2) account for {front_pct:.1f}% of all alarms, indicating higher stress or usage intensity upfront.")
-    if top_zone != "N/A":
-        insight_lines.append(f"• Zone {top_zone} records the highest alarm frequency across all positions.")
-    insight_lines.append("• Alarm clustering in specific hours and front positions suggests opportunity for targeted inspection scheduling.")
-
-    insight_text = "\n".join(insight_lines)
-
-# --- Display Insight Box ---
+    if not rear_df.empty:
+        rear_df['Temp_Speed_Ratio'] = rear_df['Temperature (°C)'] / (rear_df['Speed (km/h)'] + 1e-6)
+
+        valid_data = rear_df.dropna(subset=['Temp_Speed_Ratio'])
+        if not valid_data.empty:
+            fig4 = px.box(
+                valid_data,
+                y='Temp_Speed_Ratio',
+                template="plotly_white",
+                labels={'Temp_Speed_Ratio': 'Temperature / Speed'}
+            )
+
+            fig4.update_traces(
+                marker_color='#FFB300',
+                name='Rear Tyres'
+            )
+
+            fig4.update_layout(
+                margin=dict(t=40),
+                yaxis_title='Temperature / Speed',
+                showlegend=False
+            )
+            st.plotly_chart(fig4, use_container_width=True)
+        else:
+            st.warning("Insufficient data for rear tyres.")
+    else:
+        st.warning("No rear tyre data.")
+
+# =============== INSIGHT 4 ===============
+def safe_corr(a, b):
+    mask = ~(np.isnan(a) | np.isnan(b))
+    if mask.sum() < 2:
+        return 0.0
+    return np.corrcoef(a[mask], b[mask])[0, 1]
+
+corr_p_t_front = safe_corr(front_df['Temperature (°C)'], front_df['Pressure (psi)'])
+corr_t_s_front = safe_corr(front_df['Temperature (°C)'], front_df['Speed (km/h)'])
+corr_p_t_rear = safe_corr(rear_df['Temperature (°C)'], rear_df['Pressure (psi)'])
+corr_t_s_rear = safe_corr(rear_df['Temperature (°C)'], rear_df['Speed (km/h)'])
+
+insight_text = f"""
+Front tyres show stronger temperature-driven pressure response (r = {corr_p_t_front:.2f}) vs rear (r = {corr_p_t_rear:.2f}), confirming heat has greater impact on front tyre inflation. Temperature speed correlation is low on both front (r = {corr_t_s_front:.2f}) and rear (r = {corr_t_s_rear:.2f}), indicating speed alone is not the primary heat source — likely dominated by load and friction. Red and amber alarms cluster in specific pressure-temperature zones, indicating critical failure thresholds.
+"""
+
 st.markdown(f"""
 <div class="insight-box">
     <div class="content">
-{insight_text}
+{insight_text.strip()}
     </div>
 </div>
 """, unsafe_allow_html=True)
 # ================= OBJECTIVE 4 =================
-
 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)
 
 # Prepare data
@@ -868,20 +932,11 @@ rear_df = dff[dff['Position'].isin([3, 4])].copy()
 
 col1, col2 = st.columns(2)
 
-# =============== COL 1: Front — Temperature → Pressure ===============
+# =============== COL 1: Front — Temperature → Pressure (Scatter + Regression Area) ===============
 with col1:
     st.markdown('<h5 style="text-align:center; margin-top: 0;">Front Tyres: Temperature → Pressure</h5>', unsafe_allow_html=True)
     
     if not front_df.empty:
-        # 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)
-
         # Filter valid data
         valid_data = front_df.dropna(subset=['Temperature (°C)', 'Pressure (psi)'])
         if len(valid_data) > 1:
@@ -892,30 +947,42 @@ with col1:
             y_line = model.predict(x_line)
             corr = np.corrcoef(valid_data['Temperature (°C)'], valid_data['Pressure (psi)'])[0, 1]
 
+            # Buat scatter plot
             fig1 = px.scatter(
                 valid_data,
                 x='Temperature (°C)',
                 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},
+                color_discrete_sequence=['#003DA5'],
                 template="plotly_white",
                 labels={'Temperature (°C)': 'Temperature (°C)', 'Pressure (psi)': 'Pressure (psi)'}
             )
 
-            fig1.update_traces(
-                hovertemplate="<b>%{marker.color}</b><br>Temp: %{x:.1f}°C<br>Pressure: %{y:.1f} psi<extra></extra>",
-                marker=dict(size=6)
-            )
-
+            # Tambahkan garis regresi
             fig1.add_trace(go.Scatter(
                 x=x_line.flatten(), y=y_line,
-                mode='lines', name='Trend Line',
-                line=dict(color='#1976D2', dash='dot', width=2)
+                mode='lines',
+                name='Linear Regression',
+                line=dict(color='#D32F2F', width=2)
+            ))
+
+            # Tambahkan area confidence interval (soft background)
+            # Hitung standard error
+            y_pred = model.predict(X)
+            residuals = y - y_pred
+            mse = np.mean(residuals**2)
+            std_error = np.sqrt(mse)
+            y_upper = y_line + 1.96 * std_error
+            y_lower = y_line - 1.96 * std_error
+
+            # Tambahkan area
+            fig1.add_trace(go.Scatter(
+                x=np.concatenate([x_line.flatten(), x_line.flatten()[::-1]]),
+                y=np.concatenate([y_upper, y_lower[::-1]]),
+                fill='toself',
+                fillcolor='rgba(211, 47, 47, 0.1)',  # Merah transparan
+                line=dict(color='rgba(255,255,255,0)'),
+                showlegend=False,
+                name='Confidence Interval'
             ))
 
             fig1.update_layout(
@@ -933,13 +1000,14 @@ with col1:
                     )
                 ],
                 legend=dict(
-                    title_text='Tyre Status',
+                    title_text='Data & Regression',
                     bgcolor="white",
                     bordercolor="lightgray",
                     borderwidth=1,
                     itemclick=False,
                     itemdoubleclick=False
-                )
+                ),
+                showlegend=True
             )
             st.plotly_chart(fig1, use_container_width=True)
         else:
@@ -952,45 +1020,27 @@ with col2:
     st.markdown('<h5 style="text-align:center; margin-top: 0;">Front Tyres: Temperature / Speed (Boxplot)</h5>', unsafe_allow_html=True)
     
     if not front_df.empty:
-        # 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)
-
-        # Hitung rasio suhu/kecepatan (hindari pembagian dengan nol)
+        # Hitung rasio suhu/kecepatan
         front_df['Temp_Speed_Ratio'] = front_df['Temperature (°C)'] / (front_df['Speed (km/h)'] + 1e-6)
 
-        valid_data = front_df.dropna(subset=['Temp_Speed_Ratio', 'Category'])
+        valid_data = front_df.dropna(subset=['Temp_Speed_Ratio'])
         if not valid_data.empty:
             fig2 = px.box(
                 valid_data,
-                x='Category',
                 y='Temp_Speed_Ratio',
-                color='Category',
-                color_discrete_map={
-                    "Normal Front Tyre": "#2E7D32",
-                    "Amber Pressure Front Tyre": "#FFC107",
-                    "Red Pressure Front Tyre": "#D32F2F"
-                },
-                category_orders={'Category': categories},
                 template="plotly_white",
-                labels={'Temp_Speed_Ratio': 'Temperature / Speed', 'Category': 'Tyre Status'}
+                labels={'Temp_Speed_Ratio': 'Temperature / Speed'}
+            )
+
+            fig2.update_traces(
+                marker_color='#003DA5',
+                name='Front Tyres'
             )
 
             fig2.update_layout(
                 margin=dict(t=40),
-                legend=dict(
-                    title_text='Tyre Status',
-                    bgcolor="white",
-                    bordercolor="lightgray",
-                    borderwidth=1,
-                    itemclick=False,
-                    itemdoubleclick=False
-                )
+                yaxis_title='Temperature / Speed',
+                showlegend=False
             )
             st.plotly_chart(fig2, use_container_width=True)
         else:
@@ -998,21 +1048,13 @@ with col2:
     else:
         st.warning("No front tyre data.")
 
-# =============== COL 3: Rear — Temperature → Pressure ===============
+# =============== COL 3: Rear — Temperature → Pressure (Scatter + Regression Area) ===============
 col3, col4 = st.columns(2)
 
 with col3:
     st.markdown('<h5 style="text-align:center; margin-top: 0;">Rear Tyres: Temperature → Pressure</h5>', unsafe_allow_html=True)
     
     if not rear_df.empty:
-        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=['Temperature (°C)', 'Pressure (psi)'])
         if len(valid_data) > 1:
             X = valid_data[['Temperature (°C)']]
@@ -1026,25 +1068,34 @@ with col3:
                 valid_data,
                 x='Temperature (°C)',
                 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"
-            )
-
-            fig3.update_traces(
-                hovertemplate="<b>%{marker.color}</b><br>Temp: %{x:.1f}°C<br>Pressure: %{y:.1f} psi<extra></extra>",
-                marker=dict(size=6)
+                color_discrete_sequence=['#FFB300'],
+                template="plotly_white",
+                labels={'Temperature (°C)': 'Temperature (°C)', 'Pressure (psi)': 'Pressure (psi)'}
             )
 
             fig3.add_trace(go.Scatter(
                 x=x_line.flatten(), y=y_line,
-                mode='lines', name='Trend Line',
-                line=dict(color='#1976D2', dash='dot', width=2)
+                mode='lines',
+                name='Linear Regression',
+                line=dict(color='#D32F2F', width=2)
+            ))
+
+            # Confidence interval area
+            y_pred = model.predict(X)
+            residuals = y - y_pred
+            mse = np.mean(residuals**2)
+            std_error = np.sqrt(mse)
+            y_upper = y_line + 1.96 * std_error
+            y_lower = y_line - 1.96 * std_error
+
+            fig3.add_trace(go.Scatter(
+                x=np.concatenate([x_line.flatten(), x_line.flatten()[::-1]]),
+                y=np.concatenate([y_upper, y_lower[::-1]]),
+                fill='toself',
+                fillcolor='rgba(211, 47, 47, 0.1)',
+                line=dict(color='rgba(255,255,255,0)'),
+                showlegend=False,
+                name='Confidence Interval'
             ))
 
             fig3.update_layout(
@@ -1062,13 +1113,14 @@ with col3:
                     )
                 ],
                 legend=dict(
-                    title_text='Tyre Status',
+                    title_text='Data & Regression',
                     bgcolor="white",
                     bordercolor="lightgray",
                     borderwidth=1,
                     itemclick=False,
                     itemdoubleclick=False
-                )
+                ),
+                showlegend=True
             )
             st.plotly_chart(fig3, use_container_width=True)
         else:
@@ -1081,44 +1133,26 @@ with col4:
     st.markdown('<h5 style="text-align:center; margin-top: 0;">Rear Tyres: Temperature / Speed (Boxplot)</h5>', unsafe_allow_html=True)
     
     if not rear_df.empty:
-        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)
-
-        # Hitung rasio suhu/kecepatan (hindari pembagian dengan nol)
         rear_df['Temp_Speed_Ratio'] = rear_df['Temperature (°C)'] / (rear_df['Speed (km/h)'] + 1e-6)
 
-        valid_data = rear_df.dropna(subset=['Temp_Speed_Ratio', 'Category'])
+        valid_data = rear_df.dropna(subset=['Temp_Speed_Ratio'])
         if not valid_data.empty:
             fig4 = px.box(
                 valid_data,
-                x='Category',
                 y='Temp_Speed_Ratio',
-                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",
-                labels={'Temp_Speed_Ratio': 'Temperature / Speed', 'Category': 'Tyre Status'}
+                labels={'Temp_Speed_Ratio': 'Temperature / Speed'}
+            )
+
+            fig4.update_traces(
+                marker_color='#FFB300',
+                name='Rear Tyres'
             )
 
             fig4.update_layout(
                 margin=dict(t=40),
-                legend=dict(
-                    title_text='Tyre Status',
-                    bgcolor="white",
-                    bordercolor="lightgray",
-                    borderwidth=1,
-                    itemclick=False,
-                    itemdoubleclick=False
-                )
+                yaxis_title='Temperature / Speed',
+                showlegend=False
             )
             st.plotly_chart(fig4, use_container_width=True)
         else:
@@ -1127,7 +1161,6 @@ with col4:
         st.warning("No rear tyre data.")
 
 # =============== INSIGHT 4 ===============
-# Insight tetap sama, karena hanya menggabungkan data dari semua chart
 def safe_corr(a, b):
     mask = ~(np.isnan(a) | np.isnan(b))
     if mask.sum() < 2: