Working on responsiveness

Author: LifeofDan-EL

src/components/PieChart/index.tsx

@@ -60,6 +60,61 @@ PieChart component renders a pie chart with the provided data, utilizing accent
 and a vertical legend positioned to the right.
 */
 
+const CustomLegend = (props: unknown) => {
+  const { payload } = props;
+
+  return (
+    <ul
+      className="recharts-default-legend"
+      style={{
+        padding: 0,
+        margin: 0,
+        textAlign: "left",
+        display: "flex",
+        flexDirection: "column",
+        marginLeft: "12px",
+        gap: "2px", // Tighter spacing between items
+      }}
+    >
+      {payload.map((entry: unknown, index: number) => {
+        const dataPoint = entry.payload as unknown as PieChartDataPoint;
+        const formattedValue = Number.isInteger(dataPoint.value)
+          ? dataPoint.value
+          : dataPoint.value.toFixed(2);
+
+        return (
+          <li
+            key={`item-${index}`}
+            className="recharts-legend-item"
+            style={{ marginBottom: "2px" }}
+          >
+            <span className="recharts-surface" style={{ marginRight: "4px" }}>
+              <svg
+                width="14"
+                height="14"
+                style={{
+                  display: "inline-block",
+                  verticalAlign: "middle",
+                  marginRight: "4px",
+                }}
+              >
+                <path
+                  fill={entry.color}
+                  d="M0,0h14v14h-14z"
+                  className="recharts-legend-icon"
+                />
+              </svg>
+            </span>
+            <span style={{ fontSize: "0.85rem", color: "#666" }}>
+              {entry.value} ({formattedValue}%)
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
 export function PieChart({
   data,
   title,
@@ -69,48 +124,40 @@ export function PieChart({
 }: PieChartProps) {
   return (
     <Card className="w-full">
-      <CardHeader>
-        {title && <CardTitle className="text-center">{title}</CardTitle>}
+      <CardHeader className="pb-2">
+        {title && (
+          <CardTitle className="text-center text-2xl">{title}</CardTitle>
+        )}
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>
       <CardContent>
         <ChartContainer config={defaultChartConfig}>
-          <div className="w-full min-h-[350px]">
-            <ResponsiveContainer width="100%" height={350}>
-              <RechartsPieChart
-                margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
-              >
+          <div className="w-full md:h-[300px] h-[260px] flex">
+            <ResponsiveContainer width="100%" height="100%">
+              <RechartsPieChart>
                 <ChartTooltip
                   cursor={false}
                   content={<ChartTooltipContent />}
                 />
+                {/* Using custom legend component instead of the built-in Legend */}
                 <Legend
+                  content={<CustomLegend />}
                   layout="vertical"
                   verticalAlign="middle"
                   align="right"
                   wrapperStyle={{
-                    fontSize: "0.85rem",
-                    paddingLeft: "10px",
-                    lineHeight: "1.8em",
-                    maxWidth: "40%", // Control legend width
-                  }}
-                  formatter={(value, entry) => {
-                    const payload =
-                      entry.payload as unknown as PieChartDataPoint;
-                    // Format to 2 decimal places if needed
-                    const formattedValue = Number.isInteger(payload.value)
-                      ? payload.value
-                      : payload.value.toFixed(2);
-                    return `${value} (${formattedValue}%)`;
+                    paddingLeft: "0px",
+                    paddingTop: "0px",
+                    width: "40%",
                   }}
                 />
                 <Pie
                   data={data}
                   dataKey="value"
                   nameKey="name"
-                  cx="35%"
+                  cx="30%"
                   cy="50%"
-                  outerRadius={75}
+                  outerRadius={80}
                   innerRadius={0}
                   paddingAngle={1}
                   label={false}