add trend analysis for mobile version

src/components/mobile/MonthRangeSelectionSheet.vue

@@ -0,0 +1,167 @@
+<template>
+    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-range-selection-sheet" style="height:auto"
+              :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <div class="swipe-handler" style="z-index: 10"></div>
+        <f7-page-content>
+            <div class="display-flex padding justify-content-space-between align-items-center">
+                <div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
+            </div>
+            <div class="padding-horizontal padding-bottom">
+                <p class="no-margin-top" v-if="hint">{{ hint }}</p>
+                <p class="no-margin-top margin-bottom" v-if="beginDateTime && endDateTime">
+                    <span>{{ beginDateTime }}</span>
+                    <span> - </span>
+                    <span>{{ endDateTime }}</span>
+                </p>
+                <slot></slot>
+                <vue-date-picker inline month-picker auto-apply
+                                 month-name-format="long"
+                                 class="justify-content-center margin-bottom"
+                                 :clearable="false"
+                                 :dark="isDarkMode"
+                                 :year-range="yearRange"
+                                 :year-first="isYearFirst"
+                                 :range="{ partialRange: false }"
+                                 v-model="dateRange">
+                    <template #month="{ text }">
+                        {{ getMonthShortName(text) }}
+                    </template>
+                    <template #month-overlay-value="{ text }">
+                        {{ getMonthShortName(text) }}
+                    </template>
+                </vue-date-picker>
+                <f7-button large fill
+                           :class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
+                           :text="$t('Continue')"
+                           @click="confirm">
+                </f7-button>
+                <div class="margin-top text-align-center">
+                    <f7-link @click="cancel" :text="$t('Cancel')"></f7-link>
+                </div>
+            </div>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/user.js';
+
+import {
+    getYearMonthObjectFromString,
+    getYearMonthStringFromObject,
+    getCurrentUnixTime,
+    getCurrentYear,
+    getThisYearFirstUnixTime,
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime
+} from '@/lib/datetime.js';
+
+export default {
+    props: [
+        'minTime',
+        'maxTime',
+        'title',
+        'hint',
+        'show'
+    ],
+    emits: [
+        'update:show',
+        'dateRange:change'
+    ],
+    data() {
+        const self = this;
+        let minDate = getThisYearFirstUnixTime();
+        let maxDate = getCurrentUnixTime();
+
+        if (self.minTime) {
+            minDate = getYearMonthObjectFromString(self.minTime);
+        }
+
+        if (self.maxTime) {
+            maxDate = getYearMonthObjectFromString(self.maxTime);
+        }
+
+        return {
+            yearRange: [
+                2000,
+                getCurrentYear() + 1
+            ],
+            dateRange: [
+                minDate,
+                maxDate
+            ]
+        }
+    },
+    computed: {
+        ...mapStores(useUserStore),
+        isDarkMode() {
+            return this.$root.isDarkMode;
+        },
+        firstDayOfWeek() {
+            return this.userStore.currentUserFirstDayOfWeek;
+        },
+        isYearFirst() {
+            return this.$locale.isLongDateMonthAfterYear(this.userStore);
+        },
+        is24Hour() {
+            return this.$locale.isLongTime24HourFormat(this.userStore);
+        },
+        beginDateTime() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.dateRange[0]));
+        },
+        endDateTime() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.dateRange[1]));
+        }
+    },
+    methods: {
+        onSheetOpen() {
+            if (this.minTime) {
+                this.dateRange[0] = getYearMonthObjectFromString(this.minTime);
+            }
+
+            if (this.maxTime) {
+                this.dateRange[1] = getYearMonthObjectFromString(this.maxTime);
+            }
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        confirm() {
+            if (!this.dateRange[0] || !this.dateRange[1]) {
+                return;
+            }
+
+            if (this.dateRange[0].year <= 0 || this.dateRange[0].month < 0 || this.dateRange[1].year <= 0 || this.dateRange[1].month < 0) {
+                this.$toast('Date is too early');
+                return;
+            }
+
+            const minYearMonth = getYearMonthStringFromObject(this.dateRange[0]);
+            const maxYearMonth = getYearMonthStringFromObject(this.dateRange[1]);
+
+            this.$emit('dateRange:change', minYearMonth, maxYearMonth);
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        },
+        getMonthShortName(month) {
+            return this.$locale.getMonthShortName(month);
+        }
+    }
+}
+</script>
+
+<style>
+.month-range-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative {
+    width: 100% !important;
+}
+
+.month-range-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative .dp__selection_grid_header .dp--year-mode-picker .dp--arrow-btn-nav {
+    display: flex;
+}
+
+.month-range-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative .dp__selection_grid_header .dp--year-mode-picker .dp--year-select+.dp--arrow-btn-nav {
+    justify-content: end;
+}
+</style>

src/components/mobile/TrendsBarChart.vue

