Py.Cafe

huong-li-nguyen/

vizro-cross-highlight-source

Cross-filter Visualization Tool

DocsPricing
  • assets/
  • yaml_version/
  • app.py
  • charts.py
  • data.yaml
  • 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import vizro.plotly.express as px
import vizro.models as vm
import vizro.actions as va
from vizro.models.types import capture
from vizro import Vizro
from vizro.tables import dash_ag_grid

SELECTED_COUNTRIES = [
    "Singapore",
    "Malaysia",
    "Thailand",
    "Indonesia",
    "Philippines",
]

gapminder = px.data.gapminder().query("country.isin(@SELECTED_COUNTRIES)")


@capture("graph")
def highlighted_box(data_frame, highlight_country=None):
    fig = px.box(data_frame, x="lifeExp", y="country")
    for trace in fig.data:
        trace.opacity = 0.3

    if highlight_country is not None:
        df_highlight = data_frame[data_frame["country"] == highlight_country]
        fig_highlight = px.box(df_highlight, x="lifeExp", y="country", color="country")

        for trace in fig_highlight.data:
            trace.opacity = 1.0
            fig.add_trace(trace)

    return fig


page = vm.Page(
    title="Cross-highlighting source",
    components=[
        vm.Graph(
            id="box_chart",
            figure=highlighted_box(data_frame=gapminder),
            header="💡 Click on a bar to use that bar's country to filter tablet",
            actions=[
                va.set_control(control="country_filter", value="y"),
                va.set_control(control="highlight_parameter", value="y"),
            ],
        ),
        vm.AgGrid(id="gapminder_table", figure=dash_ag_grid(data_frame=gapminder)),
    ],
    controls=[
        vm.Filter(id="country_filter", column="country", targets=["gapminder_table"], 
      #  visible=False
        ),
        vm.Parameter(
            id="highlight_parameter",
            targets=["box_chart.highlight_country"],
            selector=vm.Dropdown(multi=False, options=SELECTED_COUNTRIES),
           
           # visible=False,
        ),
    ],
)

dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()