diff --git a/app/ui/view/molecule/pie-chart/pie-chart.tsx b/app/ui/view/molecule/pie-chart/pie-chart.tsx
index 03c682d6..62e6142c 100644
--- a/app/ui/view/molecule/pie-chart/pie-chart.tsx
+++ b/app/ui/view/molecule/pie-chart/pie-chart.tsx
@@ -8,20 +8,18 @@ export interface PieChartProp {
}
function PieChart({ percentage }: PieChartProp) {
- const filterdPercentage = percentage > 100 ? 100 : percentage;
-
const isDesktop = useMediaQuery('(min-width: 767px)');
return (
0 && 'piechart',
- filterdPercentage === 100 ? 'bg-light-blue-1 complete' : 'bg-etc-pink',
+ percentage > 0 && 'piechart',
+ percentage === 100 ? 'bg-light-blue-1 complete' : 'bg-etc-pink',
'md:w-[9rem] md:h-[9rem]',
)}
style={{
- '--percentage': filterdPercentage,
+ '--percentage': percentage,
'--startRadius': isDesktop ? '1.5rem' : '1.1rem',
'--endRadius': isDesktop ? '0.74rem' : '0.50rem',
'--pieSize': isDesktop ? '9rem' : '6.5rem',
@@ -30,11 +28,11 @@ function PieChart({ percentage }: PieChartProp) {
- {filterdPercentage}%
+ {percentage}%
);
diff --git a/app/utils/chart.util.ts b/app/utils/chart.util.ts
index 03a79452..2f1bb0c5 100644
--- a/app/utils/chart.util.ts
+++ b/app/utils/chart.util.ts
@@ -1,3 +1,4 @@
export const getPercentage = (numerator: number, denominator: number) => {
- return Number(((numerator / denominator) * 100).toFixed(0));
+ const percentage = Number(((numerator / denominator) * 100).toFixed(0));
+ return percentage > 100 ? 100 : percentage;
};