DRY-स्टाइलिंग Dash कंपोनेंट्स
आपके पिछले डैशबोर्ड को रीयूज़ेबल कंपोनेंट्स से फ़ायदा हुआ था. अब इसे एक कदम आगे बढ़ाइए: एक हेल्पर फंक्शन का उपयोग करके लाइन ब्रेक डालें और साझा स्टाइल फंक्शन से डुप्लिकेट स्टाइलिंग को सरल बनाइए.
जो कॉमन स्टाइल एलिमेंट्स आपने नोटिस किए हैं, वे हैं: 'display':'inline-block','margin':'0 auto','padding':'20px'
make_break() फंक्शन आपके लिए लाइन 14 पर परिभाषित है, जो एक आर्ग्युमेंट लेता है कि कितने HTML ब्रेक टैग बनाने हैं और इन्हें एक लिस्ट में रिटर्न करता है.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
style_c()नाम का एक फंक्शन बनाइए जो लाइन21के नीचे सभी कॉमन स्टाइल एलिमेंट्स ('display':'inline-block','margin':'0 auto','padding':'20px') के साथ एकlayout_styledictionary रिटर्न करेगा.make_break()फंक्शन का उपयोग करके लाइन28,31, और29के नीचे कमेंट्स में दर्शाई गई संख्या के अनुसार लाइन ब्रेक डालिए.style_c()फंक्शन का उपयोग करके लाइन35के नीचेhtml.H2()कंपोनेंट में स्टाइलिंग जोड़िए.style_c()फंक्शन का उपयोग करके लाइन47के नीचेDatePickerSingle()कंपोनेंट पर पहले से मौजूद specific स्टाइलिंग में और जोड़िए.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
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_sales['InvoiceDate'] = pd.to_datetime(ecom_sales['InvoiceDate'])
app = Dash()
def make_break(num_breaks):
br_list = [html.Br()] * num_breaks
return br_list
def add_logo():
corp_logo = html.Img(
src=logo_link,
style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})
return corp_logo
# Create a function to add corporate styling
def style_c():
layout_style = {____}
return layout_style
app.layout = [
add_logo(),
# Insert two HTML breaks
____,
html.H1('Sales breakdowns'),
# Insert three HTML breaks
____,
html.Div([
add_logo(),
# Style using the styling function
html.H2('Controls', style=____),
add_logo(),
html.H3('Sale Date Select'),
# Insert two HTML breaks
____,
dcc.DatePickerSingle(
id='sale_date',
min_date_allowed=ecom_sales.InvoiceDate.min(),
max_date_allowed=ecom_sales.InvoiceDate.max(),
initial_visible_month=date(2011, 4, 1),
date=date(2011, 4, 11),
# Add styling using the styling function
style={'width':'200px'}.____(____))],
style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
'display':'inline-block', 'margin':'0px 40px'}),
html.Div([
dcc.Graph(id='sales_cat'),
html.H2('Daily Sales by Major Category', style={'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
style={'width':'700px','display':'inline-block'}),
add_logo()
]
@callback(
Output(component_id='sales_cat', component_property='figure'),
Input(component_id='sale_date', component_property='date')
)
def update_plot(input_date):
sales = ecom_sales.copy(deep=True)
if input_date:
sales = sales[sales['InvoiceDate'] == input_date]
ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(
title=f'Sales on: {input_date}',data_frame=ecom_bar_major_cat, orientation='h',
x='Total Sales ($)', y='Major Category')
return bar_fig_major_cat
if __name__ == '__main__':
app.run(debug=True)