├── Superstore.xls
├── components
    └── image
    │   └── logo.png
├── Credit.txt
├── config.toml
├── README.md
├── style.css
└── main.py


/Superstore.xls:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Super-Store-data/HEAD/Superstore.xls


--------------------------------------------------------------------------------
/components/image/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/moadhamousti/Super-Store-data/HEAD/components/image/logo.png


--------------------------------------------------------------------------------
/Credit.txt:
--------------------------------------------------------------------------------
1 | You can check this for the original file:
2 | 
3 | https://github.com/AbhisheakSaraswat/PythonStreamlit/blob/main/Dashboard.py
4 | 


--------------------------------------------------------------------------------
/config.toml:
--------------------------------------------------------------------------------
 1 | [theme]
 2 | # Primary accent color for interactive elements.
 3 | primaryColor = "#3d95f9"
 4 | 
 5 | 
 6 | # Background color for the main content area.
 7 | backgroundColor = "#c5c8c6"
 8 | 
 9 | 
10 | # Background color used for the sidebar and most interactive widgets.
11 | secondaryBackgroundColor = "#99cdfc"
12 | 
13 | 
14 | # Color used for almost all text.
15 | textColor = "#333333"
16 | 
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Super-Store-data-Sample (USA) 🏬: 
 2 | 
 3 | ### Super Store in The USA Dashboard Using Streamlit : 
 4 |   
 5 | 
 6 | ☑️ - Contains Sales Between : 2014 - 2020.
 7 | 
 8 | ☑️ - Contains Chart By Sales Category , By Region..etc
 9 | 
10 | ☑️ - You Can Choose Between Regions , States or Cities.
11 | 
12 | ☑️ - Contains a Hierarchical view of Sales (Using TreeMap).
13 | 
14 | ☑️ - Chorepleth Map Of Sales By State...etc
15 | 
16 | 
17 | ### Screen Shoots 📷 :
18 | 
19 | 
20 | <img width="948" alt="SS" src="https://github.com/moadhamousti/Super-Store-data/assets/118165767/76f3fba9-ff52-4c7d-b48d-81b5f11f0fd5">
21 | 
22 | <img width="948" alt="Section Store" src="https://github.com/moadhamousti/Super-Store-data/assets/118165767/31c6c690-c147-4b9c-b98e-5a0649f68f84">
23 | 
24 | <img width="947" alt="Map Sales" src="https://github.com/moadhamousti/Super-Store-data/assets/118165767/23702101-54cd-408d-9b69-bc999b9761cd">
25 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | /* Card */
 3 | /* Adapted from https://startbootstrap.com/theme/sb-admin-2 */
 4 | div.css-1r6slb0.e1tzin5v2 {
 5 |     background-color: #FFFFFF;
 6 |     border: 1px solid #CCCCCC;
 7 |     padding: 5% 5% 5% 10%;
 8 |     border-radius: 5px;
 9 |     border-left: 0.5rem solid #9AD8E1 ;
10 |     box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
11 | }
12 | 
13 | 
14 | 
15 | 
16 | /* Move block container higher */
17 | div.block-container.css-18e3th9.egzxvld2 {
18 |   margin-top: -5em;
19 | }
20 | 
21 | label.css-mkogse.e16fv1kl2 {
22 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
23 |   color: #36b9cc !important;
24 |   font-weight: 700 !important;
25 |   text-transform: uppercase !important;
26 | }
27 | 
28 | div.stApp {
29 |   border-top: none;
30 | }
31 | 
32 | /* Hide hamburger menu and footer */
33 | div.css-r698ls.e8zbici2 {
34 |   display: none;
35 | }
36 | 
37 | footer.css-ipbk5a.egzxvld4 {
38 |   display: none;
39 | }
40 | 
41 | footer.css-12gp8ed.eknhn3m4 {
42 |   display: none;
43 | }
44 | 
45 | div.vg-tooltip-element {
46 |   display: none;
47 | }
48 | 
49 | .table table-borderless{
50 |   border-radius: 2px;
51 | }
52 | 
53 | #MainMenu {visibility: hidden;}
54 | footer {visibility: hidden;}
55 | header {visibility: hidden;}
56 | 


