PyCafe - Vizro - Iris Species Visualization with Vizro

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.

import vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm
from typing import Literal, Optional
from dash import Input, Output, State, callback, html, dcc
import dash_bootstrap_components as dbc

df = px.data.iris()

class CustomDashboard(vm.Dashboard):
    """Custom implementation of `Dashboard`."""

    type: Literal["custom_dashboard"] = "custom_dashboard"

    def _make_page_layout(self, *args, **kwargs):
        modal_with_button = html.Div(
            [
                dbc.Button("+ Add Entry", color="primary", id="open", n_clicks=0),
                dbc.Modal(
                    [
                        dbc.ModalHeader(dbc.ModalTitle("New Entry")),
                        dbc.ModalBody(
                            [
                                vm.Dropdown(
                                    options=df["species"].unique(), 
                                    title="species *", 
                                    multi=False, 
                                    id="vm_id"
                                    ).build(),
                            ],
                        ),
                        dbc.ModalFooter(
                            [
                                dbc.Button("Submit"),
                                dbc.Button("Cancel", id="close", className="ms-auto", n_clicks=0),
                            ]
                        ),
                    ],
                    id="modal",
                    is_open=False,
                ),
            ]
        )

        super_build_obj = super()._make_page_layout(*args, **kwargs)
        super_build_obj["settings"].children = [
            dbc.Button("↓ Export", color="secondary"),
            modal_with_button,
            super_build_obj["settings"].children,
        ]
        return super_build_obj

dummy_page = vm.Page(
    title="Vizro on PyCafe",
    layout=vm.Grid(grid=[[0, 1], [2, 2], [2, 2], [3, 3], [3, 3]], row_min_height="140px"),
    components=[
        vm.Card(
            text="""
                ### What is Vizro?
                An open-source toolkit for creating modular data visualization applications.
                
                Rapidly self-serve the assembly of customized dashboards in minutes - without the need for advanced coding or design experience - to create flexible and scalable, Python-enabled data visualization applications."""
        ),
        vm.Card(
            text="""
                ### Github

                Checkout Vizro's GitHub page for further information and release notes. Contributions are always welcome!""",
            href="https://github.com/mckinsey/vizro",
        ),
        vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[vm.Filter(column="species"), vm.Filter(column="petal_length"), vm.Filter(column="sepal_width")],
)

page2 = vm.Page(
    title="page2",
    components=[
        vm.Card(
            text="""
                ### What is Vizro?
                An open-source toolkit for creating modular data visualization applications.
                
                Rapidly self-serve the assembly of customized dashboards in minutes - without the need for advanced coding or design experience - to create flexible and scalable, Python-enabled data visualization applications."""
        ),
        vm.Card(
            text="""
                ### Github

                Checkout Vizro's GitHub page for further information and release notes. Contributions are always welcome!""",
            href="https://github.com/mckinsey/vizro",
        ),
    ],
)

dashboard = CustomDashboard(
    pages=[dummy_page, page2],
    theme="vizro_light",
    title="Dummy Dashboard",
)


@callback(
    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open


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

vizro-iris-visualization-0

Iris Species Visualization with Vizro
