I am building a dashboard using plotly dash. I am using Dash-bootsrap-components as well as bootstrap.min.css.
The template I am using is this from dash-bootstrap-components
Below I have pasted my code , kindly bare with the formatting, while I copy paste from my IDE to stackoverflow, somehow it gets misarranged
CODE :
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"background-color": "#f8f9fa",
"position": "fixed",
"color":"#000",
}
# 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("Plate", className="display-4"),
html.Hr(),
html.P(
"A simple dashboard", className="lead"
),
dbc.Nav(
[
dbc.NavLink("Dashboard", href="/dashboard", id="page-1-link"),
dbc.NavLink("Analytics", href="/page-2", id="page-2-link"),
dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
html.Hr(),
dbc.NavLink("Logout", href="/logout", id="page-4-link"),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
content = html.Div(id='page-content' ,style=CONTENT_STYLE)
app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
app.config.suppress_callback_exceptions = True
# this callback uses the current pathname to set the active state of the
# corresponding nav link to true, allowing users to tell see page they are on
@app.callback(
[Output(f"page-{i}-link", "active") for i in range(1, 4)],
[Input("url", "pathname")],
)
def toggle_active_links(pathname):
if pathname == "/" or pathname == "/dashboard":
# Treat page 1 as the homepage / index
return True, False, False
return [pathname == f"/page-{i}" for i in range(1, 4)]
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
if pathname in ["/", "/page-1", "/dashboard"]:
dashBoard = dbc.Container([
dbc.Row([dcc.DatePickerRange(
id='my-date-picker-range',
min_date_allowed=dt(minDate[0],minDate[1],minDate[2]),
max_date_allowed=dt(maxDate[0],maxDate[1],maxDate[2]),
initial_visible_month=dt(maxDate[0],maxDate[1],maxDate[2]),
start_date=dt(minDate[0],minDate[1],minDate[2]).date(),
end_date=dt(maxDate[0],maxDate[1],maxDate[2]).date()
),
html.Button(id="date-button" , children ="Analyze" , n_clicks = 0, className = 'btn btn-outline-success')
]),
html.Div([
html.Br(),
dbc.Row([
html.H4(['Category Overview'] , className = 'display-4'),
html.Br(),
html.Br(),
]),
dbc.Row([
dbc.Col([dcc.Graph(id='categoryPerformance',figure = dict(data=ge.returnCategoryOverviewBarGraph(df)[0],
layout=ge.returnCategoryOverviewBarGraph(df)[1]))
]),
dbc.Col([dcc.Graph(id='categoryPerformanceTrend' )])
]),
html.Hr(),
dbc.Row([
dbc.Col([
dcc.Dropdown(id = 'category-dd', options = category_items, value = 'Food')
]),
dbc.Col([
dcc.Slider(id = 'headCount' , min = 5, max=20 , step = 5 , value = 5, marks = {i: 'Count {}'.format(i) for i in range(5,21,5)})
], className = 'col-12 col-sm-6 col-md-8')
]),
dbc.Row([
html.Br(),
html.Br(),
dbc.Col([
dcc.Graph(id ='idvlCategoryPerformanceBest')
]),
dbc.Col([dcc.Graph(id ='idvlCategoryPerformanceLeast')
])
])
])
] )
return dashBoard
elif pathname == "/page-2":
return html.P("This is the content of page 2. Yay!")
elif pathname == "/page-3":
return html.P("Oh cool, this is page 3!")
elif pathname == "/logout":
return html.P("Log out!")
# 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..."),
]
)
SnapShot:
Desired O/p :
I would like to increase the size of my graph 2 , keeping the height intact, I would like to increase the width of the graph. Also I need to accommodate graph 1 and 2 in same row.
Components 3 and 4 worked perfectly , but using similar class names did not work out for 1 and 2.
Kindly help me out! Thanks !