Kom igångKom igång gratis

Ett förfinat försäljningsdashboard

E-handelsföretaget från kapitel 1 har hört av sig och har en budget för att bygga vidare på det grundläggande proof-of-concept-dashboard du skapade tidigare.

Nu när du har utvecklat dina kunskaper i stilsättning och positionering kan du göra det här dashboardet presentationsklart.

Som en påminnelse: företaget vill ha ett linjediagram över den totala försäljningen per månad, ett stapeldiagram över den totala försäljningen per land, och en övergripande sammanfattande statistik för den högsta orderkvantiteten under perioden. De vill gärna ha dessa sida vid sida, och deras grafiska profil kräver ljusblå bakgrunder. De har också bett om två logotyper – en på vardera sidan om huvudrubriken – så att varumärket syns tydligt.

Den här övningen är en del av kursen

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

  • Lägg till den vänstra logotypen bredvid H1 med 25px marginal nedanför rad 17.
  • Lägg till den högra logotypen bredvid H1 med 25px marginal nedanför rad 22.
  • Ange linjediagrammets bredd till 500px, placerat sida vid sida med 5px marginal nedanför rad 25.
  • Ange stapeldiagrammets bredd till 350px, placerat sida vid sida med 5px marginal nedanför rad 28.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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)
Redigera och kör kod