Financial Dashboard with Streamlit

by Pranav Karra

Workshop Outline

  1. Introduction to Cursor IDE and AI-assisted Coding
  2. Setting up the Python Environment
  3. Introduction to Streamlit
  4. Building the Financial Dashboard
  5. Implementing Predictions
  6. Limitations and Improvements

Cursor IDE

Cursor IDE Logo

AI Models in Coding

  • It's okay to use AI-generated code, but understanding and editing are crucial
  • Focus on problem-solving and conceptual understanding

AI in Machine Learning Development

  • Understanding concepts and math is more important than coding from scratch
  • AI models are designed to be used
  • Focus on applying models to solve specific problems
  • Emphasis on interpretation and fine-tuning rather than implementation

Creating a Virtual Environment 🐍

python -m venv fvenv/bin/activate  # On Windows: venv\Scripts\activate
pip install streamlit pandas altair scikit-learn

This creates an isolated environment for our project

Installing Required Libraries

pip install streamlit pandas scikit-learn altair

This installs the necessary libraries for our project:

  • Streamlit: For creating the web app
  • Pandas: For data manipulation
  • Scikit-learn: For machine learning models
  • Altair: For data visualization

Introduction to Streamlit

Streamlit Logo

What is Streamlit?

  • Python library for creating web apps
  • Designed for data science projects
  • Rapid prototyping and deployment

Your First Streamlit App

import streamlit as st

st.title("Hello, Streamlit!")
st.write("Welcome to our workshop!")

if st.button("Click me!"):
    st.balloons()

Running a Streamlit App

streamlit run your_app.py

Your app will open in a new browser tab

Building the Financial Dashboard 📊

Setting Up the Dashboard

import streamlit as st
import pandas as pd
import altair as alt
from datetime import datetime
from prediction_model import predict_future_transactions

st.set_page_config(page_title="Financial Dashboard", layout="wide")

@st.cache_data
def load_data():
    df = pd.read_csv('data.csv')
    df['date'] = pd.to_datetime(df['date'])
    df['Transaction Amount'] = df['Transaction Amount'].astype(float)
    return df

df = load_data()

Creating Filters

st.sidebar.header("Filters") # Header
categories = ['All'] + sorted(df['Category'].unique().tolist()) # Categories
selected_category = st.sidebar.selectbox("Select Category", categories) # Select Category

months = pd.to_datetime(df['date']).dt.to_period('M').unique() # Months
month_options = ['All'] + [month.strftime('%B %Y') for month in sorted(months)] # Month Options
selected_month = st.sidebar.selectbox("Select Month", month_options) # Select Month

# Apply filters
filtered_df = df # Filtered DataFrame
if selected_category != 'All': # If selected category is not all
    filtered_df = filtered_df[filtered_df['Category'] == selected_category]
if selected_month != 'All':
    selected_period = pd.Period(selected_month) # Selected Period
    filtered_df = filtered_df[pd.to_datetime(filtered_df['date']).dt.to_period('M') == selected_period] # Filtered DataFrame

Displaying Key Metrics

col1, col2, col3, col4 = st.columns(4) # Columns
total_transactions = filtered_df['Transaction Amount'].sum() # Total Transactions
average_transaction = filtered_df['Transaction Amount'].mean() # Average Transaction
total_income = filtered_df[filtered_df['Transaction Amount'] > 0]['Transaction Amount'].sum() # Total Income
total_expenses = abs(filtered_df[filtered_df['Transaction Amount'] < 0]['Transaction Amount'].sum())

col1.metric("Net Transaction Amount", f"${total_transactions:,.2f}")
col2.metric("Average Transaction Amount", f"${average_transaction:,.2f}")
col3.metric("Total Income", f"${total_income:,.2f}") # Total Income
col4.metric("Total Expenses", f"${total_expenses:,.2f}") # Total Expenses

Creating Charts

daily_data = filtered_df.groupby('date')['Transaction Amount'].sum().reset_index() # Daily Data
chart_transactions = alt.Chart(daily_data).mark_line().encode(
    x='date:T', # X Axis
    y='Transaction Amount:Q', # Y Axis
    tooltip=['date:T', 'Transaction Amount:Q'] # Tooltip
).properties(
    title='Daily Transaction Amount Over Time' # Title
)
st.altair_chart(chart_transactions, use_container_width=True) # Altair Chart

# Similar code for income and expenditure pie charts

Implementing Predictions 🔮

Prediction Model Overview

  • Uses LinearRegression from scikit-learn
  • Separate models for income and expenditure
  • Predicts transactions for the next 30 days

Prediction Model Implementation

def prepare_data(df): # Prepare Data
    df['date'] = pd.to_datetime(df['date']) # Date
    df['days_since_start'] = (df['date'] - df['date'].min()).dt.days # Days Since Start
    return df

def train_model(df, target): # Train Model
    X = df[['days_since_start']] # X
    y = df[target] # Y
    model = LinearRegression() # Linear Regression
    model.fit(X, y) # Fit Model
    return model

def make_predictions(model, df, days_to_predict=30): # Make Predictions
    last_date = df['date'].max() # Last Date
    future_dates = pd.date_range(start=last_date + timedelta(days=1), periods=days_to_predict) # Future Dates
    future_df = pd.DataFrame({'date': future_dates})
    future_df['days_since_start'] = (future_df['date'] - df['date'].min()).dt.days # Days Since Start
    predictions = model.predict(future_df[['days_since_start']]) # Predictions
    future_df['prediction'] = predictions # Prediction
    return future_df

Displaying Predictions in Streamlit 🔮

future_income, future_expenditure = predict_future_transactions(df) # Predict Future Transactions

st.header("Predictions") # Header
col1, col2 = st.columns(2)

with col1:
    st.subheader("Predicted Income") # Subheader
    chart_predicted_income = alt.Chart(future_income).mark_line().encode(
        x='date:T',
        y='prediction:Q', # Y
        tooltip=['date:T', 'prediction:Q'] # Tooltip
    ).properties(
        title='Predicted Daily Income for Next 30 Days' # Title
    )
    st.altair_chart(chart_predicted_income, use_container_width=True) # Altair Chart

with col2:
    st.subheader("Predicted Expenditure") # Subheader
    chart_predicted_expenditure = alt.Chart(future_expenditure).mark_line().encode(
        x='date:T',
        y='prediction:Q', # Y
        tooltip=['date:T', 'prediction:Q'] # Tooltip
    ).properties(
        title='Predicted Daily Expenditure for Next 30 Days' # Title
    )
    st.altair_chart(chart_predicted_expenditure, use_container_width=True) # Altair Chart

Limitations and Improvements 🧠

Limitations of Linear Regression

  • Assumes a linear relationship between time and transactions
  • Doesn't account for seasonality or complex patterns
  • May not capture sudden changes or outliers effectively

Potential Improvements

  • Time series models (e.g., ARIMA, Prophet)
  • Machine learning models (e.g., Random Forest, XGBoost)
  • Incorporate external factors (e.g., economic indicators)
  • Ensemble methods for combining multiple models

Conclusion

  • We've built a basic financial dashboard
  • Learned how to use Streamlit for rapid development
  • Implemented simple predictions using linear regression
  • Discussed limitations and potential improvements
  • Remember: Understanding concepts is key in ML development

Q&A

Thank you for attending!

QR Code