Building and Deploying a Dashboard in the Cloud with Streamlit and Python

DASHBOARD
It is a visual interface that condenses key information to facilitate informed decision-making in data analysis. Upon starting, the question arises: How can we effectively present our findings? This article details the process of creating a dashboard using visualization tools such as Streamlit and Python, as well as deploying our app in the Streamlit Cloud environment.

STREAMLIT
It is an open-source framework for creating interactive web applications based on data, useful for the simple creation of interactive dashboards. It is an essential Python library for implementing dashboards with simple and fast lines of code.

STEPS
How to create and deploy a Dashboard step by step using Streamlit and Python. We will use the supermarket_sales dataset, which provides a detailed view of sales records that could be used for sales analysis, accounting, inventory management, or to better understand customer behavior.

REQUIREMENTS
• Git installed on our local machine
• GitHub account
• Python installed

REPOSITORY
• Creation of the Local Repository
• Create a folder containing all the files needed for your dashboard.
• Start a local repository by running the command 'git init' in the command line.

DATA ANALYSIS
Data can be viewed in the supermarket_sales.xls file

INSTALLATIONS
The necessary modules are installed using the following commands in the console:
• pip install streamlit
• pip install plotly
• pip install openpyxl

DASHBOARD WITH STREAMLIT
For programming the dashboard with Streamlit, we will use the editor of our choice, in this case, Visual Studio Code. The code of the app.py

import pandas as pd
import plotly.express as px
import streamlit as st

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

# Function to read data from Excel file
@st.cache_data
def get_data_from_excel():
    df = pd.read_excel(
        io="supermarkt_sales.xlsx",
        engine="openpyxl",
        sheet_name="Sales",
        skiprows=3,
        usecols="B:R",
        nrows=1000,
    )
    # Add 'hour' column to the dataframe
    df["hour"] = pd.to_datetime(df["Time"], format="%H:%M:%S").dt.hour
    return df

df = get_data_from_excel()

# Sidebar for data filtering
st.sidebar.header("Please Filter Here:")
city = st.sidebar.multiselect(
    "Select the City:",
    options=df["City"].unique(),
    default=df["City"].unique()
)
customer_type = st.sidebar.multiselect(
    "Select the Customer Type:",
    options=df["Customer_type"].unique(),
    default=df["Customer_type"].unique(),
)
gender = st.sidebar.multiselect(
    "Select the Gender:",
    options=df["Gender"].unique(),
    default=df["Gender"].unique()
)
df_selection = df.query(
    "City == @city & Customer_type == @customer_type & Gender == @gender"
)

# Data verification
if df_selection.empty:
    st.warning("No data available based on the current filter settings!")
    st.stop()

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

# Key Performance Indicators (KPIs)
total_sales = int(df_selection["Total"].sum())
average_rating = round(df_selection["Rating"].mean(), 1)
star_rating = ":star:" * int(round(average_rating, 0))
average_sale_by_transaction = round(df_selection["Total"].mean(), 2)

left_column, middle_column, right_column = st.columns(3)
with left_column:
    st.subheader("Total Sales:")
    st.subheader(f"US $ {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"US $ {average_sale_by_transaction}")

st.markdown("""---""")

# Sales by hour [Bar chart]
sales_by_hour = df_selection.groupby(by=["hour"])[["Total"]].sum()
fig_hourly_sales = px.bar(
    sales_by_hour,
    x=sales_by_hour.index,
    y="Total",
    title="<b>Sales by Hour</b>",
    color_discrete_sequence=px.colors.qualitative.Bold,
    template="plotly_white",
)
fig_hourly_sales.update_layout(
    xaxis=dict(tickmode="linear"),
    plot_bgcolor="rgba(0,0,0,0)",
    yaxis=(dict(showgrid=False)),
)

# Sales by product line [Pie chart]
sales_by_product_line = df_selection.groupby(by=["Product line"])[["Total"]].sum().sort_values(by="Total")
fig_product_sales_pie = px.pie(
    sales_by_product_line,
    names=sales_by_product_line.index,
    values="Total",
    title="<b>Sales by Product Line</b>",
    color_discrete_sequence=px.colors.qualitative.Set3,
    template="plotly_white",
)

# Sales by product line [Second bar chart]
fig_product_sales_bar = px.bar(
    sales_by_product_line,
    x=sales_by_product_line.index,
    y="Total",
    title="<b>Sales by Product Line</b>",
    color_discrete_sequence=px.colors.qualitative.Bold,
    template="plotly_white",
)
fig_product_sales_bar.update_layout(
    plot_bgcolor="rgba(0,0,0,0)",
    xaxis=(dict(showgrid=False))
)

# New chart: Sales by day [Line chart]
sales_by_day = df_selection.groupby(by=pd.Grouper(freq='D', key='Date'))[['Total']].sum()
fig_daily_sales = px.line(
    sales_by_day,
    x=sales_by_day.index,
    y="Total",
    title="<b>Sales by Day</b>",
    color_discrete_sequence=px.colors.qualitative.Light24,
    template="plotly_white",
)

# New chart: Price distribution [Histogram]
fig_price_distribution = px.histogram(
    df_selection,
    x="Unit price",
    title="<b>Price Distribution</b>",
    color_discrete_sequence=px.colors.qualitative.Bold,
    template="plotly_white",
)

# New chart: Relationship between price and quantity [Scatter plot]
fig_price_quantity_scatter = px.scatter(
    df_selection,
    x="Unit price",
    y="Quantity",
    title="<b>Price vs. Quantity</b>",
    color_discrete_sequence=px.colors.qualitative.Light24,
    template="plotly_white",
)

# Display the charts
left_column, middle_column, right_column = st.columns(3)
left_column.plotly_chart(fig_hourly_sales, use_container_width=True)
middle_column.plotly_chart(fig_product_sales_bar, use_container_width=True)
right_column.plotly_chart(fig_product_sales_pie, use_container_width=True)

st.markdown("""---""")

left_column, middle_column, right_column = st.columns(3)
left_column.plotly_chart(fig_daily_sales, use_container_width=True)
middle_column.plotly_chart(fig_price_distribution, use_container_width=True)
right_column.plotly_chart(fig_price_quantity_scatter, use_container_width=True)

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

TRANSFER CHANGES FROM LOCAL REPOSITORY TO REMOTE REPOSITORY
We need the URL of the repository on GitHub
• To obtain it, go to GitHub
• Access Repositories
• Select the Code button
• Click on HTTPS
• Copy the URL to the clipboard: https://github.com/2020068765/Streamlit.git

From our machine, we locate ourselves in our directory where we created our app.py and write these lines in the console.

DEPLOY DASHBOARD WITH STREAMLIT COMMUNITY CLOUD
Streamlit Cloud account: To deploy our dashboard with Streamlit, it is necessary to create an account in Streamlit Community Cloud. Click on Get Started to begin the process. During the registration process, it is essential to link our GitHub account, where our repository ready for deployment is hosted.

https://ejemplotarea.streamlit.app

Conclusions:

• The use of Streamlit and Python allows for rapid and efficient development of an interactive data panel.
• The resulting panel provides a clear and understandable presentation of key information, facilitating informed decision-making.
• Integration with Streamlit Community Cloud simplifies panel sharing through an accessible online link.

Comments

[edwardapaza]

:)