modify file name

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<T extends Year1BasedMonth> {
+export interface CommonMonthlyTrendsChartProps<T extends Year1BasedMonth> {
     items: YearMonthItems<T>[];
     startYearMonth: string;
     endYearMonth: string;
@@ -34,12 +34,12 @@ export interface CommonTrendsChartProps<T extends Year1BasedMonth> {
     enableClickItem?: boolean;
 }
 
-export interface TrendsBarChartClickEvent {
+export interface MonthlyTrendsBarChartClickEvent {
     itemId: string;
     dateRange: TimeRangeAndDateType;
 }
 
-export function useTrendsChartBase<T extends Year1BasedMonth>(props: CommonTrendsChartProps<T>) {
+export function useMonthlyTrendsChartBase<T extends Year1BasedMonth>(props: CommonMonthlyTrendsChartProps<T>) {
     const { tt } = useI18n();
 
     const allDateRanges = computed<YearUnixTime[] | FiscalYearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[]>(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.fiscalYearStart, props.dateAggregationType));

src/components/desktop/MonthlyTrendsChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-chart autoresize class="trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
+    <v-chart autoresize class="monthly-trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
              @click="clickItem" @legendselectchanged="onLegendSelectChanged" />
 </template>
 
@@ -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<T extends Year1BasedMonth> extends CommonTrendsChartProps<T> {
+interface DesktopMonthlyTrendsChartProps<T extends Year1BasedMonth> extends CommonMonthlyTrendsChartProps<T> {
     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<DesktopTrendsChartProps<YearMonthDataItem>>();
+const props = defineProps<DesktopMonthlyTrendsChartProps<YearMonthDataItem>>();
 
 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<string[]>(() => {
     return allDisplayDateRanges;
 });
 
-const allSeries = computed<TrendsChartDataItem[]>(() => {
+const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
-    const allSeries: TrendsChartDataItem[] = [];
+    const allSeries: MonthlyTrendsChartDataItem[] = [];
 
     for (let i = 0; i < props.items.length; i++) {
         const item = props.items[i];
@@ -204,7 +204,7 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
             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<object>(() => {
             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({
 </script>
 
 <style scoped>
-.trends-chart-container {
+.monthly-trends-chart-container {
     width: 100%;
     height: 560px;
     margin-top: 10px;
 }
 
 @media (min-width: 600px) {
-    .pie-chart-container {
+    .monthly-trends-chart-container {
-        height: 500px;
+        height: 600px;
     }
 }
 </style>

src/components/mobile/MonthlyTrendsBarChart.vue

@@ -33,13 +33,13 @@
     <f7-list v-else-if="!loading && allDisplayDataItems && allDisplayDataItems.data && allDisplayDataItems.data.length">
         <f7-list-item v-if="allDisplayDataItems.legends && allDisplayDataItems.legends.length > 1">
             <div class="display-flex" style="flex-wrap: wrap">
-                <div class="trends-bar-chart-legend display-flex align-items-center"
+                <div class="monthly-trends-bar-chart-legend display-flex align-items-center"
-                     :class="{ 'trends-bar-chart-legend-unselected': !!unselectedLegends[legend.id] }"
+                     :class="{ 'monthly-trends-bar-chart-legend-unselected': !!unselectedLegends[legend.id] }"
                      :key="idx"
                      v-for="(legend, idx) in allDisplayDataItems.legends"
                      @click="toggleLegend(legend)">
-                    <f7-icon f7="app_fill" class="trends-bar-chart-legend-icon" :style="{ 'color': unselectedLegends[legend.id] ? '' : legend.color }"></f7-icon>
+                    <f7-icon f7="app_fill" class="monthly-trends-bar-chart-legend-icon" :style="{ 'color': unselectedLegends[legend.id] ? '' : legend.color }"></f7-icon>
-                    <span class="trends-bar-chart-legend-text">{{ legend.name }}</span>
+                    <span class="monthly-trends-bar-chart-legend-text">{{ legend.name }}</span>
                 </div>
             </div>
         </f7-list-item>
@@ -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 {
+interface MonthlyTrendsBarChartData {
-    readonly data: TrendsBarChartDataItem[];
+    readonly data: MonthlyTrendsBarChartDataItem[];
     readonly legends: TrendsBarChartLegend[];
 }
 
-interface MobileTrendsChartProps<T extends Year1BasedMonth> extends CommonTrendsChartProps<T> {
+interface MobileMonthlyTrendsChartProps<T extends Year1BasedMonth> extends CommonMonthlyTrendsChartProps<T> {
     loading?: boolean;
 }
 
-const props = defineProps<MobileTrendsChartProps<YearMonthDataItem>>();
+const props = defineProps<MobileMonthlyTrendsChartProps<YearMonthDataItem>>();
 
 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<Record<string, boolean>>({});
 
-const allDisplayDataItems = computed<TrendsBarChartData>(() => {
+const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
-    const allDateRangeItemsMap: Record<string, TrendsBarChartDataAmount[]> = {};
+    const allDateRangeItemsMap: Record<string, MonthlyTrendsBarChartDataAmount[]> = {};
     const legends: TrendsBarChartLegend[] = [];
 
     for (let i = 0; i < props.items.length; i++) {
@@ -181,7 +181,7 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
             continue;
         }
 
-        const dateRangeItemMap: Record<string, TrendsBarChartDataAmount> = {};
+        const dateRangeItemMap: Record<string, MonthlyTrendsBarChartDataAmount> = {};
 
         for (let j = 0; j < item.items.length; j++) {
             const dataItem = item.items[j];
@@ -204,8 +204,8 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
             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 allDataItems: MonthlyTrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || [];
-                const finalDataItem: TrendsBarChartDataAmount = Object.assign({}, legend, {
+                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<TrendsBarChartData>(() => {
         }
     }
 
-    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<TrendsBarChartData>(() => {
             maxTotalAmount = totalAmount;
         }
 
-        const finalDataItem: TrendsBarChartDataItem = {
+        const finalDataItem: MonthlyTrendsBarChartDataItem = {
             dateRange: dateRange,
             displayDateRange: displayDateRange,
             items: dataItems,
@@ -289,7 +289,7 @@ const allDisplayDataItems = computed<TrendsBarChartData>(() => {
     };
 });
 
-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 {
 </script>
 
 <style>
-.trends-bar-chart-legend {
+.monthly-trends-bar-chart-legend {
     margin-right: 4px;
     cursor: pointer;
 }
 
-.trends-bar-chart-legend-icon.f7-icons {
+.monthly-trends-bar-chart-legend-icon.f7-icons {
     font-size: var(--ebk-trends-bar-chart-legend-icon-font-size);
     margin-right: 2px;
 }
 
-.trends-bar-chart-legend-unselected .trends-bar-chart-legend-icon.f7-icons {
+.monthly-trends-bar-chart-legend-unselected .monthly-trends-bar-chart-legend-icon.f7-icons {
     color: #cccccc;
 }
 
-.trends-bar-chart-legend-text {
+.monthly-trends-bar-chart-legend-text {
     font-size: var(--ebk-trends-bar-chart-legend-text-font-size);
 }
 
-.trends-bar-chart-legend-unselected .trends-bar-chart-legend-text {
+.monthly-trends-bar-chart-legend-unselected .monthly-trends-bar-chart-legend-text {
     color: #cccccc;
 }
 </style>

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);

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);

src/views/desktop/statistics/TransactionPage.vue

@@ -257,7 +257,7 @@
                                     </v-card-text>
 
                                     <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === StatisticsAnalysisType.TrendAnalysis">
-                                        <trends-chart
+                                        <monthly-trends-chart
                                             :type="queryChartType"
                                             :start-year-month="query.trendChartStartYearMonth"
                                             :end-year-month="query.trendChartEndYearMonth"
@@ -271,8 +271,8 @@
                                             value-field="value"
                                             color-field="color"
                                             v-if="initing"
-                                        ></trends-chart>
+                                        />
-                                        <trends-chart
+                                        <monthly-trends-chart
                                             :type="queryChartType"
                                             :start-year-month="query.trendChartStartYearMonth"
                                             :end-year-month="query.trendChartEndYearMonth"
@@ -285,7 +285,7 @@
                                             :enable-click-item="true"
                                             :default-currency="defaultCurrency"
                                             :show-total-amount-in-tooltip="showTotalAmountInTrendsChart"
-                                            ref="trendsChart"
+                                            ref="monthlyTrendsChart"
                                             id-field="id"
                                             name-field="name"
                                             value-field="totalAmount"
@@ -340,7 +340,7 @@
 
 <script setup lang="ts">
 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<typeof SnackBar>;
-type TrendsChartType = InstanceType<typeof TrendsChart>;
+type MonthlyTrendsChartType = InstanceType<typeof MonthlyTrendsChart>;
 type ExportDialogType = InstanceType<typeof ExportDialog>;
 
 interface TransactionStatisticsProps {
@@ -461,7 +461,7 @@ const transactionCategoriesStore = useTransactionCategoriesStore();
 const statisticsStore = useStatisticsStore();
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
-const trendsChart = useTemplateRef<TrendsChartType>('trendsChart');
+const monthlyTrendsChart = useTemplateRef<MonthlyTrendsChartType>('monthlyTrendsChart');
 const exportDialog = useTemplateRef<ExportDialogType>('exportDialog');
 
 const activeTab = ref<string>('statisticsPage');
@@ -481,7 +481,7 @@ const statisticsDataHasData = computed<boolean>(() => {
     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) {
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && trendsAnalysisData.value && trendsAnalysisData.value.items && monthlyTrendsChart.value) {
-        const exportData = trendsChart.value.exportData();
+        const exportData = monthlyTrendsChart.value.exportData();
         exportDialog.value?.open({
             headers: exportData.headers || [],
             data: exportData.data || []

src/views/mobile/statistics/TransactionPage.vue

@@ -202,7 +202,7 @@
                 </div>
             </f7-card-header>
             <f7-card-content style="margin-top: -14px" :padding="false">
-                <trends-bar-chart
+                <monthly-trends-bar-chart
                     :loading="loading || reloading"
                     :start-year-month="query.trendChartStartYearMonth"
                     :end-year-month="query.trendChartEndYearMonth"