From acaad355ed31412345dce4dff75284043b2b11d4 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 25 Jan 2025 23:02:40 +0800
Subject: [PATCH] migrate trends bar chart to composition API and typescript

---
 src/components/base/TrendsChartBase.ts        |  64 ++
 src/components/desktop/TrendsChart.vue        | 725 +++++++++---------
 src/components/mobile/TrendsBarChart.vue      | 452 +++++------
 src/lib/statistics.ts                         |   9 +-
 src/locales/helper.js                         |  14 -
 src/models/transaction.ts                     |  16 +-
 .../desktop/statistics/TransactionPage.vue    |   2 +
 7 files changed, 680 insertions(+), 602 deletions(-)
 create mode 100644 src/components/base/TrendsChartBase.ts

diff --git a/src/components/base/TrendsChartBase.ts b/src/components/base/TrendsChartBase.ts
new file mode 100644
index 00000000..80b7ddbb
--- /dev/null
+++ b/src/components/base/TrendsChartBase.ts
@@ -0,0 +1,64 @@
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import type {
+    YearMonth,
+    TimeRangeAndDateType,
+    YearUnixTime,
+    YearQuarterUnixTime,
+    YearMonthUnixTime
+} from '@/core/datetime.ts';
+import type { ColorValue } from '@/core/color.ts';
+import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
+import type { YearMonthItems } from '@/models/transaction.ts';
+
+import { getAllDateRanges } from '@/lib/statistics.ts';
+
+export interface CommonTrendsChartProps<T extends YearMonth> {
+    items: YearMonthItems<T>[];
+    startYearMonth: string;
+    endYearMonth: string;
+    sortingType: number;
+    dateAggregationType: number;
+    idField?: string;
+    nameField: string;
+    valueField: string;
+    colorField?: string;
+    hiddenField?: string;
+    displayOrdersField?: string;
+    translateName?: boolean;
+    defaultCurrency?: string;
+    enableClickItem?: boolean;
+}
+
+export interface TrendsBarChartClickEvent {
+    itemId: string;
+    dateRange: TimeRangeAndDateType;
+}
+
+export function useTrendsChartBase<T extends YearMonth>(props: CommonTrendsChartProps<T>) {
+    const { tt } = useI18n();
+
+    const allDateRanges = computed<YearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[]>(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.dateAggregationType));
+
+    function getItemName(name: string): string {
+        return props.translateName ? tt(name) : name;
+    }
+
+    function getColor(color: string): ColorValue {
+        if (color && color !== DEFAULT_ICON_COLOR) {
+            color = '#' + color;
+        }
+
+        return color;
+    }
+
+    return {
+        // computed states
+        allDateRanges,
+        // functions
+        getItemName,
+        getColor
+    }
+}
diff --git a/src/components/desktop/TrendsChart.vue b/src/components/desktop/TrendsChart.vue
index 12f0f7a8..f6247d30 100644
--- a/src/components/desktop/TrendsChart.vue
+++ b/src/components/desktop/TrendsChart.vue
@@ -3,17 +3,24 @@
              @click="clickItem" @legendselectchanged="onLegendSelectChanged" />
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 import { useTheme } from 'vuetify';
+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 { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 
-import { DateRangeScene } from '@/core/datetime.ts';
+import { type YearMonth, DateRangeScene } from '@/core/datetime.ts';
+import type { ColorValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { TrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
-import { DEFAULT_ICON_COLOR, DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
+
 import {
     isArray,
     isNumber
@@ -24,386 +31,386 @@ import {
     getDateTypeByDateRange
 } from '@/lib/datetime.ts';
 import {
-    sortStatisticsItems,
-    getAllDateRanges
+    sortStatisticsItems
 } from '@/lib/statistics.ts';
 
-export default {
-    props: [
-        'skeleton',
-        'type',
-        'items',
-        'startYearMonth',
-        'endYearMonth',
-        'sortingType',
-        'dateAggregationType',
-        'idField',
-        'nameField',
-        'valueField',
-        'colorField',
-        'hiddenField',
-        'displayOrdersField',
-        'translateName',
-        'defaultCurrency',
-        'showValue',
-        'showTotalAmountInTooltip',
-        'enableClickItem'
-    ],
-    emits: [
-        'click'
-    ],
-    data() {
-        return {
-            selectedLegends: null
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore),
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        itemsMap: function () {
-            const map = {};
+interface DesktopTrendsChartProps<T extends YearMonth> extends CommonTrendsChartProps<T> {
+    skeleton?: boolean;
+    type: number;
+    showValue?: boolean;
+    showTotalAmountInTooltip?: boolean;
+}
 
-            for (let i = 0; i < this.items.length; i++) {
-                const item = this.items[i];
-                let id = '';
+interface TrendsChartDataItem {
+    id: string;
+    name: string;
+    itemStyle: {
+        color: ColorValue;
+    };
+    selected: boolean;
+    type: string;
+    areaStyle?: object;
+    stack: string;
+    animation: boolean;
+    data: number[];
+}
 
-                if (this.idField && item[this.idField]) {
-                    id = item[this.idField];
-                } else {
-                    id = this.getItemName(item[this.nameField]);
-                }
+interface TrendsChartTooltipItem extends SortableTransactionStatisticDataItem {
+    readonly name: string;
+    readonly color: unknown;
+    readonly displayOrders: number[];
+    readonly totalAmount: number;
+}
 
-                map[id] = {
-                    [this.idField || 'id']: id,
-                    [this.nameField || 'name']: item[this.nameField],
-                    [this.hiddenField || 'hidden']: item[this.hiddenField],
-                    [this.displayOrdersField || 'displayOrders']: item[this.displayOrdersField]
-                };
-            }
+const props = defineProps<DesktopTrendsChartProps<YearMonthDataItem>>();
 
-            return map;
-        },
-        allDateRanges: function () {
-            return getAllDateRanges(this.items, this.startYearMonth, this.endYearMonth, this.dateAggregationType);
-        },
-        allDisplayDateRanges: function () {
-            const allDisplayDateRanges = [];
+const emit = defineEmits<{
+    (e: 'click', value: TrendsBarChartClickEvent): void;
+}>();
 
-            for (let i = 0; i < this.allDateRanges.length; i++) {
-                const dateRange = this.allDateRanges[i];
+const theme = useTheme();
+const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatAmountWithCurrency } = useI18n();
+const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props);
 
-                if (this.dateAggregationType === ChartDateAggregationType.Year.type) {
-                    allDisplayDateRanges.push(this.$locale.formatUnixTimeToShortYear(this.userStore, dateRange.minUnixTime));
-                } else if (this.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                    allDisplayDateRanges.push(this.$locale.formatYearQuarter(dateRange.year, dateRange.quarter));
-                } else { // if (this.dateAggregationType === ChartDateAggregationType.Month.type) {
-                    allDisplayDateRanges.push(this.$locale.formatUnixTimeToShortYearMonth(this.userStore, dateRange.minUnixTime));
-                }
-            }
+const userStore = useUserStore();
 
-            return allDisplayDateRanges;
-        },
-        allSeries: function () {
-            const allSeries = [];
+const selectedLegends = ref<Record<string, boolean>>({});
 
-            for (let i = 0; i < this.items.length; i++) {
-                const item = this.items[i];
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 
-                if (!this.hiddenField || item[this.hiddenField]) {
-                    continue;
-                }
+const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
+    const map: Record<string, Record<string, unknown>> = {};
 
-                const allAmounts = [];
-                const dateRangeAmountMap = {};
+    for (let i = 0; i < props.items.length; i++) {
+        const item = props.items[i];
+        let id: string = '';
 
-                for (let j = 0; j < item.items.length; j++) {
-                    const dataItem = item.items[j];
-                    let dateRangeKey = '';
-
-                    if (this.dateAggregationType === ChartDateAggregationType.Year.type) {
-                        dateRangeKey = dataItem.year;
-                    } else if (this.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                        dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
-                    } else { // if (this.dateAggregationType === ChartDateAggregationType.Month.type) {
-                        dateRangeKey = `${dataItem.year}-${dataItem.month}`;
-                    }
-
-                    const dataItems = dateRangeAmountMap[dateRangeKey] || [];
-                    dataItems.push(dataItem);
-
-                    dateRangeAmountMap[dateRangeKey] = dataItems;
-                }
-
-                for (let j = 0; j < this.allDateRanges.length; j++) {
-                    const dateRange = this.allDateRanges[j];
-                    let dateRangeKey = '';
-
-                    if (this.dateAggregationType === ChartDateAggregationType.Year.type) {
-                        dateRangeKey = dateRange.year;
-                    } else if (this.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                        dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
-                    } else { // if (this.dateAggregationType === ChartDateAggregationType.Month.type) {
-                        dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
-                    }
-
-                    let amount = 0;
-                    const dataItems = dateRangeAmountMap[dateRangeKey];
-
-                    if (isArray(dataItems)) {
-                        for (let i = 0; i < dataItems.length; i++) {
-                            const dataItem = dataItems[i];
-
-                            if (isNumber(dataItem[this.valueField])) {
-                                amount += dataItem[this.valueField];
-                            }
-                        }
-                    }
-
-                    allAmounts.push(amount);
-                }
-
-                const finalItem = {
-                    id: (this.idField && item[this.idField]) ? item[this.idField] : this.getItemName(item[this.nameField]),
-                    name: (this.idField && item[this.idField]) ? item[this.idField] : this.getItemName(item[this.nameField]),
-                    itemStyle: {
-                        color: this.getColor(item[this.colorField] ? item[this.colorField] : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
-                    },
-                    selected: true,
-                    type: 'line',
-                    stack: 'a',
-                    animation: !self.skeleton,
-                    data: allAmounts
-                };
-
-                if (this.type === TrendChartType.Area.type) {
-                    finalItem.areaStyle = {};
-                } else if (this.type === TrendChartType.Column.type) {
-                    finalItem.type = 'bar';
-                }
-
-                allSeries.push(finalItem);
-            }
-
-            return allSeries;
-        },
-        yAxisWidth: function () {
-            let maxValue = Number.MIN_SAFE_INTEGER;
-            let minValue = Number.MAX_SAFE_INTEGER;
-            let width = 90;
-
-            if (!this.allSeries || !this.allSeries.length) {
-                return width;
-            }
-
-            for (let i = 0; i < this.allSeries.length; i++) {
-                for (let j = 0; j < this.allSeries[i].data.length; j++) {
-                    const value = this.allSeries[i].data[j];
-
-                    if (value > maxValue) {
-                        maxValue = value;
-                    }
-
-                    if (value < minValue) {
-                        minValue = value;
-                    }
-                }
-            }
-
-            const maxValueText = this.getDisplayCurrency(maxValue, this.defaultCurrency);
-            const minValueText = this.getDisplayCurrency(minValue, this.defaultCurrency);
-            const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
-
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            context.font = '12px Arial';
-
-            const textMetrics = context.measureText(maxLengthText);
-            const actualWidth = Math.round(textMetrics.width) + 20;
-
-            if (actualWidth >= 200) {
-                width = 200;
-            } if (actualWidth > 90) {
-                width = actualWidth;
-            }
-
-            return width;
-        },
-        chartOptions: function () {
-            const self = this;
-
-            return {
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'cross',
-                        label: {
-                            backgroundColor: self.isDarkMode ? '#333' : '#fff',
-                            color: self.isDarkMode ? '#eee' : '#333'
-                        },
-                    },
-                    backgroundColor: self.isDarkMode ? '#333' : '#fff',
-                    borderColor: self.isDarkMode ? '#333' : '#fff',
-                    textStyle: {
-                        color: self.isDarkMode ? '#eee' : '#333'
-                    },
-                    formatter: params => {
-                        let tooltip = '';
-                        let totalAmount = 0;
-                        const displayItems = [];
-
-                        for (let i = 0; i < params.length; i++) {
-                            const id = params[i].seriesId;
-                            const name = self.itemsMap[id] && self.nameField && self.itemsMap[id][self.nameField] ? self.getItemName(self.itemsMap[id][self.nameField]) : id;
-                            const color = params[i].color;
-                            const displayOrders = self.itemsMap[id] && self.displayOrdersField && self.itemsMap[id][self.displayOrdersField] ? self.itemsMap[id][self.displayOrdersField] : [0];
-                            const amount = params[i].data;
-
-                            displayItems.push({
-                                name: name,
-                                color: color,
-                                displayOrders: displayOrders,
-                                totalAmount: amount
-                            });
-
-                            totalAmount += amount;
-                        }
-
-                        sortStatisticsItems(displayItems, self.sortingType);
-
-                        for (let i = 0; i < displayItems.length; i++) {
-                            const item = displayItems[i];
-
-                            if (displayItems.length === 1 || item.totalAmount !== 0) {
-                                const value = self.getDisplayCurrency(item.totalAmount, self.defaultCurrency);
-                                tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
-                                tooltip += `<span>${item.name}</span><span style="margin-left: 20px; float: right">${value}</span><br/>`;
-                                tooltip += '</div>';
-                            }
-                        }
-
-                        if (self.showTotalAmountInTooltip) {
-                            const displayTotalAmount = self.getDisplayCurrency(totalAmount, self.defaultCurrency);
-                            tooltip = '<div style="border-bottom: ' + (self.isDarkMode ? '#eee' : '#333') + ' dashed 1px">'
-                                + '<span class="chart-pointer" style="background-color: ' + (self.isDarkMode ? '#eee' : '#333') + '"></span>'
-                                + `<span>${self.$t('Total Amount')}</span><span style="margin-left: 20px; float: right">${displayTotalAmount}</span><br/>`
-                                + '</div>' + tooltip;
-                        }
-
-                        if (params.length && params[0].name) {
-                            tooltip = `${params[0].name}<br/>` + tooltip;
-                        }
-
-                        return tooltip;
-                    }
-                },
-                legend: {
-                    orient: 'horizontal',
-                    data: self.allSeries.map(item => item.name),
-                    selected: self.selectedLegends,
-                    textStyle: {
-                        color: self.isDarkMode ? '#eee' : '#333'
-                    },
-                    formatter: id => {
-                        return self.itemsMap[id] && self.nameField && self.itemsMap[id][self.nameField] ? self.getItemName(self.itemsMap[id][self.nameField]) : id;
-                    }
-                },
-                grid: {
-                    left: self.yAxisWidth,
-                    right: 20
-                },
-                xAxis: [
-                    {
-                        type: 'category',
-                        data: self.allDisplayDateRanges
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: 'value',
-                        axisLabel: {
-                            formatter: function (value) {
-                                return self.getDisplayCurrency(value, self.defaultCurrency);
-                            }
-                        },
-                        axisPointer: {
-                            label: {
-                                formatter: function (params) {
-                                    return self.getDisplayCurrency(parseInt(params.value), self.defaultCurrency);
-                                }
-                            }
-                        }
-                    }
-                ],
-                series: self.allSeries
-            }
+        if (props.idField && item[props.idField]) {
+            id = item[props.idField] as string;
+        } else {
+            id = getItemName(item[props.nameField] as string);
         }
-    },
-    setup() {
-        const theme = useTheme();
 
-        return {
-            globalTheme: theme
+        const finalItem: Record<string, unknown> = {
+            [props.nameField]: item[props.nameField]
         };
-    },
-    methods: {
-        clickItem: function (e) {
-            if (!this.enableClickItem || e.componentType !== 'series') {
-                return;
-            }
 
-            const id = e.seriesId;
-            const item = this.itemsMap[id];
-            const itemId = this.idField ? item[this.idField] : '';
-            const dateRange = this.allDateRanges[e.dataIndex];
-            let minUnixTime = dateRange.minUnixTime;
-            let maxUnixTime = dateRange.maxUnixTime;
+        if (props.idField) {
+            finalItem[props.idField] = item[props.idField];
+        }
 
-            if (this.startYearMonth) {
-                const startMinUnixTime = getYearMonthFirstUnixTime(this.startYearMonth);
+        if (props.hiddenField) {
+            finalItem[props.hiddenField] = item[props.hiddenField];
+        }
 
-                if (startMinUnixTime > minUnixTime) {
-                    minUnixTime = startMinUnixTime;
-                }
-            }
+        if (props.displayOrdersField) {
+            finalItem[props.displayOrdersField] = item[props.displayOrdersField];
+        }
 
-            if (this.endYearMonth) {
-                const endMaxUnixTime = getYearMonthLastUnixTime(this.endYearMonth);
+        map[id] = finalItem;
+    }
 
-                if (endMaxUnixTime < maxUnixTime) {
-                    maxUnixTime = endMaxUnixTime;
-                }
-            }
+    return map;
+});
 
-            const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, this.userStore.currentUserFirstDayOfWeek, DateRangeScene.Normal);
+const allDisplayDateRanges = computed<string[]>(() => {
+    const allDisplayDateRanges: string[] = [];
 
-            this.$emit('click', {
-                itemId: itemId,
-                dateRange: {
-                    minTime: minUnixTime,
-                    maxTime: maxUnixTime,
-                    dateType: dateRangeType
-                }
-            });
-        },
-        getColor: function (color) {
-            if (color && color !== DEFAULT_ICON_COLOR) {
-                color = '#' + color;
-            }
+    for (let i = 0; i < allDateRanges.value.length; i++) {
+        const dateRange = allDateRanges.value[i];
 
-            return color;
-        },
-        getItemName(name) {
-            return this.translateName ? this.$t(name) : name;
-        },
-        onLegendSelectChanged: function (e) {
-            this.selectedLegends = e.selected;
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
+        if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+            allDisplayDateRanges.push(formatUnixTimeToShortYear(dateRange.minUnixTime));
+        } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
+            allDisplayDateRanges.push(formatYearQuarter(dateRange.year, dateRange.quarter));
+        } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+            allDisplayDateRanges.push(formatUnixTimeToShortYearMonth(dateRange.minUnixTime));
         }
     }
+
+    return allDisplayDateRanges;
+});
+
+const allSeries = computed<TrendsChartDataItem[]>(() => {
+    const allSeries: TrendsChartDataItem[] = [];
+
+    for (let i = 0; i < props.items.length; i++) {
+        const item = props.items[i];
+
+        if (props.hiddenField && item[props.hiddenField]) {
+            continue;
+        }
+
+        const allAmounts: number[] = [];
+        const dateRangeAmountMap: Record<string, YearMonthDataItem[]> = {};
+
+        for (let j = 0; j < item.items.length; j++) {
+            const dataItem = item.items[j];
+            let dateRangeKey = '';
+
+            if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+                dateRangeKey = dataItem.year.toString();
+            } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
+                dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
+            } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+                dateRangeKey = `${dataItem.year}-${dataItem.month}`;
+            }
+
+            const dataItems = dateRangeAmountMap[dateRangeKey] || [];
+            dataItems.push(dataItem);
+
+            dateRangeAmountMap[dateRangeKey] = dataItems;
+        }
+
+        for (let j = 0; j < allDateRanges.value.length; j++) {
+            const dateRange = allDateRanges.value[j];
+            let dateRangeKey = '';
+
+            if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+                dateRangeKey = dateRange.year.toString();
+            } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
+                dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
+            } else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month' in dateRange) {
+                dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
+            }
+
+            let amount = 0;
+            const dataItems = dateRangeAmountMap[dateRangeKey];
+
+            if (isArray(dataItems)) {
+                for (let i = 0; i < dataItems.length; i++) {
+                    const dataItem = dataItems[i];
+
+                    if (isNumber(dataItem[props.valueField])) {
+                        amount += dataItem[props.valueField];
+                    }
+                }
+            }
+
+            allAmounts.push(amount);
+        }
+
+        const finalItem: TrendsChartDataItem = {
+            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: {
+                color: getColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
+            },
+            selected: true,
+            type: 'line',
+            stack: 'a',
+            animation: !props.skeleton,
+            data: allAmounts
+        };
+
+        if (props.type === TrendChartType.Area.type) {
+            finalItem.areaStyle = {};
+        } else if (props.type === TrendChartType.Column.type) {
+            finalItem.type = 'bar';
+        }
+
+        allSeries.push(finalItem);
+    }
+
+    return allSeries;
+});
+
+const yAxisWidth = computed<number>(() => {
+    let maxValue = Number.MIN_SAFE_INTEGER;
+    let minValue = Number.MAX_SAFE_INTEGER;
+    let width = 90;
+
+    if (!allSeries.value || !allSeries.value.length) {
+        return width;
+    }
+
+    for (let i = 0; i < allSeries.value.length; i++) {
+        for (let j = 0; j < allSeries.value[i].data.length; j++) {
+            const value = allSeries.value[i].data[j];
+
+            if (value > maxValue) {
+                maxValue = value;
+            }
+
+            if (value < minValue) {
+                minValue = value;
+            }
+        }
+    }
+
+    const maxValueText = formatAmountWithCurrency(maxValue, props.defaultCurrency) || '';
+    const minValueText = formatAmountWithCurrency(minValue, props.defaultCurrency) || '';
+    const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
+
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    if (context) {
+        context.font = '12px Arial';
+
+        const textMetrics = context.measureText(maxLengthText);
+        const actualWidth = Math.round(textMetrics.width) + 20;
+
+        if (actualWidth >= 200) {
+            width = 200;
+        } if (actualWidth > 90) {
+            width = actualWidth;
+        }
+    }
+
+    return width;
+});
+
+const chartOptions = computed<object>(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: isDarkMode.value ? '#333' : '#fff',
+                    color: isDarkMode.value ? '#eee' : '#333'
+                },
+            },
+            backgroundColor: isDarkMode.value ? '#333' : '#fff',
+            borderColor: isDarkMode.value ? '#333' : '#fff',
+            textStyle: {
+                color: isDarkMode.value ? '#eee' : '#333'
+            },
+            formatter: (params: CallbackDataParams[]) => {
+                let tooltip = '';
+                let totalAmount = 0;
+                const displayItems: TrendsChartTooltipItem[] = [];
+
+                for (let i = 0; i < params.length; i++) {
+                    const id = params[i].seriesId as string;
+                    const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
+                    const color = params[i].color;
+                    const displayOrders = itemsMap.value[id] && props.displayOrdersField && itemsMap.value[id][props.displayOrdersField] ? itemsMap.value[id][props.displayOrdersField] as number[] : [0];
+                    const amount = params[i].data as number;
+
+                    displayItems.push({
+                        name: name,
+                        color: color,
+                        displayOrders: displayOrders,
+                        totalAmount: amount
+                    });
+
+                    totalAmount += amount;
+                }
+
+                sortStatisticsItems(displayItems, props.sortingType);
+
+                for (let i = 0; i < displayItems.length; i++) {
+                    const item = displayItems[i];
+
+                    if (displayItems.length === 1 || item.totalAmount !== 0) {
+                        const value = formatAmountWithCurrency(item.totalAmount, props.defaultCurrency);
+                        tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
+                        tooltip += `<span>${item.name}</span><span style="margin-left: 20px; float: right">${value}</span><br/>`;
+                        tooltip += '</div>';
+                    }
+                }
+
+                if (props.showTotalAmountInTooltip) {
+                    const displayTotalAmount = formatAmountWithCurrency(totalAmount, props.defaultCurrency);
+                    tooltip = '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px">'
+                        + '<span class="chart-pointer" style="background-color: ' + (isDarkMode.value ? '#eee' : '#333') + '"></span>'
+                        + `<span>${tt('Total Amount')}</span><span style="margin-left: 20px; float: right">${displayTotalAmount}</span><br/>`
+                        + '</div>' + tooltip;
+                }
+
+                if (params.length && params[0].name) {
+                    tooltip = `${params[0].name}<br/>` + tooltip;
+                }
+
+                return tooltip;
+            }
+        },
+        legend: {
+            orient: 'horizontal',
+            data: allSeries.value.map(item => item.name),
+            selected: selectedLegends.value,
+            textStyle: {
+                color: isDarkMode.value ? '#eee' : '#333'
+            },
+            formatter: (id: string) => {
+                return itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
+            }
+        },
+        grid: {
+            left: yAxisWidth.value,
+            right: 20
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: allDisplayDateRanges.value
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLabel: {
+                    formatter: (value: string) => {
+                        return formatAmountWithCurrency(value, props.defaultCurrency);
+                    }
+                },
+                axisPointer: {
+                    label: {
+                        formatter: (params: CallbackDataParams) => {
+                            return formatAmountWithCurrency(Math.floor(params.value as number), props.defaultCurrency);
+                        }
+                    }
+                }
+            }
+        ],
+        series: allSeries.value
+    };
+});
+
+function clickItem(e: ECElementEvent): void {
+    if (!props.enableClickItem || e.componentType !== 'series') {
+        return;
+    }
+
+    const id = e.seriesId as string;
+    const item = itemsMap.value[id];
+    const itemId = props.idField ? item[props.idField] as string : '';
+    const dateRange = allDateRanges.value[e.dataIndex];
+    let minUnixTime = dateRange.minUnixTime;
+    let maxUnixTime = dateRange.maxUnixTime;
+
+    if (props.startYearMonth) {
+        const startMinUnixTime = getYearMonthFirstUnixTime(props.startYearMonth);
+
+        if (startMinUnixTime > minUnixTime) {
+            minUnixTime = startMinUnixTime;
+        }
+    }
+
+    if (props.endYearMonth) {
+        const endMaxUnixTime = getYearMonthLastUnixTime(props.endYearMonth);
+
+        if (endMaxUnixTime < maxUnixTime) {
+            maxUnixTime = endMaxUnixTime;
+        }
+    }
+
+    const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, userStore.currentUserFirstDayOfWeek, DateRangeScene.Normal);
+
+    emit('click', {
+        itemId: itemId,
+        dateRange: {
+            minTime: minUnixTime,
+            maxTime: maxUnixTime,
+            dateType: dateRangeType
+        }
+    });
+}
+
+function onLegendSelectChanged(e: { selected: Record<string, boolean> }): void {
+    selectedLegends.value = e.selected;
 }
 </script>
 
