Zacznij terazZacznij za darmo

Suwak dla danych sprzedażowych

Selektory dat znacznie usprawniły analizę trendów i wzorców w danych globalnej firmy e-commerce. Pojawiło się kolejne zapotrzebowanie – tym razem chodzi o sprawdzenie, które kategorie generują zamówienia o najwyższej wartości.

Firma prosi cię o zbudowanie narzędzia, w którym użytkownik może wybrać dowolną wartość, a wykres pokaże, ile zamówień przekroczyło tę kwotę – z podziałem na główne kategorie.

Wiesz, że doskonale sprawdzi się tu suwak jako element wejściowy.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Dodaj komponent suwaka dcc.Slider z identyfikatorem value_slider poniżej linii 16, aby umożliwić wybór minimalnej wartości zamówienia.
  • Ustaw parametr value suwaka na 0 poniżej linii 20.
  • Ustaw parametr step suwaka na 50 poniżej linii 22.

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

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)
Edytuj i uruchom kod