skills.rest
mckinsey
mckinseyOFFICIAL
Explore all skills by this author →
Website𝕏@McKinseyGitHub

designing-vizro-layouts

Designs Vizro dashboard layouts with grid configuration, component sizing, and filter placement rules.

3.8k|299|Updated Sep 4, 2023
Search Tags:#Dashboard#vizro#component sizing#Data Visualization#Grid Layout#KPI cards#filter placement
One-click install
npx skills add https://github.com/mckinsey/vizro --skill designing-vizro-layouts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designing-vizro-layouts
Source: https://github.com/mckinsey/vizro/tree/main/vizro-e2e-flow/skills/designing-vizro-layouts
Command: npx skills add https://github.com/mckinsey/vizro --skill designing-vizro-layouts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building Vizro dashboards requires correct grid configuration, component sizing, and control placement, and mistakes like non-rectangular grid cells or squeezed charts produce broken or unreadable pages. This Skill encodes the layout rules so dashboards are structured correctly from the start.

Core Features & Use Cases

  • Grid Layout Rules: Enforces 12-column grids with 140px row heights, rectangular component spans, and -1 empty cells.
  • Component Sizing Tables: Provides column/row allocations for KPI cards, charts, and tables, including KPI count lookup patterns.
  • Filter and Selector Guidance: Defines page-level versus container-level filter placement and maps data types to the right selector (Dropdown, RangeSlider, DatePicker, etc.).
  • Use Case: When creating a new Vizro page with 4 KPI cards and two charts, apply the sizing tables to produce a valid grid YAML where each KPI spans 3 columns and charts get at least 3 rows.

Quick Start

Design a Vizro dashboard layout with a row of KPI cards on top, two charts side by side below, and a page-level filter in the left sidebar.

Frequently Asked Questions about designing-vizro-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a grid layout in Vizro?▼

Use type: grid in the layout configuration with a 12-column grid and row_min_height of 140px. Each component index must form a perfect rectangle, and -1 marks intentionally empty cells. Avoid vm.Layout, which is deprecated.

How do I size KPI cards in a Vizro dashboard?▼

Place KPI cards in the page grid with equal columns and equal rows per card, typically 1 row at 140px. Divide the 12 columns evenly, so 4 cards get 3 columns each, and use -1 for leftover cells when the count does not divide evenly.

Should I use page-level or container-level filters in Vizro?▼

Use page-level filters in the left sidebar when a filter applies across multiple components, and container-level filters above a container when scoped only to its contents. Prefer Filters over Parameters and omit targets unless limiting affected components.

Which selector does Vizro use for a filter column?▼

Vizro auto-selects the selector based on data type when you provide just the column name. Override only when needed: RadioItems for 2-4 options, Dropdown for 5+, RangeSlider for numeric ranges, Slider for single numbers, DatePicker for dates, and Checklist for multi-select.

Why does my Vizro grid layout fail with a rectangularity error?▼

Every component must form a perfect rectangle, meaning the same component index must span the same column range in every row it appears. Check that no component changes its column span between rows in the grid definition.

Related Skills

Explore More Data & Analytics Skills→
dieu-donneedieu-donnee

pandas-pro

Perform advanced pandas DataFrame operations for analysis, cleaning, and transformation.

Community
Advanced
mckinseymckinsey
3.8k

dashboard-build

Generate Vizro dashboard code from design specifications and run validation tests.

Official
Advanced
phaserjsphaserjs
40.1k

groups-and-containers

Organize Phaser 4 game objects with Groups and Containers.

Official
Intermediate
haotoolhaotool
2

tailwindcss-advanced-layouts

Implement complex responsive layouts using Tailwind CSS grid and flex utilities.

Official
Advanced