02. Dashboard Layout Configuration

Intermediate30 minutes

1. Sidebar

Every dashboard needs Filters. You use them when you want to select dates or view only specific categories. In Streamlit, you can create a fixed menu bar on the left using st.sidebar.

❓ Problem 1: Create Sidebar Filters

Q. Add a ‘Period Selection’ slider and a ‘Category Selection’ box to the sidebar.

Python (Streamlit)


import streamlit as st
import pandas as pd
 
st.title("e-Commerce Analytics Dashboard")
 
# Create sidebar
st.sidebar.header("Filters")
 
# Date filter
days_to_show = st.sidebar.slider("Query Period (days)", 7, 90, 30)
 
# Category filter
category = st.sidebar.selectbox(
    "Select Category",
    ["All", "Apparel", "Electronics", "Furniture"]
)
 
st.write(f"Selected options: {days_to_show} days, {category}")

2. KPI Scorecard (Metrics)

The first thing executives want to see is numbers (KPIs). “What’s the revenue?”, “How many customers came in?” should be visible at a glance.

The st.metric function displays numbers and change rates (Delta) beautifully.

❓ Problem 2: Arrange KPI Metrics

Q. Arrange 3 metrics - ‘Total Revenue’, ‘Order Count’, ‘Average Customer Satisfaction’ - side by side at the top of the screen.

Python (Streamlit)

💡

Hint: Using st.columns(3) divides the screen into thirds.


st.header("Key Metrics")
 
# Create 3 columns
col1, col2, col3 = st.columns(3)
 
with col1:
    st.metric(label="Total Revenue", value="$52,040", delta="12%")
 
with col2:
    st.metric(label="Total Orders", value="1,240", delta="-5%")
 
with col3:
    st.metric(label="Avg CSAT Score", value="4.2/5.0", delta="0.1")

3. Tabs Configuration

Putting too much information on one screen makes it complicated. Use st.tabs to separate screens by topic.

❓ Problem 3: Separate Screens with Tabs

Q. Create 3 tabs - ‘Sales’, ‘Customer’, ‘Product’ - and separate the content.

Python (Streamlit)


tab1, tab2, tab3 = st.tabs(["Sales 📈", "Customer 👥", "Product 📦"])
 
with tab1:
    st.subheader("Sales Trend")
    # Write sales chart code here
 
with tab2:
    st.subheader("Customer Demographics")
    # Write customer analysis code here
 
with tab3:
    st.subheader("Top Products")
    # Write product analysis code here

💡 Summary

st.sidebar: Use when placing filters or navigation on the left.
st.columns: Use when dividing the screen horizontally. (Essential for KPI layout)
st.metric: Use when emphasizing KPI numbers.
st.tabs: Organize content by topic for a clean display.

In the next chapter, we’ll add beautiful charts with mouse-over functionality using Plotly.