### Create and Run a Basic Vizro Dashboard

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Installs Vizro, defines a simple dashboard with a page and a card component, and then runs the application. This is the entry point for creating interactive dashboards.

```python
from vizro import Vizro
import vizro.models as vm

dashboard = vm.Dashboard(
    pages=[
        vm.Page(
            title="My first page!",
            components=[vm.Card(text="Welcome to Vizro!")],
        )
    ]
)

Vizro().build(dashboard).run()
```

--------------------------------

### Dockerfile for Vizro Application Deployment

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/run-deploy

An example Dockerfile to build a container image for a Vizro application. It installs dependencies using `uv pip`, copies the application code, and starts the Gunicorn server.

```dockerfile
FROM ghcr.io/astral-sh/uv:python3.12-bookworm-slim  

WORKDIR /app

COPY requirements.txt .
RUN uv pip install --system -r requirements.txt
COPY . .


ENTRYPOINT ["gunicorn", "app:app", "--workers", "4", "--bind", "0.0.0.0:7860"]
```

--------------------------------

### Verify Vizro Installation and Version

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/install

Checks if Vizro is installed correctly by importing the library and printing its version number. This confirms that the installation was successful and provides the current version.

```python
import vizro

print(vizro.__version__)

```

--------------------------------

### Install Vizro using pip

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/install

Installs the Vizro package and its dependencies using the pip package installer. This is the standard method for installing Python packages.

```bash
pip install vizro

```

--------------------------------

### Install Vizro using uv

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/install

Installs the Vizro package using the uv package installer, a modern and fast alternative to pip. This command ensures Vizro is added to your Python environment.

```bash
uv pip install vizro

```

--------------------------------

### Implement Flex Layout in Vizro

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Sets up a flexible layout system for dynamic component arrangement in Vizro. It allows for responsive behavior and custom spacing between components.

```python
import vizro.models as vm

flex_layout = vm.Flex(
    direction="row",
)
                               

```

--------------------------------

### Upgrade Vizro using pip

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/install

Upgrades an existing Vizro installation to the latest version available on PyPI using pip. The '-U' flag ensures that the package is upgraded if it's already installed.

```bash
pip install -U vizro

```

--------------------------------

### Create a Vizro Card Component

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Creates a styled card component in Vizro for displaying text content, markdown, or HTML. It serves as a basic container for information.

```python
import vizro.models as vm

    card = vm.Card(
        text="Hello World!",
    )

```

--------------------------------

### Vizro Grid Layout Examples (Cheatsheet)

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/layouts

Provides a reference table of various Vizro `vm.Grid` layout configurations, illustrating different arrangements of components across rows and columns. This section serves as a quick guide for common grid structures.

```text
Grid needed | Grid | Code  
---|---|---
|  | `layout=vm.Grid(grid=[[0]])`  
|  | `layout=vm.Grid(grid=[[0],[1]])`  
|  | `layout=vm.Grid(grid=[[0,1]])`  
|  | `layout=vm.Grid(grid=[[0],[1],[2]])` or   
`layout=None`  
|  | `layout=vm.Grid(grid=[[0,1],[0,2]])`  
|  | `layout=vm.Grid(grid=[[0,0],[1,2]])`  
|  | `layout=vm.Grid(grid=[[0,1],[2,2]])`  
|  | `layout=vm.Grid(grid=[[0,1],[0,2],[0,3]])`  
|  | `layout=vm.Grid(grid=[[0,1],[2,3]])`  
|  | `layout=vm.Grid(grid=[[0,3],[1,3],[2,3]])`  
|  | `layout=vm.Grid(grid=[[0,0,0],[1,2,3]])`  
|  | `layout=vm.Grid(grid=[[0,1,2],[3,3,3]])`  

```

--------------------------------

### Vizro Button with Action

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Demonstrates how to create a Vizro button that triggers an action, updating a specified output element. This involves defining the button's text and the action's function and output targets. Requires Vizro library.

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

--------------------------------

### Full Vizro Dashboard Example with Multiple Pages

Source: https://vizro.readthedocs.io/en/stable/pages/tutorials/explore-components

A comprehensive example of building a Vizro dashboard with three distinct pages: 'Data' (displaying a DataFrame and export button), 'Summary' (using KPI cards and histograms), and 'Analysis' (featuring various Plotly charts). It includes necessary imports and initializes the Vizro application.

