핵심 지표 테이블 스타일링
재무 부서장이 이전에 만들어 준 핵심 지표 테이블을 매우 마음에 들어 했습니다. 다만 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)