# 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.
from pydantic import BeforeValidator, conlist
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
import dash_bootstrap_components as dbc
from typing import Annotated, Optional, Literal
from vizro.models._models_utils import check_captured_callable_model
from vizro.models.types import ComponentType
iris = px.data.iris()
class AccordionContent(vm.VizroBaseModel):
"""New custom component `Jumbotron`."""
type: Literal["accordion-with-content"] = "accordion-with-content"
components: conlist(Annotated[ComponentType, BeforeValidator(check_captured_callable_model)], min_length=1)
title: Optional[str] = None
def build(self):
return dbc.Accordion(
[dbc.AccordionItem([component.build() for component in self.components], title=self.title)]
)
vm.Page.add_type("components", AccordionContent)
page = vm.Page(
title="Page with subsections",
layout=vm.Layout(grid=[[0, 1]]),
components=[
AccordionContent(title="Show chart", components=[vm.Container(
title="Container I",
components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species")),
vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),]),
vm.Container(
title="Container II",
components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
),
],
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()