PyCafe - Vizro - Interactive Guide to Vizro Components

assets/
yaml_version/
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
"""Test app"""

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

iris = px.data.iris()

page_home = vm.Page(
    title="Homepage",
    layout=vm.Layout(grid=[[0, 1], [2, 3]], row_gap="16px", col_gap="24px"),
    components=[
        vm.Card(
            text="""

                ### Components

                Main components of Vizro include **charts**, **tables**, **cards**, **figures**, **containers**,
                **buttons** and **tabs**.
                """,
            href="/page-one",
        ),
        vm.Card(
            text="""
                ### Controls

                Vizro has two different control types **Filter** and **Parameter**.

                You can use any pre-existing selector inside the **Filter** or **Parameter**:

                * Dropdown
                * Checklist
                * RadioItems
                * RangeSlider
                * Slider
                * DatePicker
                """,
            href="/page-two",
        ),
        vm.Card(
            text="""
                ### Actions

                Standard predefined actions are made available including **export data** and **filter interactions**.
                """,
            href="/page-one",
        ),
        vm.Card(
            text="""
                ### Extensions

                Vizro enables customization of **plotly express** and **graph object charts** as well as
                creating custom components based on Dash.
            """,
            href="/page-two",
        ),
    ],
)

page_one = vm.Page(
    title="Default",
    path="page-one",
    components=[vm.Graph(figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species"))],
    controls=[vm.Filter(column="species"), vm.Filter(column="petal_length"), vm.Filter(column="sepal_width")],
)

page_two = vm.Page(
    title="Styled containers",
    path="page-two",
    components=[
        vm.Container(
            title="Container - filled",
            components=[vm.Graph(figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species"))],
            variant="filled",
        ),
        vm.Container(
            title="Container - outlined",
            components=[vm.Graph(figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species"))],
            variant="outlined",
        ),
    ],
    controls=[vm.Filter(column="species"), vm.Filter(column="petal_length"), vm.Filter(column="sepal_width")],
)

dashboard = vm.Dashboard(pages=[page_home, page_one, page_two], title="Dashboard Title")


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

light-theme-change

Interactive Guide to Vizro Components