```python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import vizro.actions as va

tips = px.data.tips()

first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(tips),
            footer="""**Data Source:** Bryant, P. G. and Smith, M. (1995)
            Practical Data Analysis: Case Studies in Business Statistics.
            Homewood, IL: Richard D. Irwin Publishing.""",
        ),
        vm.Button(text="Export Data", actions=va.export_data()),
    ],
)

second_page = vm.Page(
    title="Summary",
    layout=vm.Grid(grid=[[0, 1, -1, -1], [2, 2, 2, 2], [2, 2, 2, 2], [2, 2, 2, 2]]),
    components=[
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="total_bill",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Bill",
            )
        ),
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="tip",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Tips",
            )
        ),
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="Total Bill ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="total_bill")),
                    ],
                ),
                vm.Container(
                    title="Total Tips ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="tip")),
                    ],
                ),
            ],
        ),
    ],
    controls=[
        vm.Filter(column="day"),
        vm.Filter(column="time", selector=vm.Checklist()),
        vm.Filter(column="size"),
    ],
)

third_page = vm.Page(
    title="Analysis",
    components=[
        vm.Graph(
            title="Where do we get more tips?",
            figure=px.bar(tips, y="tip", x="day"),
        ),
        vm.Graph(
            title="Is the average driven by a few outliers?",
            figure=px.violin(tips, y="tip", x="day", color="day", box=True),
        ),
        vm.Graph(
            title="Which group size is more profitable?",
            figure=px.density_heatmap(tips, x="day", y="size", z="tip", histfunc="avg", text_auto=".2f"),
        ),
    ],
)

dashboard = vm.Dashboard(pages=[first_page, second_page, third_page])
Vizro().build(dashboard).run()
```

--------------------------------

### Define a Basic Vizro Page with Graph and Filter

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Creates a single dashboard page with a scatter plot visualization and a filter control. This example demonstrates how to integrate Plotly Express graphs and add interactivity.

```python
import vizro.plotly.express as px
import vizro.models as vm

df = px.data.iris()

# Basic page with components
page = vm.Page(
    title="My first page!",
    # Add your components here
    components=[
        vm.Graph(
            figure=px.scatter(
                df,
                x="sepal_length",
                y="petal_width",
                color="species",
            ),
        ),
    ],
    # Add your controls here
    controls=[vm.Filter(column="species")]
)
```

--------------------------------

### Run Integration Tests with Hatch

Source: https://vizro.readthedocs.io/en/stable/pages/development/contributing

Executes integration tests, which include verifying that example applications in the `vizro-core/examples` directory function correctly. This ensures the core functionality and examples are working as expected.

```bash
hatch run test-integration
```

--------------------------------

### Vizro Tabs Example

Source: https://vizro.readthedocs.io/en/stable/pages/tutorials/explore-components

Demonstrates how to create a Vizro dashboard with multiple pages, including a page with tabbed views. This example shows how to use vm.Tabs to group vm.Container components, each containing a vm.Graph, allowing users to switch between different visualizations like histograms of total bill and tips.

```python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import vizro.actions as va

tips = px.data.tips()

first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(tips),
            footer="""**Data Source:** Bryant, P. G. and Smith, M. (1995).
            Practical Data Analysis: Case Studies in Business Statistics.
            Homewood, IL: Richard D. Irwin Publishing.""",
        ),
        vm.Button(text="Export Data", actions=va.export_data()),
    ],
)

second_page = vm.Page(
    title="Summary",
    components=[
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="total_bill",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Bill",
            )
        ),
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="tip",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Tips"
            )
        ),
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="Total Bill ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="total_bill")),
                    ],
                ),
                vm.Container(
                    title="Total Tips ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="tip")),
                    ],
                ),
            ],
        )
    ],
)

dashboard = vm.Dashboard(pages=[first_page, second_page])
Vizro().build(dashboard).run()

```

--------------------------------

### Running Vizro Examples with Hatch

Source: https://vizro.readthedocs.io/en/stable/pages/explanation/contributing

This Hatch command executes an example dashboard on port 8050. It includes hot-reloading functionality, which automatically updates the dashboard as you edit the code. This command is automatically run on startup in GitHub Codespaces.

