PyCafe - Dash - Dynamic Data Visualization Demo

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import json

from dash import Output, Input, callback
from dash.exceptions import PreventUpdate

import vizro.models as vm

import vizro.plotly.express as px
from vizro import Vizro
from vizro.models.types import capture
from vizro.tables import dash_ag_grid

df = px.data.iris()
graph = vm.Graph(id="graph", figure=px.box(df, x="petal_width", color="species"))


@capture("action")
def f(data):
    code_markdown = f"```\n{json.dumps(data, indent=2)}\n```"
    return graph(x=data["colId"]), code_markdown


@callback(Output("radio", "value"), Output("card", "children"), Input("grid", "cellClicked"))
def g(data):
    if data is None:
        raise PreventUpdate
    code_markdown = f"```\n{json.dumps(data, indent=2)}\n```"
    return data["colId"], code_markdown


page = vm.Page(
    title="Hi",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(id="grid", data_frame=df),
            # actions=[vm.Action(function=f(), inputs=["grid.cellClicked"], outputs=["graph.figure", "card.children"])],
            # actions=[
            #     vm.Action(function=g(), inputs=["grid.cellClicked"], outputs=["radio.value", "card.children"]),
            # ],
        ),
        graph,
        vm.Card(id="card", text="Click on a cell on the grid and the box plot will show that column"),
    ],
    controls=[
        vm.Parameter(targets=["graph.x"], selector=vm.RadioItems(id="radio", options=list(df.columns[:4]))),
        vm.Filter(column="species"),
    ],
)
dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()
Py.Cafe

parameter-interaction

Dynamic Data Visualization Demo - Vizro
