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!

Solution

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

Comments

[jack87]

That is very cool thanks! Do you know how can I do directly with HTML and CSS on Dash without using a third party library?

[OllieHooper]

@jack87 Just using html and css will be a bit more of a pain. You'll need to look into using html divs and then styling the divs with float and clear css I believe (not 100% sure as I try to steer clear from as much html as I can while designing my dash apps). I've started using dbc as if it's a standard part of Dash to be honest. Unless there is any restriction with you doing a simple pip install I would really really recommend using it. It cleans up your code a lot and covers a lot of functionality which would require separate stylesheets and more advanced html techniques etc.