```shell
hatch run example

```

--------------------------------

### Vizro Custom CSS Styling

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Provides examples of custom CSS to style Vizro dashboard components. It shows how to target elements using their IDs, including styling parent and child elements. These selectors can be applied via the `extra` argument for underlying Dash components.

```css
/* Apply styling to parent */
.card:has(#custom-card) {
    background-color: white;
}

/* Apply styling to child */
#custom-card p {
    color: black;
}
```

--------------------------------

### Create a Vizro Dashboard with Charts and Controls

Source: https://vizro.readthedocs.io/en/stable/pages/tutorials/quickstart-tutorial

This Python code defines a simple Vizro dashboard. It uses PyCafe's express module to create a scatter plot and a histogram from the iris dataset. The dashboard includes a page with these graphs and a filter control for the 'species' column. Finally, it builds and runs the dashboard.

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

df = px.data.iris()

page = vm.Page(
    title="My first dashboard",
    components=[
        vm.Graph(figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[
        vm.Filter(column="species"),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

```

--------------------------------

### Vizro Dashboard Configuration Example (Valid)

Source: https://vizro.readthedocs.io/en/stable/pages/explanation/schema

This JSON object represents a valid configuration for a Vizro dashboard according to the defined schema. It includes a dashboard title, a list of pages, and within each page, components and controls. This example demonstrates a functional dashboard setup.

```json
{
  "pages": [
    {
      "components": [
        {
          "figure": {
            "_target_": "scatter",
            "color": "species",
            "data_frame": "iris",
            "x": "sepal_length",
            "y": "petal_width"
          },
          "type": "graph"
        },
        {
          "figure": {
            "_target_": "histogram",
            "color": "species",
            "data_frame": "iris",
            "x": "sepal_width"
          },
          "type": "graph"
        }
      ],
      "controls": [
        {
          "column": "species",
          "type": "filter"
        }
      ],
      "title": "My first dashboard"
    }
  ]
}

```

--------------------------------

### Vizro Dashboard Setup with Custom Navigation

Source: https://vizro.readthedocs.io/en/stable/pages/tutorials/explore-components

This Python script sets up a complete Vizro dashboard, including multiple pages (Data, Summary, Analysis) with various components like AgGrid, KPI cards, charts, and controls. Crucially, it configures a custom navigation bar using NavBar and NavLink models, assigning icons and defining page associations for intuitive user navigation. The script concludes by building and running the Vizro dashboard.

```Python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import vizro.actions as va

tips = px.data.tips()


@capture("graph")
def bar_mean(data_frame, x, y):
    df_agg = data_frame.groupby(x).agg({y: "mean"}).reset_index()
    fig = px.bar(df_agg, x=x, y=y, labels={"tip": "Average Tip ($)"})
    fig.update_traces(width=0.6)
    return fig


first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(tips),
            footer="""**Data Source:** Bryant, P. G. and Smith, M (1995)
            Practical Data Analysis: Case Studies in Business Statistics.
            Homewood, IL: Richard D. Irwin Publishing.""",
        ),
        vm.Button(text="Export Data", actions=va.export_data()),
    ],
)

second_page = vm.Page(
    title="Summary",
    layout=vm.Grid(grid=[[0, 1, -1, -1], [2, 2, 2, 2], [2, 2, 2, 2], [2, 2, 2, 2]]),
    components=[
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="total_bill",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Bill",
            )
        ),
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="tip",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Tips"
            )
        ),
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="Total Bill ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="total_bill")),
                    ],
                ),
                vm.Container(
                    title="Total Tips ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="tip")),
                    ],
                ),
            ],
        )
    ],
    controls=[vm.Filter(column="day"), vm.Filter(column="time", selector=vm.Checklist()), vm.Filter(column="size")]
)

