How to create dashboard with multiple pages in Python

Question

I have a dashboard with 4 pages and have managed to create different content for each page in a very basic way using a dbc.navbar for an example.

But what I am attempting now is to have a different chart layout for each page. I am aware that it is built on columns and rows but cannot get my head around it.

Here is my code for the dashboard

import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output #for the callbacks


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

# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "black",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "A simple sidebar layout with navigation links", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Home", href="/", active="exact"),
                dbc.NavLink("Page 1", href="/page-1", active="exact"),
                dbc.NavLink("Page 2", href="/page-2", active="exact"),
                dbc.NavLink("Page 3", href="/page-3", active="exact"),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content", style=CONTENT_STYLE)
header = html.H4(
    "Side Example.py", className="bg-primary text-white p-2 mb-2 text-center"
)

app.layout = html.Div([dcc.Location(id="url"),sidebar,header,content])


@app.callback(Output("page-content", "children"),[Input("url", "pathname")])
     #Output("line-chart", "figure"),
    

def render_page_content(pathname):
    if pathname == "/":
        return dbc.NavbarSimple(children=[html.H2('Particular info for HOMEPAGE')],color="grey",dark=True,)
    elif pathname == "/page-1":
        return dbc.NavbarSimple(children=[html.H2('Particular info for PAGE1')],color="grey",dark=True,)
    elif pathname == "/page-2":
        return dbc.NavbarSimple(children=[html.H2('Particular info for PAGE2')],color="grey",dark=True,)
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )


if __name__ == "__main__":
    app.run_server(port=8001)

A basic drawing example of what I am trying to accomplish is in the images below

Answer 1

I'm not sure if I undestand correctly, but you can just change the children list. For each page you can create a new children list with the content and layout that you need. Something like this:

# Fill content
children_list_1 = list()
children_list_2 = list()

children_list_1.append(html.H1(id="title1",children="Page_1",style=dict(display="flex", justifyContent="center"),))
children_list_1.append(dash_table.DataTable(....))
...
children_list_2.append(html.H1(id="title2",children="Page_2",style=dict(display="flex", justifyContent="center"),))
children_list_2.append(html.Div([html.H3("some graph:"), dcc.Graph(id="asd", figure={})], className="six columns"))
...

def render_page_content(pathname):
    if pathname == "/":
        return dbc.NavbarSimple(children=[html.H2('Particular info for HOMEPAGE')],color="grey",dark=True,)
    elif pathname == "/page-1":
        return children_list_1
    elif pathname == "/page-2":
        return children_list_2
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )