Grid dashboard with Plotly dash

Question

I'm trying to build a dashboard with Dash from Plotly composed of a series of tiles (Text) like in the picture below.

I'm trying to build a component to reuse it an build the layout below. Each box will contain a Title, a value and a description as shown below.

Is there a component available? Can someone help me with any basic idea/code ?

Thanks in advance!

Answer 1

I would recommend checking out Dash Bootstrap Components (dbc).

You can use dbc.Col (columns) components nested into dbc.Row (rows) components to produce your layout. You can check them out here.

Then for the actual 'cards' as I'll call them, you can use the dbc.Card component. Here's the link.

Here's some example code replicating your layout:

import dash_bootstrap_components as dbc
import dash_html_components as html

card = dbc.Card(
    dbc.CardBody(
        [
            html.H4("Title", id="card-title"),
            html.H2("100", id="card-value"),
            html.P("Description", id="card-description")
        ]
    )
)

layout = html.Div([
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card])
    ])
])

Best thing would probably be to have a function which creates those cards with parameters for ids, titles and descriptions to save the hassle of creating different cards:

def create_card(card_id, title, description):
    return dbc.Card(
        dbc.CardBody(
            [
                html.H4(title, id=f"{card_id}-title"),
                html.H2("100", id=f"{card_id}-value"),
                html.P(description, id=f"{card_id}-description")
            ]
        )
    )

You can then just replace each card with create_card('id', 'Title', 'Description') as you please.

Another quick tip is that the col component has a parameter, width. You can give each column in a row a different value to adjust the relative widths. You can read more about that in the docs I linked above.

Hope this helps,

Ollie