객체 레이아웃 제어하기
여러분이 만든 Dash 작업이 조직에 큰 영향을 주고 있어요. 그런데 한 동료가 자신의 대시보드에서 겪는 문제로 도움을 요청했네요. 그가 구상한 대시보드는 맨 위에 회사 로고가 있고, 그 아래에 막대 그래프 두 개가 서로 나란히 배치되는 형태예요.
하지만 지금은 로고가 상단에 너무 붙어 있고, 그래프는 위아래로 쌓여 있어요. 꽤 난감하네요!
여러분은 CSS 지식을 활용해 이 객체들의 위치를 제대로 정리할 수 있다고 생각해요.
이 연습은 강의의 일부입니다
Dash와 Plotly로 대시보드 만들기
연습 안내
- 15번째 줄 아래의 로고에 대해, 위쪽만
30px의 margin을 추가하고 나머지 방향에는 margin을 두지 마세요. - 19번째 줄 아래의 두 그래프에 스타일을 추가하여 나란히 보이도록 하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
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_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')
app = Dash()
app.layout = [
html.Img(src=logo_link,
# Add margin to the logo
style={'margin':'____ ____ ____ ____'}),
html.H1('Sales breakdowns'),
dcc.Graph(
# Style the graphs to appear side-by-side
figure=bar_fig_major_cat,
style={'display':'____', 'width': '49%'}),
dcc.Graph(
figure=bar_fig_minor_cat,
style={'display':'____', 'width': '49%'}),
]
if __name__ == '__main__':
app.run(debug=True)