@@ -0,0 +1,243 @@
+<template>
+    <f7-list class="statistics-list-item skeleton-text" v-if="loading">
+        <f7-list-item link="#" :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]">
+            <template #media>
+                <div class="display-flex no-padding-horizontal">
+                    <div class="display-flex align-items-center statistics-icon">
+                        <f7-icon f7="app_fill"></f7-icon>
+                    </div>
+                </div>
+            </template>
+            <template #title>
+                <div class="statistics-list-item-text">
+                    <span>Date Range</span>
+                </div>
+            </template>
+            <template #after>
+                <span>0.00 USD</span>
+            </template>
+            <template #inner-end>
+                <div class="statistics-item-end">
+                    <div class="statistics-percent-line">
+                        <f7-progressbar></f7-progressbar>
+                    </div>
+                </div>
+            </template>
+        </f7-list-item>
+    </f7-list>
+
+    <f7-list v-else-if="!loading && (!allDisplayDataItems || !allDisplayDataItems.length)">
+        <f7-list-item :title="$t('No transaction data')"></f7-list-item>
+    </f7-list>
+
+    <f7-list v-else-if="!loading && allDisplayDataItems && allDisplayDataItems.length">
+        <f7-list-item class="statistics-list-item"
+                      link="#"
+                      :key="idx"
+                      v-for="(item, idx) in allDisplayDataItems"
+                      v-show="!item.hidden"
+                      @click="clickItem(item)"
+        >
+            <template #media>
+                <div class="display-flex no-padding-horizontal">
+                    <div class="display-flex align-items-center statistics-icon">
+                        <f7-icon f7="calendar"></f7-icon>
+                    </div>
+                </div>
+            </template>
+
+            <template #title>
+                <div class="statistics-list-item-text">
+                    <span>{{ item.displayDateRange }}</span>
+                </div>
+            </template>
+
+            <template #after>
+                <span>{{ getDisplayCurrency(item.totalAmount, defaultCurrency) }}</span>
+            </template>
+
+            <template #inner-end>
+                <div class="statistics-item-end">
+                    <div class="statistics-percent-line">
+                        <f7-progressbar :progress="0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
+                    </div>
+                </div>
+            </template>
+        </f7-list-item>
+    </f7-list>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+
+import colorConstants from '@/consts/color.js';
+import datetimeConstants from '@/consts/datetime.js';
+import statisticsConstants from '@/consts/statistics.js';
+import { isNumber } from '@/lib/common.js';
+import {
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime,
+    getDateTypeByDateRange
+} from '@/lib/datetime.js';
+import {
+    sortStatisticsItems,
+    getAllDateRanges
+} from '@/lib/statistics.js';
+
+export default {
+    props: [
+        'loading',
+        'items',
+        'startYearMonth',
+        'endYearMonth',
+        'sortingType',
+        'dateAggregationType',
+        'idField',
+        'nameField',
+        'valueField',
+        'colorField',
+        'hiddenField',
+        'displayOrdersField',
+        'translateName',
+        'defaultCurrency',
+        'enableClickItem'
+    ],
+    emits: [
+        'click'
+    ],
+    computed: {
+        ...mapStores(useSettingsStore, useUserStore),
+        allDateRanges: function () {
+            return getAllDateRanges(this.items, this.startYearMonth, this.endYearMonth, this.dateAggregationType);
+        },
+        allDisplayDataItems: function () {
+            const dateRangeItemsMap = {};
+
+            for (let i = 0; i < this.items.length; i++) {
+                const item = this.items[i];
+
+                if (!this.hiddenField || item[this.hiddenField]) {
+                    continue;
+                }
+
+                for (let j = 0; j < item.items.length; j++) {
+                    const dataItem = item.items[j];
+                    let dateRangeKey = '';
+
+                    if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Year.type) {
+                        dateRangeKey = dataItem.year;
+                    } else if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Quarter.type) {
+                        dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
+                    } else { // if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Month.type) {
+                        dateRangeKey = `${dataItem.year}-${dataItem.month}`;
+                    }
+
+                    const dataItems = dateRangeItemsMap[dateRangeKey] || [];
+                    const id = (this.idField && item[this.idField]) ? item[this.idField] : this.getItemName(item[this.nameField]);
+
+                    dataItems.push({
+                        id: id,
+                        name: (this.nameField && item[this.nameField]) ? this.getItemName(item[this.nameField]) : id,
+                        color: this.getColor(item[this.colorField] ? item[this.colorField] : colorConstants.defaultChartColors[i % colorConstants.defaultChartColors.length]),
+                        displayOrders: (this.displayOrdersField && item[this.displayOrdersField]) ? item[this.displayOrdersField] : [0],
+                        totalAmount: (this.valueField && isNumber(dataItem[this.valueField])) ? dataItem[this.valueField] : 0
+                    });
+
+                    dateRangeItemsMap[dateRangeKey] = dataItems;
+                }
+            }
+
+            const finalDataItems = [];
+
+            for (let i = 0; i < this.allDateRanges.length; i++) {
+                const dateRange = this.allDateRanges[i];
+                let dateRangeKey = '';
+
+                if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Year.type) {
+                    dateRangeKey = dateRange.year;
+                } else if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Quarter.type) {
+                    dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
+                } else { // if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Month.type) {
+                    dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
+                }
+
+                let displayDateRange = '';
+
+                if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Year.type) {
+                    displayDateRange = this.$locale.formatUnixTimeToShortYear(this.userStore, dateRange.minUnixTime);
+                } else if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Quarter.type) {
+                    displayDateRange = this.$locale.formatYearQuarter(dateRange.year, dateRange.quarter);
+                } else { // if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Month.type) {
+                    displayDateRange = this.$locale.formatUnixTimeToShortYearMonth(this.userStore, dateRange.minUnixTime);
+                }
+
+                const dataItems = dateRangeItemsMap[dateRangeKey] || [];
+                let totalAmount = 0;
+
+                sortStatisticsItems(dataItems, this.sortingType);
+
+                for (let j = 0; j < dataItems.length; j++) {
+                    totalAmount += dataItems[j].totalAmount;
+                }
+
+                finalDataItems.push({
+                    dateRange: dateRange,
+                    displayDateRange: displayDateRange,
+                    items: dataItems,
+                    totalAmount: totalAmount
+                });
+            }
+
+            return finalDataItems;
+        }
+    },
+    methods: {
+        clickItem: function (item) {
+            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, datetimeConstants.allDateRangeScenes.Normal);
+
+            this.$emit('click', {
+                dateRange: {
+                    minTime: minUnixTime,
+                    maxTime: maxUnixTime,
+                    type: dateRangeType
+                }
+            });
+        },
+        getColor: function (color) {
+            if (color && color !== colorConstants.defaultColor) {
+                color = '#' + color;
+            }
+
+            return color;
+        },
+        getItemName(name) {
+            return this.translateName ? this.$t(name) : name;
+        },
+        getDisplayCurrency(value, currencyCode) {
+            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
+        }
+    }
+}
+</script>

