From 15d1d269ae502c6773aab9c27bcbba9ae80ca0e8 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sun, 3 Aug 2025 19:28:22 +0800 Subject: [PATCH] modify file name --- ...ChartBase.ts => MonthlyTrendsChartBase.ts} | 6 +-- ...TrendsChart.vue => MonthlyTrendsChart.vue} | 30 +++++------ ...BarChart.vue => MonthlyTrendsBarChart.vue} | 54 +++++++++---------- src/desktop-main.ts | 4 +- src/mobile-main.ts | 4 +- .../desktop/statistics/TransactionPage.vue | 20 +++---- .../mobile/statistics/TransactionPage.vue | 2 +- 7 files changed, 60 insertions(+), 60 deletions(-) rename src/components/base/{TrendsChartBase.ts => MonthlyTrendsChartBase.ts} (87%) rename src/components/desktop/{TrendsChart.vue => MonthlyTrendsChart.vue} (93%) rename src/components/mobile/{TrendsBarChart.vue => MonthlyTrendsBarChart.vue} (85%) diff --git a/src/components/base/TrendsChartBase.ts b/src/components/base/MonthlyTrendsChartBase.ts similarity index 87% rename from src/components/base/TrendsChartBase.ts rename to src/components/base/MonthlyTrendsChartBase.ts index 49f7f6a2..18046caa 100644 --- a/src/components/base/TrendsChartBase.ts +++ b/src/components/base/MonthlyTrendsChartBase.ts @@ -16,7 +16,7 @@ import type { YearMonthItems } from '@/models/transaction.ts'; import { getAllDateRanges } from '@/lib/statistics.ts'; -export interface CommonTrendsChartProps { +export interface CommonMonthlyTrendsChartProps { items: YearMonthItems[]; startYearMonth: string; endYearMonth: string; @@ -34,12 +34,12 @@ export interface CommonTrendsChartProps { enableClickItem?: boolean; } -export interface TrendsBarChartClickEvent { +export interface MonthlyTrendsBarChartClickEvent { itemId: string; dateRange: TimeRangeAndDateType; } -export function useTrendsChartBase(props: CommonTrendsChartProps) { +export function useMonthlyTrendsChartBase(props: CommonMonthlyTrendsChartProps) { const { tt } = useI18n(); const allDateRanges = computed(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.fiscalYearStart, props.dateAggregationType)); diff --git a/src/components/desktop/TrendsChart.vue b/src/components/desktop/MonthlyTrendsChart.vue similarity index 93% rename from src/components/desktop/TrendsChart.vue rename to src/components/desktop/MonthlyTrendsChart.vue index 56c3aaad..d0435607 100644 --- a/src/components/desktop/TrendsChart.vue +++ b/src/components/desktop/MonthlyTrendsChart.vue @@ -1,5 +1,5 @@ @@ -10,7 +10,7 @@ import type { ECElementEvent } from 'echarts/core'; import type { CallbackDataParams } from 'echarts/types/dist/shared'; import { useI18n } from '@/locales/helpers.ts'; -import { type CommonTrendsChartProps, type TrendsBarChartClickEvent, useTrendsChartBase } from '@/components/base/TrendsChartBase.ts' +import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEvent, useMonthlyTrendsChartBase } from '@/components/base/MonthlyTrendsChartBase.ts' import { useUserStore } from '@/stores/user.ts'; @@ -38,14 +38,14 @@ import { sortStatisticsItems } from '@/lib/statistics.ts'; -interface DesktopTrendsChartProps extends CommonTrendsChartProps { +interface DesktopMonthlyTrendsChartProps extends CommonMonthlyTrendsChartProps { skeleton?: boolean; type?: number; showValue?: boolean; showTotalAmountInTooltip?: boolean; } -interface TrendsChartDataItem { +interface MonthlyTrendsChartDataItem { id: string; name: string; itemStyle: { @@ -59,22 +59,22 @@ interface TrendsChartDataItem { data: number[]; } -interface TrendsChartTooltipItem extends SortableTransactionStatisticDataItem { +interface MonthlyTrendsChartTooltipItem extends SortableTransactionStatisticDataItem { readonly name: string; readonly color: unknown; readonly displayOrders: number[]; readonly totalAmount: number; } -const props = defineProps>(); +const props = defineProps>(); const emit = defineEmits<{ - (e: 'click', value: TrendsBarChartClickEvent): void; + (e: 'click', value: MonthlyTrendsBarChartClickEvent): void; }>(); const theme = useTheme(); const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatAmountWithCurrency } = useI18n(); -const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props); +const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props); const userStore = useUserStore(); @@ -137,8 +137,8 @@ const allDisplayDateRanges = computed(() => { return allDisplayDateRanges; }); -const allSeries = computed(() => { - const allSeries: TrendsChartDataItem[] = []; +const allSeries = computed(() => { + const allSeries: MonthlyTrendsChartDataItem[] = []; for (let i = 0; i < props.items.length; i++) { const item = props.items[i]; @@ -204,7 +204,7 @@ const allSeries = computed(() => { allAmounts.push(amount); } - const finalItem: TrendsChartDataItem = { + const finalItem: MonthlyTrendsChartDataItem = { id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string), name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string), itemStyle: { @@ -294,7 +294,7 @@ const chartOptions = computed(() => { formatter: (params: CallbackDataParams[]) => { let tooltip = ''; let totalAmount = 0; - const displayItems: TrendsChartTooltipItem[] = []; + const displayItems: MonthlyTrendsChartTooltipItem[] = []; for (let i = 0; i < params.length; i++) { const id = params[i].seriesId as string; @@ -458,15 +458,15 @@ defineExpose({ diff --git a/src/components/mobile/TrendsBarChart.vue b/src/components/mobile/MonthlyTrendsBarChart.vue similarity index 85% rename from src/components/mobile/TrendsBarChart.vue rename to src/components/mobile/MonthlyTrendsBarChart.vue index 375a956a..bb1f0f10 100644 --- a/src/components/mobile/TrendsBarChart.vue +++ b/src/components/mobile/MonthlyTrendsBarChart.vue @@ -33,13 +33,13 @@
-
- - {{ legend.name }} + + {{ legend.name }}
@@ -91,7 +91,7 @@ import { ref, computed } from 'vue'; import { useI18n } from '@/locales/helpers.ts'; -import { type CommonTrendsChartProps, type TrendsBarChartClickEvent, useTrendsChartBase } from '@/components/base/TrendsChartBase.ts' +import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEvent, useMonthlyTrendsChartBase } from '@/components/base/MonthlyTrendsChartBase.ts' import { useUserStore } from '@/stores/user.ts'; @@ -120,43 +120,43 @@ interface TrendsBarChartLegend { readonly displayOrders: number[]; } -interface TrendsBarChartDataAmount extends SortableTransactionStatisticDataItem, TrendsBarChartLegend { +interface MonthlyTrendsBarChartDataAmount extends SortableTransactionStatisticDataItem, TrendsBarChartLegend { totalAmount: number; } -interface TrendsBarChartDataItem { +interface MonthlyTrendsBarChartDataItem { dateRange: UnixTimeRange; displayDateRange: string; - items: TrendsBarChartDataAmount[]; + items: MonthlyTrendsBarChartDataAmount[]; totalAmount: number; totalPositiveAmount: number; percent: number; } -interface TrendsBarChartData { - readonly data: TrendsBarChartDataItem[]; +interface MonthlyTrendsBarChartData { + readonly data: MonthlyTrendsBarChartDataItem[]; readonly legends: TrendsBarChartLegend[]; } -interface MobileTrendsChartProps extends CommonTrendsChartProps { +interface MobileMonthlyTrendsChartProps extends CommonMonthlyTrendsChartProps { loading?: boolean; } -const props = defineProps>(); +const props = defineProps>(); const emit = defineEmits<{ - (e: 'click', value: TrendsBarChartClickEvent): void; + (e: 'click', value: MonthlyTrendsBarChartClickEvent): void; }>(); const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatAmountWithCurrency } = useI18n(); -const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props); +const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props); const userStore = useUserStore(); const unselectedLegends = ref>({}); -const allDisplayDataItems = computed(() => { - const allDateRangeItemsMap: Record = {}; +const allDisplayDataItems = computed(() => { + const allDateRangeItemsMap: Record = {}; const legends: TrendsBarChartLegend[] = []; for (let i = 0; i < props.items.length; i++) { @@ -181,7 +181,7 @@ const allDisplayDataItems = computed(() => { continue; } - const dateRangeItemMap: Record = {}; + const dateRangeItemMap: Record = {}; for (let j = 0; j < item.items.length; j++) { const dataItem = item.items[j]; @@ -204,8 +204,8 @@ const allDisplayDataItems = computed(() => { if (dateRangeItemMap[dateRangeKey]) { dateRangeItemMap[dateRangeKey].totalAmount += (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0; } else { - const allDataItems: TrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || []; - const finalDataItem: TrendsBarChartDataAmount = Object.assign({}, legend, { + const allDataItems: MonthlyTrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || []; + const finalDataItem: MonthlyTrendsBarChartDataAmount = Object.assign({}, legend, { totalAmount: (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0 }); @@ -216,7 +216,7 @@ const allDisplayDataItems = computed(() => { } } - const finalDataItems: TrendsBarChartDataItem[] = []; + const finalDataItems: MonthlyTrendsBarChartDataItem[] = []; let maxTotalAmount = 0; for (let i = 0; i < allDateRanges.value.length; i++) { @@ -263,7 +263,7 @@ const allDisplayDataItems = computed(() => { maxTotalAmount = totalAmount; } - const finalDataItem: TrendsBarChartDataItem = { + const finalDataItem: MonthlyTrendsBarChartDataItem = { dateRange: dateRange, displayDateRange: displayDateRange, items: dataItems, @@ -289,7 +289,7 @@ const allDisplayDataItems = computed(() => { }; }); -function clickItem(item: TrendsBarChartDataItem): void { +function clickItem(item: MonthlyTrendsBarChartDataItem): void { let itemId = ''; for (let i = 0; i < props.items.length; i++) { @@ -354,25 +354,25 @@ function toggleLegend(legend: TrendsBarChartLegend): void { diff --git a/src/desktop-main.ts b/src/desktop-main.ts index b245c0c0..454b1cbb 100644 --- a/src/desktop-main.ts +++ b/src/desktop-main.ts @@ -95,7 +95,7 @@ import StepsBar from '@/components/desktop/StepsBar.vue'; import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue'; import SnackBar from '@/components/desktop/SnackBar.vue'; import PieChartComponent from '@/components/desktop/PieChart.vue'; -import TrendsChartComponent from '@/components/desktop/TrendsChart.vue'; +import MonthlyTrendsChart from '@/components/desktop/MonthlyTrendsChart.vue'; import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue'; import MonthSelectionDialog from '@/components/desktop/MonthSelectionDialog.vue'; import MonthRangeSelectionDialog from '@/components/desktop/MonthRangeSelectionDialog.vue'; @@ -521,7 +521,7 @@ app.component('StepsBar', StepsBar); app.component('ConfirmDialog', ConfirmDialog); app.component('SnackBar', SnackBar); app.component('PieChart', PieChartComponent); -app.component('TrendsChart', TrendsChartComponent); +app.component('MonthlyTrendsChart', MonthlyTrendsChart); app.component('DateRangeSelectionDialog', DateRangeSelectionDialog); app.component('MonthSelectionDialog', MonthSelectionDialog); app.component('MonthRangeSelectionDialog', MonthRangeSelectionDialog); diff --git a/src/mobile-main.ts b/src/mobile-main.ts index 50eb2ade..b57c0d47 100644 --- a/src/mobile-main.ts +++ b/src/mobile-main.ts @@ -87,7 +87,7 @@ import MapView from '@/components/common/MapView.vue'; import ItemIcon from '@/components/mobile/ItemIcon.vue'; import LanguageSelectButton from '@/components/mobile/LanguageSelectButton.vue'; import PieChart from '@/components/mobile/PieChart.vue'; -import TrendsBarChart from '@/components/mobile/TrendsBarChart.vue'; +import MonthlyTrendsBarChart from '@/components/mobile/MonthlyTrendsBarChart.vue'; import PinCodeInputSheet from '@/components/mobile/PinCodeInputSheet.vue'; import PasswordInputSheet from '@/components/mobile/PasswordInputSheet.vue'; import PasscodeInputSheet from '@/components/mobile/PasscodeInputSheet.vue'; @@ -176,7 +176,7 @@ app.component('MapView', MapView); app.component('ItemIcon', ItemIcon); app.component('LanguageSelectButton', LanguageSelectButton); app.component('PieChart', PieChart); -app.component('TrendsBarChart', TrendsBarChart); +app.component('MonthlyTrendsBarChart', MonthlyTrendsBarChart); app.component('PinCodeInputSheet', PinCodeInputSheet); app.component('PasswordInputSheet', PasswordInputSheet); app.component('PasscodeInputSheet', PasscodeInputSheet); diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue index d3cc5d42..1ed87595 100644 --- a/src/views/desktop/statistics/TransactionPage.vue +++ b/src/views/desktop/statistics/TransactionPage.vue @@ -257,7 +257,7 @@ - - + import SnackBar from '@/components/desktop/SnackBar.vue'; -import TrendsChart from '@/components/desktop/TrendsChart.vue'; +import MonthlyTrendsChart from '@/components/desktop/MonthlyTrendsChart.vue'; import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue'; import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue'; import TransactionTagFilterSettingsCard from '@/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue'; @@ -402,7 +402,7 @@ import { } from '@mdi/js'; type SnackBarType = InstanceType; -type TrendsChartType = InstanceType; +type MonthlyTrendsChartType = InstanceType; type ExportDialogType = InstanceType; interface TransactionStatisticsProps { @@ -461,7 +461,7 @@ const transactionCategoriesStore = useTransactionCategoriesStore(); const statisticsStore = useStatisticsStore(); const snackbar = useTemplateRef('snackbar'); -const trendsChart = useTemplateRef('trendsChart'); +const monthlyTrendsChart = useTemplateRef('monthlyTrendsChart'); const exportDialog = useTemplateRef('exportDialog'); const activeTab = ref('statisticsPage'); @@ -481,7 +481,7 @@ const statisticsDataHasData = computed(() => { if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) { return !!categoricalAnalysisData.value && !!categoricalAnalysisData.value.items && categoricalAnalysisData.value.items.length > 0; } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) { - return !!trendsAnalysisData.value && !!trendsAnalysisData.value.items && trendsAnalysisData.value.items.length > 0 && !!trendsChart.value; + return !!trendsAnalysisData.value && !!trendsAnalysisData.value.items && trendsAnalysisData.value.items.length > 0 && !!monthlyTrendsChart.value; } return false; @@ -960,8 +960,8 @@ function exportResults(): void { item.percent.toFixed(4) ]) }); - } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && trendsAnalysisData.value && trendsAnalysisData.value.items && trendsChart.value) { - const exportData = trendsChart.value.exportData(); + } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && trendsAnalysisData.value && trendsAnalysisData.value.items && monthlyTrendsChart.value) { + const exportData = monthlyTrendsChart.value.exportData(); exportDialog.value?.open({ headers: exportData.headers || [], data: exportData.data || [] diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue index 22772f5a..2fc08679 100644 --- a/src/views/mobile/statistics/TransactionPage.vue +++ b/src/views/mobile/statistics/TransactionPage.vue @@ -202,7 +202,7 @@ -