add-dashboard-visualizationlisted
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