src/mobile-main.js

@@ -100,11 +100,13 @@ import MapView from '@/components/common/MapView.vue';
 
 import ItemIcon from '@/components/mobile/ItemIcon.vue';
 import PieChart from '@/components/mobile/PieChart.vue';
+import TrendsBarChart from '@/components/mobile/TrendsBarChart.vue';
 import PinCodeInputSheet from '@/components/mobile/PinCodeInputSheet.vue';
 import PasswordInputSheet from '@/components/mobile/PasswordInputSheet.vue';
 import PasscodeInputSheet from '@/components/mobile/PasscodeInputSheet.vue';
 import DateTimeSelectionSheet from '@/components/mobile/DateTimeSelectionSheet.vue';
 import DateRangeSelectionSheet from '@/components/mobile/DateRangeSelectionSheet.vue';
+import MonthRangeSelectionSheet from '@/components/mobile/MonthRangeSelectionSheet.vue';
 import ListItemSelectionSheet from '@/components/mobile/ListItemSelectionSheet.vue';
 import TwoColumnListItemSelectionSheet from '@/components/mobile/TwoColumnListItemSelectionSheet.vue';
 import TreeViewSelectionSheet from '@/components/mobile/TreeViewSelectionSheet.vue';
@@ -181,11 +183,13 @@ app.component('MapView', MapView);
 
 app.component('ItemIcon', ItemIcon);
 app.component('PieChart', PieChart);
+app.component('TrendsBarChart', TrendsBarChart);
 app.component('PinCodeInputSheet', PinCodeInputSheet);
 app.component('PasswordInputSheet', PasswordInputSheet);
 app.component('PasscodeInputSheet', PasscodeInputSheet);
 app.component('DateTimeSelectionSheet', DateTimeSelectionSheet);
 app.component('DateRangeSelectionSheet', DateRangeSelectionSheet);
+app.component('MonthRangeSelectionSheet', MonthRangeSelectionSheet);
 app.component('ListItemSelectionSheet', ListItemSelectionSheet);
 app.component('TwoColumnListItemSelectionSheet', TwoColumnListItemSelectionSheet);
 app.component('TreeViewSelectionSheet', TreeViewSelectionSheet);

src/stores/statistics.js

