From d0f69da82b7a59f1129fccd5fe1e210e6c492ca5 Mon Sep 17 00:00:00 2001
From: Sukma Gladys <sukmagladysv@gmail.com>
Date: Wed, 11 Dec 2024 14:52:47 +0700
Subject: [PATCH] fix: pie chart

---
 .../assessmentResult/index.lazy.tsx           | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx
index e2716a1..9c7a3af 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessmentResult/index.lazy.tsx
@@ -225,7 +225,7 @@ export default function AssessmentResultPage() {
   // Pie Chart Component
   function PieChartComponent({ chartData, totalScore, chartConfig }: { chartData: { aspectName: string, score: number, fill: string }[], totalScore: number, chartConfig: ChartConfig }) {
     return (
-      <div className="flex lg:flex-col w-full border-none">
+      <div className="flex flex-col w-full border-none">
         <div className="flex-1 pb-0 w-72">
           <ChartContainer
             config={chartConfig}
@@ -291,24 +291,13 @@ export default function AssessmentResultPage() {
         {/* Legend */}
         <div className="flex flex-col lg:grid lg:grid-cols-2 gap-x-4 text-xs justify-center gap-2 lg:gap-0">
           <div className="flex flex-col gap-2">
-            {chartData.slice(0, 3).map((entry, index) => (
+            {chartData.map((entry, index) => (
               <div key={index} className="flex items-center gap-2">
                 <span
-                  className="w-4 h-4"
+                  className="pl-4 w-4 h-4"
                   style={{ backgroundColor: entry.fill }}
                 />
-                <span className="font-medium">{entry.aspectName}</span>
-              </div>
-            ))}
-          </div>
-          <div className="flex flex-col gap-2">
-            {chartData.slice(3).map((entry, index) => (
-              <div key={index} className="flex items-center gap-2">
-                <span
-                  className="w-4 h-4"
-                  style={{ backgroundColor: entry.fill }}
-                />
-                <span className="font-medium">{entry.aspectName}</span>
+                <span className="font-medium whitespace-nowrap">{entry.aspectName}</span>
               </div>
             ))}
           </div>