Ein verfeinertes Sales-Dashboard

Das E‑Commerce-Unternehmen aus Kapitel 1 hat sich gemeldet und ein Budget bereitgestellt, damit du deine bisherige Arbeit — ein einfaches Proof‑of‑Concept-Sales-Dashboard — ausbauen kannst.

Jetzt, da du Styling- und Positionierungsfähigkeiten aufgebaut hast, kannst du dieses Dashboard präsentationsreif machen.

Zur Erinnerung: Das Unternehmen möchte ein Liniendiagramm der monatlichen Gesamterlöse, ein Balkendiagramm der Gesamterlöse pro Land und eine übergeordnete Kennzahl zur höchsten Bestellmenge im Zeitraum. Allerdings bevorzugen sie eine Darstellung nebeneinander, und der Corporate-Styleguide verlangt hellblaue Hintergründe. Außerdem wünschen sie zwei Logos, jeweils eins auf jeder Seite des Haupttitels, damit die Marke gut zur Geltung kommt.

Diese Übung ist Teil des Kurses

<Kurs>Dashboards mit Dash und Plotly erstellen</Kurs>

Kurs ansehen

Übungsanweisungen

Füge links neben der H1 das linke Logo mit 25px Margin unterhalb von Zeile 17 hinzu.
Füge rechts neben der H1 das rechte Logo mit 25px Margin unterhalb von Zeile 22 hinzu.
Setze das Liniendiagramm auf 500px Breite, nebeneinander mit 5px Margin unterhalb von Zeile 25.
Setze das Balkendiagramm auf 350px Breite, nebeneinander mit 5px Margin unterhalb von Zeile 28.

Interaktive praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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)

Code bearbeiten und ausführen