@@ -819,21 +819,29 @@ export const useStatisticsStore = defineStore('statistics', {
                 querys.push('type=3');
             }
 
-            if (this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByAccount.type
+            if (itemId && (this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByAccount.type
                 || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.ExpenseByAccount.type
                 || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalAssets.type
-                || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalLiabilities.type) {
+                || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalLiabilities.type)) {
                 querys.push('accountIds=' + itemId);
 
                 if (!isObjectEmpty(this.transactionStatisticsFilter.filterCategoryIds)) {
                     querys.push('categoryIds=' + getFinalCategoryIdsByFilteredCategoryIds(transactionCategoriesStore.allTransactionCategoriesMap, this.transactionStatisticsFilter.filterCategoryIds));
                 }
-            } else if (this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByPrimaryCategory.type
+            } else if (itemId && (this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByPrimaryCategory.type
                 || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeBySecondaryCategory.type
                 || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.ExpenseByPrimaryCategory.type
-                || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.ExpenseBySecondaryCategory.type) {
+                || this.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.ExpenseBySecondaryCategory.type)) {
                 querys.push('categoryIds=' + itemId);
 
+                if (!isObjectEmpty(this.transactionStatisticsFilter.filterAccountIds)) {
+                    querys.push('accountIds=' + getFinalAccountIdsByFilteredAccountIds(accountsStore.allAccountsMap, this.transactionStatisticsFilter.filterAccountIds));
+                }
+            } else if (!itemId) {
+                if (!isObjectEmpty(this.transactionStatisticsFilter.filterCategoryIds)) {
+                    querys.push('categoryIds=' + getFinalCategoryIdsByFilteredCategoryIds(transactionCategoriesStore.allTransactionCategoriesMap, this.transactionStatisticsFilter.filterCategoryIds));
+                }
+
                 if (!isObjectEmpty(this.transactionStatisticsFilter.filterAccountIds)) {
                     querys.push('accountIds=' + getFinalAccountIdsByFilteredAccountIds(accountsStore.allAccountsMap, this.transactionStatisticsFilter.filterAccountIds));
                 }

src/styles/mobile/global.css

@@ -609,3 +609,47 @@ i.icon.la, i.icon.las, i.icon.lab {
 .dp__main .dp__calendar .dp__calendar_item > .dp__cell_inner {
     width: 100%;
 }
+
+/* statistics-list */
+.statistics-list-item-overview-amount {
+    margin-top: 2px;
+    font-size: 1.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 6px;
+}
+
+.statistics-list-item-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.statistics-list-item .item-content {
+    margin-top: 8px;
+    margin-bottom: 12px;
+}
+
+.statistics-icon {
+    margin-bottom: -2px;
+}
+
+.statistics-percent {
+    font-size: 0.7em;
+    opacity: 0.6;
+    margin-left: 6px;
+}
+
+.statistics-item-end {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+
+.statistics-percent-line {
+    margin-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
+}
+
+.statistics-percent-line .progressbar {
+    height: 4px;
+    --f7-progressbar-bg-color: #f8f8f8;
+}

src/views/mobile/statistics/SettingsPage.vue

@@ -62,8 +62,8 @@
             </f7-list-item>
         </f7-list>
 
-<!--        <f7-block-title>{{ $t('Trend Analysis Settings') }}</f7-block-title>-->
+        <f7-block-title>{{ $t('Trend Analysis Settings') }}</f7-block-title>
-<!--        <f7-list strong inset dividers>-->
+        <f7-list strong inset dividers>
 <!--            <f7-list-item-->
 <!--                :title="$t('Default Chart Type')"-->
 <!--                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">-->
@@ -74,16 +74,16 @@
 <!--                </select>-->
 <!--            </f7-list-item>-->
 
-<!--            <f7-list-item-->
+            <f7-list-item
-<!--                :title="$t('Default Date Range')"-->
+                :title="$t('Default Date Range')"
-<!--                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">-->
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
-<!--                <select v-model="defaultTrendChartDateRange">-->
+                <select v-model="defaultTrendChartDateRange">
-<!--                    <option :value="dateRange.type"-->
+                    <option :value="dateRange.type"
-<!--                            :key="dateRange.type"-->
+                            :key="dateRange.type"
-<!--                            v-for="dateRange in allTrendChartDateRanges">{{ dateRange.displayName }}</option>-->
+                            v-for="dateRange in allTrendChartDateRanges">{{ dateRange.displayName }}</option>
-<!--                </select>-->
+                </select>
-<!--            </f7-list-item>-->
+            </f7-list-item>
-<!--        </f7-list>-->
+        </f7-list>
     </f7-page>
 </template>
 

src/views/mobile/statistics/TransactionPage.vue

@@ -14,22 +14,39 @@
         </f7-navbar>
 
         <f7-popover class="chart-data-type-popover-menu"
-                    v-model:opened="showChartDataTypePopover">
+                    v-model:opened="showChartDataTypePopover"
+                    @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
-                <f7-list-item group-title :title="$t('Categorical Analysis')" />
+                <f7-list-group>
-                <f7-list-item :title="$t(dataType.name)"
+                    <f7-list-item group-title :title="$t('Categorical Analysis')" />
-                              :key="dataType.type"
+                    <f7-list-item :title="$t(dataType.name)"
-                              v-for="dataType in allChartDataTypes"
+                                  :class="{ 'list-item-selected': analysisType === allAnalysisTypes.CategoricalAnalysis && query.chartDataType === dataType.type }"
-                              v-show="dataType.availableAnalysisTypes[analysisType]"
+                                  :key="dataType.type"
-                              @click="setChartDataType(dataType.type)">
+                                  v-for="dataType in allChartDataTypes"
-                    <template #after>
+                                  v-show="dataType.availableAnalysisTypes[allAnalysisTypes.CategoricalAnalysis]"
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.chartDataType === dataType.type"></f7-icon>
+                                  @click="setChartDataType(allAnalysisTypes.CategoricalAnalysis, dataType.type)">
-                    </template>
+                        <template #after>
-                </f7-list-item>
+                            <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === allAnalysisTypes.CategoricalAnalysis && query.chartDataType === dataType.type"></f7-icon>
+                        </template>
+                    </f7-list-item>
+                </f7-list-group>
+                <f7-list-group>
+                    <f7-list-item group-title :title="$t('Trend Analysis')" />
+                    <f7-list-item :title="$t(dataType.name)"
+                                  :class="{ 'list-item-selected': analysisType === allAnalysisTypes.TrendAnalysis && query.chartDataType === dataType.type }"
+                                  :key="dataType.type"
+                                  v-for="dataType in allChartDataTypes"
+                                  v-show="dataType.availableAnalysisTypes[allAnalysisTypes.TrendAnalysis]"
+                                  @click="setChartDataType(allAnalysisTypes.TrendAnalysis, dataType.type)">
+                        <template #after>
+                            <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === allAnalysisTypes.TrendAnalysis && query.chartDataType === dataType.type"></f7-icon>
+                        </template>
+                    </f7-list-item>
+                </f7-list-group>
             </f7-list>
         </f7-popover>
 
-        <f7-card v-if="query.categoricalChartType === allCategoricalChartTypes.Pie">
+        <f7-card v-if="analysisType === allAnalysisTypes.CategoricalAnalysis && query.categoricalChartType === allCategoricalChartTypes.Pie">
             <f7-card-header class="no-border display-block">
                 <div class="statistics-chart-header full-line text-align-right">
                     <span style="margin-right: 4px;">{{ $t('Sort by') }}</span>
@@ -77,7 +94,7 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-card v-else-if="query.categoricalChartType === allCategoricalChartTypes.Bar">
+        <f7-card v-else-if="analysisType === allAnalysisTypes.CategoricalAnalysis && query.categoricalChartType === allCategoricalChartTypes.Bar">
             <f7-card-header class="no-border display-block">
                 <div class="statistics-chart-header display-flex full-line justify-content-space-between">
                     <div>
@@ -134,7 +151,7 @@
 
                 <f7-list v-else-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
                     <f7-list-item class="statistics-list-item"
-                                  :link="getTransactionItemLinkUrl(item)"
+                                  :link="getTransactionItemLinkUrl(item.id)"
                                   :key="idx"
                                   v-for="(item, idx) in categoricalAnalysisData.items"
                                   v-show="!item.hidden"
@@ -171,6 +188,38 @@
             </f7-card-content>
         </f7-card>
 
+        <f7-card v-else-if="analysisType === allAnalysisTypes.TrendAnalysis">
+            <f7-card-header class="no-border display-block">
+                <div class="statistics-chart-header display-flex full-line justify-content-space-between">
+                    <div>
+
+                    </div>
+                    <div class="align-self-flex-end">
+                        <span style="margin-right: 4px;">{{ $t('Sort by') }}</span>
+                        <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ querySortingTypeName }}</f7-link>
+                    </div>
+                </div>
+            </f7-card-header>
+            <f7-card-content style="margin-top: -14px" :padding="false">
+                <trends-bar-chart
+                    :loading="loading || reloading"
+                    :start-year-month="query.trendChartStartYearMonth"
+                    :end-year-month="query.trendChartEndYearMonth"
+                    :sorting-type="query.sortingType"
+                    :date-aggregation-type="trendDateAggregationType"
+                    :items="trendsAnalysisData && trendsAnalysisData.items && trendsAnalysisData.items.length ? trendsAnalysisData.items : []"
+                    :translate-name="translateNameInTrendsChart"
+                    :default-currency="defaultCurrency"
+                    id-field="id"
+                    name-field="name"
+                    value-field="totalAmount"
+                    hidden-field="hidden"
+                    display-orders-field="displayOrders"
+                    @click="clickTrendChartItem"
+                />
+            </f7-card-content>
+        </f7-card>
+
         <f7-popover class="sorting-type-popover-menu"
                     v-model:opened="showSortingTypePopover">
             <f7-list dividers>
@@ -187,18 +236,22 @@
         </f7-popover>
 
         <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
-            <f7-link :class="{ 'disabled': reloading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(-1)">
+            <f7-link :class="{ 'disabled': reloading || !canShiftDateRange(query) }" @click="shiftDateRange(query, -1)">
                 <f7-icon f7="arrow_left_square"></f7-icon>
             </f7-link>
             <f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': reloading || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" popover-open=".date-popover-menu">
-                <span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ dateRangeName() }}</span>
+                <span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ dateRangeName(query) }}</span>
             </f7-link>
