Začněte nyníZačněte zdarma

DRY stylování Dash komponentů

Tvůj poslední dashboard těžil ze znovupoužitelných komponentů. Teď jdeme o krok dál: pomocí pomocné funkce vložíš odřádkování a zjednodušíš duplicitní styly prostřednictvím sdílené stylovací funkce.

Společné styly, které sis všiml/a, jsou: 'display':'inline-block','margin':'0 auto','padding':'20px'

Funkce make_break() je pro tebe připravená na řádku 14. Přijímá argument určující počet HTML odřádkovacích tagů, které má vytvořit, a vrací je jako seznam.

Toto cvičení je součástí kurzu

Tvorba dashboardů s Dash a Plotly

Zobrazit kurz

Pokyny k cvičení

  • Vytvoř funkci style_c(), která vrátí slovník layout_style se všemi společnými styly ('display':'inline-block','margin':'0 auto','padding':'20px') — vlož ji pod řádek 21.
  • Pomocí funkce make_break() vlož počet odřádkování uvedený v komentářích pod řádky 28, 31 a 29.
  • Pomocí funkce style_c() přidej styl ke komponentu html.H2() pod řádkem 35.
  • Pomocí funkce style_c() rozšiř specifické styly, které jsou již nastaveny na komponentu DatePickerSingle() pod řádkem 47.

Interaktivní cvičení na vyzkoušení si v praxi

Vyzkoušejte si toto cvičení dokončením tohoto ukázkového kódu.

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)
Upravit a spustit kód