EmpezarEmpieza gratis

Aplicar estilos a una app de Dash con CSS

Es hora de aprovechar la potencia de CSS y llevar tus paneles al siguiente nivel. Has estado pensando en cómo mejorar el panel de marketing que creaste y tienes algunas ideas para enseñárselas a las personas interesadas del negocio.

¡Ajustar el tamaño del gráfico y el logo y añadir colores de fondo atractivos a varios elementos le dará un toque especial!

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

  • Establece el tamaño del logo a 215px de ancho y 240px de alto debajo de la línea 16.
  • Establece el tamaño del gráfico de barras a 500px de ancho y 350px de alto debajo de la línea 21.
  • Añade un color de fondo lightgrey al aviso de derechos de autor debajo de la línea 30.

ejercicio interactivo práctico

Prueba este ejercicio completando este código de ejemplo.

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 y ejecutar código