ऑब्जेक्ट लेआउट नियंत्रित करना
Dash के साथ आपका काम आपकी संस्था में काफी असर दिखा रहा है. लेकिन आपके एक सहयोगी ने अपने एक डैशबोर्ड की समस्या को लेकर आपसे संपर्क किया है. उनके मन में जो डैशबोर्ड है उसमें सबसे ऊपर कंपनी का लोगो है, और उसके बाद एक-दूसरे के बगल में दो बार चार्ट होने चाहिए.
लेकिन लोगो सबसे ऊपर के बहुत पास है, और ग्राफ़ एक-दूसरे के ऊपर स्टैक हो रहे हैं. क्या गड़बड़ है!
आपको लगता है कि CSS का अपना ज्ञान इस्तेमाल करके आप इन ऑब्जेक्ट्स को सही जगह पर ला सकते हैं.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- लाइन
15के नीचे दिए गए लोगो के सिर्फ ऊपर30pxका margin जोड़ें और बाकी सभी किनारों पर कोई margin न रखें. - लाइन
19के नीचे दिए गए दोनों ग्राफ़ पर ऐसा styling जोड़ें कि वे side-by-side दिखाई दें.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')
app = Dash()
app.layout = [
html.Img(src=logo_link,
# Add margin to the logo
style={'margin':'____ ____ ____ ____'}),
html.H1('Sales breakdowns'),
dcc.Graph(
# Style the graphs to appear side-by-side
figure=bar_fig_major_cat,
style={'display':'____', 'width': '49%'}),
dcc.Graph(
figure=bar_fig_minor_cat,
style={'display':'____', 'width': '49%'}),
]
if __name__ == '__main__':
app.run(debug=True)