feat: componentes data_table y pie_chart — tabla con sorting/pagination y gráfico circular Recharts

Nuevos componentes React/TS en frontend/functions/ui/: - data_table: tabla de datos con columnas tipadas, sorting, paginación y formato personalizable - pie_chart: gráfico circular Recharts con tooltips, leyenda y paleta configurable Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 15:32:28 +02:00
parent c7b6e69e06
commit 55e6ff87a8
4 changed files with 436 additions and 0 deletions
@@ -0,0 +1,95 @@
+---
+name: pie_chart
+kind: component
+lang: typescript
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "PieChart(props: PieChartProps): JSX.Element"
+description: "Gráfico de torta/dona Recharts con Cell por segmento, colores automáticos, labels con porcentaje, Legend y Tooltip temático. Soporte donut con innerRadius configurable."
+tags: [chart, pie, donut, visualization, recharts, component, ui, dashboard]
+uses_functions: [cn_typescript_core]
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: [recharts]
+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: innerRadius
+    type: "number"
+    required: false
+    description: "Radio interno en px. Sobreescribe el default calculado por donut."
+  - name: outerRadius
+    type: "number"
+    required: false
+    description: "Radio externo en px. Default 100."
+  - 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
+
+Extraido y generalizado desde `apps/rapid_dashboards/frontend/src/components/widgets/PieChartWidget.tsx`. Los valores de `valueKey` se convierten a `Number()` para garantizar que Recharts los interprete correctamente (útil cuando los datos vienen de SQLite como strings). El `ResponsiveContainer` ocupa el 100% del ancho del padre.