diff --git a/src/components/mobile/TrendsBarChart.vue b/src/components/mobile/TrendsBarChart.vue
index 86c9916a..b5aa2890 100644
--- a/src/components/mobile/TrendsBarChart.vue
+++ b/src/components/mobile/TrendsBarChart.vue
@@ -27,7 +27,7 @@
     </f7-list>
 
     <f7-list v-else-if="!loading && (!allDisplayDataItems || !allDisplayDataItems.data || !allDisplayDataItems.data.length)">
-        <f7-list-item :title="$t('No transaction data')"></f7-list-item>
+        <f7-list-item :title="tt('No transaction data')"></f7-list-item>
     </f7-list>
 
     <f7-list v-else-if="!loading && allDisplayDataItems && allDisplayDataItems.data && allDisplayDataItems.data.length">
@@ -47,7 +47,6 @@
                       link="#"
                       :key="idx"
                       v-for="(item, idx) in allDisplayDataItems.data"
-                      v-show="!item.hidden"
                       @click="clickItem(item)"
         >
             <template #media>
@@ -65,7 +64,7 @@
             </template>
 
             <template #after>
-                <span>{{ getDisplayCurrency(item.totalAmount, defaultCurrency) }}</span>
+                <span>{{ formatAmountWithCurrency(item.totalAmount, defaultCurrency) }}</span>
             </template>
 
             <template #inner-end>