--------------------------------------------------------------------------------
/main.py:
--------------------------------------------------------------------------------
  1 | import streamlit as st
  2 | import plotly.express as px
  3 | import pandas as pd
  4 | import os
  5 | import toml
  6 | import warnings
  7 | warnings.filterwarnings('ignore')
  8 | import json
  9 | import numpy as np
 10 |    
 11 | st.set_page_config(page_title="Superstore!!!", page_icon=":bar_chart:",layout="wide")
 12 | 
 13 | st.title(" :bar_chart: Sample SuperStore USA Departement")
 14 | st.info("Click on the dates below to change the start date and the end date prefered!")
 15 | 
 16 | 
 17 | col1, col2 = st.columns((2))
 18 | 
 19 | # with col1:
 20 | #     st.image("img/SStore.gif")
 21 | # with col2:
 22 | #     st.image("img/SStoree.gif")
 23 | 
 24 | 
 25 | st.markdown('<style>div.block-container{padding-top:1rem;}</style>',unsafe_allow_html=True)
 26 | 
 27 | df = pd.read_csv("Superstore.csv", encoding = "ISO-8859-1")
 28 | 
 29 | 
 30 | df["Order Date"] = pd.to_datetime(df["Order Date"])
 31 | 
 32 | 
 33 | 
 34 | # Logo Of the Web App 
 35 | 
 36 | st.sidebar.image("./components/image/logo.png", width=280)
 37 | 
 38 | 
 39 | # Linked CSS File 
 40 | 
 41 | with open('style.css') as f:
 42 |     st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
 43 | 
 44 | 
 45 | # Config.toml For Styling 
 46 | 
 47 | @st.cache_data
 48 | def load_config():
 49 |     with open("config.toml") as f:
 50 |         config = toml.loads(f.read())
 51 |     return config
 52 | 
 53 | config = load_config()
 54 | 
 55 | 
 56 | # Getting the min and max date 
 57 | startDate = pd.to_datetime(df["Order Date"]).min()
 58 | endDate = pd.to_datetime(df["Order Date"]).max()
 59 | 
 60 | with col1:
 61 |     date1 = pd.to_datetime(st.date_input("Start Date", startDate))
 62 | 
 63 | with col2:
 64 |     date2 = pd.to_datetime(st.date_input("End Date", endDate))
 65 | 
 66 | df = df[(df["Order Date"] >= date1) & (df["Order Date"] <= date2)].copy()
 67 | 
 68 | st.sidebar.header("Choose your filter: ")
 69 | # Create for Region
 70 | region = st.sidebar.multiselect("Pick your Region", df["Region"].unique())
 71 | if not region:
 72 |     df2 = df.copy()
 73 | else:
 74 |     df2 = df[df["Region"].isin(region)]
 75 | 
 76 | # Create for State
 77 | state = st.sidebar.multiselect("Pick the State", df2["State"].unique())
 78 | if not state:
 79 |     df3 = df2.copy()
 80 | else:
 81 |     df3 = df2[df2["State"].isin(state)]
 82 | 
 83 | # Create for City
 84 | city = st.sidebar.multiselect("Pick the City",df3["City"].unique())
 85 | 
 86 | # Filter the data based on Region, State and City
 87 | 
 88 | if not region and not state and not city:
 89 |     filtered_df = df
 90 | elif not state and not city:
 91 |     filtered_df = df[df["Region"].isin(region)]
 92 | elif not region and not city:
 93 |     filtered_df = df[df["State"].isin(state)]
 94 | elif state and city:
 95 |     filtered_df = df3[df["State"].isin(state) & df3["City"].isin(city)]
 96 | elif region and city:
 97 |     filtered_df = df3[df["Region"].isin(region) & df3["City"].isin(city)]
 98 | elif region and state:
 99 |     filtered_df = df3[df["Region"].isin(region) & df3["State"].isin(state)]
