add date filter for trend analysis

src/components/desktop/MonthRangeSelectionDialog.vue

@@ -0,0 +1,197 @@
+<template>
+    <v-dialog class="month-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
+        <v-card class="pa-2 pa-sm-4 pa-md-4">
+            <template #title>
+                <div class="d-flex align-center justify-center">
+                    <h4 class="text-h4">{{ title }}</h4>
+                </div>
+            </template>
+            <template #subtitle>
+                <div class="text-body-1 text-center text-wrap mt-6">
+                    <p v-if="hint">{{ hint }}</p>
+                    <span v-if="beginDateTime && endDateTime">
+                        <span>{{ beginDateTime }}</span>
+                        <span> - </span>
+                        <span>{{ endDateTime }}</span>
+                    </span>
+                    <slot></slot>
+                </div>
+            </template>
+            <v-card-text class="mb-md-4 w-100 d-flex justify-center">
+                <v-row class="match-height">
+                    <v-col cols="12" md="6">
+                        <vue-date-picker inline month-picker auto-apply
+                                         month-name-format="long"
+                                         :clearable="false"
+                                         :dark="isDarkMode"
+                                         :year-range="yearRange"
+                                         :year-first="isYearFirst"
+                                         :partial-range="false"
+                                         v-model="startTime">
+                            <template #month="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                            <template #month-overlay-value="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                        </vue-date-picker>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                        <vue-date-picker inline month-picker auto-apply
+                                         month-name-format="long"
+                                         :clearable="false"
+                                         :dark="isDarkMode"
+                                         :year-range="yearRange"
+                                         :year-first="isYearFirst"
+                                         :partial-range="false"
+                                         v-model="endTime">
+                            <template #month="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                            <template #month-overlay-value="{ text }">
+                                {{ getMonthShortName(text) }}
+                            </template>
+                        </vue-date-picker>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+            <v-card-text class="overflow-y-visible">
+                <div class="w-100 d-flex justify-center gap-4">
+                    <v-btn :disabled="!startTime || !endTime" @click="confirm">{{ $t('OK') }}</v-btn>
+                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { useTheme } from 'vuetify';
+
+import { mapStores } from 'pinia';
+import { useUserStore } from '@/stores/user.js';
+
+import {
+    getYearMonthObjectFromString,
+    getYearMonthStringFromObject,
+    getCurrentUnixTime,
+    getCurrentDateTime,
+    getThisYearFirstUnixTime,
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime,
+    getYear
+} from '@/lib/datetime.js';
+
+export default {
+    props: [
+        'minTime',
+        'maxTime',
+        'title',
+        'hint',
+        'persistent',
+        '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,
+                getYear(getCurrentDateTime()) + 1
+            ],
+            startTime: minDate,
+            endTime: maxDate
+        }
+    },
+    computed: {
+        ...mapStores(useUserStore),
+        showState: {
+            get: function () {
+                return this.show;
+            },
+            set: function (value) {
+                this.$emit('update:show', value);
+            }
+        },
+        isDarkMode() {
+            return this.globalTheme.global.name.value === 'dark';
+        },
+        isYearFirst() {
+            return this.$locale.isLongDateMonthAfterYear(this.userStore);
+        },
+        beginDateTime() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.startTime));
+        },
+        endDateTime() {
+            return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.endTime));
+        }
+    },
+    watch: {
+        'minTime': function (newValue) {
+            if (newValue) {
+                this.startTime = getYearMonthObjectFromString(newValue);
+            }
+        },
+        'maxTime': function (newValue) {
+            if (newValue) {
+                this.endTime = getYearMonthObjectFromString(newValue);
+            }
+        }
+    },
+    setup() {
+        const theme = useTheme();
+
+        return {
+            globalTheme: theme
+        };
+    },
+    methods: {
+        confirm() {
+            if (!this.startTime || !this.endTime) {
+                return;
+            }
+
+            if (this.startTime.year <= 0 || this.startTime.month < 0 || this.endTime.year <= 0 || this.endTime.month < 0) {
+                this.$toast('Date is too early');
+                return;
+            }
+
+            const minYearMonth = getYearMonthStringFromObject(this.startTime);
+            const maxYearMonth = getYearMonthStringFromObject(this.endTime);
+
+            this.$emit('dateRange:change', minYearMonth, maxYearMonth);
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        },
+        getMonthShortName(month) {
+            return this.$locale.getMonthShortName(month);
+        }
+    }
+}
+</script>
+
+<style>
+.month-range-selection-dialog .dp__preset_ranges {
+    white-space: nowrap !important;
+}
+
+.month-range-selection-dialog .dp__overlay {
+    width: 100% !important;
+    height: 100% !important;
+}
+</style>

src/consts/datetime.js

