BaşlayınÜcretsiz Başlayın

Gözden geçirilmiş bir satış kontrol paneli

  1. Bölümdeki e-ticaret şirketi seni aradı ve daha önce yaptığın çalışmayı genişletmen için bütçe ayırdı; temel bir kavram kanıtı satış kontrol paneli oluşturacaksın.

Artık stil verme ve konumlandırma becerilerini geliştirdiğine göre, bu kontrol panelini sunuma uygun hale getirebilirsin.

Hatırlatma olarak, şirket her ayki toplam satışlarının bir çizgi grafiğini, her ülkedeki toplam satışlarının bir çubuk grafiğini ve dönem için en yüksek sipariş adedine dair üst düzey bir özet istatistiği istiyor. Ancak bunların yan yana olmasını tercih ediyorlar ve kurumsal stil rehberi açık mavi arka planlar talep ediyor. Ayrıca ana başlığın her iki yanında birer logo olmasını, markalarının belirgin şekilde görünmesini istediler.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • Sol taraftaki logoyu H1’in yanına, 25px kenar boşluğuyla, 17. satırın altına ekle.
  • Sağ taraftaki logoyu H1’in yanına, 25px kenar boşluğuyla, 22. satırın altına ekle.
  • Çizgi grafiğini 500px genişliğe ayarla, 5px kenar boşluğuyla yan yana olacak şekilde, 25. satırın altına ekle.
  • Çubuk grafiğini 350px genişliğe ayarla, 5px kenar boşluğuyla yan yana olacak şekilde, 28. satırın altına ekle.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)
Kodu Düzenle ve Çalıştır