pages/Dashboard.py

# import the required libraries
import streamlit as st # for creating interactive web apps
import pandas as pd # for data manipulation and analysis
import datetime # for working with dates and times
from PIL import Image # for loading and displaying images
import plotly.express as px # for creating interactive plots
import plotly.graph_objects as go # for creating low-level plotly graphs
import statsmodels.api as sm # for statistical modeling

# reading the data from csv file
df = pd.read_csv("data.csv") # load the data into a pandas dataframe
df=df.drop_duplicates(subset=["asin_id"]) # remove any duplicate rows based on the asin_id column

st.set_page_config(layout="wide") # set the layout of the web app to wide mode
st.markdown('<style>div.block-container{padding-top:1rem;}</style>', unsafe_allow_html=True) # add some custom CSS to the web app
#image = Image.open('download.png') # load an image from the local directory

col1, col2 = st.columns([0.1,0.9]) # create two columns with different widths
# with col1: # in the first column
#     st.image(image,width=100) # display the image with a specified width

html_title = """
    <style>
    .title-test {
    font-weight:bold;
    padding:5px;
    border-radius:6px;
    }
    </style>
    <center><h1 class="title-test">Amazon Products Interactive Dashboard</h1></center>""" # create a HTML string for the title of the web app
with col2: # in the second column
    st.markdown(html_title, unsafe_allow_html=True) # display the HTML string as markdown

def format_sales(value): # define a function to format the sales values
    if value >= 0: # if the value is positive
        return '{:.2f} Lakh'.format(value*100/100000) # convert it to lakh and return it as a string with two decimal places
    

fig= px.scatter( # create a scatter plot using plotly express
    df, # use the dataframe as the data source
    x="best_seller_rank", # use the best_seller_rank column as the x-axis
    y="sold_last_month", # use the sold_last_month column as the y-axis
    color="product_name", # use the product_name column to color the points
    title="Sold_last_month vs Best_seller_rank", # set the title of the plot
    marginal_y="violin", # add a violin plot to the y-axis
    marginal_x="box", # add a box plot to the x-axis
    trendline="ols", # add a ordinary least squares regression line to the plot
    hover_data=["asin_id", "price_usd", "average_review", "total_reviews"], # add some additional data to the hover tooltip
    )
st.plotly_chart(fig,use_container_width=True) # display the plot in the web app and use the container width as the plot width


        
        
result = df[["product_name","model_name","os_support","total_reviews","date_first_available"]].groupby(by ="model_name")["total_reviews"].sum().reset_index() # create a new dataframe by grouping the original dataframe by model_name and summing the total_reviews column
result0 = df[["product_name","model_name","os_support","total_reviews","date_first_available","price_usd"]].groupby(by ="product_name")["price_usd"].sum().reset_index() # create another new dataframe by grouping the original dataframe by product_name and summing the price_usd column

col3, col4, col5 = st.columns([0.15,0.40,0.45]) # create three columns with different widths

with col3: # in the first column
    fig = px.bar(result0, x = "product_name", y = "price_usd", labels={"TotalSales" : "Sales"}, title="Total sales last month",
                 template="plotly_dark",height=500) # create a bar plot using plotly express with the product_name as the x-axis and the price_usd as the y-axis, and customize the labels, title, template, and height of the plot
    st.plotly_chart(fig,use_container_width=True) # display the plot in the web app and use the container width as the plot width


with col4: # in the second column
    fig1 = px.line(result, x = "model_name", y = "total_reviews", title="Total Reviews get by model_name",
                   template="gridon") # create a line plot using plotly express with the model_name as the x-axis and the total_reviews as the y-axis, and customize the title and template of the plot
    st.plotly_chart(fig1,use_container_width=True) # display the plot in the web app and use the container width as the plot width

average_rev = df[["product_name","model_name","os_support","total_reviews","average_review","date_first_available"]].groupby(by ="model_name")["average_review"].mean().reset_index() # create a new dataframe by grouping the original dataframe by model_name and averaging the average_review column

with col5: # in the third column
    fig = px.bar(average_rev, x = "model_name", y = "average_review", labels={"AvgReview" : "average review"}, title="Average review get by model name",
                 template="gridon",height=500) # create a bar plot using plotly express with the model_name as the x-axis and the average_review as the y-axis, and customize the labels, title, template, and height of the plot
    st.plotly_chart(fig,use_container_width=True) # display the plot in the web app and use the container width as the plot width

