Real traffic, and which parts the tests cover. Sample data: eight clusters, full refunds 31% with 46 cases, partial + coupon 14% with 0 cases.
Installation
- 1
Set up the registry once
Your token in .env and @chartory in components.json. Skip this when another chart is already installed.
Installation guide - 2
Add the chart
One command adds the Coverage map component to your project.
npx shadcn add @chartory/coverage-map - 3
Use it
Pass your rows. The props are the Figma properties.
usage.tsximport { CoverageMap } from "@/components/chartory/coverage-map"<CoverageMap data={goldenCoverage} size="m" legend/>
Props
<CoverageMap>
Every prop but data is a Figma property with the same name and values.
CoverageMapData
The data prop: one object for the whole chart.
CoverageMapCluster
One object per entry in clusters.
The data as a JSON Schema: schemas/coverage-map.json
Coverage map: a React and Figma chart in four sizes
What does a coverage map show?
A coverage map draws production traffic as clusters sized by share and marks the test cases inside each, so clusters with no tests show as empty. Use it to check a golden set against real use.
Chartory ships it as a Figma component and a React component with the same name. The code installs from the shadcn registry with one command and lands in your project as a file you own.
What is the Coverage map component?
It is one <CoverageMap> component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is a traffic share and a case count per cluster.
Sizes XS, S, M and L re-lay the chart out from the data instead of scaling it, so labels stay readable at every size.
When should I use it?
- Is coverage by cluster the point? Yes means the coverage map fits.
- Are there test cases? Yes means the coverage map fits.
- Is it clusters of real use? Yes means the coverage map fits.
When does another type fit better?
- Two shares side by side. Use Traffic vs set instead.
- Traffic only. Use Treemap instead.
- Clusters of tickets. Use Cluster map instead.
Coverage map questions
Installing, data, Figma and plans.
Yes. It installs through the shadcn registry with the shadcn CLI, and the file lands in your project.
Add your token and the @chartory registry once, then run npx shadcn add @chartory/coverage-map. The Installation guide has the steps.
Yes. Connect the Chartory MCP server and ask for the coverage map chart; the agent runs the same command and you review the diff.
A traffic share and a case count per cluster. The sample data comes with the component, and the props table lists every field.
XS, S, M and L, in Figma and in code. Each size is laid out again from the data, so text and lines keep their size.
Yes. chart/118-coverage-map has the same properties as the component.
Yes. Every paint is a token, so the chart follows light and dark mode and the collection you pick.
Code and Complete. Figma has the Figma file only.