Mulai sekarangMulai gratis

Dasbor penjualan yang lebih rapi

Perusahaan e-commerce dari Bab 1 menghubungi Anda dan memiliki anggaran agar Anda mengembangkan pekerjaan sebelumnya, membangun dasbor penjualan bukti konsep dasar.

Sekarang setelah Anda membangun keterampilan styling dan penempatan, Anda dapat membuat dasbor ini layak untuk presentasi.

Sebagai pengingat, perusahaan menginginkan bagan garis dari total penjualan tiap bulan, bagan batang dari total penjualan di setiap negara, dan statistik ringkas tingkat tinggi tentang jumlah pesanan tertinggi selama periode tersebut. Namun, mereka lebih menyukai tata letak berdampingan, dan panduan gaya perusahaan mereka meminta latar belakang biru muda. Mereka juga meminta dua logo, masing-masing di sisi kiri dan kanan judul utama, agar merek mereka tampak jelas dan menonjol.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Tambahkan logo sisi kiri di samping H1 dengan 25px margin di bawah baris 17.
  • Tambahkan logo sisi kanan di samping H1 dengan 25px margin di bawah baris 22.
  • Atur grafik garis menjadi lebar 500px, berdampingan dengan 5px margin di bawah baris 25.
  • Atur grafik batang menjadi lebar 350px, berdampingan dengan 5px margin di bawah baris 28.

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
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='TotalSales')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='TotalSales',title='Total Sales by Month')
line_fig.update_layout({'paper_bgcolor':'rgb(224, 255, 252)' }) 
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='TotalSales')
bar_fig = px.bar(data_frame=ecom_bar, x='TotalSales', y='Country', orientation='h',title='Total Sales by Country')
bar_fig.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'}) 

app = Dash()

app.layout = [
	html.Img(src=logo_link, 
		# Add the left-side logo next to the H1 with 25px margin
		style={'display':'____', 'margin':'____'}),
	html.H1(children=['Sales Figures'],
		style={'display':'inline-block'}),
	html.Img(src=logo_link,
		# Add the right-side logo next to the H1 with 25px margin
		style={'display':'____', 'margin':'____'}),
	dcc.Graph(figure=line_fig, 
		# Set line graph to 500px wide, side-by-side with 5px margin
		style={'width':'____', 'display':'____', 'margin':'____'}), 
	dcc.Graph(figure=bar_fig,
		# Set bar graph to 350px wide, side-by-side with 5px margin
		style={'width':'____', 'display':'____', 'margin':'____'}), 
	html.H3(f'The largest order quantity was {ecom_sales.Quantity.max()}')
	]

if __name__ == '__main__':
    app.run(debug=True)
Edit dan Jalankan Kode