col6, col7 = st.columns([0.45,0.55]) # create two columns with different widths
with col6: # in the first column
    fig=px.box( # create a box plot using plotly express
        df, # use the dataframe as the data source
        x="ram_in_GB", # use the ram_in_GB column as the x-axis
        y="average_review", # use the average_review column as the y-axis
        title="Box plot to relate Ram vs Average Review", # set the title of the plot
        notched=True, # add notches to the boxes
        points="all" # show all the points
        )
    st.plotly_chart(fig,use_container_width=True) # display the plot in the web app and use the container width as the plot width

with col7: # in the second column
    fig=px.scatter_matrix( # create a scatter matrix using plotly express
        df, # use the dataframe as the data source
        dimensions=[ # specify the dimensions to plot
        "average_review",
        "ram_in_GB",
        "screen_size_in_inches",
        ],
        title="Conditional Scatter!", # set the title of the plot
        color="product_name", # use the product_name column to color the points
        )
    st.plotly_chart(fig,use_container_width=True) # display the plot in the web app and use the container width as the plot width

col8, col9 = st.columns([0.40,0.60]) # create two columns with different widths


# create two columns with different widths
with col8: 
    # create a density heatmap using plotly express
    fig=px.density_heatmap(
                df, # use the dataframe as the data source
                x="date_first_available", # use the date_first_available column as the x-axis
                y="total_reviews", # use the total_reviews column as the y-axis
                title="Density Heatmap!", # set the title of the plot
                nbinsx=20, # set the number of bins for the x-axis
                nbinsy=20, # set the number of bins for the y-axis
                histfunc="count", # use the count function to aggregate the values
                marginal_x="rug", # add a rug plot to the x-axis
                marginal_y="histogram", # add a histogram to the y-axis
                )
    # display the plot in the web app and use the container width as the plot width
    st.plotly_chart(fig,use_container_width=True)

# create two columns with different widths
with col9:
    # create a density heatmap using plotly express
    fig = px.density_heatmap(df, # use the dataframe as the data source
                             x="price_usd", # use the price_usd column as the x-axis
                             y="average_review", # use the average_review column as the y-axis
                             title="Density Heatmap!", # set the title of the plot
                             facet_row="screen_size_in_inches") # create a facet row for each value of the screen_size_in_inches column
    # display the plot in the web app and use the container width as the plot width
    st.plotly_chart(fig,use_container_width=True)

# create a multiselect widget to let the user choose the columns to visualize on a treemap
options = st.multiselect(
    label='Please select your combination to visualize on treemap!', # set the label of the widget
    options=list(df.columns)) # use the list of dataframe columns as the options

# make a copy of the dataframe
data=df.copy()
# add a subheader to the web app
st.subheader("Prices by combinations!")
# check if the user has selected any options
if options:
    # create a new column in the data to format the price_usd values
    data["price_usd(Formatted)"] = data["price_usd"].apply(format_sales)
    # create a treemap using plotly express
    fig = px.treemap(data, # use the data as the data source
                     path = options, # use the options as the path for the hierarchy
                     values = "price_usd", # use the price_usd column as the values for the area
                     hover_name = "price_usd(Formatted)", # use the formatted price_usd column as the name for the hover tooltip
                     hover_data = ["price_usd(Formatted)"], # use the formatted price_usd column as the data for the hover tooltip
                     color = "model_name", # use the model_name column to color the rectangles
                     height = 700, # set the height of the plot
                     width = 600) # set the width of the plot
    # update the traces to show more information on the labels
    fig.update_traces(textinfo="percent entry+percent parent+label+value")
    # display the plot in the web app and use the container width as the plot width
    st.plotly_chart(fig,use_container_width=True)

    # create two columns with different widths
    v1,d1=st.columns([0.8, 0.2])
    # in the first column
    with v1:
        # create an expander widget to show the total sales by combinations
        expander = st.expander("Total Sales by Combinations!")
        # create a new dataframe by grouping the data by the options and summing the price_usd column
        dt = data[options+["price_usd"]].groupby(by=options)["price_usd"].sum().reset_index()
        # format the price_usd column using the format_sales function
        dt["price_usd"] = dt["price_usd"].apply(format_sales)
        # rename the price_usd column to Total_Sales_by_Category
        dt.rename(columns={"price_usd":"Total_Sales_by_Category"})
        # write the dataframe to the expander widget
        expander.write(dt)
        # in the second column
        with d1:
            # create a download button to let the user download the dataframe as a csv file
            st.download_button("Download", data = dt.to_csv().encode("utf-8"),
                        file_name="Sales.csv", mime="text/csv")