@@ -240,14 +240,16 @@ const allDateRanges = {
         type: 9,
         name: 'This year',
         availableScenes: {
-            [allDateRangeScenes.Normal]: true
+            [allDateRangeScenes.Normal]: true,
+            [allDateRangeScenes.TrendAnalysis]: true
         }
     },
     LastYear: {
         type: 10,
         name: 'Last year',
         availableScenes: {
-            [allDateRangeScenes.Normal]: true
+            [allDateRangeScenes.Normal]: true,
+            [allDateRangeScenes.TrendAnalysis]: true
         }
     },
     RecentTwelveMonths: {

src/desktop-main.js

@@ -93,6 +93,7 @@ import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import PieChartComponent from '@/components/desktop/PieChart.vue';
 import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue';
+import MonthRangeSelectionDialog from '@/components/desktop/MonthRangeSelectionDialog.vue';
 import SwitchToMobileDialog from '@/components/desktop/SwitchToMobileDialog.vue';
 
 import '@/styles/desktop/template/vuetify/index.scss';
@@ -453,6 +454,7 @@ app.component('ConfirmDialog', ConfirmDialog);
 app.component('SnackBar', SnackBar);
 app.component('PieChart', PieChartComponent);
 app.component('DateRangeSelectionDialog', DateRangeSelectionDialog);
+app.component('MonthRangeSelectionDialog', MonthRangeSelectionDialog);
 app.component('SwitchToMobileDialog', SwitchToMobileDialog);
 
 app.config.globalProperties.$version = getVersion();

src/lib/common.js

@@ -37,7 +37,7 @@ export function isYearMonth(val) {
         return false;
     }
 
-    return isNumber(items[0]) && isNumber(items[1]);
+    return parseInt(items[0]) && parseInt(items[1]);
 }
 
 export function isEquals(obj1, obj2) {

src/lib/datetime.js

@@ -1,7 +1,47 @@
 import moment from 'moment';
 
 import dateTimeConstants from '@/consts/datetime.js';
-import { isNumber } from './common.js';
+import { isObject, isString, isNumber } from './common.js';
+
+export function isYearMonthValid(year, month) {
+    if (!isNumber(year) || !isNumber(month)) {
+        return false;
+    }
+
+    return year > 0 && month >= 0 && month <= 11;
+}
+
+export function getYearMonthObjectFromString(yearMonth) {
+    if (!isString(yearMonth)) {
+        return null;
+    }
+
+    const items = yearMonth.split('-');
+
+    if (items.length !== 2) {
+        return null;
+    }
+
+    const year = parseInt(items[0]);
+    const month = parseInt(items[1]) - 1;
+
+    if (!isYearMonthValid(year, month)) {
+        return null;
+    }
+
+    return {
+        year: year,
+        month: month
+    };
+}
+
+export function getYearMonthStringFromObject(yearMonth) {
+    if (!yearMonth || !isYearMonthValid(yearMonth.year, yearMonth.month)) {
+        return '';
+    }
+
+    return `${yearMonth.year}-${yearMonth.month + 1}`;
+}
 
 export function getTwoDigitsString(value) {
     if (value < 10) {
@@ -155,6 +195,14 @@ export function getYearAndMonth(date) {
     return `${year}-${month}`;
 }
 
+export function getYearAndMonthFromUnixTime(unixTime) {
+    if (!unixTime) {
+        return '';
+    }
+
+    return getYearAndMonth(parseDateFromUnixTime(unixTime));
+}
+
 export function getDay(date) {
     return moment(date).date();
 }
@@ -262,6 +310,24 @@ export function getSpecifiedDayFirstUnixTime(unixTime) {
     return moment.unix(unixTime).set({ hour: 0, minute: 0, second: 0, millisecond: 0 }).unix();
 }
 
+export function getYearMonthFirstUnixTime(yearMonth) {
+    if (isString(yearMonth)) {
+        yearMonth = getYearMonthObjectFromString(yearMonth);
+    } else if (isObject(yearMonth) && !isYearMonthValid(yearMonth.year, yearMonth.month)) {
+        yearMonth = null;
+    }
+
+    if (!yearMonth) {
+        return 0;
+    }
+
+    return moment().set({ year: yearMonth.year, month: yearMonth.month, date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 }).unix();
+}
+
+export function getYearMonthLastUnixTime(yearMonth) {
+    return moment.unix(getYearMonthFirstUnixTime(yearMonth)).add(1, 'months').subtract(1, 'seconds').unix();
+}
+
 export function getDateTimeFormatType(allFormatMap, allFormatArray, localeDefaultFormatTypeName, systemDefaultFormatType, formatTypeValue) {
     if (formatTypeValue > dateTimeConstants.defaultDateTimeFormatValue && allFormatArray[formatTypeValue - 1] && allFormatArray[formatTypeValue - 1].key) {
         return allFormatArray[formatTypeValue - 1];