-            <f7-link :class="{ 'disabled': reloading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(1)">
+            <f7-link :class="{ 'disabled': reloading || !canShiftDateRange(query) }" @click="shiftDateRange(query, 1)">
                 <f7-icon f7="arrow_right_square"></f7-icon>
             </f7-link>
+            <f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': reloading }" popover-open=".date-aggregation-popover-menu"
+                     v-if="analysisType === allAnalysisTypes.TrendAnalysis">
+                <span :class="{ 'tabbar-item-changed': trendDateAggregationType !== defaultTrendDateAggregationType }">{{ queryTrendDateAggregationTypeName }}</span>
+            </f7-link>
             <f7-link class="tabbar-text-with-ellipsis" :key="chartType.type"
                      v-for="chartType in allChartTypes" @click="setChartType(chartType.type)">
-                <span :class="{ 'tabbar-item-changed': query.categoricalChartType === chartType.type }">{{ chartType.displayName }}</span>
+                <span :class="{ 'tabbar-item-changed': queryChartType === chartType.type }">{{ chartType.displayName }}</span>
             </f7-link>
         </f7-toolbar>
 
@@ -207,15 +260,15 @@
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
                 <f7-list-item :title="dateRange.displayName"
-                              :class="{ 'list-item-selected': query.categoricalChartDateType === dateRange.type }"
+                              :class="{ 'list-item-selected': queryDateType === dateRange.type }"
                               :key="dateRange.type"
                               v-for="dateRange in allDateRangesArray"
                               @click="setDateFilter(dateRange.type)">
                     <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoricalChartDateType === dateRange.type"></f7-icon>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="queryDateType === dateRange.type"></f7-icon>
                     </template>
                     <template #footer>
-                        <div v-if="dateRange.type === allDateRanges.Custom.type && query.categoricalChartDateType === allDateRanges.Custom.type && query.categoricalChartStartTime && query.categoricalChartEndTime">
+                        <div v-if="dateRange.type === allDateRanges.Custom.type && showCustomDateRange()">
                             <span>{{ queryStartTime }}</span>
                             <span>&nbsp;-&nbsp;</span>
                             <br/>
@@ -226,6 +279,22 @@
             </f7-list>
         </f7-popover>
 
