API Arbre radial

Un cluster()/dendrogramme radial : les groupes rayonnent depuis un point central, les feuilles atterrissent sur le MÊME rayon que toutes les autres feuilles - voir la démo Arbre radial.

Import

Web Component

import "@michi-vz/wc/radial-tree-chart";
// <michi-vz-radial-tree-chart> est maintenant défini

Vanilla JS

import { mountRadialTreeChart } from "@michi-vz/core";

const chart = mountRadialTreeChart(el, props);

Props

Prop	Type	Default	Description
timeline	boolean | TimelinePeriodConfig	-	Opt-in "play through years": snapshots one period at a time over the period tags in the data, with a headless controller (`chart.timeline()`) plus the built-in play button + scrubber. Values tween between periods unless `interpolate: false`. Off by default; wins over `progressiveDraw` when both are set.
progressiveDraw	boolean | ProgressiveDrawConfig	-	Opt-in reveal animation: wipes the marks in left to right on mount (a clip reveal; axes and titles stay put). `true` uses defaults (1200 ms, easeInOutCubic); a config tunes durationMs, easing, autoplay, and replayOnUpdate (`tipLabel` is LineChart-only and ignored here). Off by default; respects prefers-reduced-motion (renders fully drawn instantly) and `replay()` re-runs it.
dataSet*	RadialTreeNode[]	-	Forest of nodes (each a leaf or a group with children), laid out as a radial dendrogram.
centerLabel	string	-	Optional word-wrapped title drawn inside the small centre circle (legacy `titleCenter`).
title	string	-	Optional chart title rendered above the plot
radiusRange	[number, number]	DEFAULT_RADIUS_RANGE	[min, max] circle radius in px (default [2, 32], the legacy `circleRange`).
labelDensityThresholds	{ rotateAbove?: number; hideAbove?: number }	-	Adaptive label density thresholds, compared against the total LEAF count. `rotateAbove` (default 20): past this many leaves, every label is abbreviated and rotated radially instead of kept horizontal. `hideAbove` (default 100): past this many leaves, all labels are hidden.
isLoading	boolean	-	Show the loading overlay and skip the no-data check (legacy michi-vz parity).
isNodata	boolean | ((dataSet: RadialTreeNode[] | null | undefined) => boolean)	-	No-data override: boolean, or a predicate on dataSet; default = empty dataSet.
noDataLabel	string	-	Text for the vanilla default no-data overlay (ignored when suppressed).
suppressDefaultOverlay	boolean	-	A framework wrapper sets this to render its OWN loading/no-data node instead.
tooltipFormatter	(d: RadialTreeNode) => string	-	Returns custom tooltip HTML for a hovered node (sanitized before it is inserted)
onHighlightItem	(labels: string[]) => void	-	Called when the hovered/highlighted label(s) change

Common props - shared by every chart (14)

Prop	Type	Default	Description
width	number	900	Chart width in pixels
height	number	520	Chart height in pixels
margin	Margin	{ top: 36, right: 10, bottom: 10, left: 10 }	Inner margins (top/right/bottom/left, in px) reserved for axes, titles, and labels
colors	string[]	-	Categorical palette for series/labels without an explicit colour or colorsMapping entry
colorsMapping	Record<string, string>	-	Explicit label -> colour map; takes precedence over the palette and per-item colours
highlightItems	string[]	-	Labels to emphasise; all other marks dim
disabledItems	string[]	-	Labels to hide and exclude from scales/stacks
renderer	"svg" | "canvas" | "webgpu"	"svg"	Render as inline SVG (default) or to a canvas (faster for large datasets); getContext() is identical either way
locale	string	-	BCP-47 locale used for number and date formatting
skipColorMappingDispatch	boolean	false	External-CSS mode: unmapped labels resolve to transparent and onColorMappingGenerated is not emitted, so mark colours come from your CSS via the data-label-safe contract
enableTransitions	boolean	true	Animate updates with CSS transitions (default true)
onColorMappingGenerated	(mapping: Record<string, string>) => void	-	Called with the resolved label -> colour map after the chart assigns colours
onChartDataProcessed	(context: ChartContext) => void	-	Called with the renderer-agnostic ChartContext whenever the data is (re)processed
onDataWarning	(warnings: DataWarning[]) => void	-	Called with any non-fatal data warnings (duplicate labels, non-finite values, non-monotonic dates, ...)

Événements

Le web component émet ces CustomEvents qui remontent (bubbling) (le moteur expose les mêmes via les callbacks on* du tableau ci-dessus) :

Événement	Détail	Se déclenche quand
michi-vz:highlight	string[]	le survol change
michi-vz:colormapping	Record<string, string>	une correspondance de couleur est générée
michi-vz:dataprocessed	ChartContext	les données sont (re)traitées
michi-vz:datawarning	DataWarning[]	des avertissements sur les données en entrée sont détectés (groupes vides, valeurs négatives/non finies, labels dupliqués, imbrication au-delà de 2 niveaux)

getContext()

mountRadialTreeChart(el, props).getContext() renvoie un RadialTreeChartContext agnostique du moteur de rendu : stats.leafCount / groupCount / grandTotal / min (la plus petite feuille) / max (la plus grande feuille) / maxDepth, un tableau nodes[] (une ligne par nœud - groupe OU feuille - avec label, code, color, depth, isLeaf, value, path), un summary déterministe en langage naturel, et un a11yTable. Voir Contexte LLM.

Source

Les props sont typées RadialTreeChartProps dans @michi-vz/core.