Add. improve chart design

ddok-ddak · Mar 30, 2024 · b5150b6 · b5150b6
1 parent f769cac
commit b5150b6
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 25 deletions.
diff --git a/src/pages/statistics/ChartContainer.tsx b/src/pages/statistics/ChartContainer.tsx
@@ -219,22 +219,30 @@ const ChartContainer = () => {
         color: palette.common.white,
         labels: {
           title: {
-            formatter: (val: any, ctx: any) =>
-              `${ctx.chart.data.labels[ctx.dataIndex]}\n`,
-            font: {
-              fontWeight: 'bold',
-              size: 17,
+            formatter: (val: any, ctx: any) => {
+              const percentage = Math.round((val * 100) / (totalSum || 100));
+              return percentage > 7
+                ? `${ctx.chart.data.labels[ctx.dataIndex]}\n`
+                : '..';
+            },
+            font: () => {
+              return {
+                fontWeight: 'bold',
+                size: 16,
+              };
             },
           },
           value: {
             formatter: (val: any) => {
               if (!totalSum) {
                 return '';
               }
-              return `\n${Math.round((val * 100) / (totalSum || 100))}%`;
+              const percentage = Math.round((val * 100) / (totalSum || 100));
+              return percentage > 7 ? `\n${percentage}%` : '';
             },
             font: {
-              size: 14,
+              fontWeight: 'bold',
+              size: 12,
             },
           },
         },
@@ -285,12 +293,17 @@ const ChartContainer = () => {
             formatter: (val: number) => {
               const time = timeFormatter(val);
               return (
-                `${time.hour}시간` + (time.minute ? `\n ${time.minute}분` : '')
+                `${time.hour}시간` +
+                (time.hour.toString().length > 2
+                  ? ''
+                  : time.minute
+                  ? `\n ${time.minute}분`
+                  : '\n ')
               );
             },
             font: {
               weight: 'bold',
-              size: 14,
+              size: 12,
             },
           },
         },
@@ -415,18 +428,17 @@ const ChartContainer = () => {
               key={idx}
               sx={{
                 display: 'flex',
-                height: '9.5vh',
-                margin: '0 17px',
+                m: '10px 17px',
+                p: 0,
               }}
             >
               <Box
                 sx={{
-                  padding: '8px',
                   display: 'flex',
                   justifyContent: 'flex-start',
                   alignItems: 'center',
-                  flex: '1 1 60%',
-                  height: '100%',
+                  flex: '1 1 30%',
+                  height: '30%',
                   m: 0,
                   p: 0,
                 }}
@@ -454,8 +466,7 @@ const ChartContainer = () => {
                     }
                     setCategorySum(
                       () =>
-                        (subCategoryData ?? statisticsResult
-                        )?.reduce(
+                        (subCategoryData ?? statisticsResult)?.reduce(
                           (accu: number, curr: StatisticsDetail) =>
                             accu + curr.timeSum,
                           0,
@@ -548,7 +559,9 @@ const ChartContainer = () => {
   return (
     <>
       <Box sx={{ backgroundColor: palette.chart.customBackground }}>
-        <Box sx={{ position: 'relative' }}>
+        <Box 
+          sx={{ position: 'relative' }}
+        >
           <Box
             sx={{
               width: '100%',
@@ -726,9 +739,17 @@ const ChartContainer = () => {
           </Carousel>
         )}
       </Box>
-      {setCategoryDetailDataList(
-        totalSum ? categoryDetailData : statisticsResult,
-      )}
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+        }}
+      >
+        {setCategoryDetailDataList(
+          totalSum ? categoryDetailData : statisticsResult,
+        )}
+      </Box>
     </>
   );
 };

diff --git a/src/pages/statistics/StatisticsPage.tsx b/src/pages/statistics/StatisticsPage.tsx
@@ -6,6 +6,8 @@ import ChartContainer from '@/pages/statistics/ChartContainer';
 import { bottomNavigation } from '@/store/common';
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
+import Wrapper from '../auth/common/Wrapper';
+import { Box } from '@mui/material';
 
 const StatisticsPage = () => {
   const setNavPage = useSetRecoilState(bottomNavigation);
@@ -15,11 +17,21 @@ const StatisticsPage = () => {
   }, []);
 
   return (
-    <>
-      <CommonHeader title={'통계'} isShowPrevButton={false} />
-      <Period />
-      <ChartContainer />
-    </>
+    <Wrapper
+      headerComp={<CommonHeader title={'통계'} isShowPrevButton={false} />}
+    >
+      <Box
+        sx={{
+          m: 0,
+          p: 0,
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <Period />
+        <ChartContainer />
+      </Box>
+    </Wrapper>
   );
 };