ÎncepețiÎncepe gratuit

Controlul aspectului obiectelor

Munca ta cu Dash are un impact real în organizația ta. Un coleg te-a contactat însă cu o problemă legată de unul dintre dashboard-urile sale. Dashboard-ul pe care și l-a imaginat are logo-ul companiei în partea de sus, urmat de două diagrame cu bare plasate una lângă alta.

Problema e că logo-ul este prea aproape de marginea de sus, iar graficele sunt stivuite unul peste altul. Ce dezordine!

Crezi că îți poți folosi cunoștințele de CSS pentru a aranja aceste elemente corect.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Adaugă un margin de 30px doar în partea de sus a logo-ului, sub linia 15, și lasă celelalte laturi fără niciun spațiu.
  • Adaugă stilizare ambelor grafice de sub linia 19, astfel încât să apară unul lângă altul.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul