Searching product descriptions
The e-commerce company you have been working with has a new challenge for you.
They are interested in providing a way to explore their sales data by country but are encountering difficulties with the product Description
column. Unfortunately, the product Description
column is a text field with many different values, which won't look good in a dropdown. They may wish to explore colors, brands, or other key descriptors easily.
This sounds like a job for a user-input component!
Help the e-commerce company to enhance their Dash app by taking a text user input to filter the Description
column of the provided ecom_sales
dataset.
This exercise is part of the course
Building Dashboards with Dash and Plotly
Exercise instructions
- Create an input to accept text that has the placeholder text
'Filter Product Descriptions'
below line45
. - Ensure the callback is triggered when the user presses 'Enter' below line
48
. - Ensure users are not required to use this input for the graph to render below line
50
. - If the user has entered an input, use this in the
update_plot()
function to filter the'Description'
column before re-rendering the plot below line77
.
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output
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={'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.Dash(__name__)
app.layout = html.Div([
add_logo(),
*make_break(2),
html.H1('Sales Dashboard'),
*make_break(3),
html.Div(
children=[
html.Div(
children=[
html.H2('Controls', style=style_c()),
html.H3('Search Descriptions'),
*make_break(2),
# Add the required input
dcc.Input(id='search_desc', type='____',
____='____',
# 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(children=[
dcc.Graph(id='sales_desc'),
html.H2('Sales Quantity by Country',
style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})
],
style={'width':'700px','display':'inline-block'}
),
])
],
style={'text-align':'center', 'display':'inline-block', 'width':'100%'}
)
@app.callback(
Output(component_id='sales_desc', component_property='figure'),
Input(component_id='search_desc', component_property='value')
)
def update_plot(search_value):
title_value = 'None Selected (Showing all)'
sales = ecom_sales.copy(deep=True)
# Undertake the filter here using the user input
if ____:
sales = sales[sales['____'].str.contains(____, case=False)]
title_value = search_value
fig = px.scatter(data_frame=sales,
y='OrderValue', x='Quantity', color='Country',title=f'Sales with description text: {title_value}')
return fig
if __name__ == '__main__':
app.run_server(debug=True)