fn-design-system/components/pie_chart.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
pie_chart	component	ts	ui	1.0.0	impure	PieChart(props: PieChartProps): JSX.Element	Gráfico de torta/dona @mantine/charts con colores automáticos, labels y tooltip. Usa DonutChart para dona, PieChart para torta.	chart pie donut visualization mantine component ui dashboard				false		@mantine/charts @mantine/core	Componente PieChart que renderiza gráfico de torta o dona con labels y tooltip	false			frontend/functions/ui/pie_chart.tsx	name type required description data Record<string, unknown>[] true Array de datos. Los valores de valueKey se convierten a number automáticamente. name type required description nameKey string true Key del campo que contiene el nombre/etiqueta de cada segmento name type required description valueKey string true Key del campo numérico que determina el tamaño de cada segmento name type required description colors string[] false Paleta de colores hex. Default: 8 colores accesibles. Se repite cíclicamente. name type required description donut boolean false Modo dona. innerRadius pasa a 50 por defecto cuando donut=true. name type required description showLegend boolean false Mostrar leyenda. Default true. name type required description showLabels boolean false Mostrar labels nombre+% en cada segmento. Default true. name type required description height number | string false Altura del contenedor. Default 300. name type required description valueFormatter (value: number) => string false Formateador de valores para el tooltip. Default toLocaleString.		false	react	pie donut

Ejemplo

// Pie simple
<PieChart
  data={[{ lang: 'Go', count: 42 }, { lang: 'Python', count: 28 }, { lang: 'Bash', count: 15 }]}
  nameKey="lang"
  valueKey="count"
/>

// Dona sin labels
<PieChart
  data={distributions}
  nameKey="domain"
  valueKey="functions"
  donut
  showLabels={false}
  valueFormatter={(v) => `${v} fns`}
/>

Notas

Los valores de valueKey se convierten a Number() antes de pasarlos al chart. Cuando donut=true se usa DonutChart de Mantine, de lo contrario PieChart.