ComeçarComece de graça

Estilizando um app Dash com CSS

É hora de liberar o poder do CSS e levar seus dashboards para o próximo nível. Você vem pensando em maneiras de aprimorar o dashboard de marketing que criou e tem algumas ideias para mostrar às pessoas de negócio.

Ajustar o tamanho do gráfico e do logo e adicionar cores de fundo interessantes a vários elementos vai dar um ótimo destaque!

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

  • Defina o tamanho do logo para 215px de largura e 240px de altura abaixo da linha 16.
  • Defina o tamanho do gráfico de barras para 500px de largura e 350px de altura abaixo da linha 21.
  • Adicione a cor de fundo lightgrey ao aviso de direitos autorais abaixo da linha 30.

Exercício interativo prático

Experimente este exercício completando este código de exemplo.

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)
Editar e executar o código