Mulai sekarangMulai gratis

Menggunakan Kembali Komponen Dash

Dashboard Anda semakin diminati, terutama aplikasi date picker terbaru Anda. Seorang manajer senior menyukainya, tetapi meminta beberapa pembaruan: gunakan logo bergaya korporat dan tampilkan di beberapa tempat.

Agar kode tetap rapi, saatnya membuat fungsi Python yang dapat digunakan kembali untuk logo.

Gaya logo yang disetujui adalah: 'width':'75px', 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Buat fungsi komponen yang dapat digunakan kembali bernama add_logo() di bawah baris 11 untuk mengembalikan komponen corp_logo.
  • Di dalam fungsi ini, buat elemen gambar Dash bernama corp_logo menggunakan komponen HTML yang sesuai dengan gaya yang disediakan di bawah baris 13.
  • Panggil fungsi add_logo() di masing-masing dari 4 lokasi yang ditandai di bawah baris 20, 27, 30, dan 46.

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
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'
ecom_sales['InvoiceDate'] = pd.to_datetime(ecom_sales['InvoiceDate'])

app = Dash()

# Create a reusable component function called add_logo
____ ____():
    # Create a Dash image element
    corp_logo = ____(
        src=logo_link, 
        style={'width':'75px', 'margin':'20px 20px 5px 5px', 'border':'1px dashed lightblue', 'display':'inline-block'})
    return corp_logo

app.layout = [
  # Insert the logo (1)
  ____,
  html.Br(),
  html.H1('Sales breakdowns'),
  html.Br(),
  html.Br(),
  html.Div([
        # Insert the logo (2)
        ____,
        html.H2('Controls', style={'margin':'0 10px','display':'inline-block'}),
        # Insert the logo (3)
        ____,
        html.H3('Sale Date Select'),
        html.Br(),
        dcc.DatePickerSingle(
            id='sale_date',
            min_date_allowed=ecom_sales.InvoiceDate.min(),
            max_date_allowed=ecom_sales.InvoiceDate.max(),
            initial_visible_month=date(2011, 4, 1),
            date=date(2011, 4, 11),
            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='sales_cat'),
            html.H2('Daily Sales by Major Category', style={'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
            style={'width':'700px','display':'inline-block'}),
  # Insert the logo (4)
  ____
]
@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]
    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 on: {input_date}',data_frame=ecom_bar_major_cat, orientation='h', 
        x='Total Sales ($)', y='Major Category')
    return bar_fig_major_cat

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