ComeçarComece de graça

Mudando para o modo escuro

Uma tendência comum em produtos de software e páginas da web é o "modo escuro", que é mais confortável para os olhos e é a preferência de algumas pessoas. O modo escuro é quando o plano de fundo dos elementos é preto e a cor do texto de tudo é branca.

Sua tarefa é pegar o dashboard que você criou no último exercício e trazê-lo para o “lado escuro”. Isso envolve mudar o plano de fundo e a cor do texto no seu gráfico e nos elementos HTML.

A maior parte do dashboard anterior foi fornecida, incluindo a criação dos gráficos necessários. No entanto, ainda há um trabalho importante para migrar o dashboard para o modo escuro. Neste exercício, você pode usar nomes de cores em vez de códigos RGB.

Este exercício faz parte do curso

Construindo Dashboards com Dash e Plotly

Ver curso

Instruções do exercício

  • Defina a cor da fonte do gráfico de barras para combinar com o modo escuro abaixo da linha 10 (plano de fundo black, texto white).
  • Adicione o novo logotipo usando a variável logo_link abaixo da linha 16.

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