+        <f7-popover class="date-aggregation-popover-menu"
+                    v-model:opened="showDateAggregationPopover"
+                    @popover:open="scrollPopoverToSelectedItem">
+            <f7-list dividers>
+                <f7-list-item :title="aggregationType.displayName"
+                              :class="{ 'list-item-selected': trendDateAggregationType === aggregationType.type }"
+                              :key="aggregationType.type"
+                              v-for="aggregationType in allDateAggregationTypesArray"
+                              @click="setTrendDateAggregationType(aggregationType.type)">
+                    <template #after>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="trendDateAggregationType === aggregationType.type"></f7-icon>
+                    </template>
+                </f7-list-item>
+            </f7-list>
+        </f7-popover>
+
         <date-range-selection-sheet :title="$t('Custom Date Range')"
                                     :min-time="query.categoricalChartStartTime"
                                     :max-time="query.categoricalChartEndTime"
@@ -233,6 +302,13 @@
                                     @dateRange:change="setCustomDateFilter">
         </date-range-selection-sheet>
 
+        <month-range-selection-sheet :title="$t('Custom Date Range')"
+                                     :min-time="query.trendChartStartYearMonth"
+                                     :max-time="query.trendChartEndYearMonth"
+                                     v-model:show="showCustomMonthRangeSheet"
+                                     @dateRange:change="setCustomDateFilter">
+        </month-range-selection-sheet>
+
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
                 <f7-actions-button @click="filterAccounts">{{ $t('Filter Accounts') }}</f7-actions-button>
@@ -261,10 +337,14 @@ import statisticsConstants from '@/consts/statistics.js';
 import { getNameByKeyValue, limitText } from '@/lib/common.js';
 import { formatPercent } from '@/lib/numeral.js';
 import {
+    getYearAndMonthFromUnixTime,
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime,
     getShiftedDateRangeAndDateType,
     getDateTypeByDateRange,
     getDateRangeByDateType
 } from '@/lib/datetime.js';
+import { isChartDataTypeAvailableForAnalysisType } from '@/lib/statistics.js';
 import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
@@ -277,10 +357,13 @@ export default {
             loadingError: null,
             reloading: false,
             analysisType: statisticsConstants.allAnalysisTypes.CategoricalAnalysis,
+            trendDateAggregationType: statisticsConstants.defaultDateAggregationType,
             showChartDataTypePopover: false,
             showSortingTypePopover: false,
             showDatePopover: false,
+            showDateAggregationPopover: false,
             showCustomDateRangeSheet: false,
+            showCustomMonthRangeSheet: false,
             showMoreActionSheet: false
         };
     },
@@ -289,6 +372,9 @@ export default {
         defaultCurrency() {
             return this.userStore.currentUserDefaultCurrency;
         },
+        defaultTrendDateAggregationType() {
+            return statisticsConstants.defaultDateAggregationType;
+        },
         firstDayOfWeek() {
             return this.userStore.currentUserFirstDayOfWeek;
         },
@@ -298,6 +384,20 @@ export default {
         queryChartDataCategory() {
             return this.statisticsStore.categoricalAnalysisChartDataCategory;
         },
+        queryChartType: {
+            get: function () {
+                if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
+                    return this.query.categoricalChartType;
+                } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                    return this.query.trendChartType;
+                } else {
+                    return null;
+                }
+            },
+            set: function(value) {
+                this.setChartType(value);
+            }
+        },
         queryChartDataTypeName() {
             const queryChartDataTypeName = getNameByKeyValue(this.allChartDataTypes, this.query.chartDataType, 'type', 'name', 'Statistics');
             return this.$t(queryChartDataTypeName);
@@ -306,9 +406,23 @@ export default {
             const querySortingTypeName = getNameByKeyValue(this.allSortingTypes, this.query.sortingType, 'type', 'name', 'System Default');
             return this.$t(querySortingTypeName);
         },
+        queryDateType() {
+            if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
+                return this.query.categoricalChartDateType;
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return this.query.trendChartDateType;
+            } else {
+                return null;
+            }
+        },
+        queryTrendDateAggregationTypeName() {
+            return getNameByKeyValue(this.allDateAggregationTypesArray, this.trendDateAggregationType, 'type', 'displayName', '');
+        },
         queryStartTime() {
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
                 return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.query.trendChartStartYearMonth));
             } else {
                 return '';
             }
@@ -316,10 +430,15 @@ export default {
         queryEndTime() {
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
                 return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartEndTime);
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.query.trendChartEndYearMonth));
             } else {
                 return '';
             }
         },
+        allAnalysisTypes() {
+            return statisticsConstants.allAnalysisTypes;
+        },
         allChartTypes() {
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
                 return this.$locale.getAllCategoricalChartTypes();
@@ -336,12 +455,17 @@ export default {
         allSortingTypes() {
             return statisticsConstants.allSortingTypes;
         },
+        allDateAggregationTypesArray() {
+            return this.$locale.getAllStatisticsDateAggregationTypes();
+        },
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
         allDateRangesArray() {
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
                 return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, true);
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.TrendAnalysis, true);
             } else {
                 return [];
             }
