What is Vizro?
Latest version: vizro==0.1.18
Live Demo | Docs | GitHub | Introductory video (thanks @adamschroeder!)
Hi all! It’s time for a long-overdue update on Vizro. In case you missed it, I previously introduced Vizro, a high-level framework built on top of Dash for quick and easy creation of beautiful multi-page dashboards. Since then we’ve been busy working on a lot of new stuff (see the full changelog). I’ll just try and note a few of the highlights here.
Remember that Vizro uses pydantic models to configure your dashboard according to a declarative “grammar of dashboards” that abstracts visual elements you commonly see in dashboards like navigation, filters and KPI cards. At the same time, it’s built on top of Dash and designed to give you the full flexibility and power of Dash if you’re an advanced user.
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 and I will be happy to help.
Improved page layout
New Tabs and Container models allow more advanced layouts of graphs and other components. We’ve also massively improved the mobile-friendly layout, made the side panel collapsible and have new and improved designs for Slider and RangeSlider. Any logo in your assets folder will be picked up automatically and inserted in the dashboard header.
Navigation
We now have hierarchical navigation using accordions and Google material icons.
The above is achieved using the following Python configuration:
import vizro.models as vm
navigation = vm.Navigation(
nav_selector=vm.NavBar(
items=[
vm.NavLink(label="Section 1", icon="Bar Chart", pages=["My first page", "My second page"]),
vm.NavLink(label="Section 2", icon="Pie Chart", pages=["My third page"]),
]
)
)
…or equivalently in YAML:
navigation:
nav_selector:
type: nav_bar
items:
- label: Section 1
icon: Bar Chart
pages: [My first page, My second page]
- label: Section 1
icon: Pie Chart
pages: [My third page]
KPI cards
@li.nguyen will post more about this shortly, so just a trailer picture for now:
AgGrid
New AgGrid model based on the Dash AG Grid - thanks to @AnnMarieW for her help with this! AgGrid is now the recommended way to do a table in Vizro, although Dash DataTable is still supported.
Live data
Live data that can refresh while your dashboard is running. We use flask-caching to implement a server-side cache in which each data source has a configurable timeout.
The code looks something like this:
from flask_caching import Cache
from vizro.managers import data_manager
data_manager.cache = Cache(config={"CACHE_TYPE": "SimpleCache"})
data_manager["iris"] = load_iris_data
data_manager["iris"].timeout = 10
New videos and posts
- Vizro actions explained by @adamschroeder and Petar Pejovic
- How to use AgGrid for tables by @adamschroeder and @maxschulz-COL
- Towards Data Science blog post on VizroAI by Jo Stichbury