Search code examples
cssplotlyplotly-dash

Include banner above dbc.Container - Dash

I'm trying to include a banner at the top of a dashboard. Currently the top section of the contain display cards and a sidebar. Is there a way to push the columns down and include a banner above them.

I'm also hoping to extend the height of the right graph to it is the same as both graphs on the left.

I've attached a screenshot of the current layout with some arrows highlighting the intended layout.

from dash import Dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px

# generic card
card = dbc.Card(
    [
        dbc.CardHeader("This is the header"),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P("This is some card text", className="card-text"),
            ]
        ),
        dbc.CardFooter("This is the footer"),
    ],
    className='text-center m-4'
)

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = Dash(__name__, external_stylesheets = external_stylesheets)

# Set up the layout with a single graph
app.layout = dbc.Container([
    dbc.Row([
        # to be used as a sidebar
        dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
        dbc.Col([
            dbc.Row([
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card)
            ]),
            dbc.Row([
                dbc.Col(dcc.Graph(), style={
                        "padding-top": "10px",
                        "padding-bottom": "10px",
                    },),
            ]),
            dbc.Row([
                dbc.Col([dcc.Graph()]),
            ]),
        ], width=5),
        dbc.Col([
            dbc.Row([
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card),
            ]),
            dbc.Row([
                dbc.Col([dcc.Graph()]),
            ], className="h-100"),
        ], width=5),
    ])
], fluid=True)


if __name__ == '__main__':
    app.run(debug=True)

enter image description here

Solution

  • I think you should add one more row above cards and you will need to merge 3 graph in one Row with 2 columns and change height of graph on the right.

    Please check below code:

    from dash import Dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px

df = px.data.gapminder()
fig = px.area(df, x="year", y="pop", color="continent", line_group="country")
# generic card
card = dbc.Card(
    [
        dbc.CardHeader("This is the header"),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P("This is some card text", className="card-text"),
            ]
        ),
        dbc.CardFooter("This is the footer"),
    ],
    className='text-center m-4'
)

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]

app = Dash(__name__, external_stylesheets = external_stylesheets)

# Set up the layout with a single graph
app.layout = dbc.Container([
    dbc.Row([
        html.Img(src=r'assets/hong-kong-skyline-panorama.jpg', alt='image')
    ]),
    dbc.Row([
        # to be used as a sidebar
        dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
        dbc.Col([
            dbc.Row([
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card),
                dbc.Col(card)
            ]),
            dbc.Row([
                dbc.Col([dbc.Card(dcc.Graph(figure=fig),style={'height':400}),
                         dbc.Card(dcc.Graph(figure=fig),style={'height':400})
                        ], width=6),
                dbc.Col([dbc.Card(dcc.Graph(figure=fig,style={'height':800}),style={'height':800})], width=6),            
            ]),
        ], width=10),
    ], className='p-2 align-items-stretch')
], fluid=True)


if __name__ == '__main__':
    app.run(debug=True)

    And here is the result: enter image description here enter image description here