Zacznij terazZacznij za darmo

Stylowanie komponentów Dash zgodnie z zasadą DRY

Poprzedni dashboard skorzystał na wielokrotnego użytku komponentach. Czas pójść o krok dalej: użyj funkcji pomocniczej do wstawiania podziałów wiersza i uprość powtarzające się stylowanie za pomocą wspólnej funkcji stylu.

Wspólne elementy stylu, które zauważono, to: 'display':'inline-block','margin':'0 auto','padding':'20px'

Funkcja make_break() jest już zdefiniowana w linii 14 – przyjmuje argument określający liczbę tagów HTML łamania wiersza do utworzenia i zwraca je w postaci listy.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Utwórz funkcję o nazwie style_c(), która będzie zwracać słownik layout_style zawierający wszystkie wspólne elementy stylu ('display':'inline-block','margin':'0 auto','padding':'20px') poniżej linii 21.
  • Użyj funkcji make_break(), aby wstawić liczbę podziałów wiersza oznaczoną w komentarzach poniżej linii 28, 31 i 29.
  • Użyj funkcji style_c(), aby dodać stylowanie do komponentu html.H2() poniżej linii 35.
  • Użyj funkcji style_c(), aby uzupełnić istniejące stylowanie komponentu DatePickerSingle() poniżej linii 47.

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
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()

def make_break(num_breaks):
    br_list = [html.Br()] * num_breaks
    return br_list

def add_logo():
    corp_logo = html.Img(
        src=logo_link, 
        style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})     
    return corp_logo

# Create a function to add corporate styling
def style_c():
    layout_style = {____}
    return layout_style

app.layout = [
  add_logo(),
  # Insert two HTML breaks
  ____,
  html.H1('Sales breakdowns'),
  # Insert three HTML breaks
  ____,
  html.Div([
    add_logo(),
    # Style using the styling function
    html.H2('Controls', style=____),
    add_logo(),
    html.H3('Sale Date Select'),
    # Insert two HTML breaks
    ____,
    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),
      # Add styling using the styling function
      style={'width':'200px'}.____(____))],
    style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
           'display':'inline-block', 'margin':'0px 40px'}),
  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'}),
  add_logo()
]

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