Aan de slagBegin gratis

Een Dash-app stylen met CSS

Tijd om de kracht van CSS los te laten en je dashboards naar een hoger niveau te tillen. Je denkt na over manieren om het marketingdashboard dat je hebt gemaakt op te frissen en hebt een paar ideeën om aan de business stakeholders te laten zien.

De grootte van de grafiek en het logo aanpassen en wat mooie achtergrondkleuren aan verschillende elementen toevoegen zou het echt opvrolijken!

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Stel de logo-afmetingen in op 215px breed en 240px hoog onder regel 16.
  • Stel de afmetingen van de staafgrafiek in op 500px breed en 350px hoog onder regel 21.
  • Voeg een achtergrondkleur lightgrey toe aan de copyrightvermelding onder regel 30.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren