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; };