The main app for a Jupyter Dash dahboard

agile-dash-app.py

# instantiate the app and set the bootstrap theme
app = JupyterDash(__name__, external_stylesheets=[dbc.themes.SOLAR])

# layout the app
app.layout = html.Div([
            html.Br(),
            # first row
            dbc.Row([
                # title left
                dbc.Col(
                html.H3('Project Characteristics', 
                        style={'text-align': 'center'}
                        ),
                width={"size": 4, "order": 1, "offset": 1},
                ),
                # title right
                dbc.Col(
                html.H2('The Scales of Agile', 
                        style={'text-align': 'center'}
                        ),
                width={"size": 4, "order": 2, "offset": 0},
                ),
            ]),
            # second row
            dbc.Row([
                # left side
                dbc.Col(
                html.Div(sliders),
                width={"size": 4, "order": 1, "offset": 1},
                    ), 
                # right side
                dbc.Col(
                html.Div(gauge),
                width={"size": 4, "order": 2, "offset": 0},
                    ),
                ]),
            ])
# setup the interactivity
@app.callback(
    Output('agile-gauge', 'value'),
    Input('indy_over_tools', 'value'),
    Input('software_over_docs', 'value'),
    Input('collab_over_negotiation', 'value'),
    Input('change_over_plans', 'value')
    )

def update_output(indy_over_tools, 
                  software_over_docs, 
                  collab_over_negotiation,
                  change_over_plans):
    """Add the slider values up"""
    return  (indy_over_tools +
             software_over_docs +
             collab_over_negotiation +
             change_over_plans)

# fire up the dashboard  
app.run_server(debug=True)