feat: 메인페이지 화면 개발 - 창고 top5 도넛그래프 #24

2Jo-Logistics-Management · Sep 7, 2023 · a4eb942 · a4eb942
1 parent 67a94c1
commit a4eb942
Showing 1 changed file with 56 additions and 15 deletions.
diff --git a/frontend/src/views/dashboard/components/YearlyBreakup.js b/frontend/src/views/dashboard/components/YearlyBreakup.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect, useState  } from 'react';
 import Chart from 'react-apexcharts';
 import { useTheme } from '@mui/material/styles';
 import { Grid, Stack, Typography, Avatar } from '@mui/material';
 import { IconArrowUpLeft } from '@tabler/icons';
+import axios from 'axios';
 // 메인페이지 도넛그래프
 
 
@@ -17,24 +18,45 @@ const YearlyBreakup = () => {
   const primarylight = '#ecf2ff';
   const successlight = theme.palette.success.light;
 
+  const [warehouseData, setWarehouseData] = useState([]);
+
+
+  useEffect(() => {
+    axios.get('http://localhost:8888/api/mainPage/warehouseRank')
+      .then((response) => {
+        const data = response.data.data;
+        setWarehouseData(data);
+      })
+      .catch((error) => {
+        console.error('데이터를 불러오는데 실패했습니다.', error);
+      });
+  }, []);
+
+  const warehouseNames = warehouseData.map((item) => item.warehouseName);
+  const totalCounts = warehouseData.map((item) => item.totalCount);
+
+  const colors = ['rgba(93, 135, 255, 0.85)', 'rgba(73, 190, 255, 0.85)', '#13DEB9', '#FFAE1F', '#FA896B'];
+
   // chart
-  const optionscolumnchart = {
+  const optionsDonutChart  = {
     chart: {
       type: 'donut',
       fontFamily: "'Plus Jakarta Sans', sans-serif;",
       foreColor: '#adb0bb',
       toolbar: {
         show: false,
       },
-      height: 155,
+      width: 300,
+      height: 400,
     },
-    colors: [primary, primarylight, '#F9F9FD'],
+    labels: warehouseNames,
+    colors: colors,
     plotOptions: {
       pie: {
         startAngle: 0,
         endAngle: 360,
         donut: {
-          size: '75%',
+          size: '55%',
           background: 'transparent',
         },
       },
@@ -63,15 +85,13 @@ const YearlyBreakup = () => {
       },
     ],
   };
-  const seriescolumnchart = [38, 40, 25];
 
   return (
     <DashboardCard title="Warehouse Loading Rate ">
       <Grid container spacing={3}>
-        {/* column */}
-        <Grid item xs={7} sm={7}>
+        <Grid item xs={5} sm={5}>
           <Typography variant="h3" fontWeight="700">
-            창고 40% 적재
+            창고 Top5
           </Typography>
           <Stack direction="row" spacing={1} mt={1} alignItems="center">
             <Avatar sx={{ bgcolor: successlight, width: 27, height: 27 }}>
@@ -84,13 +104,31 @@ const YearlyBreakup = () => {
               last year
             </Typography>
           </Stack>
+          <Stack spacing={3} mt={5} direction="row">
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Avatar
+                sx={{ width: 9, height: 9, bgcolor: 'rgba(93, 135, 255, 0.85)', svg: { display: 'none' } }}
+              ></Avatar>
+              <Typography variant="subtitle2" color="textSecondary">
+                B-2
+              </Typography>
+            </Stack>
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Avatar
+                sx={{ width: 9, height: 9, bgcolor: primarylight, svg: { display: 'none' } }}
+              ></Avatar>
+              <Typography variant="subtitle2" color="textSecondary">
+                A-1
+              </Typography>
+            </Stack>
+          </Stack>
           <Stack spacing={3} mt={5} direction="row">
             <Stack direction="row" spacing={1} alignItems="center">
               <Avatar
                 sx={{ width: 9, height: 9, bgcolor: primary, svg: { display: 'none' } }}
               ></Avatar>
               <Typography variant="subtitle2" color="textSecondary">
-                2022
+                B-1
               </Typography>
             </Stack>
             <Stack direction="row" spacing={1} alignItems="center">
@@ -103,18 +141,21 @@ const YearlyBreakup = () => {
             </Stack>
           </Stack>
         </Grid>
-        {/* column */}
-        <Grid item xs={5} sm={5}>
+        <Grid item xs={5} sm={5} >
           <Chart
-            options={optionscolumnchart}
-            series={seriescolumnchart}
+            options={optionsDonutChart}
+            series={totalCounts}
             type="donut"
-            height="150px"
+            height="250px"
+            width="250px"
+            labels={warehouseNames} // 도넛 그래프의 레이블 설정
+            colors={colors} // 도넛 그래프의 색상 설정
           />
         </Grid>
       </Grid>
     </DashboardCard>
   );
 };
 
+
 export default YearlyBreakup;