PyCafe - Vizro - Trying a new Navlink

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
# 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 vizro.figures import kpi_card, kpi_card_reference


from typing import Literal

import dash_bootstrap_components as dbc
from dash import dcc, get_relative_path


from vizro.models import VizroBaseModel


class NewCard(vm.Card):
    # type: Literal["card"] = "card"

    def build(self):
        text = dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False)
        card_content = (
            dbc.NavLink(
                children=text,
                href=get_relative_path(self.href) if self.href.startswith("/") else self.href,
                target="_top"
            )
            if self.href
            else text
        )

        card_class = "card-nav" if self.href else ""
        return dbc.Card(children=card_content, className=card_class)





df = px.data.iris()

page = vm.Page(
    title="Vizro on PyCafe",
    layout=vm.Layout(
        grid=[[0, 0, 0, 1, 2, 3], [4, 4, 4, 4, 4, 4], [4, 4, 4, 4, 4, 4], [5, 5, 5, 5, 5, 5], [5, 5, 5, 5, 5, 5]],
        row_min_height="175px",
    ),
    components=[
        vm.Card(
            text="""
        ### What is Vizro?

        Vizro is a 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.

        """
        ),
        NewCard(
            text="""
                ### Github

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

                Visit the documentation for codes examples, tutorials and API reference.
            """,
            href="https://vizro.readthedocs.io/",
        ),
        NewCard(
            text="""
                ### Nav Link

                Click this for page 2.
            """,
            href="/page2",
        ),
        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", selector=vm.Dropdown(value=["ALL"])),
        vm.Filter(column="petal_length"),
        vm.Filter(column="sepal_width"),
    ],
)

page2 = vm.Page(
    title = "Page2",
    components = [vm.Graph(id="hist_chart2", figure=px.histogram(df, x="sepal_width", color="species"))]
)

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

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

poc-change-navlink

Trying a new Navlink