@@ -88,252 +87,257 @@
     </f7-list>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { type CommonTrendsChartProps, type TrendsBarChartClickEvent, useTrendsChartBase } from '@/components/base/TrendsChartBase.ts'
+
 import { useUserStore } from '@/stores/user.ts';
 
-import { DateRangeScene } from '@/core/datetime.ts';
+import { type YearMonth, type UnixTimeRange, DateRangeScene } from '@/core/datetime.ts';
 import { ChartDateAggregationType } from '@/core/statistics.ts';
-import { DEFAULT_ICON_COLOR, DEFAULT_CHART_COLORS } from '@/consts/color.ts';
-import { isNumber } from '@/lib/common.ts';
+import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
+
+import {
+    isNumber
+} from '@/lib/common.ts';
 import {
     getYearMonthFirstUnixTime,
     getYearMonthLastUnixTime,
     getDateTypeByDateRange
 } from '@/lib/datetime.ts';
 import {
-    sortStatisticsItems,
-    getAllDateRanges
+    sortStatisticsItems
 } from '@/lib/statistics.ts';
 
-export default {
-    props: [
-        'loading',
-        'items',
-        'startYearMonth',
-        'endYearMonth',
-        'sortingType',
-        'dateAggregationType',
-        'idField',
-        'nameField',
-        'valueField',
-        'colorField',
-        'hiddenField',
-        'displayOrdersField',
-        'translateName',
-        'defaultCurrency',
-        'enableClickItem'
-    ],
-    emits: [
-        'click'
-    ],
-    data() {
-        return {
-            unselectedLegends: {}
+interface TrendsBarChartLegend {
+    readonly id: string;
+    readonly name: string;
+    readonly color: string;
+    readonly displayOrders: number[];
+}
+
+interface TrendsBarChartDataAmount extends SortableTransactionStatisticDataItem, TrendsBarChartLegend {
+    totalAmount: number;
+}
+
+interface TrendsBarChartDataItem {
+    dateRange: UnixTimeRange;
+    displayDateRange: string;
+    items: TrendsBarChartDataAmount[];
+    totalAmount: number;
+    totalPositiveAmount: number;
+    percent: number;
+}
+
+interface TrendsBarChartData {
+    readonly data: TrendsBarChartDataItem[];
+    readonly legends: TrendsBarChartLegend[];
+}
+
+interface MobileTrendsChartProps<T extends YearMonth> extends CommonTrendsChartProps<T> {
+    loading?: boolean;
+}
+
+const props = defineProps<MobileTrendsChartProps<YearMonthDataItem>>();
+
+const emit = defineEmits<{
+    (e: 'click', value: TrendsBarChartClickEvent): void;
+}>();
+
+const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatAmountWithCurrency } = useI18n();
+const { allDateRanges, getItemName, getColor } = useTrendsChartBase(props);
+
+const userStore = useUserStore();
+
+const unselectedLegends = ref<Record<string, boolean>>({});
+
+const allDisplayDataItems = computed<TrendsBarChartData>(() => {
+    const allDateRangeItemsMap: Record<string, TrendsBarChartDataAmount[]> = {};
+    const legends: TrendsBarChartLegend[] = [];
+
+    for (let i = 0; i < props.items.length; i++) {
+        const item = props.items[i];
+
+        if (props.hiddenField && item[props.hiddenField]) {
+            continue;
+        }
+
+        const id = (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string);
+
+        const legend: TrendsBarChartLegend = {
+            id: id,
+            name: (props.nameField && item[props.nameField]) ? getItemName(item[props.nameField] as string) : id,
+            color: getColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
+            displayOrders: (props.displayOrdersField && item[props.displayOrdersField]) ? item[props.displayOrdersField] as number[] : [0]
         };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore),
-        allDateRanges: function () {
-            return getAllDateRanges(this.items, this.startYearMonth, this.endYearMonth, this.dateAggregationType);
-        },
-        allDisplayDataItems: function () {
-            const allDateRangeItemsMap = {};
-            const legends = [];
 
-            for (let i = 0; i < this.items.length; i++) {
-                const item = this.items[i];
+        legends.push(legend);
 
-                if (!this.hiddenField || item[this.hiddenField]) {
-                    continue;
-                }
-
-                const id = (this.idField && item[this.idField]) ? item[this.idField] : this.getItemName(item[this.nameField]);
-
-                const legend = {
-                    id: id,
-                    name: (this.nameField && item[this.nameField]) ? this.getItemName(item[this.nameField]) : id,
-                    color: this.getColor(item[this.colorField] ? item[this.colorField] : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
-                    displayOrders: (this.displayOrdersField && item[this.displayOrdersField]) ? item[this.displayOrdersField] : [0]
-                };
-
-                legends.push(legend);
-
-                if (this.unselectedLegends[id]) {
-                    continue;
-                }
-
-                const dateRangeItemMap = {};
-
-                for (let j = 0; j < item.items.length; j++) {
-                    const dataItem = item.items[j];
-                    let dateRangeKey = '';
-
-                    if (this.dateAggregationType === ChartDateAggregationType.Year.type) {
-                        dateRangeKey = dataItem.year;
-                    } else if (this.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                        dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
-                    } else { // if (this.dateAggregationType === ChartDateAggregationType.Month.type) {
-                        dateRangeKey = `${dataItem.year}-${dataItem.month}`;
-                    }
-
-                    if (dateRangeItemMap[dateRangeKey]) {
-                        dateRangeItemMap[dateRangeKey].totalAmount += (this.valueField && isNumber(dataItem[this.valueField])) ? dataItem[this.valueField] : 0;
-                    } else {
-                        const allDataItems = allDateRangeItemsMap[dateRangeKey] || [];
-                        const finalDataItem = Object.assign({}, legend, {
-                            totalAmount: (this.valueField && isNumber(dataItem[this.valueField])) ? dataItem[this.valueField] : 0
-                        });
-
-                        allDataItems.push(finalDataItem);
-                        dateRangeItemMap[dateRangeKey] = finalDataItem;
-                        allDateRangeItemsMap[dateRangeKey] = allDataItems;
-                    }
-                }
-            }
-
-            const finalDataItems = [];
-            let maxTotalAmount = 0;
-
-            for (let i = 0; i < this.allDateRanges.length; i++) {
-                const dateRange = this.allDateRanges[i];
-                let dateRangeKey = '';
-
-                if (this.dateAggregationType === ChartDateAggregationType.Year.type) {
-                    dateRangeKey = dateRange.year;
-                } else if (this.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                    dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
-                } else { // if (this.dateAggregationType === ChartDateAggregationType.Month.type) {
-                    dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
-                }
-
-                let displayDateRange = '';
-
-                if (this.dateAggregationType === ChartDateAggregationType.Year.type) {
-                    displayDateRange = this.$locale.formatUnixTimeToShortYear(this.userStore, dateRange.minUnixTime);
-                } else if (this.dateAggregationType === ChartDateAggregationType.Quarter.type) {
-                    displayDateRange = this.$locale.formatYearQuarter(dateRange.year, dateRange.quarter);
-                } else { // if (this.dateAggregationType === ChartDateAggregationType.Month.type) {
-                    displayDateRange = this.$locale.formatUnixTimeToShortYearMonth(this.userStore, dateRange.minUnixTime);
-                }
-
-                const dataItems = allDateRangeItemsMap[dateRangeKey] || [];
-                let totalAmount = 0;
-                let totalPositiveAmount = 0;
-
-                sortStatisticsItems(dataItems, this.sortingType);
-
-                for (let j = 0; j < dataItems.length; j++) {
-                    if (dataItems[j].totalAmount > 0) {
-                        totalPositiveAmount += dataItems[j].totalAmount;
-                    }
-
-                    totalAmount += dataItems[j].totalAmount;
-                }
-
-                if (totalAmount > maxTotalAmount) {
-                    maxTotalAmount = totalAmount;
-                }
-
-                finalDataItems.push({
-                    dateRange: dateRange,
-                    displayDateRange: displayDateRange,
-                    items: dataItems,
-                    totalAmount: totalAmount,
-                    totalPositiveAmount: totalPositiveAmount
-                });
-            }
-
-            for (let i = 0; i < finalDataItems.length; i++) {
-                if (maxTotalAmount > 0 && finalDataItems[i].totalAmount > 0) {
-                    finalDataItems[i].percent = 100.0 * finalDataItems[i].totalAmount / maxTotalAmount;
-                } else {
-                    finalDataItems[i].percent = 0.0;
-                }
-            }
-
-            return {
-                data: finalDataItems,
-                legends: legends
-            };
+        if (unselectedLegends.value[id]) {
+            continue;
         }
-    },
-    methods: {
-        clickItem: function (item) {
-            let itemId = '';
 
-            for (let i = 0; i < this.items.length; i++) {
-                const item = this.items[i];
+        const dateRangeItemMap: Record<string, TrendsBarChartDataAmount> = {};
 
-                if (!this.hiddenField || item[this.hiddenField]) {
-                    continue;
-                }
+        for (let j = 0; j < item.items.length; j++) {
+            const dataItem = item.items[j];
+            let dateRangeKey = '';
 
-                const id = (this.idField && item[this.idField]) ? item[this.idField] : this.getItemName(item[this.nameField]);
-
-                if (this.unselectedLegends[id]) {
-                    continue;
-                }
-
-                if (itemId.length) {
-                    itemId += ',';
-                }
-
-                itemId += id;
+            if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+                dateRangeKey = dataItem.year.toString();
+            } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
+                dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
+            } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+                dateRangeKey = `${dataItem.year}-${dataItem.month}`;
             }
 
-            const dateRange = item.dateRange;
-            let minUnixTime = dateRange.minUnixTime;
-            let maxUnixTime = dateRange.maxUnixTime;
-
-            if (this.startYearMonth) {
-                const startMinUnixTime = getYearMonthFirstUnixTime(this.startYearMonth);
-
-                if (startMinUnixTime > minUnixTime) {
-                    minUnixTime = startMinUnixTime;
-                }
-            }
-
-            if (this.endYearMonth) {
-                const endMaxUnixTime = getYearMonthLastUnixTime(this.endYearMonth);
-
-                if (endMaxUnixTime < maxUnixTime) {
-                    maxUnixTime = endMaxUnixTime;
-                }
-            }
-
-            const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, this.userStore.currentUserFirstDayOfWeek, DateRangeScene.Normal);
-
-            this.$emit('click', {
-                itemId: itemId,
-                dateRange: {
-                    minTime: minUnixTime,
-                    maxTime: maxUnixTime,
-                    dateType: dateRangeType
-                }
-            });
-        },
-        toggleLegend(legend) {
-            if (this.unselectedLegends[legend.id]) {
-                delete this.unselectedLegends[legend.id];
+            if (dateRangeItemMap[dateRangeKey]) {
+                dateRangeItemMap[dateRangeKey].totalAmount += (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0;
             } else {
-                this.unselectedLegends[legend.id] = true;
+                const allDataItems: TrendsBarChartDataAmount[] = allDateRangeItemsMap[dateRangeKey] || [];
+                const finalDataItem: TrendsBarChartDataAmount = Object.assign({}, legend, {
+                    totalAmount: (props.valueField && isNumber(dataItem[props.valueField])) ? dataItem[props.valueField] as number : 0
+                });
+
+                allDataItems.push(finalDataItem);
+                dateRangeItemMap[dateRangeKey] = finalDataItem;
+                allDateRangeItemsMap[dateRangeKey] = allDataItems;
             }
-        },
-        getColor: function (color) {
-            if (color && color !== DEFAULT_ICON_COLOR) {
-                color = '#' + color;
+        }
+    }
+
+    const finalDataItems: TrendsBarChartDataItem[] = [];
+    let maxTotalAmount = 0;
+
+    for (let i = 0; i < allDateRanges.value.length; i++) {
+        const dateRange = allDateRanges.value[i];
+        let dateRangeKey = '';
+
+        if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+            dateRangeKey = dateRange.year.toString();
+        } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
+            dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
+        } else if (props.dateAggregationType === ChartDateAggregationType.Month.type && 'month' in dateRange) {
+            dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
+        }
+
+        let displayDateRange = '';
+
+        if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
+            displayDateRange = formatUnixTimeToShortYear(dateRange.minUnixTime);
+        } else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type && 'quarter' in dateRange) {
+            displayDateRange = formatYearQuarter(dateRange.year, dateRange.quarter);
+        } else { // if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
+            displayDateRange = formatUnixTimeToShortYearMonth(dateRange.minUnixTime);
+        }
+
+        const dataItems = allDateRangeItemsMap[dateRangeKey] || [];
+        let totalAmount = 0;
+        let totalPositiveAmount = 0;
+
+        sortStatisticsItems(dataItems, props.sortingType);
+
+        for (let j = 0; j < dataItems.length; j++) {
+            if (dataItems[j].totalAmount > 0) {
+                totalPositiveAmount += dataItems[j].totalAmount;
             }
 
-            return color;
-        },
-        getItemName(name) {
-            return this.translateName ? this.$t(name) : name;
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
+            totalAmount += dataItems[j].totalAmount;
         }
+
+        if (totalAmount > maxTotalAmount) {
+            maxTotalAmount = totalAmount;
+        }
+
+        const finalDataItem: TrendsBarChartDataItem = {
+            dateRange: dateRange,
+            displayDateRange: displayDateRange,
+            items: dataItems,
+            totalAmount: totalAmount,
+            totalPositiveAmount: totalPositiveAmount,
+            percent: 0.0
+        };
+
+        finalDataItems.push(finalDataItem);
+    }
+
+    for (let i = 0; i < finalDataItems.length; i++) {
+        if (maxTotalAmount > 0 && finalDataItems[i].totalAmount > 0) {
+            finalDataItems[i].percent = 100.0 * finalDataItems[i].totalAmount / maxTotalAmount;
+        } else {
+            finalDataItems[i].percent = 0.0;
+        }
+    }
+
+    return {
+        data: finalDataItems,
+        legends: legends
+    };
+});
+
+function clickItem(item: TrendsBarChartDataItem): void {
+    let itemId = '';
+
+    for (let i = 0; i < props.items.length; i++) {
+        const item = props.items[i];
+
+        if (!props.hiddenField || item[props.hiddenField]) {
+            continue;
+        }
+
+        const id = (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string);
+
+        if (unselectedLegends.value[id]) {
+            continue;
+        }
+
+        if (itemId.length) {
+            itemId += ',';
+        }
+
+        itemId += id;
+    }
+
+    const dateRange = item.dateRange;
+    let minUnixTime = dateRange.minUnixTime;
+    let maxUnixTime = dateRange.maxUnixTime;
+
+    if (props.startYearMonth) {
+        const startMinUnixTime = getYearMonthFirstUnixTime(props.startYearMonth);
+
+        if (startMinUnixTime > minUnixTime) {
+            minUnixTime = startMinUnixTime;
+        }
+    }
+
+    if (props.endYearMonth) {
+        const endMaxUnixTime = getYearMonthLastUnixTime(props.endYearMonth);
+
+        if (endMaxUnixTime < maxUnixTime) {
+            maxUnixTime = endMaxUnixTime;
+        }
+    }
+
+    const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, userStore.currentUserFirstDayOfWeek, DateRangeScene.Normal);
+
+    emit('click', {
+        itemId: itemId,
+        dateRange: {
+            minTime: minUnixTime,
+            maxTime: maxUnixTime,
+            dateType: dateRangeType
+        }
+    });
+}
+
+function toggleLegend(legend: TrendsBarChartLegend): void {
+    if (unselectedLegends.value[legend.id]) {
+        delete unselectedLegends.value[legend.id];
+    } else {
+        unselectedLegends.value[legend.id] = true;
     }
 }
 </script>
