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

Керування розміщенням об'єктів

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

Але логотип занадто близько до верху, а графіки розташовані один під одним. Повний безлад!

Ви вважаєте, що зможете застосувати свої знання CSS, щоб упорядкувати ці елементи.

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

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

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

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

  • Додайте відступ 30px лише зверху для логотипа нижче рядка 15 і не задавайте відступи для інших сторін.
  • Додайте стилі до обох графіків нижче рядка 19, щоб вони відображалися поруч.

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

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

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')                    

app = Dash()

app.layout = [
	html.Img(src=logo_link,
		# Add margin to the logo
		style={'margin':'____ ____ ____ ____'}),
	html.H1('Sales breakdowns'),
	dcc.Graph(
		# Style the graphs to appear side-by-side
		figure=bar_fig_major_cat,
		style={'display':'____', 'width': '49%'}),
	dcc.Graph(
		figure=bar_fig_minor_cat,
		style={'display':'____', 'width': '49%'}), 
  ]

if __name__ == '__main__':
    app.run(debug=True)
Редагувати та запускати код