Zacznij terazZacznij za darmo

Dopracowany dashboard sprzedaży

Firma e-commerce z rozdziału 1 skontaktowała się z tobą i ma budżet na rozbudowę wcześniej wykonanej przez ciebie pracy – podstawowego prototypu dashboardu sprzedaży.

Teraz, gdy masz już opanowane stylowanie i pozycjonowanie elementów, możesz sprawić, żeby ten dashboard nadawał się do prezentacji.

Przypomnijmy: firma chce wykresu liniowego przedstawiającego łączną sprzedaż w każdym miesiącu, wykresu słupkowego pokazującego łączną sprzedaż w poszczególnych krajach oraz podsumowania statystycznego z najwyższą zamówioną ilością w danym okresie. Preferuje jednak układ poziomy, a firmowy przewodnik po stylu wymaga jasnoniebieskich teł. Firma poprosiła również o dwa logotypy – po jednym po każdej stronie głównego tytułu – aby marka była dobrze widoczna.

To ćwiczenie jest częścią kursu

Tworzenie dashboardów z Dash i Plotly

Zobacz kurs

Instrukcje do ćwiczenia

  • Dodaj lewy logotyp obok H1 z marginesem 25px poniżej wiersza 17.
  • Dodaj prawy logotyp obok H1 z marginesem 25px poniżej wiersza 22.
  • Ustaw szerokość wykresu liniowego na 500px, układ poziomy z marginesem 5px poniżej wiersza 25.
  • Ustaw szerokość wykresu słupkowego na 350px, układ poziomy z marginesem 5px poniżej wiersza 28.

Interaktywne ćwiczenie praktyczne

Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.

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)
Edytuj i uruchom kod