ComenzarEmpieza gratis

Styling a Dash app with CSS

It's time to unleash the power of CSS and take your dashboards to the next level. You have been thinking about ways to spruce up the marketing dashboard you created and have a few ideas to demonstrate to the business stakeholders.

Adjusting the size of the graph and logo and adding some nice background colors to various elements would jazz it up!

Este ejercicio forma parte del curso

Building Dashboards with Dash and Plotly

Ver curso

Instrucciones del ejercicio

  • Set the logo size to 215px wide and 240px high below line 16.
  • Set the bar graph size to 500px wide and 350px high below line 21.
  • Add a background color of lightgrey to the copyright notice below line 30.

Ejercicio interactivo práctico

Prueba este ejercicio y completa el código de muestra.

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