third_page = vm.Page(
    title="Analysis",
    layout=vm.Grid(grid=[[0, 1], [2, 2]]),
    components=[
        vm.Graph(
            id="bar",
            title="Where do we get more tips?",
            figure=bar_mean(tips, y="tip", x="day"),
        ),
        vm.Graph(
            id="violin",
            title="Is the average driven by a few outliers?",
            figure=px.violin(tips, y="tip", x="day", color="day", box=True),
        ),
        vm.Graph(
            id="heatmap",
            title="Which group size is more profitable?",
            figure=px.density_heatmap(tips, x="day", y="size", z="tip", histfunc="avg", text_auto="$.2f"),
        ),
    ],
    controls=[
        vm.Parameter(
            targets=["violin.x", "violin.color", "heatmap.x", "bar.x"],
            selector=vm.RadioItems(
                options=["day", "time", "sex", "smoker", "size"], value="day", title="Change x-axis inside charts:"
            ),
        ),
    ],
)

dashboard = vm.Dashboard(
    pages=[first_page, second_page, third_page],
    title="Tips Analysis Dashboard",
    navigation=vm.Navigation(
        nav_selector=vm.NavBar(
            items=[
                vm.NavLink(label="Data", pages=["Data"], icon="Database"),
                vm.NavLink(label="Charts", pages=["Summary", "Analysis"], icon="Bar Chart"),
            ]
        )
    ),
)
Vizro().build(dashboard).run()

```

--------------------------------

### Define Python Dependencies with requirements.txt

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/run-deploy

Create a `requirements.txt` file to list all necessary Python packages for your Vizro application. This file is essential for installing dependencies on the hosting server. Includes `vizro` and `gunicorn` for production.

```text
vizro
gunicorn
```

--------------------------------

### Create Multi-Page Dashboard in Vizro

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Defines multiple pages for a Vizro dashboard and creates a dashboard object with these pages. This allows for automatic navigation between pages.

```python
import vizro.models as vm

page_1 = vm.Page(
    title="Overview",
    components=[
        vm.Card(text="Test")
    ]
)

page_2 = vm.Page(
    title="Details",
    components=[
        vm.Card(text="Test")
    ]
)

page_3 = vm.Page(
    title="Summary",
    components=[
        vm.Text(text="Test")
    ]
)

dashboard = vm.Dashboard(title="My dashboard",pages=[page_1, page_2, page_3])
```

--------------------------------

### Create a Vizro Button Component

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Defines a simple interactive button component in Vizro. This button can be used to trigger actions or callbacks within the dashboard.

```python
import vizro.models as vm

button = vm.Button(
    text="Click me!",
)
```

--------------------------------

### Enable Data Export Action in Vizro

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Adds the export_data action function to a Button component to enable data downloading functionality within a Vizro dashboard.

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

```

--------------------------------

### Start Vizro App with Gunicorn

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/run-deploy

Command to start the Vizro application using Gunicorn, a production-ready WSGI HTTP server. This command is used to run your Dash app on the server.

```bash
gunicorn app:app --workers 4
```

--------------------------------

### Vizro RangeSlider Selector

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

A Vizro RangeSlider component for selecting a numerical range. This allows users to define both a minimum and maximum value within a given spectrum.

```python
selector=vm.RangeSlider()
```

--------------------------------

### Vizro Initialization

Source: https://vizro.readthedocs.io/en/stable/pages/API-reference/vizro

Initializes the Vizro application with provided keyword arguments. This constructor sets up the application's internal state.

```python
__init__(**kwargs)


```

--------------------------------

### Install Dependencies using pip

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/run-deploy

Command to install Python dependencies listed in the `requirements.txt` file. This is typically executed on the hosting server during the deployment process.

```bash
pip install -r requirements.txt
```

--------------------------------

### Create a Vizro Figure Component

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

A flexible component for displaying KPI cards or other custom figures generated by Vizro. It acts as a wrapper for various figure types.

```python
import vizro.models as vm
from vizro.figures import kpi_card

figure = vm.Figure(
    figure=kpi_card(
        data_frame=df,
        value_column="column_name",
    ),
)

```

--------------------------------

### Build and Run Vizro Dashboard with Multiple Pages

Source: https://vizro.readthedocs.io/en/stable/pages/tutorials/explore-components

This comprehensive Python script initializes a Vizro dashboard with three distinct pages: 'Data', 'Summary', and 'Analysis'. Each page is configured with specific components, layouts, and controls. The script then builds and runs the dashboard, making it accessible for viewing and interaction.

