Dash bileşenlerinde DRY-stillendirme

Son kontrol panelin yeniden kullanılabilir bileşenlerden faydalanmıştı. Şimdi bir adım daha ileri gidelim: satır sonu eklemek için bir yardımcı fonksiyon kullan ve tekrar eden stilleri ortak bir stil fonksiyonuyla sadeleştir.

Dikkatini çeken ortak stil öğeleri şunlar: 'display':'inline-block','margin':'0 auto','padding':'20px'

make_break() fonksiyonu senin için 14. satırda tanımlandı; bu fonksiyon, kaç tane HTML satır sonu etiketi oluşturulacağını belirten bir argüman alır ve bunları bir listede döndürür.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır

Kursu Görüntüle

Egzersiz talimatları

style_c() adında bir fonksiyon oluştur ve 21. satırın altında tüm ortak stil öğelerini ('display':'inline-block','margin':'0 auto','padding':'20px') içeren bir layout_style sözlüğü döndürsün.
make_break() fonksiyonunu kullanarak 28, 31 ve 29. satırların altındaki yorumlarda belirtilen sayıda satır sonu ekle.
35. satırın altındaki html.H2() bileşenine stil eklemek için style_c() fonksiyonunu kullan.
47. satırın altındaki DatePickerSingle() bileşeninde hâlihazırda bulunan belirli stile ek yapmak için style_c() fonksiyonunu kullan.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)

Kodu Düzenle ve Çalıştır