Update app.py

app.py

@@ -681,48 +681,7 @@ st.markdown(f"""
 #             hourly_alarm_melted,
 #             x='hour',
 #             y='Alarm Count',
-#             color='Position',
-#             color_discrete_map=color_map,
-#             title="Alarm Count (Amber & Red Only) per Hour by Tyre Position",
-#             labels={'Alarm Count': 'Number of Alarms', 'Position': 'Tyre Position'},
-#             line_shape='linear',
-#             template="plotly_white"
-#         )
-
-#         fig2.update_layout(
-#             xaxis=dict(
-#                 title="Hour of Day",
-#                 tickmode='array',
-#                 tickvals=list(range(0, 24)),
-#                 ticktext=[f"{h:02d}:00" for h in range(24)],
-#                 tickangle=45
-#             ),
-#             yaxis=dict(title="Number of Alarms"),
-#             legend_title_text='Tyre Position',
-#             margin=dict(t=40, b=40, l=40, r=20),
-#             title_x=0.5
-#         )
-
-#         st.plotly_chart(fig2, use_container_width=True)
-
-# # =============== INSIGHT ===============
-# # Insight tetap bisa menampilkan perbandingan
-# capture_by_pos = dff['Position'].value_counts().reindex([1,2,3,4], fill_value=0)
-# alarm_by_pos = alarm_data['Position'].value_counts().reindex([1,2,3,4], fill_value=0)
-
-# insight_text = f"""
-# • Total data capture: Pos 1={capture_by_pos[1]}, 2={capture_by_pos[2]}, 3={capture_by_pos[3]}, 4={capture_by_pos[4]}
-# • Total alarms (Amber/Red): Pos 1={alarm_by_pos[1]}, 2={alarm_by_pos[2]}, 3={alarm_by_pos[3]}, 4={alarm_by_pos[4]}
-# • Alarm density varies significantly between positions — suggesting different operational stress levels.
-# """
 
-# st.markdown(f"""
-# <div class="insight-box">
-# <div class="content">
-# {insight_text.strip()}
-# </div>
-# </div>
-# "
 st.markdown("""
 <h3 class="objective-title">OBJECTIVE 2: Alarm Frequency Analysis — Shift-Based Radial Charts</h3>
 <small>*Showing alarm types by shift: Normal (Green), Amber (Yellow), Red (Red)</small>
@@ -943,7 +902,7 @@ st.markdown(f"""
 </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)
+st.markdown('<h3 class="objective-title">OBJECTIVE 3: Correlation — How Does Heat Influence Pressure and Which Tyres Trigger Red Alarms?</h3>', unsafe_allow_html=True)
 
 # Prepare data
 front_df = dff[dff['Position'].isin([1, 2])].copy()
@@ -952,7 +911,6 @@ rear_df = dff[dff['Position'].isin([3, 4])].copy()
 col1, col2 = st.columns(2)
 
 # =============== COL 1: Front — Temperature → Pressure (Scatter + Regression Area) ===============
-# =============== COL 1: Front — Temperature → Pressure ===============
 with col1:
     st.markdown('<h5 style="text-align:center; margin-top: 0;">Front Tyres: Temperature → Pressure</h5>', unsafe_allow_html=True)
     
@@ -996,12 +954,31 @@ with col1:
                 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)
             ))
 
+            # Tambahkan area confidence interval (soft background)
+            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
+
+            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=[
@@ -1023,7 +1000,8 @@ with col1:
                     borderwidth=1,
                     itemclick=False,
                     itemdoubleclick=False
-                )
+                ),
+                showlegend=True
             )
             st.plotly_chart(fig1, use_container_width=True)
         else:
@@ -1031,9 +1009,7 @@ with col1:
     else:
         st.warning("No front tyre data.")
 
-
 # =============== 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: Pressure vs (Temperature / Speed)</h5>', unsafe_allow_html=True)
     
@@ -1092,8 +1068,6 @@ with col2:
 
 # =============== COL 3: Rear — Temperature → Pressure (Scatter + Regression Area) ===============
 col3, col4 = st.columns(2)
-# =============== COL 3: Rear — Temperature → Pressure ===============
-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)
@@ -1141,6 +1115,24 @@ with col3:
                 line=dict(color='#1976D2', dash='dot', width=2)
             ))
 
+            # Tambahkan area confidence interval (soft background)
+            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)',  # Merah transparan
+                line=dict(color='rgba(255,255,255,0)'),
+                showlegend=False,
+                name='Confidence Interval'
+            ))
+
             fig3.update_layout(
                 margin=dict(t=40),
                 annotations=[
@@ -1162,7 +1154,8 @@ with col3:
                     borderwidth=1,
                     itemclick=False,
                     itemdoubleclick=False
-                )
+                ),
+                showlegend=True
             )
             st.plotly_chart(fig3, use_container_width=True)
         else:
@@ -1170,7 +1163,6 @@ with col3:
     else:
         st.warning("No rear tyre data.")
 
-
 # =============== COL 4: Rear — Pressure vs (Temperature / Speed) ===============
 with col4:
     st.markdown('<h5 style="text-align:center; margin-top: 0;">Rear Tyres: Pressure vs (Temperature / Speed)</h5>', unsafe_allow_html=True)
@@ -1250,6 +1242,7 @@ st.markdown(f"""
     </div>
 </div>
 """, unsafe_allow_html=True)
+
 # ================= OBJECTIVE 5 =================
 st.markdown('<h3 class="objective-title">OBJECTIVE 5: Spatial Risk Mapping — Where Do Red Pressure Alarms Occur Most Frequently?</h3>', unsafe_allow_html=True)