Inizia subitoInizia gratis

Un dashboard delle vendite rifinito

L'azienda di e-commerce del Capitolo 1 ti ha ricontattato e ha stanziato un budget per estendere il lavoro precedente, costruendo un semplice proof-of-concept di dashboard delle vendite.

Ora che hai sviluppato le tue abilità di stile e posizionamento, puoi rendere questo dashboard adatto a una presentazione.

Ricorda: l'azienda desidera un grafico a linee delle vendite totali per mese, un grafico a barre delle vendite totali per paese e una statistica di sintesi ad alto livello sulla quantità d'ordine più alta del periodo. Tuttavia, preferirebbero questi elementi affiancati e, secondo il loro manuale di stile, con sfondi azzurri chiari. Hanno richiesto due loghi, uno per lato del titolo principale, in modo che il brand risalti bene.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Aggiungi il logo a sinistra accanto all'H1 con 25px di margine sotto la riga 17.
  • Aggiungi il logo a destra accanto all'H1 con 25px di margine sotto la riga 22.
  • Imposta il grafico a linee a 500px di larghezza, affiancato, con 5px di margine sotto la riga 25.
  • Imposta il grafico a barre a 350px di larghezza, affiancato, con 5px di margine sotto la riga 28.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)
Modifica ed esegui il codice