Chart primitives

Chart primitives are low-level visualization organisms (no Widget suffix) under organisms/charts/. An app can consume them directly to build custom views, or let a business widget wrap them with header / footer chrome.

Live demos

Every component is documented in Storybook with mock fixtures for each state (default, hover, loading, empty). The links below open the component's Storybook page on Chromatic. Run it locally with bun run storybook (default http://localhost:6006).

Primitive	Role	Storybook
RoBarChart	Vertical / horizontal / stacked bars	Open
RoLineChart	Time-series lines (compact + full)	Open
RoDonutChart	Donut with legend and center value	Open
RoHeatmap	Day x hour grid (6h / 12h / 24h views)	Open
RoGauge	Half-circle gauge (Service Level, QoS)	Open
RoSankey	Call-flow diagram (D3)	Open
RoStackedColumnChart	Stacked / grouped column chart	Open
RoWorldMap	Interactive world map (Leaflet)	Open

Interaction defaults

The cartesian chart organisms (RoBarChart, RoLineChart) and RoHeatmap ship Figma-aligned defaults, so hosts get the right behavior without configuring Chart.js manually:

• Hover tooltip — a glass-white tooltip card (single Ringover tooltip). Disable with :tooltip-on-hover="false"; remap rows via :tooltip-mapping.
• Bar hover dimming — hovering a bar dims the others; clears on mouse leave.
• Bottom legend — one entry per dataset / segment.
• Axis presets — abscisseScale('weekly' | 'monthly' | 'hourly' | …) and ordonneeScale().
• Heatmap views — colCount derives from the data (6 / 12 / 24 cells per row); :tone selects the palette.

Responsiveness inside widgets

When a primitive is mounted inside a widget tile it must fill the card body and clip rather than push the chrome out:

1. Root uses flex: 1 1 auto; min-width: 0; min-height: 0;.
2. The chart wrapper uses height: 100% (not a fixed pixel height).
3. Internal grids / canvases use minmax(0, …) tracks and overflow: hidden.

See Business widgets for the widget shell that provides this chrome.