```python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
from vizro.models.types import capture
from vizro.figures import kpi_card
import vizro.actions as va

tips = px.data.tips()

first_page = vm.Page(
    title="Data",
    components=[
        vm.AgGrid(
            figure=dash_ag_grid(tips),
            footer="""**Data Source:** Bryant, P. G. and Smith, M (1995)
            Practical Data Analysis: Case Studies in Business Statistics.
            Homewood, IL: Richard D. Irwin Publishing.""",
        ),
        vm.Button(text="Export Data", actions=va.export_data()),
    ],
)

second_page = vm.Page(
    title="Summary",
    layout=vm.Grid(grid=[[0, 1, -1, -1], [2, 2, 2, 2], [2, 2, 2, 2], [2, 2, 2, 2]]),
    components=[
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="total_bill",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Bill",
            )
        ),
        vm.Figure(
            figure=kpi_card(
                data_frame=tips,
                value_column="tip",
                agg_func="mean",
                value_format="${value:.2f}",
                title="Average Tips"
            )
        ),
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="Total Bill ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="total_bill")),
                    ],
                ),
                vm.Container(
                    title="Total Tips ($)",
                    components=[
                        vm.Graph(figure=px.histogram(tips, x="tip")),
                    ],
                ),
            ],
        )
    ],
    controls=[vm.Filter(column="day"), vm.Filter(column="time", selector=vm.Checklist()), vm.Filter(column="size")]
)

third_page = vm.Page(
    title="Analysis",
    layout=vm.Grid(grid=[[0, 1], [2, 2]]),
    components=[
        vm.Graph(
            title="Where do we get more tips?",
            figure=px.bar(tips, y="tip", x="day"),
        ),
        vm.Graph(
            title="Is the average driven by a few outliers?",
            figure=px.violin(tips, y="tip", x="day", color="day", box=True),
        ),
        vm.Graph(
            title="Which group size is more profitable?",
            figure=px.density_heatmap(tips, x="day", y="size", z="tip", histfunc="avg", text_auto=".2f"),
        ),
    ],
)

dashboard = vm.Dashboard(pages=[first_page, second_page, third_page])
Vizro().build(dashboard).run()
```

--------------------------------

### Sync Dependencies with uv pip sync

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/run-deploy

Command to install dependencies specified in a `requirements.txt` file using `uv`. This is the corresponding installation command for `uv pip compile`.

```bash
uv pip sync requirements.txt
```

--------------------------------

### Implement Grid Layout in Vizro

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Defines a grid layout for arranging components in a Vizro dashboard. It supports precise positioning and responsive design by specifying the grid structure.

```python
import vizro.models as vm

grid_layout = vm.Grid(
    grid=[
        [0, 1, -1],
        [2, 2, 2],
        [2, 2, 2],
        [2, 2, 2],
    ],
)
                               

```

--------------------------------

### Vizro Slider Selector

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

A Vizro Slider component for selecting numerical values within a defined range. It provides a visual way to adjust a single numerical input.

```python
selector=vm.Slider()
```

--------------------------------

### Full Vizro App Example with Runtime Inputs

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-actions

A complete Vizro application demonstrating an action triggered by a button, using runtime inputs from a switch component. It includes defining the custom action `current_time_text`, registering a `vm.Switch` component, and configuring a `vm.Button` to trigger the action. The action's output updates a `vm.Text` component. Requires `vizro`, `vizro.models`, and `datetime`.

```python
from datetime import datetime

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


@capture("action")
def current_time_text(use_24_hour_clock):
    time_format = "%H:%M:%S" if use_24_hour_clock else "%I:%M:%S %p"
    time = datetime.now().strftime(time_format)
    return f"The time is {time}"


vm.Page.add_type("components", vm.Switch)

page = vm.Page(
    title="Action triggered by button",
    layout=vm.Flex(),
    components=[
        vm.Switch(id="clock_switch", title="24-hour clock", value=True),
        vm.Button(
            actions=vm.Action(
                function=current_time_text(use_24_hour_clock="clock_switch"),
                outputs="time_text",
            ),
        ),
        vm.Text(id="time_text", text="Click the button"),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

```

--------------------------------

### Vizro DatePicker Selector (Single Date)

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

A Vizro DatePicker component configured to select a single date, not a range. Dates should be provided in 'yyyy-mm-dd' format or as datetime objects.

```python
selector=vm.DatePicker(
range=False
)
```

--------------------------------

