प्लॉट का शीर्षक अपडेट करना
जिस ई-कॉमर्स कंपनी के साथ आप काम कर रहे हैं, उसके लिए आपके पास एक नया चैलेंज है.
वे ऐसा तरीका देना चाहते हैं जिससे प्लॉट को अंतिम यूज़र के अनुसार कस्टमाइज़ किया जा सके. यानी, प्लॉट का शीर्षक कॉन्फ़िगरेबल होना चाहिए ताकि यूज़र को लगे कि यह उनके लिए पर्सनलाइज़्ड है.
यह तो यूज़र-इनपुट कंपोनेंट का काम लगता है!
टेक्स्ट यूज़र इनपुट लेकर प्लॉट का शीर्षक अपडेट करने के लिए उनकी Dash ऐप को बेहतर बनाने में मदद कीजिए.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
~- लाइन 33 के नीचे add_user_name आइडेंटिफ़ायर के साथ dcc.Input नाम का एक टेक्स्ट इनपुट कंपोनेंट जोड़ें.
- लाइन
36के नीचेdebounceपैरामीटर सेट करें ताकि यूज़र 'Enter' दबाए तो ही कॉलबैक ट्रिगर हो. - लाइन
38के नीचेrequiredपैरामीटर सेट करें ताकि ग्राफ़ रेंडर होने के लिए यूज़र्स के लिए इस इनपुट का उपयोग अनिवार्य न हो.
इंटरैक्टिव व्यावहारिक अभ्यास
इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।
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'
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
def style_c():
layout_style={'display':'inline-block','margin':'0 auto','padding':'20px'}
return layout_style
app = Dash()
app.layout = [
add_logo(),
*make_break(2),
html.H1('Sales Dashboard'),
*make_break(3),
html.Div([
html.H2('Controls', style=style_c()),
html.H3('Customize plot title'),
*make_break(2),
# Add a text input
dcc.____(id='add_user_name', type='____',
placeholder='Enter your name',
# Ensure input is triggered with 'Enter'
____=____,
# Ensure the plot can load without a selection
____=____,
style={'width':'200px', 'height':'30px'})],
style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
'display':'inline-block', 'margin':'0px 80px'}),
html.Div([
dcc.Graph(id='sales_plot'),
html.H2('Sales Quantity by Country', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
style={'width':'500px','display':'inline-block'})
]
@callback(
Output(component_id='sales_plot', component_property='figure'),
Input(component_id='add_user_name', component_property='value')
)
def update_plot(entered_name):
title_value = 'No Name Entered'
sales = ecom_sales.copy(deep=True)
if entered_name:
title_value = entered_name
fig = px.scatter(data_frame=sales,
y='OrderValue', x='Quantity', color='Country',title=f'Plot generated for: {title_value}')
return fig
if __name__ == '__main__':
app.run(debug=True)