Mulai sekarangMulai gratis

Beralih ke Mode Gelap

Tren umum pada produk perangkat lunak dan halaman web adalah memiliki 'Dark Mode', yang lebih nyaman untuk mata dan disukai sebagian orang. Dark Mode adalah ketika latar belakang elemen berwarna hitam, dan warna teks untuk semuanya adalah putih.

Tugas Anda adalah mengambil dasbor yang Anda buat pada latihan sebelumnya dan mengalihkannya ke 'sisi gelap'. Ini melibatkan pengubahan latar belakang dan warna teks pada grafik dan elemen HTML Anda.

Sebagian besar dasbor sebelumnya telah disediakan, termasuk pembuatan grafik yang diperlukan. Namun, ada pekerjaan penting yang perlu dilakukan untuk mengalihkan dasbor ke Dark Mode. Anda dapat menggunakan nama warna dalam latihan ini, bukan kode RGB.

Latihan ini merupakan bagian dari kursus

Membangun Dasbor dengan Dash dan Plotly

Lihat Kursus

Instruksi latihan

  • Atur warna font pada bagan batang agar sesuai dengan Mode Gelap di bawah baris 10 (latar belakang black, teks white).
  • Tambahkan logo baru menggunakan variabel logo_link di bawah baris 16.

Latihan interaktif langsung praktik

Cobalah latihan ini dengan melengkapi kode contoh ini.

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)
Edit dan Jalankan Kode