### Vizro DatePicker Selector (Default)

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

A Vizro DatePicker component for selecting dates. By default, it supports date ranges. Dates should be provided in 'yyyy-mm-dd' format or as datetime objects.

```python
selector=vm.DatePicker()
```

--------------------------------

### Configure Column Sizing in AG Grid (Python)

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/table

Shows how to implement different column sizing strategies for Vizro's AG Grid using the 'columnSize' property. Options include 'responsiveSizeToFit', 'autoSize', 'sizeToFit', and 'None'. This example also demonstrates using controls to dynamically change the column sizing.

```python
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid

df = px.data.gapminder()

page = vm.Page(
    title="AG Grid with Column Sizing",
    components=[vm.AgGrid(id="ag-grid", figure=dash_ag_grid(data_frame=df, columnSize="responsiveSizeToFit"))],
    controls=[
        vm.Parameter(
            targets=["ag-grid.columnSize"],
            selector=vm.RadioItems(
                title="Select ColumnSize",
                options=[
                    {"value": "autoSize", "label": "autoSize"},
                    {"value": "responsiveSizeToFit", "label": "responsiveSizeToFit"},
                    {"value": "sizeToFit", "label": "sizeToFit"},
                    {"value": "NONE", "label": "None"},
                ],
                value="responsiveSizeToFit"
            ),
        )
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

```

--------------------------------

### Vizro Checklist Selector

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

A Vizro Checklist selector component, suitable for selecting multiple options from a discrete list of categories. This is often used in conjunction with Filters or Parameters.

```python
selector=vm.Checklist()
```

--------------------------------

### Getting Python Interpreter Path with Hatch

Source: https://vizro.readthedocs.io/en/stable/pages/explanation/contributing

This Hatch command displays the absolute path to the Python interpreter being used by Hatch for the Vizro project. This can be useful for debugging or understanding the environment setup.

```shell
hatch run pypath

```

--------------------------------

### Vizro Action with Dictionary Outputs

Source: https://vizro.readthedocs.io/en/stable/pages/tutorials/custom-actions-tutorial

This Python code snippet illustrates an alternative way to handle multiple outputs from a Vizro action by returning a dictionary. This approach labels each output with a string key, which then corresponds to keys in the `outputs` dictionary of the `vm.Action` model. This method enhances clarity, especially when dealing with numerous outputs, and removes the dependency on output order.

```python
@capture("action")
def update_cards(use_24_hour_clock, date_format):
    # ... (previous logic for time and date formatting)
    return {"time_output": f"🕰️ The time is {time}", "date_output": f"📅 The date is {date}"}

# ... (rest of the Vizro app setup)

vm.Action(
   function=update_cards(use_24_hour_clock="clock_switch", date_format="date_radio_items"),
   outputs={"time_output": "time_card", "date_output": "date_card"},
)

```

--------------------------------

### Serving Vizro Documentation Locally with Hatch

Source: https://vizro.readthedocs.io/en/stable/pages/explanation/contributing

This Hatch command builds and serves the Vizro documentation locally, with hot-reloading enabled for live updates as you edit. The documentation is also automatically built and previewable on Read The Docs for pull requests.

```shell
hatch run docs:serve

```

--------------------------------

### Configure Custom Navigation in Vizro

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Sets up custom navigation for a Vizro dashboard using NavBar and NavLink models. This allows for grouping pages and customizing their appearance in the navigation menu.

```python
import vizro.models as vm

navigation = vm.Navigation(
    pages=[page_1, page_2, page_3],
    nav_selector=vm.NavBar(
        items=[
            vm.NavLink(
                icon="home",
                label="Home",
                pages=["Overview"],
            ),
            vm.NavLink(
                icon="Library Add",
                label="Features",
                pages={
                    "Components": ["Text"],
                    "Controls": ["Details"]
                },
            ),
        ]
    )
)
```

--------------------------------

### Vizro Dropdown Selector

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

A basic Vizro Dropdown selector component used for categorical selections. It can be integrated within Filters or Parameters to allow users to choose from a list of options.

```python
selector=vm.Dropdown()
```

--------------------------------

### Vizro Dashboard and Page Configuration

Source: https://vizro.readthedocs.io/en/stable/pages/tutorials/custom-actions-tutorial

