Remove Tailwind CSS configuration file

2026-01-16 11:32:13 +01:00 · 2025-06-28 00:23:23 +02:00
parent a6632d6dfc
commit 1be9ce9dd9
42 changed files with 3475 additions and 1028 deletions
--- a/components/charts/donut-chart.tsx
+++ b/components/charts/donut-chart.tsx
@ -0,0 +1,122 @@
+"use client";
+
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface DonutChartProps {
+  data: Array<{ name: string; value: number; color?: string }>;
+  title?: string;
+  centerText?: {
+    title: string;
+    value: string | number;
+  };
+  colors?: string[];
+  height?: number;
+  className?: string;
+}
+
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload && payload.length) {
+    const data = payload[0];
+    return (
+      <div className="rounded-lg border bg-background p-3 shadow-md">
+        <p className="text-sm font-medium">{data.name}</p>
+        <p className="text-sm text-muted-foreground">
+          <span className="font-medium text-foreground">
+            {data.value}
+          </span>{" "}
+          sessions ({((data.value / data.payload.total) * 100).toFixed(1)}%)
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
+const CustomLegend = ({ payload }: any) => {
+  return (
+    <div className="flex flex-wrap justify-center gap-4 mt-4">
+      {payload.map((entry: any, index: number) => (
+        <div key={index} className="flex items-center gap-2">
+          <div
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-sm text-muted-foreground">{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const CenterLabel = ({ centerText, total }: any) => {
+  if (!centerText) return null;
+
+  return (
+    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <div className="text-center">
+        <p className="text-2xl font-bold">{centerText.value}</p>
+        <p className="text-sm text-muted-foreground">{centerText.title}</p>
+      </div>
+    </div>
+  );
+};
+
+export default function ModernDonutChart({
+  data,
+  title,
+  centerText,
+  colors = [
+    "hsl(var(--chart-1))",
+    "hsl(var(--chart-2))",
+    "hsl(var(--chart-3))",
+    "hsl(var(--chart-4))",
+    "hsl(var(--chart-5))",
+  ],
+  height = 300,
+  className,
+}: DonutChartProps) {
+  const total = data.reduce((sum, item) => sum + item.value, 0);
+  const dataWithTotal = data.map(item => ({ ...item, total }));
+
+  return (
+    <Card className={className}>
+      {title && (
+        <CardHeader>
+          <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+        </CardHeader>
+      )}
+      <CardContent>
+        <div className="relative">
+          <ResponsiveContainer width="100%" height={height}>
+            <PieChart>
+              <Pie
+                data={dataWithTotal}
+                cx="50%"
+                cy="50%"
+                innerRadius={60}
+                outerRadius={100}
+                paddingAngle={2}
+                dataKey="value"
+                className="transition-all duration-200"
+              >
+                {dataWithTotal.map((entry, index) => (
+                  <Cell
+                    key={`cell-${index}`}
+                    fill={entry.color || colors[index % colors.length]}
+                    className="hover:opacity-80 cursor-pointer"
+                    stroke="hsl(var(--background))"
+                    strokeWidth={2}
+                  />
+                ))}
+              </Pie>
+              <Tooltip content={<CustomTooltip />} />
+              <Legend content={<CustomLegend />} />
+            </PieChart>
+          </ResponsiveContainer>
+          <CenterLabel centerText={centerText} total={total} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}