Komponen interaktif

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Meningkatkan interaktivitas

Komponen interaktif yang berguna:
- dcc.Checklist() = Kotak centang
- dcc.RadioItems() = Tombol radio
- dcc.Slider() / dcc.RangeSlider() = Penggeser
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Mirip slider tetapi untuk tanggal

Slider

Slider: seret untuk satu nilai

Range Slider: seret untuk dua nilai

Pengingat: dapat ditautkan ke callback
- Perbarui plot atau komponen

Sebuah slider:

GIF slider biru di latar hitam dengan teks nilai terpilih di bawahnya. Kursor menyeret notch slider ke atas beberapa langkah, nilai di bawah meningkat.

Range slider:

GIF range slider biru di latar hitam dengan teks dua nilai terpilih di bawahnya. Kursor menyeret masing-masing sisi notch naik-turun beberapa langkah, nilainya berubah.

Slider di Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Argumen utama:

min/max : Batas slider
value : Pilihan awal
step : Kenaikan tiap takik
vertical : Orientasi horizontal/vertikal

Date picker di Dash

DatePickerSingle: Pilih satu tanggal

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = pilihan awal
initial_visible_month = bulan yang ditampilkan di popup
Opsional batasi min_date_allowed dan max_date_allowed

GIF pemilih tanggal umum. Ada kolom input tanggal dengan 1 Juli 2025 sebagai tanggal saat ini. Kursor mengeklik, kalender muncul. Dipilih tanggal lain, 2 Juli 2025; kalender menutup dan tanggal pada pemilih berubah.

Date Range Picker

Mirip dengan DatePickerSingle

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

Tetapkan start_date dan end_date awal

GIF pemilih rentang tanggal umum. Ada dua kolom input tanggal dengan tanggal Juli 2025 terpilih. Kursor mengeklik input kedua, kalender muncul dengan rentang hari sudah disorot hijau, lalu rentang baru dipilih sehingga tanggal berubah

Memperbarui plot

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Create fig
    return fig

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly