Merge pull request #165 from woowa-techcamp-2021/feature/chart-montly…

…-list [feature/chart monthly list] 차트 달별 리스트 조회
woowa-techcamp-2021 · Aug 6, 2021 · 9b8e50b · 9b8e50b
2 parents 0ddc08c + 670e2c4
commit 9b8e50b
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 25 deletions.
diff --git a/frontend/src/models/category-expenditure.ts b/frontend/src/models/category-expenditure.ts
@@ -3,10 +3,12 @@ import { CashHistoriesResponse, CategoryExpenditureResponse } from '../types/cas
 
 export type CategoryExpenditureData = {
   categoryExpenditures: CategoryExpenditureResponse | null;
+  categoryId: number | null;
 }
 
 type InitialData = {
   categoryExpenditures: ProxyModelDataForm<CashHistoriesResponse | null>;
+  categoryId: ProxyModelDataForm<number | null>;
 }
 
 class CategoryExpenditureModel extends Model<InitialData> { }

diff --git a/frontend/src/models/index.ts b/frontend/src/models/index.ts
@@ -68,6 +68,10 @@ const models = {
     categoryExpenditures: {
       action: actions.ON_CATEGORY_EXPENDITURE_CHANGE,
       data: null
+    },
+    categoryId: {
+      action: actions.ON_CATEGORY_EXPENDITURE_CHANGE,
+      data: null
     }
   }).getProxy(),
   user: new UserModel({

diff --git a/frontend/src/types/cash-history.ts b/frontend/src/types/cash-history.ts
@@ -48,11 +48,11 @@ export type CashHistoryRequest = {
   price: number;
 }
 
-export type totalCash = {
+export type TotalCash = {
   month: number;
   price: number;
 }
 
 export type CategoryExpenditureResponse = {
-  totalCashes: totalCash[]
+  totalCashes: TotalCash[]
 } & BaseResponse;
diff --git a/frontend/src/view-models/category-expenditure.ts b/frontend/src/view-models/category-expenditure.ts
@@ -3,16 +3,19 @@ import pubsub from '../core/pubsub';
 import View from '../core/view';
 import ViewModel from '../core/view-model';
 import models from '../models';
+import { CashHistoriesData } from '../models/cash-histories';
 import { CategoryExpenditureData } from '../models/category-expenditure';
-import { totalCash } from '../types/cash-history';
+import { CashHistoriesInDay, TotalCash } from '../types/cash-history';
 import CategoryExpenditureView from '../views/category-expenditure';
 
 class CategoryExpenditureViewModel extends ViewModel {
   private categoryExpendituresModel: CategoryExpenditureData;
+  private cashHistoriesModel: CashHistoriesData;
 
   constructor (view: View) {
     super(view);
     this.categoryExpendituresModel = models.categoryExpenditures;
+    this.cashHistoriesModel = models.cashHistories;
   }
 
   protected subscribe (): void {
@@ -26,7 +29,25 @@ class CategoryExpenditureViewModel extends ViewModel {
     });
   }
 
-  get totalCashes (): totalCash[] | undefined {
+  get cashHistories (): CashHistoriesInDay[] {
+    if (this.cashHistoriesModel.cashHistories === null) {
+      return [];
+    }
+
+    const { groupedCashHistories } = this.cashHistoriesModel.cashHistories.cashHistories;
+    return groupedCashHistories.map((dailyCashHistory) => {
+      const cashHistories = dailyCashHistory.cashHistories.filter((cashHistory) => {
+        return cashHistory.category?.id === this.categoryExpendituresModel.categoryId;
+      });
+
+      return {
+        ...dailyCashHistory,
+        cashHistories
+      };
+    });
+  }
+
+  get totalCashes (): TotalCash[] | undefined {
     return this.categoryExpendituresModel.categoryExpenditures?.totalCashes;
   }
 }

diff --git a/frontend/src/view-models/expenditure-in-month.ts b/frontend/src/view-models/expenditure-in-month.ts
@@ -79,6 +79,7 @@ class ExpenditureInMonthViewModel extends ViewModel {
     try {
       const totalCashes = await cashHistoryAPI.getTotalCashes(year, month, categoryId);
       this.categoryExpendituresModel.categoryExpenditures = totalCashes;
+      this.categoryExpendituresModel.categoryId = categoryId;
     } catch (error) {
       const { status } = error;
 

diff --git a/frontend/src/views/category-expenditure/index.css b/frontend/src/views/category-expenditure/index.css
@@ -1,3 +1,7 @@
+.category-expenditure.disappear {
+  visibility: hidden;
+}
+
 .category-expenditure__container {
   position: relative;
   width: var(--inner-width);
@@ -9,10 +13,6 @@
   padding: 32px;
 }
 
-.category-expenditure__container.disappear {
-  visibility: hidden;
-}
-
 .category-expenditure__title {
   margin-bottom: 32px;
   color: var(--title-active);

diff --git a/frontend/src/views/category-expenditure/index.ts b/frontend/src/views/category-expenditure/index.ts
@@ -1,5 +1,6 @@
 import View from '../../core/view';
-import { totalCash } from '../../types/cash-history';
+import { TotalCash } from '../../types/cash-history';
+import MonthlyCashHistoryUIElement from '../../ui-elements/cash-history/monthly-cash-history';
 import { formatNumber } from '../../utils/formatter';
 import { $ } from '../../utils/selector';
 import { getSVGElement } from '../../utils/svg';
@@ -99,7 +100,7 @@ class CategoryExpenditureView extends View {
     return $curvedLine;
   }
 
-  drawXLabels (totalCashes: totalCash[]): void {
+  drawXLabels (totalCashes: TotalCash[]): void {
     const $monthDelimiter = $('.category-expenditure__x-labels-container');
     if ($monthDelimiter !== null) {
       const xLabels = totalCashes
@@ -110,7 +111,7 @@ class CategoryExpenditureView extends View {
     }
   }
 
-  drawYLabels (totalCashes: totalCash[]): void {
+  drawYLabels (totalCashes: TotalCash[]): void {
     const $expenseDelimiter = $('.category-expenditure__y-labels-container');
     if ($expenseDelimiter !== null) {
       const max = totalCashes
@@ -132,24 +133,35 @@ class CategoryExpenditureView extends View {
   }
 
   show (): void {
-    $('.category-expenditure__container')?.classList.remove('disappear');
+    const $categoryExpenditure = $('.category-expenditure');
+    if ($categoryExpenditure !== null) {
+      $categoryExpenditure.classList.remove('disappear');
+      const { top } = $categoryExpenditure.getBoundingClientRect();
+
+      window.scrollTo({
+        top,
+        behavior: 'smooth'
+      });
+    }
   }
 
   protected render (): void {
     this.$target.innerHTML = `
-    <div class='category-expenditure__container disappear'>
-      <div class="category-expenditure__title">카테고리 소비 추이</div>
-      <div class='category-expenditure__y-labels-container'>
-      </div>
-      <svg class='content__curved-chart' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${SVG_HEIGHT} ${SVG_WIDTH}'>
-        <defs>
-        <linearGradient id="curvedLineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%"   stop-color="var(--primary2)"/>
-          <stop offset="100%" stop-color="var(--primary3)"/>
-        </linearGradient>
-        </defs>
-      </svg>
-      <div class='category-expenditure__x-labels-container'>
+    <div class="category-expenditure disappear">
+      <div class='category-expenditure__container'>
+        <div class="category-expenditure__title">카테고리 소비 추이</div>
+        <div class='category-expenditure__y-labels-container'>
+        </div>
+        <svg class='content__curved-chart' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${SVG_HEIGHT} ${SVG_WIDTH}'>
+          <defs>
+          <linearGradient id="curvedLineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%"   stop-color="var(--primary2)"/>
+            <stop offset="100%" stop-color="var(--primary3)"/>
+          </linearGradient>
+          </defs>
+        </svg>
+        <div class='category-expenditure__x-labels-container'>
+        </div>
       </div>
     </div>
   `;
@@ -176,6 +188,11 @@ class CategoryExpenditureView extends View {
 
     this.drawYLabels(totalCashes);
     this.drawXLabels(totalCashes);
+
+    const $categoryExpenditure = $('.category-expenditure');
+    if ($categoryExpenditure !== null) {
+      new MonthlyCashHistoryUIElement($categoryExpenditure, this.categoryExpenditureViewModel.cashHistories).build();
+    }
   }
 }