Mulai sekarangMulai gratis

Mengatur tata letak objek

Pekerjaan Anda dengan Dash benar-benar berdampak di organisasi Anda. Namun, seorang rekan menghubungi Anda mengenai masalah pada salah satu dashboard mereka. Dashboard yang mereka bayangkan menempatkan logo perusahaan di bagian atas, diikuti oleh dua bagan batang yang berdampingan.

Namun, logo terlalu dekat dengan bagian atas, dan grafiknya justru tersusun bertumpuk. Berantakan sekali!

Anda yakin dapat memanfaatkan pengetahuan CSS untuk menata objek-objek ini ke posisi yang tepat.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Tambahkan margin 30px pada hanya bagian atas logo di bawah baris 15 dan biarkan sisi lainnya tanpa margin.
  • Tambahkan styling pada kedua grafik di bawah baris 19 agar tampil berdampingan.

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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)
Edit dan Jalankan Kode