EmpezarEmpieza gratis

Cambiar a modo oscuro

Una tendencia habitual en productos de software y páginas web es tener un "modo oscuro", que cansa menos la vista y es la preferencia de algunas personas. El modo oscuro consiste en que el fondo de los elementos sea negro y el color del texto sea blanco.

Tu tarea es tomar el panel que creaste en el ejercicio anterior y pasarlo al "lado oscuro". Esto implica cambiar el color de fondo y el color del texto en tu gráfico y en los elementos HTML.

La mayor parte del panel anterior ya está preparada, incluida la creación de los gráficos necesarios. Sin embargo, queda trabajo clave para cambiar el panel a modo oscuro. En este ejercicio puedes usar nombres de colores en lugar de códigos RGB.

Este ejercicio forma parte del curso

Creación de paneles con Dash y Plotly

Ver curso

Instrucciones del ejercicio

  • Establece el color de la fuente del gráfico de barras para que coincida con el modo oscuro debajo de la línea 10 (fondo black, texto white).
  • Añade el nuevo logotipo usando la variable logo_link debajo de la línea 16.

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/1c95273e21a54b5ca48e0b03cc0c1faeafb3d7cd/e-comlogo_white.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')

# Set the font color of the bar chart
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'black', 'font': {'color':'____'}})

app = Dash()

app.layout = [
    # Add the new logo
    html.Img(
    	src=____,
    	style={'width':'165px', 'height':'50px'}),
    html.H1('Top Sales Categories'),
    dcc.Graph(
    	figure=ecom_bar,
    	style={'width':'500px', 'height':'350px', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I('Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Editar y ejecutar código