Merge pull request #90 from hyosung-second-team1/85-jsp-vote-distance

[Feat] 테이블 페이지에 차트 추가
hyosung-second-team1 · May 16, 2024 · 65d5227 · 65d5227
2 parents e1209c7 + 03cb836
commit 65d5227
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/main/resources/static/css/table/table.css b/src/main/resources/static/css/table/table.css
@@ -125,8 +125,12 @@ body {
 
 
 /* 차트 */
-.chart {
-  width: 300px;
+#bar-chart {
+  width: 400px;
+}
+
+#circle-chart {
+  width: 200px;
 }
 /* 차트 End*/
 
@@ -245,8 +249,18 @@ td > p{
 
 
 /* 미디어 쿼리 */
-@media (max-width:1100px) {
+@media (max-width:1600px) {
   .head-container {
     flex-direction: column;
+    gap: 30px;
+  }
+}
+
+@media (max-width:1000px) {
+  .important-container {
+    flex-direction: column;
+    gap: 20px;
   }
-}
+}
+
+
diff --git a/src/main/resources/static/js/table/table.js b/src/main/resources/static/js/table/table.js
@@ -251,15 +251,15 @@ async function getBarData() {
       {
         label: '그룹',
         data: new Array(12).fill(0),
-        borderColor: '#4FD1C5',
-        backgroundColor: '#4FD1C5',
+        borderColor: 'tomato',
+        backgroundColor: 'tomato',
         borderWidth: 2,
       },
       {
         label: '개인',
         data: new Array(12).fill(0),
-        borderColor: '#4FD1C5',
-        backgroundColor: '#4FD1C5',
+        borderColor: 'cornflowerblue',
+        backgroundColor: 'cornflowerblue',
         borderWidth: 2,
       },
     ]
@@ -279,15 +279,15 @@ async function getBarData() {
   const countData2 = response2.data;
   $.each(countData2, function (idx, month) { 
     const monthIdx = Number(month.month) - 1;
-    data.datasets[0].data[monthIdx] = month.scheduleCount;
+    data.datasets[1].data[monthIdx] = month.scheduleCount;
   });
 
   // 개인 일정
   const response3 = await aj.getMonthStatic(year, false);
   const countData3 = response3.data;
   $.each(countData3, function (idx, month) { 
     const monthIdx = Number(month.month) - 1;
-    data.datasets[0].data[monthIdx] = month.scheduleCount;
+    data.datasets[2].data[monthIdx] = month.scheduleCount;
   });
 
   return data
@@ -310,7 +310,7 @@ async function showFirstCircleChart() {
         },
         title: {
           display: true,
-          text: '카테고리별 일정 통계'
+          text: `이번달 카테고리별 일정 통계`
         }
       }
     },
@@ -336,7 +336,7 @@ async function showFirstBarChart() {
         },
         title: {
           display: true,
-          text: '월별 일정 통계'
+          text: `${today.getFullYear()}년 월별 일정 통계`
         }
       }
     },

diff --git a/src/main/webapp/WEB-INF/views/table/table.jsp b/src/main/webapp/WEB-INF/views/table/table.jsp
@@ -75,11 +75,11 @@ pageEncoding="UTF-8"%>
     <div class="top-container">
       <!-- 상단부 -->
       <div class="head-container">
-        <div class="chart-container">
-          <div class="chart" id="bar-chart">
+        <div class="important-container">
+          <div class="chart" id="circle-chart">
             <canvas></canvas>
           </div>
-          <div class="chart" id="circle-chart">
+          <div class="chart" id="bar-chart">
             <canvas></canvas>
           </div>
         </div>