Is it possible to be able to click on a dbc.progress bar to redirect to another page using dash bootstrap

Dash Python
1

Hello everyone,

I’m creating a dashboard that has numerous progress bars on them using the dbc.progress dash bootstrap components.
I would like to know if it is possible to be able to click on this progress bar component, which gets redirected to another page using the @app.callbacks. If not is there a way to do this with Javascript function.

dbc.Col(html.Div(dbc.Progress(“50%”, color=“warning”, value=50))),

            dbc.Col(html.Div(dbc.Progress([
                dbc.Progress(id="progressBar", value=20, color='succes', bar=True),
                dbc.Progress(value=20, color='warning', bar=True),
                dbc.Progress(value=20, color='danger', bar=True),
            ], multi=True))),
2

You could listen for mouse events using the EventListener component. Here is a small example with a data table,

import dash_html_components as html
import dash_table
import pandas as pd
from dash import Dash
from dash.dependencies import Output, Input
from dash_extensions import EventListener

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
listen_prop = "srcElement.innerText"

app = Dash()
app.layout = html.Div([
    # The EventListener components listens to events from children (or document, if no children are specified).
    EventListener(id="el", events=[{"event": "click", "props": [listen_prop]}], children=[
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
        )
    ]),
    # Containers for logging.
    html.Div(id="event"), html.Div(id="n_events"),
])


@app.callback(Output("event", "children"), Input("el", "event"), prevent_initial_call=True)
def log_event(event):
    return event[listen_prop]


if __name__ == '__main__':
    app.run_server(port=7777)

Peek 2021-09-21 17-33

Depending on your need, you might need to listen to a different prop. The component is available in dash-extensions==0.0.61rc3. I expect to push it to non-rc relatively soon.

3

Thank you so much @Emil for taking the time to respond back. This is helpful and I will start looking into eventListener with dash components. :slight_smile: