Build an Interactive Sales Dashboard with Python, Streamlit & Plotly in Minutes

1. Data

The example uses a fabricated supermarket sales dataset from 2021 with 1,000 rows, containing fields such as city (Beijing, Shanghai, Hangzhou), customer type (member, ordinary), gender, order ID, product line, unit price, quantity, total price, date, time, payment method, cost, margin, total revenue, rating, etc.

2. Page Title and Icon

Streamlit allows setting the page title, icon, and layout with a single call:

st.set_page_config(page_title="Sales Data Dashboard", page_icon=":bar_chart:", layout="wide")

The icon can be an emoji code.

3. Sidebar and Multiselect

Use st.sidebar to place fixed controls on the left. Multiselect widgets let users filter the data by city, customer type, and gender. The filtered DataFrame is obtained with Pandas' query method.

# Sidebar
st.sidebar.header("Please filter here:")
city = st.sidebar.multiselect("Select city:", options=df["城市"].unique(), default=df["城市"].unique())
customer_type = st.sidebar.multiselect("Select customer type:", options=df["顾客类型"].unique(), default=df["顾客类型"].unique())
gender = st.sidebar.multiselect("Select gender:", options=df["性别"].unique(), default=df["性别"].unique())

df_selection = df.query("城市 == @city & 顾客类型 == @customer_type & 性别 == @gender")

4. Main Page Information

Key metrics—total sales, average rating (displayed as stars), and average sales per transaction—are calculated with Pandas and displayed in three columns:

# Core metrics
total_sales = int(df_selection["总价"].sum())
average_rating = round(df_selection["评分"].mean(), 1)
star_rating = ":star:" * int(round(average_rating, 0))
average_sale_by_transaction = round(df_selection["总价"].mean(), 2)

left_column, middle_column, right_column = st.columns(3)
with left_column:
    st.subheader("Total Sales:")
    st.subheader(f"RMB {total_sales:,}")
with middle_column:
    st.subheader("Average Rating:")
    st.subheader(f"{average_rating} {star_rating}")
with right_column:
    st.subheader("Average Sale:")
    st.subheader(f"RMB {average_sale_by_transaction}")

5. Main Page Charts

Two Plotly Express bar charts are created: one for hourly sales and another for sales by product line. The charts are placed side‑by‑side using Streamlit columns.

# Hourly sales chart
sales_by_hour = df_selection.groupby("小时")["总价"].sum()
fig_hourly_sales = px.bar(sales_by_hour, x=sales_by_hour.index, y="总价", title="<b>Hourly Sales Total</b>", color_discrete_sequence=["#0083B8"]*len(sales_by_hour), template="plotly_white")

# Product line sales chart
sales_by_product_line = df_selection.groupby("商品类型")["总价"].sum().sort_values()
fig_product_sales = px.bar(sales_by_product_line, x="总价", y=sales_by_product_line.index, orientation="h", title="<b>Total Sales per Product</b>", color_discrete_sequence=["#0083B8"]*len(sales_by_product_line), template="plotly_white")

left_col, right_col = st.columns(2)
left_col.plotly_chart(fig_hourly_sales, use_container_width=True)
right_col.plotly_chart(fig_product_sales, use_container_width=True)

6. Hide Default Streamlit Elements

Streamlit adds a menu, footer, and header by default. They can be hidden with custom CSS injected via st.markdown:

hide_st_style = """
    <style>
    #MainMenu {visibility: hidden;}
    footer {visibility: hidden;}
    header {visibility: hidden;}
    </style>
    """
st.markdown(hide_st_style, unsafe_allow_html=True)

7. Install Dependencies and Run

Install the required libraries from a Chinese mirror and launch the app:

pip install -i https://pypi.tuna.tsinghua.edu.cn/simple plotly==4.14.3 pandas==1.1.0 streamlit==0.86.0 openpyxl==3.0.6
streamlit run app.py