ПочатиПочніть безкоштовно

Вдосконалена панель продажів

Інтернет-магазин із розділу 1 звернувся до вас і виділив бюджет, щоб ви розширили попередню роботу — базову панель продажів як доказ концепції.

Тепер, коли ви опанували стилювання та позиціонування, ви можете зробити цю панель гідною презентації.

Нагадаємо, компанія хоче лінійний графік загальних місячних продажів, стовпчикову діаграму загальних продажів по країнах і коротку підсумкову статистику щодо найбільшої кількості замовлень за період. Однак вони віддають перевагу розміщенню елементів поруч, а в їхньому корпоративному гайдлайні вказано світло-блакитні фони. Вони також попросили розмістити два логотипи — по обидва боки від головного заголовка — щоб бренд був добре помітним.

Ця вправа є частиною курсу

Створення дашбордів з Dash і Plotly

Переглянути курс

Інструкції до вправи

  • Додайте логотип ліворуч поруч із H1 з відступом 25px униз після рядка 17.
  • Додайте логотип праворуч поруч із H1 з відступом 25px униз після рядка 22.
  • Задайте для лінійного графіка ширину 500px, розташуйте його поруч із відступом 5px униз після рядка 25.
  • Задайте для стовпчикового графіка ширину 350px, розташуйте його поруч із відступом 5px униз після рядка 28.

Інтерактивна практична вправа

Спробуйте виконати цю вправу, доповнивши цей зразок коду.

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)
Редагувати та запускати код