From a4eb942a8703916d10cb94c64b50a138e3fd046a Mon Sep 17 00:00:00 2001
From: ap9407 <ap9407@naver.com>
Date: Thu, 7 Sep 2023 10:18:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=ED=99=94=EB=A9=B4=20=EA=B0=9C=EB=B0=9C=20-=20?=
 =?UTF-8?q?=EC=B0=BD=EA=B3=A0=20top5=20=EB=8F=84=EB=84=9B=EA=B7=B8?=
 =?UTF-8?q?=EB=9E=98=ED=94=84=20#24?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/components/YearlyBreakup.js     | 71 +++++++++++++++----
 1 file changed, 56 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/dashboard/components/YearlyBreakup.js b/frontend/src/views/dashboard/components/YearlyBreakup.js
index cd64b1c..4820563 100644
--- 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,8 +18,27 @@ 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;",
@@ -26,15 +46,17 @@ const YearlyBreakup = () => {
       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,13 +141,15 @@ 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>
@@ -117,4 +157,5 @@ const YearlyBreakup = () => {
   );
 };
 
+
 export default YearlyBreakup;