PyCafe - Vizro - kpi-card-highlight

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
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.figures import kpi_card  
import vizro.actions as va

df = px.data.iris()

page = vm.Page(
    title="KPI card",
    layout=vm.Flex(direction="column"),  
    components=[
        vm.Container(
            layout=vm.Flex(direction="row"),
            components=[vm.Figure(
                figure=kpi_card(
                    data_frame=df,
                    value_column="species",
                    agg_func="nunique",
                ),
                actions=va.set_control(control="filter", value="setosa")
            ),
            vm.Figure(
                figure=kpi_card(
                    data_frame=df,
                    value_column="species",
                    agg_func="nunique",
                    
                ),
                actions=va.set_control(control="filter", value="versicolor")
            ),
            vm.Figure(
                figure=kpi_card(
                    data_frame=df,
                    value_column="species",
                    agg_func="nunique",
                ),
                actions=va.set_control(control="filter", value="virginica")
            ),]
        ),
        vm.Container(
            components=[vm.Graph(figure=px.scatter(df, x="sepal_length", y="sepal_width"))],
            controls=[vm.Filter(id="filter", column="species", selector=vm.RadioItems())],
        )
    ],
)

# Could do with a custom kpi card where you can change class name inside it conditionally, but then
# it doesn't generalise well to vm.Card. So can't do with Parameter.
# Want it to work when change page and go back again so must be associated with controls and not 
# done as actions attached to Figure which won't execute on page load.
# So either append another action into vm.Filter (haven't yet fully resolved how this should work but 
# it's possible outside pycafe) or do as a standalone callback (could be clientside)
# triggered when filter value changes.

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