Začněte nyníZačněte zdarma

Vyladěný prodejní dashboard

E-commerce společnost z 1. kapitoly tě kontaktovala a má pro tebe rozpočet na rozšíření předchozí práce – základního proof-of-concept prodejního dashboardu.

Teď, když máš za sebou základy stylování a rozmístění prvků, můžeš tento dashboard dotáhnout do prezentovatelné podoby.

Pro připomenutí: společnost chce spojnicový graf celkových měsíčních tržeb, sloupcový graf celkových tržeb podle zemí a přehledovou souhrnnou statistiku s nejvyšším objednaným množstvím za dané období. Preferuje přitom zobrazení vedle sebe a jejich firemní styl vyžaduje světle modré pozadí. Také požádali o dvě loga – jedno na každé straně hlavního nadpisu – aby byl jejich brand dobře viditelný.

Toto cvičení je součástí kurzu

Tvorba dashboardů s Dash a Plotly

Zobrazit kurz

Pokyny k cvičení

  • Přidej logo na levou stranu vedle H1 s okrajem 25px pod řádek 17.
  • Přidej logo na pravou stranu vedle H1 s okrajem 25px pod řádek 22.
  • Nastav šířku spojnicového grafu na 500px, zobraz ho vedle ostatních prvků s okrajem 5px pod řádek 25.
  • Nastav šířku sloupcového grafu na 350px, zobraz ho vedle ostatních prvků s okrajem 5px pod řádek 28.

Interaktivní cvičení na vyzkoušení si v praxi

Vyzkoušejte si toto cvičení dokončením tohoto ukázkového kódu.

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)
Upravit a spustit kód