fix: pie chart

This commit is contained in:
Sukma Gladys 2024-12-11 14:52:47 +07:00
parent dbd29e56de
commit d0f69da82b

View File

@ -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>