Sets up the Vizro dashboard and page, including defining UI components like Switches, RadioItems, Buttons, and Cards. It demonstrates how to add custom component types and structure the layout using Flex containers. The page title is set, and components are added to the layout.

```Python
from vizro import Vizro
import vizro.models as vm

vm.Container.add_type("components", vm.Switch)
vm.Container.add_type("components", vm.RadioItems)

page = vm.Page(
    title="My first action",
    layout=vm.Flex(),
    components=[
        vm.Container(
            layout=vm.Flex(direction="row"),
            variant="outlined",
            components=[
                vm.Switch(id="clock_switch", title="24-hour clock", value=True),
                vm.RadioItems(id="date_radio_items", options=["DD/MM/YY", "MM/DD/YY"]),
                vm.Button(
                    id="submit_button",
                    actions=[
                        vm.Action(
                            function=update_cards(use_24_hour_clock="clock_switch", date_format="date_radio_items"),
                            outputs=["time_card", "date_card", "weather_card"],
                        ),
                        vm.Action(function=fetch_weather(), outputs="weather_card"),
                    ],
                ),
            ],
        ),
        vm.Card(id="time_card", text="Click the button"),
        vm.Card(id="date_card", text="Click the button"),
        vm.Card(id="weather_card", text="Click the button"),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
```

--------------------------------

### Create a Vizro Text Component

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Renders markdown text within a Vizro dashboard, supporting formatting, links, and embedded content. This component is used for displaying textual information.

```python
import vizro.models as vm

text = vm.Text(
    text="Markdown text content",
)

```

--------------------------------

### Full custom Vizro component implementation and app example

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/custom-components

This comprehensive example provides the complete Python code for a custom `Rating` component, including its type definition, build method, and integration into a Vizro dashboard. It demonstrates how to use the custom component within a `vm.Page` and run the application.

```python
from typing import Literal

from dash import html
import dash_mantine_components as dmc
import vizro.models as vm
from vizro import Vizro


class Rating(vm.VizroBaseModel):
    type: Literal["rating"] = "rating"
    title: str 
    color: str = "#00b4ff"

    def build(self):
        return html.Div( 
            [
                html.Legend(id=f"{self.id}_title", children=self.title, className="form-label"),
                dmc.Rating(id=self.id, color=self.color),
            ]
        )


vm.Page.add_type("components", Rating)  

page = vm.Page(
    title="New rating component",
    layout=vm.Flex(),
    components=[
        Rating(title="Rate the last movie you watched"),  
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

```

--------------------------------

### Flex Layout Basic Example in Vizro

Source: https://vizro.readthedocs.io/en/stable/pages/user-guides/layouts

This Python code illustrates a basic Flex layout in Vizro. It uses `vm.Flex()` for the page layout, allowing components to arrange dynamically without being squeezed. The example includes a simple violin plot generated with `plotly.express` and repeated multiple times to showcase the Flex behavior.

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

tips = px.data.tips()

page = vm.Page(
    title="Flex - basic example",
    layout=vm.Flex(),
    components=[vm.Graph(figure=px.violin(tips, y="tip", x="day", color="day")) for i in range(5)],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
```

--------------------------------

### Create a Vizro Container Component

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Groups multiple Vizro components together, allowing for shared layout, controls, and styling. It can also be used within tabs to organize content.

```python
import vizro.models as vm

container = vm.Container(
    title="Analysis Section",
    components=[
        vm.Graph(figure=chart),
        vm.Card(text="Summary")
    ]
)

# Using Container within Tabs
tabs = vm.Tabs(
    tabs=[
        vm.Container(
                title="Overview",
                components=[vm.Card(text="Overview")],
        ),
        vm.Container(
                title="Details",
                components=[vm.Card(text="Details")],
        )
    ]
)

```

--------------------------------

### Create a Vizro Graph Component

Source: https://vizro.readthedocs.io/en/stable/pages/cheatsheet/cheatsheet

Defines a Vizro Graph component to display an interactive Plotly Express scatter plot. This component allows for data visualization with filtering capabilities.

```python
import vizro.plotly.express as px
import vizro.models as vm

df = px.data.iris()

graph = vm.Graph(
    figure=px.scatter(
        df,
        x="sepal_length",
        y="petal_width",
        color="species",
    )
)
```