app.py

import altair as alt
import pandas as pd
import plotly.graph_objects as go
import streamlit as st
from src.helper_functions import custom_metric_box, pollution_box
from src.models_loading import run_model
from data_api_calls import get_data

st.set_page_config(
    page_title="Utrecht Pollution Dashboard",
    page_icon="🏂��🌱",
    layout="wide",
    initial_sidebar_state="expanded",
)

alt.themes.enable("dark")

test_predictions = run_model("O3")
get_data()

data = pd.read_csv("dataset.csv")

# App Title
st.title("Utrecht Pollution Dashboard🌱")

col1, col2 = st.columns((1, 1))
# Create a 3-column layout
with col1:
    st.subheader("Current Weather")
    col1, col2, col3 = st.columns(3)

    # First column
    with col1:
        custom_metric_box(label="Temperature", value="2 °C", delta="-3 °C")
        custom_metric_box(label="Humidity", value="60 %", delta="-1 %")

    # Second column
    with col2:
        custom_metric_box(label="Pressure", value="1010 hPa", delta="+2 hPa")
        custom_metric_box(label="Precipitation", value="5 mm", delta="-1 mm")

    # Third column
    with col3:
        custom_metric_box(label="Solar Radiation", value="200 W/m²", delta="-20 W/m²")
        custom_metric_box(label="Wind Speed", value="15 km/h", delta="-2 km/h")

    st.subheader("Current Pollution Levels")
    col1, col2 = st.columns((1, 1))
    # Display the prediction
    # st.write(f'Predicted Pollution Level: {prediction[0]:.2f}')
    with col1:
        pollution_box(label="O<sub>3</sub>", value="37 µg/m³", delta="+2 µg/m³")
    with col2:
        pollution_box(label="NO<sub>2</sub>", value="28 µg/m³", delta="+3 µg/m³")

# Sample data (replace with your actual data)
dates_past = pd.date_range(end=pd.Timestamp.today(), periods=7).to_list()
dates_future = pd.date_range(
    start=pd.Timestamp.today() + pd.Timedelta(days=1), periods=3
).to_list()

# O3 and NO2 values for the past 7 days
o3_past_values = [30, 32, 34, 33, 31, 35, 36]
no2_past_values = [20, 22, 21, 23, 22, 24, 25]

# Predicted O3 and NO2 values for the next 3 days
o3_future_values = [37, 38, 40]
no2_future_values = [26, 27, 28]

# Combine dates and values
dates = dates_past + dates_future
o3_values = o3_past_values + o3_future_values
no2_values = no2_past_values + no2_future_values

# Create a DataFrame
df = pd.DataFrame({"Date": dates, "O3": o3_values, "NO2": no2_values})

st.subheader("O3 and NO2 Prediction")
# Create two columns for two separate graphs
subcol1, subcol2 = st.columns(2)
# Plot O3 in the first subcolumn
with subcol1:
    fig_o3 = go.Figure()
    fig_o3.add_trace(
        go.Scatter(
            x=df["Date"],
            y=df["O3"],
            mode="lines+markers",
            name="O3",
            line=dict(color="rgb(0, 191, 255)", width=4),
        )
    )  # Bright blue
    # Add a vertical line for predictions (today's date)
    fig_o3.add_shape(
        dict(
            type="line",
            x0=pd.Timestamp.today(),
            x1=pd.Timestamp.today(),
            y0=min(o3_values),
            y1=max(o3_values),
            line=dict(color="White", width=3, dash="dash"),
        )
    )
    fig_o3.update_layout(
        plot_bgcolor="rgba(0, 0, 0, 0)",  # Transparent background
        paper_bgcolor="rgba(0, 0, 0, 0)",  # Transparent paper background
        yaxis_title="O3 Concentration (µg/m³)",
        font=dict(size=14),
        hovermode="x unified",
    )
    st.plotly_chart(fig_o3)

# Plot NO2 in the second subcolumn
with subcol2:
    fig_no2 = go.Figure()
    fig_no2.add_trace(
        go.Scatter(
            x=df["Date"],
            y=df["NO2"],
            mode="lines+markers",
            name="NO2",
            line=dict(color="rgb(255, 20, 147)", width=4),
        )
    )  # Bright pink
    # Add a vertical line for predictions (today's date)
    fig_no2.add_shape(
        dict(
            type="line",
            x0=pd.Timestamp.today(),
            x1=pd.Timestamp.today(),
            y0=min(no2_values),
            y1=max(no2_values),
            line=dict(color="White", width=3, dash="dash"),
        )
    )
    fig_no2.update_layout(
        plot_bgcolor="rgba(0, 0, 0, 0)",  # Transparent background
        paper_bgcolor="rgba(0, 0, 0, 0)",  # Transparent paper background
        yaxis_title="NO2 Concentration (µg/m³)",
        font=dict(size=14),
        hovermode="x unified",
    )
    st.plotly_chart(fig_no2)