API Cây tỏa tròn

Một sơ đồ cụm/dendrogram tỏa tròn: các nhóm tỏa ra từ một điểm trung tâm, lá nằm ở CÙNG bán kính như mọi lá khác - xem demo Cây tỏa tròn.

Import

Web ComponentVanilla JS

import "@michi-vz/wc/radial-tree-chart";
// <michi-vz-radial-tree-chart> giờ đã được định nghĩa

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, ...)

Sự kiện

Web component phát ra các CustomEvent nổi bọt (bubbling) sau (engine cũng cung cấp tương tự qua các callback on* trong bảng trên):

Sự kiện	Chi tiết	Xảy ra khi
`michi-vz:highlight`	`string[]`	phần được tô sáng khi di chuột thay đổi
`michi-vz:colormapping`	`Record<string, string>`	một ánh xạ màu được tạo ra
`michi-vz:dataprocessed`	`ChartContext`	dữ liệu được xử lý (lại)
`michi-vz:datawarning`	`DataWarning[]`	phát hiện cảnh báo dữ liệu đầu vào (nhóm rỗng, giá trị âm/không hữu hạn, nhãn trùng lặp, lồng sâu hơn 2 cấp)

getContext()

mountRadialTreeChart(el, props).getContext() trả về RadialTreeChartContext không phụ thuộc renderer: stats.leafCount / groupCount / grandTotal / min (lá nhỏ nhất) / max (lá lớn nhất) / maxDepth, một mảng nodes[] (một dòng cho mỗi nút - nhóm hoặc lá - với label, code, color, depth, isLeaf, value, path), một summary tất định bằng ngôn ngữ tự nhiên, và một a11yTable. Xem Ngữ cảnh LLM.

Nguồn

Props được định kiểu là RadialTreeChartProps trong @michi-vz/core.

API Cây tỏa tròn ​

Import ​

Props ​

Sự kiện ​

getContext() ​

Nguồn ​