एक परिष्कृत सेल्स डैशबोर्ड
Chapter 1 की e-commerce कंपनी ने आपसे संपर्क किया है और आपके पिछले काम को बढ़ाने के लिए बजट दिया है, ताकि आप एक बेसिक proof-of-concept सेल्स डैशबोर्ड बना सकें.
अब जब आपने styling और positioning की स्किल्स बना ली हैं, तो आप इस डैशबोर्ड को प्रेजेंटेशन-योग्य बना सकते हैं.
याद दिलाने के लिए, कंपनी प्रत्येक महीने की अपनी total sales का एक line chart, प्रत्येक देश में अपनी total sales का एक bar chart, और इस अवधि के लिए highest order quantity के आसपास एक high-level summary statistic चाहती है. हालाँकि, वे इन्हें side-by-side पसंद करेंगे, और उनकी corporate style guide हल्के नीले background मांगती है. उन्होंने अनुरोध किया है कि मुख्य शीर्षक के दोनों ओर दो लोगो हों, ताकि उनका brand साफ़ और प्रमुख दिखे.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- लाइन
17के नीचे25pxmargin के साथ H1 के बगल में लेफ्ट-साइड लोगो जोड़ें. - लाइन
22के नीचे25pxmargin के साथ H1 के बगल में राइट-साइड लोगो जोड़ें. - लाइन ग्राफ़ को
500pxचौड़ा सेट करें,5pxmargin के साथ side-by-side, लाइन25के नीचे. - बार ग्राफ़ को
350pxचौड़ा सेट करें,5pxmargin के साथ side-by-side, लाइन28के नीचे.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='TotalSales')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='TotalSales',title='Total Sales by Month')
line_fig.update_layout({'paper_bgcolor':'rgb(224, 255, 252)' })
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='TotalSales')
bar_fig = px.bar(data_frame=ecom_bar, x='TotalSales', y='Country', orientation='h',title='Total Sales by Country')
bar_fig.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})
app = Dash()
app.layout = [
html.Img(src=logo_link,
# Add the left-side logo next to the H1 with 25px margin
style={'display':'____', 'margin':'____'}),
html.H1(children=['Sales Figures'],
style={'display':'inline-block'}),
html.Img(src=logo_link,
# Add the right-side logo next to the H1 with 25px margin
style={'display':'____', 'margin':'____'}),
dcc.Graph(figure=line_fig,
# Set line graph to 500px wide, side-by-side with 5px margin
style={'width':'____', 'display':'____', 'margin':'____'}),
dcc.Graph(figure=bar_fig,
# Set bar graph to 350px wide, side-by-side with 5px margin
style={'width':'____', 'display':'____', 'margin':'____'}),
html.H3(f'The largest order quantity was {ecom_sales.Quantity.max()}')
]
if __name__ == '__main__':
app.run(debug=True)