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

View Course

Exercise instructions

Create an input to accept text that has the placeholder text 'Filter Product Descriptions' below line 45.
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 line 77.

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)

Edit and Run Code