EmpezarEmpieza gratis

Un panel de ventas refinado

La empresa de comercio electrónico del Capítulo 1 te ha llamado y tiene presupuesto para que amplíes el trabajo anterior que hiciste, creando un panel de ventas básico como prueba de concepto.

Ahora que has mejorado tus habilidades de estilo y posicionamiento, puedes convertir este panel en algo presentable.

Como recordatorio, la empresa quiere un gráfico de líneas con sus ventas totales por mes, un gráfico de barras con sus ventas totales por país y una estadística de alto nivel sobre la mayor cantidad de pedidos del periodo. Sin embargo, prefieren que estos elementos estén uno al lado del otro, y su guía de estilo corporativa pide fondos azul claro. Han solicitado que haya dos logotipos, uno a cada lado del título principal, para que su marca quede bien visible.

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

  • Añade el logotipo izquierdo junto al H1 con 25px de margen debajo de la línea 17.
  • Añade el logotipo derecho junto al H1 con 25px de margen debajo de la línea 22.
  • Establece el gráfico de líneas a 500px de ancho, en paralelo con 5px de margen, debajo de la línea 25.
  • Establece el gráfico de barras a 350px de ancho, en paralelo con 5px de margen, debajo de la línea 28.

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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 y ejecutar código