migrate statistics store to composition API and typescript

src/components/desktop/TrendsChart.vue

@@ -383,7 +383,7 @@ export default {
                 dateRange: {
                     minTime: minUnixTime,
                     maxTime: maxUnixTime,
-                    type: dateRangeType
+                    dateType: dateRangeType
                 }
             });
         },

src/components/mobile/TrendsBarChart.vue

@@ -310,7 +310,7 @@ export default {
                 dateRange: {
                     minTime: minUnixTime,
                     maxTime: maxUnixTime,
-                    type: dateRangeType
+                    dateType: dateRangeType
                 }
             });
         },

src/lib/services.ts

@@ -53,7 +53,7 @@ import type {
     TransactionStatisticRequest,
     TransactionStatisticResponse,
     TransactionStatisticTrendsRequest,
-    TransactionStatisticTrendsItem,
+    TransactionStatisticTrendsResponseItem,
     TransactionAmountsRequestParams,
     TransactionAmountsResponse
 } from '@/models/transaction.ts';
@@ -380,7 +380,7 @@ export default {
 
         return axios.get<ApiResponse<TransactionStatisticResponse>>(`v1/transactions/statistics.json?use_transaction_timezone=${req.useTransactionTimezone}` + (queryParams.length ? '&' + queryParams.join('&') : ''));
     },
