Začněte nyníZačněte zdarma

Posuvník pro data o prodejích

Výběry dat pomocí date pickerů výrazně zlepšily analýzu trendů a vzorců v datech globální e-commerce společnosti. Teď přichází další požadavek: zjistit, které kategorie se podílejí na objednávkách s vysokou hodnotou.

Společnost tě žádá, abys vytvořil/a nástroj, kde si uživatel zvolí libovolnou hodnotu a graf ukáže, kolik prodejů mělo hodnotu objednávky vyšší než tato hodnota – rozděleno podle hlavních kategorií.

Víš, že k tomu se skvěle hodí vstup s posuvníkem.

Toto cvičení je součástí kurzu

Tvorba dashboardů s Dash a Plotly

Zobrazit kurz

Pokyny k cvičení

  • Pod řádek 16 přidej komponentu posuvníku dcc.Slider s identifikátorem value_slider pro výběr minimální hodnoty objednávky.
  • Pod řádek 20 nastav parametr value posuvníku na 0.
  • Pod řádek 22 nastav parametr step posuvníku na 50.

Interaktivní cvičení na vyzkoušení si v praxi

Vyzkoušejte si toto cvičení dokončením tohoto ukázkového kódu.

from dash import Dash, dcc, html, Input, Output, callback
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'

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales breakdowns'),
  html.Div([
        html.H2('Controls'),
        html.Br(),
        html.H3('Minimum OrderValue Select'),
        # Add a slider input
        ____(id='value_slider',
            min=ecom_sales['OrderValue'].min(),
            max=ecom_sales['OrderValue'].max(),
            # Set the starting value of the slider
            ____=____,
            # Set the step increment of the slider
            ____=____,
            vertical=False)],
        style={'width':'350px', 'height':'350px', 'display':'inline-block', 'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  html.Div([
		dcc.Graph(id='sales_cat'),
		html.H2('Sales by Major Category', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
		style={'width':'700px','display':'inline-block'})
]

@callback(
    Output(component_id='sales_cat', component_property='figure'),
    Input(component_id='value_slider', component_property='value')
)
def update_plot(min_val):
    sales = ecom_sales.copy(deep=True)
    if min_val:
        sales = sales[sales['OrderValue'] >= min_val]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].size().reset_index(name='Total Sales Volume')
    bar_fig_major_cat = px.bar(
        title=f'Sales with order value: {min_val}',data_frame=ecom_bar_major_cat, orientation='h', 
        x='Total Sales Volume', y='Major Category')
    return bar_fig_major_cat
  
if __name__ == '__main__':
    app.run(debug=True)
Upravit a spustit kód