ÎncepețiÎncepe gratuit

Stilizarea unei aplicații Dash cu CSS

A venit momentul să folosești puterea CSS și să duci dashboardurile tale la nivelul următor. Ai tot gândit la modalități de a îmbunătăți dashboardul de marketing pe care l-ai creat și ai câteva idei de prezentat stakeholderilor din business.

Ajustarea dimensiunii graficului și a logo-ului, plus adăugarea unor culori de fundal atrăgătoare pentru diverse elemente – iată ce ar putea face totul mai interesant!

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Setează dimensiunea logo-ului la 215px lățime și 240px înălțime, sub linia 16.
  • Setează dimensiunea graficului cu bare la 500px lățime și 350px înălțime, sub linia 21.
  • Adaugă o culoare de fundal lightgrey pentru notița de copyright, sub linia 30.

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/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
top_cat = ecom_category.loc[0]['Minor Category']
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})         

app = Dash()

app.layout = [
    html.Img(
    	src=logo_link,
    	# Set the size of the logo
    	style={'____':'____', '____':'____'}), 
    html.H1('Top Sales Categories'),
	dcc.Graph(
		figure=ecom_bar,
        # Set the size of the bar graph
		style={'____':'____', '____':'____', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I(
		'Copyright E-Com INC',
    	# Add a background color to the copyright notice
    	style={'____':'____'})])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Editează și rulează codul