initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:06:49 +02:00
commit 5a824c2eee
157 changed files with 11539 additions and 0 deletions
@@ -0,0 +1,88 @@
+---
+name: pie_chart
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "PieChart(props: PieChartProps): JSX.Element"
+description: "Gráfico de torta/dona @mantine/charts con colores automáticos, labels y tooltip. Usa DonutChart para dona, PieChart para torta."
+tags: [chart, pie, donut, visualization, mantine, component, ui, dashboard]
+uses_functions: []
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["@mantine/charts", "@mantine/core"]
+output: "Componente PieChart que renderiza gráfico de torta o dona con labels y tooltip"
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/pie_chart.tsx"
+props:
+  - name: data
+    type: "Record<string, unknown>[]"
+    required: true
+    description: "Array de datos. Los valores de valueKey se convierten a number automáticamente."
+  - name: nameKey
+    type: "string"
+    required: true
+    description: "Key del campo que contiene el nombre/etiqueta de cada segmento"
+  - name: valueKey
+    type: "string"
+    required: true
+    description: "Key del campo numérico que determina el tamaño de cada segmento"
+  - name: colors
+    type: "string[]"
+    required: false
+    description: "Paleta de colores hex. Default: 8 colores accesibles. Se repite cíclicamente."
+  - name: donut
+    type: "boolean"
+    required: false
+    description: "Modo dona. innerRadius pasa a 50 por defecto cuando donut=true."
+  - name: showLegend
+    type: "boolean"
+    required: false
+    description: "Mostrar leyenda. Default true."
+  - name: showLabels
+    type: "boolean"
+    required: false
+    description: "Mostrar labels nombre+% en cada segmento. Default true."
+  - name: height
+    type: "number | string"
+    required: false
+    description: "Altura del contenedor. Default 300."
+  - name: valueFormatter
+    type: "(value: number) => string"
+    required: false
+    description: "Formateador de valores para el tooltip. Default toLocaleString."
+emits: []
+has_state: false
+framework: react
+variant: [pie, donut]
+---
+
+## Ejemplo
+
+```tsx
+// 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`.