a lot

apps/web/src/components/report/chart/ReportPieChart.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
 import type { IChartData } from '@/app/_trpc/client';
 import { AutoSizer } from '@/components/AutoSizer';
 import { useVisibleSeries } from '@/hooks/useVisibleSeries';
 import { cn } from '@/utils/cn';
 import { round } from '@/utils/math';
 import { getChartColor } from '@/utils/theme';
+import { truncate } from '@/utils/truncate';
 import { Cell, Pie, PieChart, Tooltip } from 'recharts';
 
 import { useChartContext } from './ChartProvider';
@@ -15,66 +15,19 @@ interface ReportPieChartProps {
   data: IChartData;
 }
 
-const RADIAN = Math.PI / 180;
-const renderLabel = ({
-  x,
-  y,
-  cx,
-  cy,
-  midAngle,
-  innerRadius,
-  outerRadius,
-  payload,
-  ...props
-}: any) => {
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const xx = cx + radius * Math.cos(-midAngle * RADIAN);
-  const yy = cy + radius * Math.sin(-midAngle * RADIAN);
-  const label = payload.label;
-  const percent = round(payload.percent * 100, 1);
-
-  return (
-    <>
-      <text
-        x={xx}
-        y={yy}
-        fill="white"
-        textAnchor="middle"
-        dominantBaseline="central"
-        fontSize={12}
-      >
-        {percent}%
-      </text>
-      <text
-        x={x}
-        y={y}
-        fill="black"
-        textAnchor="middle"
-        dominantBaseline="central"
-        fontSize={12}
-      >
-        {label}
-      </text>
-    </>
-  );
-};
-
 export function ReportPieChart({ data }: ReportPieChartProps) {
   const { editMode } = useChartContext();
   const { series, setVisibleSeries } = useVisibleSeries(data);
 
   const sum = series.reduce((acc, serie) => acc + serie.metrics.sum, 0);
-  // Get max 10 series and than combine others into one
-  const pieData = series.map((serie) => {
-    return {
-      id: serie.name,
-      color: getChartColor(serie.index),
-      index: serie.index,
-      label: serie.name,
-      count: serie.metrics.sum,
-      percent: serie.metrics.sum / sum,
-    };
-  });
+  const pieData = series.map((serie) => ({
+    id: serie.name,
+    color: getChartColor(serie.index),
+    index: serie.index,
+    label: serie.name,
+    count: serie.metrics.sum,
+    percent: serie.metrics.sum / sum,
+  }));
 
   return (
     <>
@@ -127,3 +80,58 @@ export function ReportPieChart({ data }: ReportPieChartProps) {
     </>
   );
 }
+
+const renderLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  fill,
+  payload,
+}: {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  fill: string;
+  payload: { label: string; percent: number };
+}) => {
+  const RADIAN = Math.PI / 180;
+  const radius = 25 + innerRadius + (outerRadius - innerRadius);
+  const radiusProcent = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const xProcent = cx + radiusProcent * Math.cos(-midAngle * RADIAN);
+  const yProcent = cy + radiusProcent * Math.sin(-midAngle * RADIAN);
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+  const label = payload.label;
+  const percent = round(payload.percent * 100, 1);
+
+  return (
+    <>
+      <text
+        x={xProcent}
+        y={yProcent}
+        fill="white"
+        textAnchor="middle"
+        dominantBaseline="central"
+        fontSize={10}
+        fontWeight={700}
+        pointerEvents={'none'}
+      >
+        {percent}%
+      </text>
+      <text
+        x={x}
+        y={y}
+        fill={fill}
+        textAnchor={x > cx ? 'start' : 'end'}
+        dominantBaseline="central"
+        fontSize={10}
+      >
+        {truncate(label, 20)}
+      </text>
+    </>
+  );
+};