-    getTransactionStatisticsTrends: (req: TransactionStatisticTrendsRequest): ApiResponsePromise<TransactionStatisticTrendsItem[]> => {
+    getTransactionStatisticsTrends: (req: TransactionStatisticTrendsRequest): ApiResponsePromise<TransactionStatisticTrendsResponseItem[]> => {
         const queryParams = [];
 
         if (req.startYearMonth) {
@@ -399,7 +399,7 @@ export default {
             queryParams.push(`tag_filter_type=${req.tagFilterType}`);
         }
 
-        return axios.get<ApiResponse<TransactionStatisticTrendsItem[]>>(`v1/transactions/statistics/trends.json?use_transaction_timezone=${req.useTransactionTimezone}` + (queryParams.length ? '&' + queryParams.join('&') : ''));
+        return axios.get<ApiResponse<TransactionStatisticTrendsResponseItem[]>>(`v1/transactions/statistics/trends.json?use_transaction_timezone=${req.useTransactionTimezone}` + (queryParams.length ? '&' + queryParams.join('&') : ''));
     },
     getTransactionAmounts: (params: TransactionAmountsRequestParams): ApiResponsePromise<TransactionAmountsResponse> => {
         const req = TransactionAmountsRequest.of(params);

src/lib/statistics.ts

@@ -1,5 +1,6 @@
 import type { YearMonth, YearUnixTime, YearQuarterUnixTime, YearMonthUnixTime } from '@/core/datetime.ts';
 import { ChartSortingType, ChartDateAggregationType } from '@/core/statistics.ts';
+import type { TransactionStatisticDataItemBase } from '@/models/transaction.ts';
 
 import {
     getAllMonthsStartAndEndUnixTimes,
@@ -7,7 +8,7 @@ import {
     getAllYearsStartAndEndUnixTimes
 } from '@/lib/datetime.ts';
 
-export function sortStatisticsItems(items: { name: string, totalAmount: number, displayOrders: number[] }[], sortingType: number): void {
+export function sortStatisticsItems(items: TransactionStatisticDataItemBase[], sortingType: number): void {
     if (sortingType === ChartSortingType.DisplayOrder.type) {
         items.sort(function (data1, data2) {
             for (let i = 0; i < Math.min(data1.displayOrders.length, data2.displayOrders.length); i++) {

src/models/transaction.ts

@@ -227,15 +227,71 @@ export interface TransactionStatisticResponse {
 export interface TransactionStatisticResponseItem {
     readonly categoryId: string;
     readonly accountId: string;
-    readonly totalAmount: number;
+    readonly amount: number;
 }
 
-export interface TransactionStatisticTrendsItem {
+export interface TransactionStatisticResponseWithInfo {
+    readonly startTime: number;
+    readonly endTime: number;
+    readonly items: TransactionStatisticResponseItemWithInfo[];
+}
+
+export interface TransactionStatisticResponseItemWithInfo extends TransactionStatisticResponseItem {
+    readonly account?: AccountInfoResponse;
+    readonly primaryAccount?: AccountInfoResponse;
+    readonly category?: TransactionCategoryInfoResponse;
+    readonly primaryCategory?: TransactionCategoryInfoResponse;
+    readonly amountInDefaultCurrency: number | null;
+}
+
+export interface TransactionStatisticTrendsResponseItem {
     readonly year: number;
     readonly month: number;
     readonly items: TransactionStatisticResponseItem[];
 }
 
+export interface TransactionStatisticTrendsResponseItemWithInfo {
+    readonly year: number;
+    readonly month: number;
+    readonly items: TransactionStatisticResponseItemWithInfo[];
+}
+
+export type TransactionStatisticDataItemType = 'category' | 'account' | 'total';
+
+export interface TransactionStatisticDataItemBase {
+    readonly name: string;
+    readonly type: TransactionStatisticDataItemType;
+    readonly id: string;
+    readonly icon: string;
+    readonly color: string;
+    readonly hidden: boolean;
+    readonly displayOrders: number[];
+    readonly totalAmount: number;
+}
+
+export interface TransactionCategoricalAnalysisData {
+    readonly totalAmount: number;
+    readonly items: TransactionCategoricalAnalysisDataItem[];
+}
+
+export interface TransactionCategoricalAnalysisDataItem extends TransactionStatisticDataItemBase {
+    readonly percent: number;
+}
+
+export interface TransactionTrendsAnalysisData {
+    readonly items: TransactionTrendsAnalysisDataItem[];
+}
+
+export interface TransactionTrendsAnalysisDataItem extends TransactionStatisticDataItemBase {
+    readonly items: TransactionTrendsAnalysisDataAmount[];
+}
+
+export interface TransactionTrendsAnalysisDataAmount {
+    readonly year: number;
+    readonly month: number;
+    readonly totalAmount: number;
+}
+
 export type TransactionAmountsResponse = PartialRecord<TransactionAmountsRequestType, TransactionAmountsResponseItem>;
 
 export interface TransactionAmountsResponseItem {

src/stores/index.ts

@@ -11,8 +11,7 @@ import { useTransactionTemplatesStore } from './transactionTemplate.js';
 // @ts-expect-error the above file is migrating to ts
 import { useTransactionsStore } from './transaction.js';
 import { useOverviewStore } from './overview.ts';
-// @ts-expect-error the above file is migrating to ts
+import { useStatisticsStore } from './statistics.ts';
-import { useStatisticsStore } from './statistics.js';
 import { useExchangeRatesStore } from './exchangeRates.ts';
 
 import type { AuthResponse, RegisterResponse } from '@/models/auth_response.ts';

src/stores/transaction.js

@@ -5,7 +5,7 @@ import { useUserStore } from './user.ts';
 import { useAccountsStore } from './account.ts';
 import { useTransactionCategoriesStore } from './transactionCategory.ts';
 import { useOverviewStore } from './overview.ts';
-import { useStatisticsStore } from './statistics.js';
+import { useStatisticsStore } from './statistics.ts';
 import { useExchangeRatesStore } from './exchangeRates.ts';
 
 import { DateRange } from '@/core/datetime.ts';

src/views/base/settings/AppSettingsPageBase.ts

@@ -6,8 +6,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 // @ts-expect-error the above file is migrating to ts
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.ts';
-// @ts-expect-error the above file is migrating to ts
+import { useStatisticsStore } from '@/stores/statistics.ts';
-import { useStatisticsStore } from '@/stores/statistics.js';
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
 import type { LocalizedTimezoneInfo } from '@/core/timezone.ts';

src/views/desktop/common/cards/AccountFilterSettingsCard.vue

@@ -150,7 +150,7 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
 import { copyObjectTo } from '@/lib/common.ts';

src/views/desktop/common/cards/CategoryFilterSettingsCard.vue

@@ -147,7 +147,7 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { CategoryType } from '@/core/category.ts';
 import { copyObjectTo, arrayItemToObjectField } from '@/lib/common.ts';

src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue

@@ -134,7 +134,7 @@
 import { mapStores } from 'pinia';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { TransactionTagFilterType } from '@/core/transaction.ts';
 

src/views/desktop/statistics/TransactionPage.vue

@@ -323,7 +323,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { DateRangeScene, DateRange } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';

src/views/desktop/transactions/list/dialogs/ImportDialog.vue

@@ -604,7 +604,7 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
 import { useOverviewStore } from '@/stores/overview.ts';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { CategoryType } from '@/core/category.ts';

src/views/mobile/settings/AccountFilterSettingsPage.vue

@@ -136,7 +136,7 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
 import { copyObjectTo } from '@/lib/common.ts';

src/views/mobile/settings/CategoryFilterSettingsPage.vue

@@ -143,7 +143,7 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { CategoryType } from '@/core/category.ts';
 import { copyObjectTo, arrayItemToObjectField } from '@/lib/common.ts';

src/views/mobile/settings/TransactionTagFilterSettingsPage.vue

@@ -114,7 +114,7 @@
 import { mapStores } from 'pinia';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { useTransactionsStore } from '@/stores/transaction.js';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { TransactionTagFilterType } from '@/core/transaction.ts';
 

src/views/mobile/statistics/TransactionPage.vue

@@ -330,7 +330,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
-import { useStatisticsStore } from '@/stores/statistics.js';
+import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import { DateRangeScene, DateRange } from '@/core/datetime.ts';
 import {