Streamlit is an open source Python library for creating data science and machine learning applications. Its main goal is to enable developers to quickly build interactive data applications in an easy way without requiring much front-end development experience. Streamlit provides an easy way to convert data scripts or analytical code into applications with a visual interface that can be accessed through a web browser.
Here are some key features and benefits of Streamlit:
- Ease of use: Streamlit is designed to enable users to create interactive applications within a few lines of code. Using it requires no sophisticated knowledge of front-end development, not even HTML or CSS.
- Python support: Streamlit is written and driven in Python, which allows data scientists and analysts to build applications in a familiar programming language.
- Live Preview: After making a change in the code, the Streamlit application automatically reloads, allowing immediate viewing of the effect of the change, speeding up the development process.
- Rich visual elements: Streamlit supports various visual elements, such as charts, images, text, tables, etc., enabling users to display and present data.
- Interactivity: Users can interact with the application through interactive elements such as sliders and buttons to change data inputs or parameters and observe the results in real time.
- Easy to deploy: Deploying Streamlit applications is relatively simple, just run a Python script on the server without complex configuration.
- Integration with data science ecosystem: Streamlit can be easily integrated with commonly used data science libraries (such as Pandas, Matplotlib, Plotly, etc.), enabling users to easily embed analysis and visualization results into applications.
- Custom Themes and Styles: Users can customize the look and style of the app as needed to match their branding or design needs.
Whether for creating data presentations, visualizations, model presentations or prototyping, Streamlit is a very useful tool. So in this article we will start with Streamlit by creating a simple Dashboard.
Target
Our goal is to make a dashboard with the following style.
Our goal is to build a dashboard like the sketch above and be able to display data.
data processing
First we process the data
import pandas as pd
import numpy as np
import plotly.express as px
import streamlit as st
def dateAge(x):
#function for generating future bucket grouping
a = (x - np.datetime64("today","D")) / np.timedelta64(1,"D")
if a <= 0:
y = "0 or Less"
elif a >0 and a <= 5:
y = "5 days"
elif a > 5 and a <= 14:
y = "6 to 14 days"
elif a > 14 and a <= 30:
y = "15 to 30 days"
else:
y = "over 30 days"
return y
#built as a function for cache use with StreamLit later
def getData():
x = pd.read_csv(r'C:\Users\aryan.sinanan\Desktop\Python\raw_data\demand.csv')
return x
#assign data to df variable
df = getData()
#Set Org level max and role title or partial name you are looking for
org_level = ["6","7","8"]
role_title = "Data"
#Datatype convert to date from dd-MMM-yy
df["Resource Start Date"] = pd.to_datetime(df["Resource Start Date"],format="%d-%b-%y")
df["Resource End Date"] = pd.to_datetime(df["Resource End Date"],format="%d-%b-%y")
#Define Future Bucket
df["Date Bucket"] = df["Resource Start Date"].apply(dateAge)
#clean up Location names
df.loc[df["Role Work Location"] == "melbourne", "Role Work Location"] = "Melbourne"
df.loc[df["Role Work Location"] == "canberra", "Role Work Location"] = "Canberra"
#rename columns
df.rename(columns={
"Project Has Security/ Nationality Restriction":"Clearance Required",
"Resource Start Date":"Start Date",
"Resource End Date":"End Date",
"Role ID":"ID",
"Role Title":"Title",
"Role Description":"Description",
"Role Talent Segment":"Talent Segment",
"Role Career Level From":"Career Level From",
"Role Career Level To":"Career Level To",
"Role Work Location":"Work Location",
"Role Location Type":"Location Type",
"Role Fulfillment Entity L3":"Fulfillment Entity L3"
}, inplace = True)
#drop the unncessary columns
df_sub = df.loc[:,("ID","Clearance Required","Start Date","End Date","Date Bucket","Title","Description","Talent Segment","Assigned Role","Career Level To","Work Location","Location Type","Role Primary Contact","Role Primary Contact\n(Email ID)")]
#filter the dataframe using ord_level and role_title
df_filter = df_sub[(df_sub["Assigned Role"].str.contains( role_title ,case=False,na=False)) & (df_sub["Career Level To"].isin(org_level))]
Build the navbar
Although Streamlit allows us to control the layout of elements, its control items are relatively simple. For example, the menu bar must be placed on the left side, which is what we often call the sidebar, so we use the sidebar as a filtering condition.
The following code is the code for the common page title and sidebar:
#title
st.markdown("# Roles Dashbaord")
#defining side bar
st.sidebar.header("Filters:")
#placing filters in the sidebar using unique values.
location = st.sidebar.multiselect(
"Select Location:",
options=df_filter["Work Location"].unique(),
default=df_filter["Work Location"].unique()
)
#placing filters in the sidebar using unique values.
work_type = st.sidebar.multiselect(
"Select Work Type:",
options=df_filter["Location Type"].unique(),
default=df_filter["Location Type"].unique()
)
The result of the above code is as follows:
Build summary metrics
After filtering in the sidebar, the filtered information needs to be displayed. Here we first display the filtered summary indicators
#taking the filtered dataframe created in a previous step and applying a query
df_selection = df_filter.query(
"`Work Location`== @location & `Location Type` == @work_type"
)
#defining our metrics
total_roles = df_selection["ID"].value_counts().sum()
bucket_0 = df_selection[df_selection["Date Bucket"]=="0 or Less"].value_counts().sum()
bucket_5 = df_selection[df_selection["Date Bucket"]=="5 days"].value_counts().sum()
bucket_14 = df_selection[df_selection["Date Bucket"]=="6 to 14 days"].value_counts().sum()
bucket_30 = df_selection[df_selection["Date Bucket"]=="15 to 30 days"].value_counts().sum()
bucket_31 = df_selection[df_selection["Date Bucket"]=="over 30 days"].value_counts().sum()
#placing our metrics within columns in the dashboard
col1,col2,col3,col4,col5,col6=st.columns(6)
col1.metric(label="No. Roles",value=total_roles)
col2.metric(label="Already Started",value=bucket_0)
col3.metric(label="In 5 Days",value=bucket_5)
col4.metric(label="In 14 Days",value=bucket_14)
col5.metric(label="In 30 Days",value=bucket_30)
col6.metric(label="Over 30 Days",value=bucket_31)
The results are as follows, we can see that we can already display some data
build chart
Below we can also create charts
#a dividing line
st.divider()
#dataframe for chart
df_1 = df_selection.groupby(["Work Location","Location Type"])["Work Location"].value_counts().reset_index()
#defining the chart
fig_count_location_type = px.bar(df_1,x="Work Location",y="count",color="Location Type",title="Role by Location and Type - Plotly")
#displaying the chart on the dashboard
st.plotly_chart(fig_count_location_type, use_container_width=True)
Tables can be easily created with plotly_chart
build form
We can also display all the data of the filtered data set by displaying the Dataframe, that is, display the detailed data.
#a dividing line
st.divider()
#showing the dataframe
st.dataframe(df_selection,hide_index=True,column_config={
# we can also config the formatting of a given column
"ID": st.column_config.NumberColumn(
#show the ID as a number no formatting
format="%d"
),
#set the formatting of the dateColumn to dd-MMM-yyyy
"Start Date": st.column_config.DateColumn(
format="DD-MMM-YYYY"
),
#set the formatting of the dateColumn to dd-MMM-yyyy
"End Date": st.column_config.DateColumn(
format="DD-MMM-YYYY"
),
#reduce the column size to medium
"Title": st.column_config.TextColumn(
width="medium"
),
#reduce the column size to medium
"Description": st.column_config.TextColumn(
width="medium"
)
})
As you can see, we have displayed all the data of the dataframe in the form of a table.
Summarize
Streamlit allows developers to build powerful and interactive applications in a fast and easy way to better interact and communicate with data. As you can see from the examples above, building applications with Streamlit does not require in-depth knowledge of front-end development, as one of Streamlit's design goals is to make it easy for data scientists, analysts, and other non-front-end developers to create interactive applications , without paying too much attention to complex front-end technologies.
Streamlit is developed in a similar way to general Python programming, with a few simple Streamlit functions and commands to configure and control the appearance and behavior of the application. The power of Streamlit lies in its ability to simplify the complex front-end development process into a few lines of Python code, allowing anyone to easily create interactive and visual data applications.
https://avoid.overfit.cn/post/24320cbf1d9c4ca7b1d3a9086b2ba5b9
By Aryan Sinanan