UI partially works

app.py

@@ -6,6 +6,7 @@ import time
 import matplotlib.pyplot as plt
 import seaborn as sns
 from datetime import datetime, timedelta
+import altair as alt
 
 import api
 
@@ -160,12 +161,30 @@ def main():
         st.write(trip_ids[0])
 
         #Nu vill vi plotta!
+        categories =  {0 : 'EMPTY',
+        1: 'MANY_SEATS_AVAILABLE',
+        2:'FEW_SEATS_AVAILABLE',
+        3:'STANDING_ROOM_ONLY',
+        4:'CRUSHED_STANDING_ROOM_ONLY',
+        5: 'FULL'}
         #Steg 2, fixa sa date ersätts av stop genom att mappa location till stop
         plot_df = st.session_state.data[st.session_state.data["trip_id"]==trip_ids[0]]
         plot_df = plot_df[["datetime", "vehicle_occupancystatus"]]
-        plot_df = plot_df.set_index("datetime")
-        st.line_chart(plot_df)
-        
+        st.write(plot_df.head())
+        st.write(plot_df.tail())
+        #plot_df = plot_df.set_index("datetime")
+        plot_df["Y_category"] = plot_df["vehicle_occupancystatus"].map(categories)
+        #st.line_chart(plot_df)
+        # Create the Altair chart
+        chart = alt.Chart(plot_df).mark_line(point=True).encode(
+            x=alt.X('datetime:T', title="Datetime"),  # Use column name as string
+            y=alt.Y('Y_category:N', title="Vehicle Occupancy Status (Categories)"),  # Treat Y as categorical
+            tooltip=['datetime', 'Y_category']  # Add tooltips for interactivity
+        ).properties(
+            title="Vehicle Occupancy Status Over Time"
+        )
+        st.altair_chart(chart, use_container_width=True)
+            
 
 
     else:

requirements.txt

@@ -1,4 +1,5 @@
 twofish
 hopsworks
 matplotlib
-seaborn
+seaborn
+altair