Py.Cafe

"""Vizro Example Gallery"""

from typing import Literal, Optional

import dash
from dash import get_asset_url
import dash_bootstrap_components as dbc
import flask_talisman
import vizro.models as vm
from dash import dcc, html
from vizro import Vizro
from werkzeug.middleware.proxy_fix import ProxyFix

try:
    from pydantic.v1 import Field
except ImportError:  # pragma: no cov
    from pydantic import Field


class Image(vm.VizroBaseModel):
    type: Literal["image"] = "image"
    src: str
    href: Optional[str] = None

    def build(self):
        if self.href:
            return html.A(html.Img(id=self.id, src=dash.get_asset_url(self.src), className="image"), href=self.href, target="_blank")
        else:
            return html.Img(id=self.id, src=dash.get_asset_url(self.src), className="image")


class Markdown(vm.VizroBaseModel):
    """Markdown component."""

    type: Literal["markdown"] = "markdown"
    text: str = Field(
        ...,
        description="Markdown string to create card title/text that should adhere to the CommonMark Spec.",
    )
    classname: str = ""

    def build(self):
        """Returns a markdown component with an optional classname."""
        return dcc.Markdown(
            id=self.id,
            children=self.text,
            dangerously_allow_html=False,
            className=self.classname,
        )


class FlexContainer(vm.Container):
    """Custom flex `Container`."""

    type: Literal["flex_container"] = "flex_container"
    title: str = None  # Title exists in vm.Container but we don't want to use it here.

    def build(self):
        """Returns a flex container."""
        return html.Div(
            id=self.id,
            children=[component.build() for component in self.components],
            className="flex-container",
        )


vm.Page.add_type("components", FlexContainer)
vm.Container.add_type("components", Image)
FlexContainer.add_type("components", Markdown)

## PAGE
page = vm.Page(
    title="A toolkit for creating modular data visualization applications",
    components=[
        FlexContainer(
            components=[
                Markdown(
                    text="""
                        ![](assets/images/general/VizroLogo_Full_colour_White_transparentBG.svg#logo-img)
                        # Welcome to Vizro for McKinsey on Brix
                        ### Find a set of useful links, docs, and demos here
                        
                         
                        
                        #### What is Vizro? It's an open source Python framework for creating modular data visualization applications.
                        """,
                    classname="info-text",
                ),
                vm.Container(
                    title="",
                    layout=vm.Layout(grid=[[0, 1], [0, 2], [0, 3], [4, 5]], col_gap="80px"),
                    components=[
                        Image(src="images/general/vizro_spash_teaser.png"),
                        vm.Card(
                        text="""
                        ### Public Vizro resources

                        * [Vizro on GitHub](https://github.com/mckinsey/vizro/)
                        * [Vizro documentation](https://vizro.readthedocs.io/en/stable/)
                        * [Vizro examples gallery](https://vizro.mckinsey.com/))
                        * [Vizro Visual Vocabulary](https://vizro-demo-visual-vocabulary.hf.space/)
                        """,
                    ),
                    vm.Card(
                        text="""
                        ### McKinsey-internal resources
                        """,
                        
                    ),
                    vm.Card(
                        text="""
                        ### More about Vizro
                        * [Benefits of Vizro](https://github.com/mckinsey/vizro?tab=readme-ov-file#why-use-vizro)
                        * [Learn about Vizro-MCP](https://github.com/mckinsey/vizro/blob/main/vizro-mcp/README.md)
                        """,
                        
                    ),
                    vm.Card(
                        text="""
                        ### McKinsey-internal documentation about Vizro
                        How to guides and internal gallery
                            """,
                            href="TBD",
                
                    ),
                    vm.Card(
                        text="""
                        ### Inspiring Vizro posts on Brix
                        """,
                
                    ),
                    ],
                ),
                Markdown(
                    text="""
                    ## Introducing our visual vocabulary: A collection of beautiful charts 
                    
                    #### learn when to use them and get sample code to create them in Plotly and Vizro
                    """,
                    classname="info-text",
                ),
                vm.Container(
                    title="",
                    components=[
                        Image(src="images/general/vizro_spash_teaser.png", href="https://huggingface.co/spaces/vizro/demo-visual-vocabulary"),
                    ],
                ),
            ]
        ),
    ],
)

dashboard = vm.Dashboard(pages=[page], title="Vizro")
app = Vizro(assets_folder="./assets").build(dashboard)
app.dash.layout.children.append(
    html.Div(
        [
            dbc.NavLink("Contact us on Slack", href="https://github.com/mckinsey/vizro/issues"),
            dbc.NavLink("Vizro on GitHub", href="https://github.com/mckinsey/vizro"),
            dbc.NavLink("Vizro documentation", href="https://vizro.readthedocs.io/en/stable/"),
        ],
        className="anchor-container",
    )
)
server = app.dash.server

server.wsgi_app = ProxyFix(
    server.wsgi_app, x_for=1, x_proto=1, x_host=1, x_prefix=1, x_port=1
)



if __name__ == "__main__":
    app.run(host="0.0.0.0", port=7065)