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,58 @@
+import { PieChart as MantinePieChart, DonutChart } from '@mantine/charts'
+import { Paper } from '@mantine/core'
+
+const DEFAULT_COLORS = [
+  '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
+  '#ec4899', '#06b6d4', '#f97316',
+]
+
+interface PieChartProps {
+  data: Record<string, unknown>[]
+  nameKey: string
+  valueKey: string
+  colors?: string[]
+  donut?: boolean
+  showLegend?: boolean
+  showLabels?: boolean
+  height?: number
+  valueFormatter?: (value: number) => string
+}
+
+function PieChartComponent({
+  data,
+  nameKey,
+  valueKey,
+  colors = DEFAULT_COLORS,
+  donut = false,
+  showLegend: _showLegend = true,
+  showLabels = true,
+  height = 300,
+  valueFormatter = (v) => v.toLocaleString(),
+}: PieChartProps) {
+  const chartData = data.map((row, i) => ({
+    name: String(row[nameKey] ?? ''),
+    value: Number(row[valueKey]) || 0,
+    color: colors[i % colors.length] as string,
+  }))
+
+  const Chart = donut ? DonutChart : MantinePieChart
+
+  return (
+    <Paper p="md">
+      <Chart
+        h={height}
+        data={chartData}
+        withLabels={showLabels}
+        withLabelsLine={showLabels}
+        withTooltip
+        tooltipDataSource="segment"
+        valueFormatter={valueFormatter}
+      />
+      {/* Mantine PieChart/DonutChart does not have a built-in legend prop;
+          legend is handled via withLabels. showLegend kept for API compat. */}
+    </Paper>
+  )
+}
+
+export const PieChart = PieChartComponent
+export type { PieChartProps }