Plotly-Dash: How to design the layout using dash bootstrap components?

Question

I'm very new to Dash Plotly and I'm trying to figure out how can I design a layout like this.

Layout:

As I understood, this can be done more easy using dash bootstrap components. https://dash-bootstrap-components.opensource.faculty.ai As a first step I should reproduce the layout (grey tiles) and as a second step, I should add some text and some graphs. Just basic.

Thank you.

Answer 1

You should check out this link to learn more about Dash Bootstrap Components, and how to structure your layout.

I have made an example using JupyterDash that matches your desired layout.

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px

# Iris bar figure
def drawFigure():
    return  html.Div([
        dbc.Card(
            dbc.CardBody([
                dcc.Graph(
                    figure=px.bar(
                        df, x="sepal_width", y="sepal_length", color="species"
                    ).update_layout(
                        template='plotly_dark',
                        plot_bgcolor= 'rgba(0, 0, 0, 0)',
                        paper_bgcolor= 'rgba(0, 0, 0, 0)',
                    ),
                    config={
                        'displayModeBar': False
                    }
                ) 
            ])
        ),  
    ])

# Text field
def drawText():
    return html.Div([
        dbc.Card(
            dbc.CardBody([
                html.Div([
                    html.H2("Text"),
                ], style={'textAlign': 'center'}) 
            ])
        ),
    ])

# Data
df = px.data.iris()

# Build App
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])

app.layout = html.Div([
    dbc.Card(
        dbc.CardBody([
            dbc.Row([
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure() 
                ], width=3),
                dbc.Col([
                    drawFigure()
                ], width=3),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=9),
                dbc.Col([
                    drawFigure()
                ], width=3),
            ], align='center'),      
        ]), color = 'dark'
    )
])

# Run app and display result inline in the notebook
app.run_server(mode='external')

Answer 2

Yes - this can be done with dash-bootstrap. Since the screen layout is divided into 12 columns - you'll have to set the width by the number of columns you would like each section to take. So if for example, you need 4 columns, each should be width a width=3.

Your layout would look something like this - 3 rows, the first with 4 columns, the second with 3 columns, the third with 2 columns. After building the layout - you can play with the width of the columns in each row - so it would fit the layout you need

dbc.Row([dbc.Col([content]),dbc.Col([content]),dbc.Col([content]),dbc.Col([content])]),
dbc.Row([dbc.Col([content]),dbc.Col([content]),dbc.Col([content])]),
dbc.Row([dbc.Col([content]),dbc.Col([content])])

You can see a detailed explanation here

Here is a working dash example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import dash_bootstrap_components as dbc


app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])

app.layout = \
dbc.Container\
([
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 1 col 1",style={"width":"100%"})],width=3),
    dbc.Col([dbc.Button("row 1 col 2", style={"width": "100%"})],width=3),
    dbc.Col([dbc.Button("row 1 col 3",style={"width":"100%"})],width=3),
    dbc.Col([dbc.Button("row 1 col 4",style={"width":"100%"})],width=3),
    ]),
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 2 col 1",style={"width":"100%"})],width=3),
    dbc.Col([dbc.Button("row 2 col 2", style={"width": "100%"})],width=3),
    dbc.Col([dbc.Button("row 2 col 3",style={"width":"100%"})],width=6),
    ]),
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 3 col 1",style={"width":"100%"})],width=9),
    dbc.Col([dbc.Button("row 3 col 2", style={"width": "100%"})],width=3),
    ])
])

if __name__ == "__main__":
    app.run_server(debug=False, port=8050, host='0.0.0.0')