✨ 달성 추세 렌더링

padosum · Jan 9, 2023 · 1bccb6c · 1bccb6c
1 parent 5b455b9
commit 1bccb6c
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 24 deletions.
diff --git a/src/client/components/achievements/Dashboard.js b/src/client/components/achievements/Dashboard.js
@@ -1,14 +1,34 @@
 export default class AchievementsDashboard {
-  constructor({ container }) {
+  constructor({ container, initState }) {
     this.container = container;
     this.target = document.createElement('div');
     this.target.classList = 'achievements-dashboard';
     this.container.appendChild(this.target);
 
+    this.state = initState;
+
     this.render();
   }
 
   render() {
+    const {
+      thisYear,
+      thisYearTrending,
+      gapThisYear,
+      lastYear,
+      lastYearTrending,
+      gapLastYear,
+      yearBeforeLast,
+      yearBeforeLastTrending,
+      gapYearBeforeLast,
+      lastThreeYears,
+      lastThreeYearsTrending,
+      gapLastThreeYears,
+      incompleted,
+      total,
+      completed,
+    } = this.state;
+
     this.target.innerHTML = `
     <div class="achievements-dashboard-header">
       <span class="dashboard-title">통계</span>
@@ -17,59 +37,71 @@ export default class AchievementsDashboard {
       <div class="total-status">
         <div class="item-status">
           <span class="status-type">달성</span>
-          <span class="status-number">45</span>
+          <span class="status-number">${completed} </span>
         </div>
         <div class="item-status">
           <span class="status-type">미달성</span>
-          <span class="status-number">24</span>
+          <span class="status-number">${incompleted} </span>
         </div>
         <div class="item-status">
           <span class="status-type">총 업적</span>
-          <span class="status-number">62</span>
+          <span class="status-number">${total} </span>
         </div>
       </div>
       <div class="year-status">
         <div class="year-status-item">
           <div class="year-status-item-content">
             <span class="year-status-item-type">올해</span>
-            <span class="year-status-item-number">7</span>
+            <span class="year-status-item-number">${thisYear}</span>
           </div>
-          <div class="year-status-item-trending trending-down">
-            <span class="year-status-item-trending-icon"><i class="bx bx-trending-down bx-md"></i></span>
-            <span class="year-status-item-trending-number">-5(-42%)</span>
+          <div class="year-status-item-trending trending-${Math.sign(gapThisYear) === 1 ? 'up' : 'down'}">
+            <span class="year-status-item-trending-icon"><i class="bx bx-trending-${
+              Math.sign(gapThisYear) === 1 ? 'up' : 'down'
+            } bx-md"></i></span>
+            <span class="year-status-item-trending-number">${gapThisYear} (${Math.round(thisYearTrending)}%)</span>
             <span class="year-status-item-trending-type">vs. 지난해</span>
           </div>
         </div>
         <div class="year-status-item">
           <div class="year-status-item-content">
             <span class="year-status-item-type">지난 해</span>
-            <span class="year-status-item-number">12</span>
+            <span class="year-status-item-number">${lastYear}</span>
           </div>
-          <div class="year-status-item-trending trending-down">
-            <span class="year-status-item-trending-icon"><i class="bx bx-trending-down bx-md"></i></span>
-            <span class="year-status-item-trending-number">4(50%)</span>
-            <span class="year-status-item-trending-type">vs. 지지난 해</span>
+          <div class="year-status-item-trending trending-${Math.sign(gapLastYear) === 1 ? 'up' : 'down'}">
+            <span class="year-status-item-trending-icon"><i class="bx bx-trending-${
+              Math.sign(gapLastYear) === 1 ? 'up' : 'down'
+            } bx-md"></i></span>
+            <span class="year-status-item-trending-number">${gapLastYear} (${Math.round(lastYearTrending)} %)</span>
+            <span class="year-status-item-trending-type">vs. 지지난해</span>
           </div>
         </div>
         <div class="year-status-item">
           <div class="year-status-item-content">
             <span class="year-status-item-type">지지난해</span>
-            <span class="year-status-item-number">8</span>
+            <span class="year-status-item-number">${yearBeforeLast} </span>
           </div>
-          <div class="year-status-item-trending trending-up">
-            <span class="year-status-item-trending-icon"><i class="bx bx-trending-up bx-md"></i></span>
-            <span class="year-status-item-trending-number">-11(-50%)</span>
-            <span class="year-status-item-trending-type">vs. 2019년</span>
+          <div class="year-status-item-trending trending-${Math.sign(gapYearBeforeLast) === 1 ? 'up' : 'down'}">
+            <span class="year-status-item-trending-icon"><i class="bx bx-trending-${
+              Math.sign(gapYearBeforeLast) === 1 ? 'up' : 'down'
+            } bx-md"></i></span>
+            <span class="year-status-item-trending-number">${gapYearBeforeLast} (${Math.round(
+      yearBeforeLastTrending,
+    )}%)</span>
+            <span class="year-status-item-trending-type">vs. ${new Date().getFullYear() - 3}년</span>
           </div>
         </div>
         <div class="year-status-item">
           <div class="year-status-item-content">
             <span class="year-status-item-type">최근 3년</span>
-            <span class="year-status-item-number">27</span>
+            <span class="year-status-item-number">${lastThreeYears} </span>
           </div>
-          <div class="year-status-item-trending trending-up">
-            <span class="year-status-item-trending-icon"><i class="bx bx-trending-up bx-md"></i></span>
-            <span class="year-status-item-trending-number">7(35%)</span>
+          <div class="year-status-item-trending trending-${Math.sign(gapLastThreeYears) === 1 ? 'up' : 'down'}">
+            <span class="year-status-item-trending-icon"><i class="bx bx-trending-${
+              Math.sign(gapLastThreeYears) === 1 ? 'up' : 'down'
+            } bx-md"></i></span>
+            <span class="year-status-item-trending-number">${gapLastThreeYears} (${Math.round(
+      lastThreeYearsTrending,
+    )} %)</span>
             <span class="year-status-item-trending-type">vs. 이전 3년</span>
           </div>
         </div>

diff --git a/src/client/components/achievements/index.js b/src/client/components/achievements/index.js
@@ -14,7 +14,7 @@ export default class Achievements {
   }
 
   render() {
-    new AchievementsDashboard({ container: this.target });
+    new AchievementsDashboard({ container: this.target, initState: this.state.trending });
     new AchievementsList({ container: this.target, initState: this.state });
   }
 

diff --git a/src/client/views/HomeView.js b/src/client/views/HomeView.js
@@ -8,18 +8,20 @@ import Achievements from '../components/achievements';
 export default class HomeView {
   constructor({ container }) {
     this.container = container;
-    this.state = { categories: [], achievements: [], filterType: 0 };
+    this.state = { categories: [], achievements: [], trending: {}, filterType: 0 };
 
     this.getData();
   }
 
   async getData() {
     const { data: categories } = await Api.get(`/api/categories`);
     const { data: achievements } = await Api.get(`/api/achievements`);
+    const { data: trending } = await Api.get(`/api/stats/trending`);
 
     this.setData({
       categories,
       achievements,
+      trending,
     });
   }