← ClaudeAtlas

add-dashboard-visualizationlisted

Use when adding a new visualization type (chart, table, stat, gauge, etc.) to the dashboard panel system, or adding options to an existing one. Guides creating the spec schema, the read-only renderer component, registering both, and keeping the viz-gallery dashboard exhaustive.
everr-labs/everr · ★ 43 · AI & Automation · score 69
Install: claude install-skill everr-labs/everr
# Adding a Dashboard Visualization Follow these steps to add a new visualization type to the dashboard panel system. Dashboards are **read-only**: they are defined as code (Perses YAML/JSON in a source repo) and reconciled into Everr with `everr apply`. There is no in-app editor or chart-type picker. A visualization is therefore a **pure renderer** — it takes its parsed spec options plus the query results and draws them. Selecting a visualization for a panel happens in the dashboard file (`plugin.kind`), not in the UI. ## Architecture Visualizations live in `packages/app/src/components/dashboards/visualizations/`. Each type gets its own subdirectory with a renderer and a zod spec schema: ``` visualizations/ ├── index.tsx # Registry — maps plugin.kind to { schema, component, inset } ├── parse-spec.ts # Lenient spec parsing (invalid options → defaults + warnings) ├── table/ │ ├── spec.ts # Zod schema for the plugin's options │ └── table-visualization.tsx # Renders the visualization └── <your-new-type>/ ├── spec.ts └── <type>-visualization.tsx ``` The schema is used twice: `everr apply` validates dashboard files against it (strict, via `data/dashboards/plugin-specs.ts`), and at render time the raw spec is parsed leniently — invalid options fall back to their defaults and surface as a warning icon in the panel header. ## Key interfaces The visualization component receives its **parsed