What is Vizro?
Latest version: vizro==0.1.46
Docs | GitHub | Introductory video
Hi all! It’s time for another update on Vizro, a high-level framework built on top of Dash for quick and easy creation of beautiful multi-page dashboards.
If you haven’t seen Vizro before, here’s a simple example app.
from vizro import Vizro
import vizro.plotly.express as px
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])
app = Vizro().build(dashboard)
if __name__ == "__main__":
app.run()
As ever, any feedback, questions, bug reports, etc. very gratefully received! Just post on these forums or raise an issue on our repo, and @li.nguyen, @maxschulz-COL, @petar-pejovic and I will be happy to help.
BI functionality
We’ve built in a lot more Tableau/PowerBI-style functionality such as cross-filtering and cross-highlighting. It only takes a few lines of code to configure some quite complex apps. This uses our own actions system that is built on top of Dash callbacks and designed to make writing interactive functionality easier.
Here’s an example “hosted” (actually running in your browser using WASM) on our favourite PyCafe.
import vizro.actions as va
import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid
tips = px.data.tips()
page = vm.Page(
title="Cross-filter between containers",
components=[
vm.Container(
components=[
vm.AgGrid(
title="Click on a row to use that row's sex to filter graph",
figure=dash_ag_grid(tips),
actions=va.set_control(control="sex_filter", value="sex"),
)
],
variant="filled",
),
vm.Container(
components=[vm.Graph(figure=px.histogram(tips, x="tip"))],
controls=[vm.Filter(id="sex_filter", column="sex")],
variant="filled",
),
],
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
Vizro-MCP
Model Context Protocols are all the rage these days as the leading standard for connecting AI applications to custom tooling. We now have our very own Vizro-MCP server that can create amazing dashboards just from text prompts. It can be pretty mind-blowing what you can build in just a few minutes so have a go and let us know what you think!
Actions
We’ve completely rewritten our actions engine. It’s now much easier to write your own actions and use our built-in ones. Best of all, the new actions system is fully compatible with Dash callbacks so you can also just write pure Dash callbacks in your Vizro app if you’d prefer!
Here’s another simple example. Behind the scenes there’s a Dash callback there, but it’s much simpler to write an action here.
from datetime import datetime
import vizro.models as vm
from vizro import Vizro
from vizro.models.types import capture
@capture("action")
def update_card():
day = datetime.now().strftime("%A")
return f"Today is {day}"
page = vm.Page(
title="What day is it today?",
layout=vm.Flex(),
components=[
vm.Button(
actions=vm.Action(function=update_card(), outputs="time_card"),
icon="Calendar Today",
description="Click to find out what day of the week it is"
),
vm.Card(id="time_card", text="Press the button above"),
],
)
dashboard = vm.Dashboard(pages=[page], theme="vizro_light")
Vizro().build(dashboard).run()
New components and stylings
We now have many more bells and whistles, including styled containers, collapsible containers, flex layouts and tooltips. This is all based on Dash Bootstrap components, but the user API is higher-level, e.g. the above example’s vm.Button can easily include icons, styling variants and tooltips.
Bootstrap-native
As well as having our own open-source Vizro Bootstrap theme that you can use in any Dash app, you can now use any Bootstrap theme inside a Vizro app. This works exactly like it would for a Dash app using external_stylesheets. Here’s what the above example app looks like with the Minty theme. Thanks to @AnnMarieW for her inspiration and help with this project, and massive credit to @li.nguyen for making it a reality!
