CSS के साथ Dash ऐप को स्टाइल करना
अब CSS की ताकत दिखाने और अपने डैशबोर्ड्स को अगले स्तर पर ले जाने का समय है। आपने बनाए गए मार्केटिंग डैशबोर्ड को और आकर्षक बनाने के तरीकों के बारे में सोचा है और बिज़नेस स्टेकहोल्डर्स को दिखाने के लिए कुछ आइडिया हैं।
ग्राफ़ और लोगो का साइज़ समायोजित करना, और अलग-अलग एलिमेंट्स में अच्छे बैकग्राउंड कलर जोड़ना इसे और जीवंत बना देगा!
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- लाइन
16के नीचे लोगो का साइज़215pxचौड़ा और240pxऊँचा सेट करें। - लाइन
21के नीचे बार ग्राफ़ का साइज़500pxचौड़ा और350pxऊँचा सेट करें। - लाइन
30के नीचे कॉपीराइट नोटिस मेंlightgreyका बैकग्राउंड रंग जोड़ें.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
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)
top_cat = ecom_category.loc[0]['Minor Category']
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'}, 'paper_bgcolor':'rgb(224, 255, 252)'})
app = Dash()
app.layout = [
html.Img(
src=logo_link,
# Set the size of the logo
style={'____':'____', '____':'____'}),
html.H1('Top Sales Categories'),
dcc.Graph(
figure=ecom_bar,
# Set the size of the bar graph
style={'____':'____', '____':'____', 'margin':'auto'}),
html.Br(),
html.Span(children=[
'The top category was: ',
html.B(top_cat),
html.Br(),
html.I(
'Copyright E-Com INC',
# Add a background color to the copyright notice
style={'____':'____'})])
]
if __name__ == '__main__':
app.run(debug=True)