ComeçarComece de graça

Um dashboard de vendas refinado

A empresa de e-commerce do Capítulo 1 entrou em contato e tem orçamento para você ampliar o trabalho anterior, criando um dashboard de vendas básico como prova de conceito.

Agora que você desenvolveu suas habilidades de estilo e posicionamento, pode deixar esse dashboard pronto para apresentação.

Relembrando: a empresa quer um gráfico de linhas das vendas totais por mês, um gráfico de barras das vendas totais por país e uma estatística de alto nível sobre a maior quantidade de pedidos no período. No entanto, eles preferem esses elementos lado a lado, e o guia de estilo corporativo pede fundos em azul claro. Eles solicitaram dois logos, um de cada lado do título principal, para destacar bem a marca.

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

  • Adicione o logo do lado esquerdo ao lado do H1 com 25px de margem abaixo da linha 17.
  • Adicione o logo do lado direito ao lado do H1 com 25px de margem abaixo da linha 22.
  • Defina o gráfico de linhas com 500px de largura, lado a lado, com 5px de margem abaixo da linha 25.
  • Defina o gráfico de barras com 350px de largura, lado a lado, com 5px de margem abaixo da linha 28.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)
Editar e executar o código