डार्क मोड पर स्विच करना
सॉफ्टवेयर प्रोडक्ट्स और वेब पेजों में एक आम ट्रेंड 'Dark Mode' का होता है, जो आँखों के लिए आसान होता है और कई लोगों को पसंद आता है. Dark Mode में एलिमेंट्स की बैकग्राउंड काली होती है और टेक्स्ट का रंग सफेद होता है.
आपका काम पिछले अभ्यास में बनाए गए डैशबोर्ड को 'डार्क साइड' में बदलना है. इसके लिए आपको अपने ग्राफ़ और HTML एलिमेंट्स की बैकग्राउंड और टेक्स्ट कलर बदलने होंगे.
पिछले डैशबोर्ड का अधिकांश हिस्सा, ज़रूरी ग्राफ़ बनाना सहित, उपलब्ध करा दिया गया है. हालाँकि, डैशबोर्ड को Dark Mode में स्विच करने के लिए कुछ अहम काम आपको करना है. इस अभ्यास में आप रंगों के लिए RGB कोड की जगह शब्दों का उपयोग कर सकते हैं.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- बार चार्ट के फ़ॉन्ट का रंग लाइन
10के नीचे Dark Mode के अनुसार सेट करें (blackबैकग्राउंड,whiteटेक्स्ट). - लाइन
16के नीचेlogo_linkवैरिएबल का उपयोग करके नया लोगो जोड़ें.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
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/1c95273e21a54b5ca48e0b03cc0c1faeafb3d7cd/e-comlogo_white.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')
# Set the font color of the bar chart
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'black', 'font': {'color':'____'}})
app = Dash()
app.layout = [
# Add the new logo
html.Img(
src=____,
style={'width':'165px', 'height':'50px'}),
html.H1('Top Sales Categories'),
dcc.Graph(
figure=ecom_bar,
style={'width':'500px', 'height':'350px', 'margin':'auto'}),
html.Br(),
html.Span(children=[
'The top category was: ',
html.B(top_cat),
html.Br(),
html.I('Copyright E-Com INC')])
]
if __name__ == '__main__':
app.run(debug=True)