Dash में HTML लिस्ट जोड़ना
जब आप अपनी डेस्क पर काम कर रहे थे, तो Marketing विभाग के किसी व्यक्ति ने आपका पिछला छोटा डैशबोर्ड देखा और आपसे उनके लिए एक डैशबोर्ड बनाने को कहा. वे कुल बिक्री राशि के आधार पर शीर्ष केटेगरी का एक बार चार्ट चाहते हैं, और उसके नीचे एक लिस्ट जिसमें जल्दी झलक के लिए कुछ टॉप केटेगरी नोट की गई हों.
उन्होंने कुछ स्टाइलिंग से जुड़ी बातें भी बताई हैं, लेकिन आपके हाल के HTML और Dash वाले काम को देखते हुए, वे सब आपकी पहुँच में लगती हैं.
आपका काम है कि आपने जो डैशबोर्ड बनाया था, उसे बढ़ाकर उसमें शीर्ष केटेगरी और उनकी बिक्री वॉल्यूम की एक लिस्ट शामिल करें.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- लाइन
20के नीचे Dash का उपयोग करके एक ordered list बनाएँ. - लाइन
22के नीचे ordered list में दो list elements जोड़ें, जिनमेंnum1_catऔरnum2_catवैरिएबल उनकी sales volumes के साथ हों. - लाइन
26के नीचे एक line break जोड़ें ताकि कॉपीराइट नोटिस अलग लाइन पर दिखे.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}})
app = Dash()
app.layout = [
html.Img(src=logo_link),
html.H1('Top Sales Categories'),
dcc.Graph(figure=ecom_bar),
html.Span(children=[
'The top 2 sales categories were:',
# Set up an ordered list
html.____(children=[
# Add two list elements with the top category variables
html.____(children=[____, ' with ', num1_salesvol, ' sales volume']),
html.____(children=[____, ' with ', num2_salesvol, ' sales volume'])
], style={'width':'350px', 'margin':'auto'}),
# Add a line break before the copyright notice
html.____(),
html.I('Copyright E-Com INC')])
]
if __name__ == '__main__':
app.run(debug=True)