diff --git a/src/lib/statistics.ts b/src/lib/statistics.ts
index 6cd7832c..09b0a18b 100644
--- a/src/lib/statistics.ts
+++ b/src/lib/statistics.ts
@@ -1,6 +1,9 @@
 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 type {
+    YearMonthItems,
+    SortableTransactionStatisticDataItem
+} from '@/models/transaction.ts';
 
 import {
     getAllMonthsStartAndEndUnixTimes,
@@ -8,7 +11,7 @@ import {
     getAllYearsStartAndEndUnixTimes
 } from '@/lib/datetime.ts';
 
-export function sortStatisticsItems(items: TransactionStatisticDataItemBase[], sortingType: number): void {
+export function sortStatisticsItems<T extends SortableTransactionStatisticDataItem>(items: T[], 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++) {
@@ -43,7 +46,7 @@ export function sortStatisticsItems(items: TransactionStatisticDataItemBase[], s
     }
 }
 
-export function getAllDateRanges(items: { items: YearMonth[] }[], startYearMonth: YearMonth | string, endYearMonth: YearMonth | string, dateAggregationType: number): YearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[] {
+export function getAllDateRanges<T extends YearMonth>(items: YearMonthItems<T>[], startYearMonth: YearMonth | string, endYearMonth: YearMonth | string, dateAggregationType: number): YearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[] {
     if ((!startYearMonth || !endYearMonth) && items && items.length) {
         let minYear = Number.MAX_SAFE_INTEGER, minMonth = Number.MAX_SAFE_INTEGER, maxYear = 0, maxMonth = 0;
 
diff --git a/src/locales/helper.js b/src/locales/helper.js
index 0b6a698f..c6424ded 100644
--- a/src/locales/helper.js
+++ b/src/locales/helper.js
@@ -195,17 +195,6 @@ function getI18nShortTimeFormat(translateFn, formatTypeValue) {
     return getDateTimeFormat(translateFn, ShortTimeFormat.all(), ShortTimeFormat.values(), 'format.shortTime', defaultShortTimeFormatTypeName, ShortTimeFormat.Default, formatTypeValue);
 }
 
-function formatYearQuarter(translateFn, year, quarter) {
-    if (1 <= quarter && quarter <= 4) {
-        return translateFn('format.yearQuarter.q' + quarter, {
-            year: year,
-            quarter: quarter
-        });
-    } else {
-        return '';
-    }
-}
-
 function getDateTimeFormat(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, formatTypeValue) {
     const type = getDateTimeFormatType(allFormatMap, allFormatArray, formatTypeValue, localeDefaultFormatTypeName, systemDefaultFormatType);
     return translateFn(`${localeFormatPathPrefix}.${type.key}`);
@@ -784,13 +773,10 @@ export function i18nFunctions(i18nGlobal) {
         formatUnixTimeToLongDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat) + ' ' + getI18nLongTimeFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongDate: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongYear: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongYearFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
-        formatUnixTimeToShortYear: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortYearFormat(i18nGlobal.t, userStore.currentUserShortDateFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongYearMonth: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongYearMonthFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
-        formatUnixTimeToShortYearMonth: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortYearMonthFormat(i18nGlobal.t, userStore.currentUserShortDateFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongMonthDay: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongMonthDayFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongTimeFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToShortTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortTimeFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat), utcOffset, currentUtcOffset),
-        formatYearQuarter: (year, quarter) => formatYearQuarter(i18nGlobal.t, year, quarter),
         getAllTimezones: (includeSystemDefault) => getAllTimezones(includeSystemDefault, i18nGlobal.t),
         getTimezoneDifferenceDisplayText: (utcOffset) => getTimezoneDifferenceDisplayText(utcOffset, i18nGlobal.t),
         getAllDateRanges: (scene, includeCustom, includeBillingCycle) => getAllDateRanges(scene, includeCustom, includeBillingCycle, i18nGlobal.t),
diff --git a/src/models/transaction.ts b/src/models/transaction.ts
index b1e8d56b..d2e7dfe4 100644
--- a/src/models/transaction.ts
+++ b/src/models/transaction.ts
@@ -1,5 +1,5 @@
 import type { PartialRecord } from '@/core/base.ts';
-import type { StartEndTime } from '@/core/datetime.ts';
+import type { YearMonth, StartEndTime } from '@/core/datetime.ts';
 
 import type { AccountInfoResponse } from './account.ts';
 import type { TransactionCategoryInfoResponse } from './transaction_category.ts';
@@ -256,9 +256,21 @@ export interface TransactionStatisticTrendsResponseItemWithInfo {
     readonly items: TransactionStatisticResponseItemWithInfo[];
 }
 
+export interface YearMonthDataItem extends YearMonth, Record<string, unknown> {}
+
+export interface YearMonthItems<T extends YearMonth> extends Record<string, unknown> {
+    readonly items: T[];
+}
+
+export interface SortableTransactionStatisticDataItem {
+    readonly name: string;
+    readonly displayOrders: number[];
+    readonly totalAmount: number;
+}
+
 export type TransactionStatisticDataItemType = 'category' | 'account' | 'total';
 
-export interface TransactionStatisticDataItemBase {
+export interface TransactionStatisticDataItemBase extends SortableTransactionStatisticDataItem {
     readonly name: string;
     readonly type: TransactionStatisticDataItemType;
     readonly id: string;
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index ea4b8f29..6908d634 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -245,6 +245,8 @@
                                             :type="queryChartType"
                                             :start-year-month="query.trendChartStartYearMonth"
                                             :end-year-month="query.trendChartEndYearMonth"
+                                            :sorting-type="querySortingType"
+                                            :date-aggregation-type="trendDateAggregationType"
                                             :items="[]"
                                             :skeleton="true"
                                             id-field="id"