शुरू करेंमुफ़्त में शुरू करें

Key stats टेबल की स्टाइलिंग

फाइनेंस डिपार्टमेंट हेड को आपका पहले बनाया हुआ key stats टेबल बहुत पसंद आया. लेकिन वह Excel के बड़े फैन हैं, इसलिए उन्होंने टेबल में कुछ अतिरिक्त फॉर्मेटिंग की रिक्वेस्ट की है.

खास तौर पर, उनकी रिक्वेस्ट है:

  • सभी सेल की सामग्री बाएँ ओर संरेखित हो.
  • सेल्स का बैकग्राउंड काला हो और टेक्स्ट सफेद हो.

यह अभ्यास पाठ्यक्रम का हिस्सा है

Dash और Plotly के साथ डैशबोर्ड बनाना

पाठ्यक्रम देखें

अभ्यास निर्देश

  • लाइन 23 के नीचे defaultColDef में cellStyle पैरामीटर का उपयोग करके सभी सेल्स पर स्टाइल लागू करें.
  • लाइन 25 के नीचे textAlign प्रॉपर्टी का उपयोग करके सेल्स को बाएँ-संरेखित स्टाइल करें.
  • लाइन 27 के नीचे backgroundColor और color प्रॉपर्टीज़ का उपयोग करके सेल्स को काले बैकग्राउंड और सफेद टेक्स्ट के साथ स्टाइल करें.

इंटरैक्टिव व्यावहारिक अभ्यास

इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।

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": "Country"},
  {"field": "Major Category"},
  {"field": "Minor Category"},
  {"field": "Total Sales ($)", "valueFormatter": money_fmt},
  {"field": "Average Order Value ($)", "valueFormatter": money_fmt},
  {"field": "Sales Volume"},
]

grid = AgGrid(
  columnDefs=column_defs,
  rowData=key_stats_tb.to_dict("records"),
  defaultColDef={
    # Apply styling to all cells
    "____": {
      # Style content aligned left
      "____": "____",
      # Style background color and text color
      "____": "____",
      "____": "____"}}
)

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)
कोड संपादित करें और चलाएँ