100 | elif city:
101 |     filtered_df = df3[df3["City"].isin(city)]
102 | else:
103 |     filtered_df = df3[df3["Region"].isin(region) & df3["State"].isin(state) & df3["City"].isin(city)]
104 | 
105 | category_df = filtered_df.groupby(by = ["Category"], as_index = False)["Sales"].sum()
106 | 
107 | with col1:
108 |     st.subheader("Category wise Sales")
109 |     fig = px.bar(category_df, x = "Category", y = "Sales", text = ['${:,.2f}'.format(x) for x in category_df["Sales"]],
110 |                  template = "seaborn")
111 |     st.plotly_chart(fig,use_container_width=True, height = 200)
112 | 
113 | with col2:
114 |     st.subheader("Region wise Sales")
115 |     fig = px.pie(filtered_df, values = "Sales", names = "Region", hole = 0.5)
116 |     fig.update_traces(text = filtered_df["Region"], textposition = "outside")
117 |     st.plotly_chart(fig,use_container_width=True)
118 | 
119 | cl1, cl2 = st.columns((2))
120 | with cl1:
121 |     with st.expander("Category_ViewData"):
122 |         st.write(category_df.style.background_gradient(cmap="Blues"))
123 |         csv = category_df.to_csv(index = False).encode('utf-8')
124 |         st.download_button("Download Data", data = csv, file_name = "Category.csv", mime = "text/csv",
125 |                             help = 'Click here to download the data as a CSV file')
126 | 
127 | with cl2:
128 |     with st.expander("Region_ViewData"):
129 |         region = filtered_df.groupby(by = "Region", as_index = False)["Sales"].sum()
130 |         st.write(region.style.background_gradient(cmap="Oranges"))
131 |         csv = region.to_csv(index = False).encode('utf-8')
132 |         st.download_button("Download Data", data = csv, file_name = "Region.csv", mime = "text/csv",
133 |                         help = 'Click here to download the data as a CSV file')
134 |         
135 | filtered_df["month_year"] = filtered_df["Order Date"].dt.to_period("M")
136 | st.subheader('Time Series Analysis')
137 | 
138 | linechart = pd.DataFrame(filtered_df.groupby(filtered_df["month_year"].dt.strftime("%Y : %b"))["Sales"].sum()).reset_index()
139 | fig2 = px.line(linechart, x = "month_year", y="Sales", labels = {"Sales": "Amount"},height=500, width = 1000,template="gridon")
140 | st.plotly_chart(fig2,use_container_width=True)
141 | 
142 | with st.expander("View Data of TimeSeries:"):
143 |     st.write(linechart.T.style.background_gradient(cmap="Blues"))
144 |     csv = linechart.to_csv(index=False).encode("utf-8")
145 |     st.download_button('Download Data', data = csv, file_name = "TimeSeries.csv", mime ='text/csv')
146 | 
147 | # Create a treem based on Region, category, sub-Category
148 | st.subheader("Hierarchical view of Sales using TreeMap")
149 | fig3 = px.treemap(filtered_df, path = ["Region","Category","Sub-Category"], values = "Sales",hover_data = ["Sales"],
150 |                   color = "Sub-Category")
151 | fig3.update_layout(width = 800, height = 650)
152 | st.plotly_chart(fig3, use_container_width=True)
153 | 
154 | chart1, chart2 = st.columns((2))
155 | with chart1:
156 |     st.subheader('Segment wise Sales')
157 |     fig = px.pie(filtered_df, values = "Sales", names = "Segment", template = "plotly_dark")
158 |     fig.update_traces(text = filtered_df["Segment"], textposition = "inside")
159 |     st.plotly_chart(fig,use_container_width=True)
160 | 
161 | with chart2:
162 |     st.subheader('Category wise Sales')
163 |     fig = px.pie(filtered_df, values = "Sales", names = "Category", template = "gridon")
164 |     fig.update_traces(text = filtered_df["Category"], textposition = "inside")
165 |     st.plotly_chart(fig,use_container_width=True)
166 | 
167 | 
168 | 
169 | 
170 | us_states = json.load(open("us_states.json"))
171 | 
172 |     # Read the CSV data
173 | df = pd.read_csv("Superstore.csv")
174 | 
175 |     # Create a mapping of state names to IDs
176 | state_id_map = {}
177 | for feature in us_states['features']:
178 |         feature['id'] = feature['properties']['STATE']
179 |         state_id_map[feature['properties']['NAME']] = feature['id']
180 | 
181 | # Function to remove commas and convert to int
182 | def remove_commas_and_convert_to_int(s):
183 |         if isinstance(s, str):
184 |             return int(s.replace(",", ""))
185 |         elif isinstance(s, (int, float)):
186 |             return int(s)
187 |         else:
188 |             return s
189 | 
190 | # Apply the function to the 'Sales' column
191 | df['Sales'] = df['Sales'].apply(remove_commas_and_convert_to_int)
192 | 
193 | # Add an 'id' column to the DataFrame
194 | df['id'] = df['State'].apply(lambda x: state_id_map.get(x, -1))  # Use -1 as default if state not found
195 | df['SalesScale'] = np.log10(df['Sales'])
196 | # Streamlit app
197 | st.subheader("Choropleth map of Superstore Sales by states")
198 | 
199 | # Create and display the choropleth map
200 | # fig = go.Figure(go.Choropleth(
201 | #     geojson=us_states,
202 | #     locations=df['id'],
203 | #     z=df['Sales'],
204 | #     color='SalesScale',
205 | #     autocolorscale=False,
206 | #     marker_line_color='white',
207 | #     colorbar_title="Sales"
208 | # ))
209 | 
210 | color_scale = [
211 |         [0.8, 'rgb(0,191,255)'],  
212 |         [0.9, 'rgb(139,0,139)'],   
213 |         [1.0, 'rgb(178,34,34)'],    
214 | ]
215 | 
216 | fig = px.choropleth(df, locations='id', geojson=us_states, color='SalesScale' , color_continuous_scale=color_scale, hover_name='State', hover_data=['Sales'])
217 | 
218 | fig.update_geos(fitbounds="locations", visible=False)
219 | fig.update_layout(geo=dict(bgcolor='rgba(0,0,0,0)'))
220 | fig.update_layout(width=800)
221 | st.plotly_chart(fig)
222 | 
223 | 
224 | # ,scope='north america'
225 | 
226 | 
227 | import plotly.figure_factory as ff
228 | st.subheader(":point_right: Month wise Sub-Category Sales Summary")
229 | with st.expander("Summary_Table"):
230 |     df_sample = df[0:5][["Region","State","City","Category","Sales","Profit","Quantity"]]
231 |     fig = ff.create_table(df_sample, colorscale = "Cividis")
232 |     st.plotly_chart(fig, use_container_width=True)
233 | 
234 |     st.markdown("Month wise sub-Category Table")
235 |     filtered_df["month"] = filtered_df["Order Date"].dt.month_name()
236 |     sub_category_Year = pd.pivot_table(data = filtered_df, values = "Sales", index = ["Sub-Category"],columns = "month")
237 |     st.write(sub_category_Year.style.background_gradient(cmap="Blues"))
238 | 
239 | # Create a scatter plot
240 | data1 = px.scatter(filtered_df, x = "Sales", y = "Profit", size = "Quantity")
241 | data1['layout'].update(title="Relationship between Sales and Profits using Scatter Plot.",
242 |                        titlefont = dict(size=20),xaxis = dict(title="Sales",titlefont=dict(size=19)),
243 |                        yaxis = dict(title = "Profit", titlefont = dict(size=19)))
244 | st.plotly_chart(data1,use_container_width=True)
245 | 
246 | 
247 | 
248 | st.subheader('Profit by Cities (Overall profit between 2014 and 2018)')
249 | 
250 | # Read the CSV file
251 | df = pd.read_csv("Superstore.csv")
252 | 
253 | # Create a Streamlit dropdown to select the state
254 | selected_state = st.selectbox("Select a State", df['State'].unique())
255 | 
256 | # Filter the data for the selected state
257 | filtered_df = df[df['State'] == selected_state]
258 | 
259 | # Aggregate profit values for cities with multiple entries
260 | filtered_df = filtered_df.groupby('City')['Profit'].sum().reset_index()
261 | 
262 | # Create a bar chart
263 | fig = px.bar(filtered_df, x='City', y='Profit', title=f'Profit by City in {selected_state}')
264 | fig.update_xaxes(title_text='City')
265 | fig.update_yaxes(title_text='Profit')
266 | 
267 | # Set the chart width to 100% of the page
268 | fig.update_layout(width=800)  # You can adjust the width as needed
269 | 
270 | # Show the bar chart
271 | st.plotly_chart(fig)
272 | 
273 | with st.expander("View Data"):
274 |     st.write(filtered_df.iloc[:500,1:20:2].style.background_gradient(cmap="Oranges"))
275 | 
276 | 
277 | # Download orginal DataSet
278 | csv = df.to_csv(index = False).encode('utf-8')
279 | st.download_button('Download Data', data = csv, file_name = "Data.csv",mime = "text/csv")
280 | 
281 | 
282 | 
283 | 
284 | 
285 | 
286 | 
287 | 
288 | 
289 | 
290 | 


--------------------------------------------------------------------------------