Introduction

This article demonstrates how to build an interactive sales dashboard using Python and the Streamlit framework.

Development Tools

Python Version: 3.6.4

Required Libraries:

streamlit;

plotly;

pandas;

and some built-in Python modules.

Environment Setup

Install Python and add it to your environment variables, then use pip to install the necessary libraries.

Today, we will show you how to create a sales data dashboard using Python.

Let's look at the result first.

Data

The data used is fictional, representing sales orders from a supermarket in 2021, with 1000 order records.

There are three cities: Beijing, Shanghai, and Hangzhou. Customer types are members and regulars. Gender is male and female.

Other fields include order number, product type, unit price, quantity, total price, date, time, payment method, cost, gross margin, total income, and rating.

Use the Pandas read_excel function to load the data.

Skip the first three rows, select columns B to R, and read 1000 rows.

def load_data():
   df = pd.read_excel(
       io="supermarket_sales.xlsx",
       engine="openpyxl",
       sheet_name="Sales",
       skiprows=3,
       usecols="B:R",
       nrows=1000,
   )
   # Add hour column
   df["hour"] = pd.to_datetime(df["time"], format="%H:%M:%S").dt.hour
   return df

df = load_data()
print(df)

The output is as follows.

Web Title and Icon

We know that when a browser opens a webpage, it has a title and icon.

So, we need to set the name, icon, and layout of this webpage.

This is the first Streamlit command used to set up the page and can only be set once.

# Set web page configuration 
st.set_page_config(page_title="Sales Dashboard", page_icon=":bar_chart:", layout="wide")

The page_icon parameter can use emoji codes to display an icon.

Sidebar and Multiselect

st.sidebar (sidebar), any element passed to st.sidebar will be fixed on the left, allowing users to focus on the main content.

multiselect (multiselect) is a interactive component that allows for data filtering.

# Sidebar
st.sidebar.header("Filter Here:")
city = st.sidebar.multiselect(
   "Select City:",
   options=df["city"].unique(),
   default=df["city"].unique()
)

customer_type = st.sidebar.multiselect(
   "Select Customer Type:",
   options=df["customer_type"].unique(),
   default=df["customer_type"].unique(),
)

gender = st.sidebar.multiselect(
   "Select Gender:",
   options=df["gender"].unique(),
   default=df["gender"].unique()
)

filtered_data = df.query(
   "city == @city & customer_type ==@customer_type & gender == @gender"
)

Using Pandas query, you can filter the data.

With the above code, the setup is complete, as shown in the image on the left.

Clicking the close symbol on the top right of the sidebar hides it.

The web page will then display the main page.

Main Page Information

Next, write the main page information, including the main title, total sales, average rating, and average sales.

Just like the web icon, this is achieved using emoji codes.

# Main Page
st.title(":bar_chart: Sales Dashboard")
st.markdown("##")

# Key metrics: total sales, average rating, star rating, average sales per transaction
total_sales = int(filtered_data["total_price"].sum())
average_rating = round(filtered_data["rating"].mean(), 1)
star_rating = ":star:" * int(round(average_rating, 0))
average_sale_per_transaction = round(filtered_data["total_price"].mean(), 2)

# Three-column layout
left_column, middle_column, right_column = st.columns(3)

# Add relevant information
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 Sales Per Transaction:")
   st.subheader(f"RMB {average_sale_per_transaction}")

# Separator
st.markdown("""---""")

After processing the key metrics, they are displayed in a layout.

Main Page Charts

It includes two charts: one showing sales per hour and another showing total sales by product category. These are created using Plotly Express.

Plotly Express is a new high-level Python visualization library, a higher-level wrapper for Plotly.py, providing a simple syntax for complex charts.

# Sales by Product Category (Bar Chart)
sales_by_product_category = (
   filtered_data.groupby(by=["product_category"]).sum()[["total_price"]].sort_values(by="total_price")
)
fig_product_sales = px.bar(
   sales_by_product_category,
   x="total_price",
   y=sales_by_product_category.index,
   orientation="h",
   title="<b>Total Sales by Product Category</b>",
   color_discrete_sequence=["#0083B8"] * len(sales_by_product_category),
   template="plotly_white",
)
fig_product_sales.update_layout(
   plot_bgcolor="rgba(0,0,0,0)",
   xaxis=(dict(showgrid=False))
)

# Sales by Hour (Bar Chart)
sales_by_hour = filtered_data.groupby(by=["hour"]).sum()[["total_price"]]
fig_hourly_sales = px.bar(
   sales_by_hour,
   x=sales_by_hour.index,
   y="total_price",
   title="<b>Total Sales by Hour</b>",
   color_discrete_sequence=["#0083B8"] * len(sales_by_hour),
   template="plotly_white",
)
fig_hourly_sales.update_layout(
   xaxis=dict(tickmode="linear"),
   plot_bgcolor="rgba(0,0,0,0)",
   yaxis=(dict(showgrid=False)),
)


left_column, right_column = st.columns(2)
left_column.plotly_chart(fig_hourly_sales, use_container_width=True)
right_column.plotly_chart(fig_product_sales, use_container_width=True)

Add data, set chart configurations, and adjust the page layout.

The result is as follows.

Hide Components

When building a UI with Streamlit, there are default elements such as red lines, menus, and the footer "Made with Streamlit."

To improve aesthetics, these can all be hidden.

# Hide default Streamlit formatting
hide_st_style = """
           <style>
           #MainMenu {visibility: hidden;}
           footer {visibility: hidden;}
           header {visibility: hidden;}
           </style>
           """

st.markdown(hide_st_style, unsafe_allow_html=True)

This completes the creation of an interactive sales dashboard.

# Install dependencies
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple plotly==4.14.3
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pandas==1.1.0
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple streamlit==0.86.0
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple openpyxl==3.0.6

# Run
streamlit run app.py