НачатьНачать бесплатно

Улучшенный дашборд продаж

Компания из главы 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)
Редактировать и запускать код