Vizro - Cheatsheet

import vizro.models as vm
import vizro.actions as va

# Use action in a Button component
vm.Button(
     text="Export Data",
     actions=va.export_data()
)

import vizro.models as vm
import vizro.plotly.express as px
import vizro.actions as va
from vizro.tables import dash_ag_grid

df = px.data.iris()

page = vm.Page(
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(df),
            actions=va.set_control(control="filter_id", value="species"),
        ),
        vm.Graph(id="graph_id", figure=px.histogram(df, x="sepal_length")),
    ],
    controls=[
        vm.Filter(id="filter_id", column="species", targets=["graph_id"])
    ],
)

import vizro.models as vm
from dash_ag_grid import AgGrid
from vizro.models.types import capture


df = px.data.gapminder()

@capture("ag_grid")
def my_custom_aggrid(chosen_columns: list[str], data_frame=None):
    defaults = {
        "className": "ag-theme-quartz-dark ag-theme-vizro",
        "defaultColDef": {
            "resizable": True,
            "sortable": True,
            "flex": 1,
            "minWidth": 70,
        },
        "style": {"height": "100%"},
    }
    return AgGrid(
        columnDefs=[{"field": col} for col in chosen_columns],
        rowData=data_frame.to_dict("records"),
        **defaults,
    )

# Use in AgGrid component
vm.AgGrid(
    figure=custom_table(
        data_frame=df,
        chosen_columns=["country", "continent", "lifeExp", "pop", "gdpPercap"]
    )
)

import vizro.models as vm
from vizro.models.types import capture
import pandas as pd
import dash_bootstrap_components as dbc
from dash import dcc, html

df = pd.DataFrame({"text": text * 2})

@capture("figure")
def multiple_cards(
        data_frame: pd.DataFrame, n_rows: int = 1
) -> html.Div:
    texts = data_frame.head(n_rows)["text"]
    return html.Div(
        children=[
            dbc.Card(dcc.Markdown(f"### Card #{i}\n{text}"))
            for i, text
            in enumerate(texts, 1)
        ],
        className="multiple-cards-container",
    )

# Use in Figure component
vm.Figure(
    id="my-figure",
    figure=multiple_cards(data_frame=df)
)

from typing import Literal
from dash import html
import vizro.models as vm

class Jumbotron(vm.VizroBaseModel):
    type: Literal["jumbotron"] = "jumbotron"
    title: str
    subtitle: str
    text: str

    def build(self):
        return html.Div(
            [
                html.H2(self.title),
                html.H3(self.subtitle),
                html.P(self.text),
            ]
        )

# Register the component
vm.Page.add_type("components", Jumbotron)

import vizro.models as vm
from vizro.models.types import capture
import vizro.plotly.express as px

df = px.data.iris()

@capture("graph")
def scatter_with_line(data_frame, x, y, color=None, size=None, hline=None):
    fig = px.scatter(
        data_frame=data_frame,
        x=x,
        y=y,
        color=color,
        size=size,
    )
    fig.add_hline(y=hline, line_color="gray")
    return fig

# Use in Graph component
vm.Graph(figure=custom_chart(data_frame=df))

import vizro.models as vm<
from vizro.models.types import capture

@capture("action")
def update_card_text(my_dropdown_value):
    return f"You selected species **{my_dropdown_value}**"

# Use with Action
vm.Button(
     text="Export Data",
     actions=vm.Action(
         function=update_card_text("my_dropdown"),
         outputs=["my_card"],
     ),
)