@@ -369,6 +493,14 @@ export default {
         categoricalAnalysisData() {
             return this.statisticsStore.categoricalAnalysisData;
         },
+        trendsAnalysisData() {
+            return this.statisticsStore.trendsAnalysisData;
+        },
+        translateNameInTrendsChart() {
+            return this.query.chartDataType === this.allChartDataTypes.TotalExpense.type ||
+                this.query.chartDataType === this.allChartDataTypes.TotalIncome.type ||
+                this.query.chartDataType === this.allChartDataTypes.TotalBalance.type;
+        },
         showAmountInChart() {
             if (!this.showAccountBalance
                 && (this.query.chartDataType === this.allChartDataTypes.AccountTotalAssets.type || this.query.chartDataType === this.allChartDataTypes.AccountTotalLiabilities.type)) {
@@ -387,9 +519,15 @@ export default {
             self.accountsStore.loadAllAccounts({ force: false }),
             self.transactionCategoriesStore.loadAllCategories({ force: false })
         ]).then(() => {
-            return self.statisticsStore.loadCategoricalAnalysis({
+            if (self.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
-                force: false
+                return self.statisticsStore.loadCategoricalAnalysis({
-            });
+                    force: false
+                });
+            } else if (self.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return self.statisticsStore.loadTrendAnalysis({
+                    force: false
+                });
+            }
         }).then(() => {
             self.loading = false;
         }).catch(error => {
@@ -421,10 +559,19 @@ export default {
                 self.query.chartDataType === self.allChartDataTypes.ExpenseBySecondaryCategory.type ||
                 self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type ||
                 self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type ||
-                self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) {
+                self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type ||
-                dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
+                self.query.chartDataType === self.allChartDataTypes.TotalExpense.type ||
-                    force: force
+                self.query.chartDataType === self.allChartDataTypes.TotalIncome.type ||
-                });
+                self.query.chartDataType === self.allChartDataTypes.TotalBalance.type) {
+                if (self.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
+                    dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
+                        force: force
+                    });
+                } else if (self.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                    dispatchPromise = self.statisticsStore.loadTrendAnalysis({
+                        force: force
+                    });
+                }
             } else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type ||
                 self.query.chartDataType === self.allChartDataTypes.AccountTotalLiabilities.type) {
                 dispatchPromise = self.accountsStore.loadAllAccounts({
@@ -459,15 +606,40 @@ export default {
             }
         },
         setChartType(chartType) {
-            this.statisticsStore.updateTransactionStatisticsFilter({
+            if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
-                categoricalChartType: chartType
+                this.statisticsStore.updateTransactionStatisticsFilter({
-            });
+                    categoricalChartType: chartType
+                });
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                this.statisticsStore.updateTransactionStatisticsFilter({
+                    trendChartType: chartType
+                });
+            }
         },
-        setChartDataType(chartDataType) {
+        setChartDataType(analysisType, chartDataType) {
+            let analysisTypeChanged = false;
+
+            if (this.analysisType !== analysisType) {
+                if (!isChartDataTypeAvailableForAnalysisType(this.queryChartDataType, analysisType)) {
+                    this.statisticsStore.updateTransactionStatisticsFilter({
+                        chartDataType: statisticsConstants.defaultChartDataType
+                    });
+                }
+
+                this.analysisType = analysisType;
+                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
+                analysisTypeChanged = true;
+            }
+
             this.statisticsStore.updateTransactionStatisticsFilter({
                 chartDataType: chartDataType
             });
+
             this.showChartDataTypePopover = false;
+
+            if (analysisTypeChanged) {
+                this.reload(null);
+            }
         },
         setSortingType(sortingType) {
             if (sortingType < this.allSortingTypes.Amount.type || sortingType > this.allSortingTypes.Name.type) {
@@ -481,6 +653,10 @@ export default {
 
             this.showSortingTypePopover = false;
         },
+        setTrendDateAggregationType(aggregationType) {
+            this.trendDateAggregationType = aggregationType;
+            this.showDateAggregationPopover = false;
+        },
         setDateFilter(dateType) {
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
                 if (dateType === this.allDateRanges.Custom.type) { // Custom
@@ -490,6 +666,14 @@ export default {
                 } else if (this.query.categoricalChartDateType === dateType) {
                     return;
                 }
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                if (dateType === this.allDateRanges.Custom.type) { // Custom
+                    this.showCustomMonthRangeSheet = true;
+                    this.showDatePopover = false;
+                    return;
+                } else if (this.query.trendChartDateType === dateType) {
+                    return;
+                }
             }
 
             const dateRange = getDateRangeByDateType(dateType, this.firstDayOfWeek);
@@ -506,6 +690,12 @@ export default {
                     categoricalChartStartTime: dateRange.minTime,
                     categoricalChartEndTime: dateRange.maxTime
                 });
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                changed = this.statisticsStore.updateTransactionStatisticsFilter({
+                    trendChartDateType: dateRange.dateType,
+                    trendChartStartYearMonth: getYearAndMonthFromUnixTime(dateRange.minTime),
+                    trendChartEndYearMonth: getYearAndMonthFromUnixTime(dateRange.maxTime)
+                });
             }
 
             this.showDatePopover = false;
@@ -531,13 +721,45 @@ export default {
                 });
 
                 this.showCustomDateRangeSheet = false;
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                const chartDateType = getDateTypeByDateRange(getYearMonthFirstUnixTime(startTime), getYearMonthLastUnixTime(endTime), this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.TrendAnalysis);
+
+                this.statisticsStore.updateTransactionStatisticsFilter({
+                    trendChartDateType: chartDateType,
+                    trendChartStartYearMonth: startTime,
+                    trendChartEndYearMonth: endTime
+                });
+
+                this.showCustomMonthRangeSheet = false;
             }
 
             if (changed) {
                 this.reload(null);
             }
         },
