PyCafe - Vizro - control-group

assets/
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
53
54
55
56
57
58
59
60
61
62
63
64
from typing import List, Literal

from dash import html

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.models.types import ControlType

df_gapminder = px.data.gapminder()


class ControlGroup(vm.VizroBaseModel):
    """Container to group controls."""

    type: Literal["control_group"] = "control_group"
    title: str
    controls: list[ControlType] = []

    def build(self):
        return html.Div(
            [html.H4(self.title), html.Div([control.build() for control in self.controls], className="control-group")],
            id=self.id,
        )

vm.Page.add_type("controls", ControlGroup)

page1 = vm.Page(
    title="Relationship Analysis",
    components=[vm.Graph(id="scatter", figure=px.scatter(df_gapminder, x="gdpPercap", y="lifeExp", size="pop")),],
    controls=[
        ControlGroup(
            title="Group A",
            controls=[
                vm.Parameter(
                    targets=["scatter.x"],
                    selector=vm.RadioItems(
                        options=["lifeExp", "gdpPercap", "pop"], value="gdpPercap", title="Choose x-axis"
                    ),
                ),
                vm.Parameter(
                    targets=["scatter.y"],
                    selector=vm.RadioItems(
                        options=["lifeExp", "gdpPercap", "pop"], value="lifeExp", title="Choose y-axis"
                    ),
                ),
            ],
        ),
        ControlGroup(
            title="Group B",
            controls=[
                vm.Parameter(
                    targets=["scatter.size"],
                    selector=vm.Dropdown(
                        options=["lifeExp", "gdpPercap", "pop"], multi=False, value="pop", title="Choose bubble size"
                    ),
                )
            ],
        ),
    ],
)

dashboard = vm.Dashboard(pages=[page1])
Vizro().build(dashboard).run()