शुरू करेंमुफ़्त में शुरू करें

एक परिष्कृत सेल्स डैशबोर्ड

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 के नीचे 25px margin के साथ H1 के बगल में लेफ्ट-साइड लोगो जोड़ें.
  • लाइन 22 के नीचे 25px margin के साथ H1 के बगल में राइट-साइड लोगो जोड़ें.
  • लाइन ग्राफ़ को 500px चौड़ा सेट करें, 5px margin के साथ side-by-side, लाइन 25 के नीचे.
  • बार ग्राफ़ को 350px चौड़ा सेट करें, 5px margin के साथ 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)
कोड संपादित करें और चलाएँ