streamlit_dashboard.py

import os
import time  # to simulate a real time data, time loop

import numpy as np  # np mean, np random
import pandas as pd  # read csv, df manipulation
import plotly.express as px  # interactive charts
import streamlit as st  # 🎈 data web app development
import sys
import streamlit.web.cli as cli


st.set_page_config(
    page_title="Real-Time Data Dashboard",
    page_icon="✅",
    layout="wide",
)

# read csv from a github repo
# TODO refactor data source for url
# TODO refactor data source for local at root
# TODO refactor data source for /data
# TODO refactor data source for DIRTY_DATA_PATH

URL_DATA_PATH = (
    "https://raw.githubusercontent.com/datatalking/data_bank"
    "-marketing-analysis/master/bank.csv"
)
ROOT_DATA_PATH = ""
LOCAL_DATA_PATH = "/data"
DIRTY_DATA_PATH = os.environ
dataset_url = "https://raw.githubusercontent.com/Lexie88rus/bank-marketing-analysis/master/bank.csv"


# read csv from a URL
@st.cache_data
def get_data() -> pd.DataFrame:
    return pd.read_csv(dataset_url)


df = get_data()

# dashboard title
st.title("Real-Time / Live Data Science Dashboard")

# TODO add job selection option for all jobs

# top-level filters
job_filter = st.selectbox("Select the Job", pd.unique(df["job"]))

# creating a single-element container
placeholder = st.empty()

# dataframe filter
df = df[df["job"] == job_filter]

# near real-time / live feed simulation
for seconds in range(200):
    df["age_new"] = df["age"] * np.random.choice(range(1, 5))
    df["balance_new"] = df["balance"] * np.random.choice(range(1, 5))

    # creating KPIs
    avg_age = np.mean(df["age_new"])

    count_married = int(
        df[(df["marital"] == "married")]["marital"].count()
        + np.random.choice(range(1, 30))
    )

    count_columns = int(df["marital"].count())

    balance = np.mean(df["balance_new"])

    with placeholder.container():
        # create three columns
        # kpi1, kpi2, kpi3 = st.columns(3)
        kpi1, kpi2, kpi3, kpi4 = st.columns(4)

        # fill in those three columns with respective metrics or KPIs
        kpi1.metric(
            label="Age ⏳",
            value=round(avg_age),
            delta=round(avg_age) - 10,
        )

        kpi2.metric(
            label="Married Count 💍",
            value=int(count_married),
            delta=-10 + count_married,
        )

        kpi3.metric(
            label="A/C Balance ＄",
            value=f"$ {round(balance,2)} ",
            delta=-round(balance / count_married) * 100,
        )

        kpi4.metric(
            label="Number of columns",
            value=f"{count_columns} ",
            delta=-round(balance / count_columns) * 100,
        )

        # create two columns for charts
        fig_col1, fig_col2 = st.columns(2)
        with fig_col1:
            st.markdown("### First Chart")
            fig = px.density_heatmap(data_frame=df, y="age_new", x="marital")
            st.write(fig)

        with fig_col2:
            st.markdown("### Second Chart")
            fig2 = px.histogram(data_frame=df, x="age_new")
            st.write(fig2)

        st.markdown("### Detailed Data View")
        st.dataframe(df)
        time.sleep(1)