app.py

import streamlit as st
import pandas as pd
import plotly.express as px 
import plotly.graph_objects as go
import numpy as np

### Config
st.set_page_config(
    page_title="E-commerce",
    page_icon="💸 ",
    layout="wide"
)

DATA_URL = ('https://full-stack-assets.s3.eu-west-3.amazonaws.com/Deployment/e-commerce_data.csv')

### App
st.title("Build dashboards with Streamlit 🎨")

st.markdown("""
    Welcome to this awesome `streamlit` dashboard. This library is great to build very fast and
    intuitive charts and application running on the web. Here is a showcase of what you can do with
    it. Our data comes from an e-commerce website that simply displays samples of customer sales. Let's check it out.

    You can download the whole code here 👉 [Source code](https://github.com/JedhaBootcamp/streamlit-demo-app)

    Also, if you want to have a real quick overview of what streamlit is all about, feel free to watch the below video 👇
""")

with st.expander("⏯️ Watch this 15min tutorial"):
    st.video("https://youtu.be/B2iAodr0fOo")

st.markdown("---")


# Use `st.cache` when loading data is extremly useful
# because it will cache your data so that your app 
# won't have to reload it each time you refresh your app
@st.cache
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    data["Date"] = data["Date"].apply(lambda x: pd.to_datetime(",".join(x.split(",")[-2:])))
    data["currency"] = data["currency"].apply(lambda x: pd.to_numeric(x[1:]))
    return data

st.subheader("Load and showcase data")
st.markdown("""

    You can use the usual Data Science libraries like `pandas` or `numpy` to load data. 
    Then simply use [`st.write()`](https://docs.streamlit.io/library/api-reference/write-magic/st.write) to showcase it on your web app. 

""")

data_load_state = st.text('Loading data...')
data = load_data(1000)
data_load_state.text("") # change text from "Loading data..." to "" once the the load_data function has run

## Run the below code if the check is checked ✅
if st.checkbox('Show raw data'):
    st.subheader('Raw data')
    st.write(data)    

## Simple bar chart
st.subheader("Simple bar chart built directly with Streamlit")
st.markdown("""
    You can build simple chart directly with streamlit using:

    * [`st.bar_chart`](https://docs.streamlit.io/library/api-reference/charts/st.bar_chart)
    * [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart)
    * [`st.area_chart`](https://docs.streamlit.io/library/api-reference/charts/st.area_chart)

    Eventhough it doesn't offer great flexibility, it is still a very simple way to create graphs quickly since 
    streamlit since these methods accepts a pandas DataFrame or Numpy array as input.

""")
currency_per_country = data.set_index("country")["currency"]
st.bar_chart(currency_per_country)

## Bar chart built with plotly 
st.subheader("Simple bar chart built with Plotly")
st.markdown("""
    Now, the best thing about `streamlit` is its compatibility with other libraries. For example, you
    don't need to actually use built-in charts to create your dashboard, you can use :
    
    * [`plotly`](https://docs.streamlit.io/library/api-reference/charts/st.plotly_chart) 
    * [`matplotlib`](https://docs.streamlit.io/library/api-reference/charts/st.pyplot)
    * [`bokeh`](https://docs.streamlit.io/library/api-reference/charts/st.bokeh_chart)
    * ...

    This way, you have all the flexibility you need to build awesome dashboards. 🥰

""")
fig = px.histogram(data.sort_values("country"), x="country", y="currency", barmode="group")
st.plotly_chart(fig, use_container_width=True)


### Input data 
st.subheader("Input data")
st.markdown("""
    As a final note, you can use data that a user will insert when he/she interacts with your app.
    This is called *input data*. To collect these, you can do two things:
    * [Use any of the input widget](https://docs.streamlit.io/library/api-reference/widgets)
    * [Build a form](https://docs.streamlit.io/library/api-reference/control-flow/st.form)

    Depending on what you need to do, you will prefer one or the other. With a `form`, you actually group
    input widgets together and send the data right away, which can be useful when you need to filter
    by several variables.

""")

#### Create two columns
col1, col2 = st.columns(2)

with col1:
    st.markdown("**1️⃣ Example of input widget**")
    country = st.selectbox("Select a country you want to see all time sales", data["country"].sort_values().unique())
    
    country_sales = data[data["country"]==country]
    fig = px.histogram(country_sales, x="Date", y="currency")
    fig.update_layout(bargap=0.2)
    st.plotly_chart(fig, use_container_width=True)

with col2:
    st.markdown("**2️⃣ Example of input form**")

    with st.form("average_sales_per_country"):
        country = st.selectbox("Select a country you want to see sales", data["country"].sort_values().unique())
        start_period = st.date_input("Select a start date you want to see your metric")
        end_period = st.date_input("Select an end date you want to see your metric")
        submit = st.form_submit_button("submit")

        if submit:
            avg_period_country_sales = data[(data["country"]==country)]
            start_period, end_period = pd.to_datetime(start_period), pd.to_datetime(end_period)
            mask = (avg_period_country_sales["Date"] > start_period) & (avg_period_country_sales["Date"] < end_period)
            avg_period_country_sales = avg_period_country_sales[mask].mean()
            st.metric("Average sales during selected period (in $)", np.round(avg_period_country_sales, 2))


### Side bar 
st.sidebar.header("Build dashboards with Streamlit")
st.sidebar.markdown("""
    * [Load and showcase data](#load-and-showcase-data)
    * [Charts directly built with Streamlit](#simple-bar-chart-built-directly-with-streamlit)
    * [Charts built with Plotly](#simple-bar-chart-built-with-plotly)
    * [Input Data](#input-data)
""")
e = st.sidebar.empty()
e.write("")
st.sidebar.write("Made with 💖 by [Jedha](https://jedha.co)")



### Footer 
empty_space, footer = st.columns([1, 2])

with empty_space:
    st.write("")

with footer:
    st.markdown("""
        🍇
        If you want to learn more, check out [streamlit's documentation](https://docs.streamlit.io/) 📖
    """)