-        shiftDateRange(scale) {
+        showCustomDateRange() {
+            if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
+                return this.query.categoricalChartDateType === this.allDateRanges.Custom.type && this.query.categoricalChartStartTime && this.query.categoricalChartEndTime;
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return this.query.trendChartDateType === this.allDateRanges.Custom.type && this.query.trendChartStartYearMonth && this.query.trendChartEndYearMonth;
+            } else {
+                return false;
+            }
+        },
+        canShiftDateRange(query) {
+            if (query.chartDataType === this.allChartDataTypes.AccountTotalAssets.type || query.chartDataType === this.allChartDataTypes.AccountTotalLiabilities.type) {
+                return false;
+            }
+
+            if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
+                return query.categoricalChartDateType !== this.allDateRanges.All.type;
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return query.trendChartDateType !== this.allDateRanges.All.type;
+            } else {
+                return false;
+            }
+        },
+        shiftDateRange(query, scale) {
             if (this.query.categoricalChartDateType === this.allDateRanges.All.type) {
                 return;
             }
@@ -545,33 +767,46 @@ export default {
             let changed = false;
 
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
-                const newDateRange = getShiftedDateRangeAndDateType(this.query.categoricalChartStartTime, this.query.categoricalChartEndTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
+                const newDateRange = getShiftedDateRangeAndDateType(query.categoricalChartStartTime, query.categoricalChartEndTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
 
                 changed = this.statisticsStore.updateTransactionStatisticsFilter({
                     categoricalChartDateType: newDateRange.dateType,
                     categoricalChartStartTime: newDateRange.minTime,
                     categoricalChartEndTime: newDateRange.maxTime
                 });
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                const newDateRange = getShiftedDateRangeAndDateType(getYearMonthFirstUnixTime(query.trendChartStartYearMonth), getYearMonthLastUnixTime(query.trendChartEndYearMonth), scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.TrendAnalysis);
+
+                changed = this.statisticsStore.updateTransactionStatisticsFilter({
+                    trendChartDateType: newDateRange.dateType,
+                    trendChartStartYearMonth: getYearAndMonthFromUnixTime(newDateRange.minTime),
+                    trendChartEndYearMonth: getYearAndMonthFromUnixTime(newDateRange.maxTime)
+                });
             }
 
             if (changed) {
                 this.reload(null);
             }
         },
-        dateRangeName() {
+        dateRangeName(query) {
             if (this.query.chartDataType === this.allChartDataTypes.AccountTotalAssets.type ||
                 this.query.chartDataType === this.allChartDataTypes.AccountTotalLiabilities.type) {
                 return this.$t(this.allDateRanges.All.name);
             }
 
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
-                return this.$locale.getDateRangeDisplayName(this.userStore, this.query.categoricalChartDateType, this.query.categoricalChartStartTime, this.query.categoricalChartEndTime);
+                return this.$locale.getDateRangeDisplayName(this.userStore, query.categoricalChartDateType, query.categoricalChartStartTime, query.categoricalChartEndTime);
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return this.$locale.getDateRangeDisplayName(this.userStore, query.trendChartDateType, getYearMonthFirstUnixTime(query.trendChartStartYearMonth), getYearMonthLastUnixTime(query.trendChartEndYearMonth));
             } else {
                 return '';
             }
         },
         clickPieChartItem(item) {
-            this.f7router.navigate(this.getTransactionItemLinkUrl(item));
+            this.f7router.navigate(this.getTransactionItemLinkUrl(item.id));
+        },
+        clickTrendChartItem(item) {
+            this.f7router.navigate(this.getTransactionItemLinkUrl(item.itemId, item.dateRange));
         },
         filterAccounts() {
             this.f7router.navigate('/settings/filter/account?type=statisticsCurrent');
@@ -607,8 +842,8 @@ export default {
         getDisplayPercent(value, precision, lowPrecisionValue) {
             return formatPercent(value, precision, lowPrecisionValue);
         },
-        getTransactionItemLinkUrl(item) {
+        getTransactionItemLinkUrl(itemId, dateRange) {
-            return `/transaction/list?${this.statisticsStore.getTransactionListPageParams(statisticsConstants.allAnalysisTypes.CategoricalAnalysis, item.id)}`;
+            return `/transaction/list?${this.statisticsStore.getTransactionListPageParams(this.analysisType, itemId, dateRange)}`;
         }
     }
 };
@@ -649,50 +884,12 @@ export default {
     transform: translateY(1.5em);
 }
 
-.statistics-list-item-overview-amount {
-    margin-top: 2px;
-    font-size: 1.5em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 6px;
-}
-
-.statistics-list-item-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.statistics-list-item .item-content {
-    margin-top: 8px;
-    margin-bottom: 12px;
-}
-
-.statistics-icon {
-    margin-bottom: -2px;
-}
-
-.statistics-percent {
-    font-size: 0.7em;
-    opacity: 0.6;
-    margin-left: 6px;
-}
-
-.statistics-item-end {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-}
-
-.statistics-percent-line {
-    margin-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
-}
-
-.statistics-percent-line .progressbar {
-    height: 4px;
-    --f7-progressbar-bg-color: #f8f8f8;
-}
-
 .dark .statistics-percent-line .progressbar {
     --f7-progressbar-bg-color: #161616;
 }
+
+.chart-data-type-popover-menu .popover-inner{
+    max-height: 400px;
+    overflow-y: auto;
+}
 </style>