diff --git a/frontend/src/models/category-expenditure.ts b/frontend/src/models/category-expenditure.ts index 1cc779c..47f1f23 100644 --- 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; + categoryId: ProxyModelDataForm; } class CategoryExpenditureModel extends Model { } diff --git a/frontend/src/models/index.ts b/frontend/src/models/index.ts index efa797c..e8e6e66 100644 --- 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 index 0495958..f036d74 100644 --- 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 index 748fd3c..d907217 100644 --- 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 index 04b1f9d..52f0951 100644 --- 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 index d946704..6975dbd 100644 --- 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 index ddb08db..e517bb2 100644 --- 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 = ` -
-
카테고리 소비 추이
-
-
- - - - - - - - -
+
+
+
카테고리 소비 추이
+
+
+ + + + + + + + +
+
`; @@ -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(); + } } }