BaşlayınÜcretsiz Başlayın

Önemli istatistikler tablosunu sayfalama

Önceki derste oluşturulan önemli istatistikler tablosu, küresel e-ticaret şirketinin analitik araç setine harika bir katkıydı. Ancak, fazlasıyla uzundu!

Bunu Dash AG Grid'in yerleşik sayfalama seçeneklerini kullanarak düzeltelim. Bu, uygulamanın kullanılabilirliğini büyük ölçüde artıracak ve kullanıcıların ihtiyaç duydukları şekilde verinin farklı bölümlerini keşfetmelerini sağlayacak.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • Aşağıda 21. satırın altında AgGrid fonksiyonunu kullanarak grid adlı bir Dash AG Grid nesnesi oluştur.
  • 25. satırın altında pagination parametresini ayarlayarak grid için sayfalamayı aç.
  • 28. satırın altında paginationPageSize parametresini ayarlayarak her sayfayı 7 satırla sınırla.

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 dash_ag_grid import AgGrid
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'
key_stats_tb = ecom_sales.groupby(['Country','Major Category', 'Minor Category'])['OrderValue'].agg(['sum', 'count', 'mean']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)', 'mean':'Average Order Value ($)'})

money_fmt = {
  "function": (
    """params.value.toLocaleString(
    'en-US', {style: 'currency', currency: 'USD'})""")}

column_defs = [
  {"field": "Major Category"},
  {"field": "Total Sales ($)", "valueFormatter": money_fmt},
  {"field": "Average Order Value ($)", "valueFormatter": money_fmt},
  {"field": "Sales Volume"}
]

# Create a grid
grid = ____(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"),
  # Turn on pagination
  dashGridOptions={
    "____": ____,        
    # Show 7 rows per page
    "____": ____}
)

app = Dash()
app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales Aggregations'),
  html.Div([
    html.H2('Key Aggregations'),
    grid],
    style={'width':'850px', 'height':'750px', 'margin':'0 auto'})
]

if __name__ == '__main__':
    app.run(debug=True)
Kodu Düzenle ve Çalıştır