Mulai sekarangMulai gratis

Dropdown untuk penjualan per negara

Saat Anda bekerja di meja, manajer penjualan global dari perusahaan e-commerce datang membawa tantangan baru. Ia menyukai grafik penjualan terbaru yang Anda buat, tetapi ingin memfilter berdasarkan negara dan melihat data kategori diperbarui secara langsung.

Ia menekankan untuk menggunakan nama negara yang telah disetujui: United Kingdom, Germany, France, Australia, dan Hong Kong.

🛑 Catatan: Anda mungkin perlu masuk ke mode Full screen untuk melihat dasbor dengan benar dengan semua elemen berdampingan.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Tambahkan komponen dropdown bernama dcc.Dropdown dengan pengenal country_dd di bawah baris 16 untuk digunakan dalam callback.
  • Atur input dan output callback di bawah baris 30 untuk menghubungkan dropdown country_dd ke grafik major_cat.

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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('Country Select'),
        # Add a dropdown with identifier
        dcc.____(
            ____='country_dd',
            options=['United Kingdom', 'Germany', 'France', 'Australia', 'Hong Kong'],
            style={'width': '200px', 'margin': '0 auto'})],
      	style={'width': '350px', 'height': '350px', 'display': 'inline-block', 'vertical-align': 'top', 'border': '1px solid black', 'padding': '20px'}),
    html.Div([
        dcc.Graph(id='major_cat'),
        html.H2('Major Category', style={'border': '2px solid black', 'width': '200px', 'margin': '0 auto'})],
        style={'width': '700px', 'display': 'inline-block'})
]


@callback(
    # Set the input and output of the callback to link the dropdown to the graph
    ____(component_id='____', component_property='____'),
    ____(component_id='____', component_property='____')
)

def update_plot(input_country):
    country_filter = 'All Countries'
    sales = ecom_sales.copy(deep=True)
    if input_country:
        country_filter = input_country
        sales = sales[sales['Country'] == country_filter]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales in {country_filter}', data_frame=ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category',
                 color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
    return bar_fig_major_cat


if __name__ == '__main__':
    app.run(debug=True)
Edit dan Jalankan Kode