ÎncepețiÎncepe gratuit

Un dashboard de vânzări rafinat

Compania de e-commerce din Capitolul 1 te-a contactat și are un buget pentru a extinde munca anterioară – un dashboard de vânzări creat ca dovadă de concept.

Acum că ți-ai consolidat abilitățile de stilizare și poziționare, poți transforma acest dashboard într-unul demn de o prezentare.

Ca reminder, compania dorește un grafic de tip linie cu vânzările totale lunare, un grafic de tip bară cu vânzările totale pe fiecare țară și o statistică sumară despre cantitatea maximă comandată în perioada respectivă. Totuși, preferă ca aceste elemente să fie afișate unul lângă altul, iar ghidul lor de stil corporativ cere fundaluri albastru deschis. De asemenea, au solicitat două logo-uri – câte unul de fiecare parte a titlului principal – pentru ca brandul să fie bine evidențiat.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Adaugă logo-ul din stânga lângă H1, cu un margin de 25px, sub linia 17.
  • Adaugă logo-ul din dreapta lângă H1, cu un margin de 25px, sub linia 22.
  • Setează graficul de tip linie la lățimea de 500px, poziționat alături de celelalte elemente, cu un margin de 5px, sub linia 25.
  • Setează graficul de tip bară la lățimea de 350px, poziționat alături de celelalte elemente, cu un margin de 5px, sub linia 28.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul