show the time range below the fiscal year option
This commit is contained in:
+27
-24
@@ -77,7 +77,8 @@ export interface LocalizedDateTimeFormat extends TypeAndDisplayName {
|
||||
export interface LocalizedDateRange extends TypeAndDisplayName {
|
||||
readonly type: number;
|
||||
readonly displayName: string;
|
||||
readonly isBillingCycle?: boolean;
|
||||
readonly isBillingCycle: boolean;
|
||||
readonly isUserCustomRange: boolean;
|
||||
}
|
||||
|
||||
export interface LocalizedRecentMonthDateRange extends TimeRangeAndDateType {
|
||||
@@ -527,48 +528,50 @@ export class DateRange implements TypeAndName {
|
||||
private static readonly allInstancesByType: Record<number, DateRange> = {};
|
||||
|
||||
// All date range
|
||||
public static readonly All = new DateRange(0, 'All', false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly All = new DateRange(0, 'All', false, false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
|
||||
// Date ranges for normal scene only
|
||||
public static readonly Today = new DateRange(1, 'Today', false, DateRangeScene.Normal);
|
||||
public static readonly Yesterday = new DateRange(2, 'Yesterday', false, DateRangeScene.Normal);
|
||||
public static readonly LastSevenDays = new DateRange(3, 'Recent 7 days', false, DateRangeScene.Normal);
|
||||
public static readonly LastThirtyDays = new DateRange(4, 'Recent 30 days', false, DateRangeScene.Normal);
|
||||
public static readonly ThisWeek = new DateRange(5, 'This week', false, DateRangeScene.Normal);
|
||||
public static readonly LastWeek = new DateRange(6, 'Last week', false, DateRangeScene.Normal);
|
||||
public static readonly ThisMonth = new DateRange(7, 'This month', false, DateRangeScene.Normal);
|
||||
public static readonly LastMonth = new DateRange(8, 'Last month', false, DateRangeScene.Normal);
|
||||
public static readonly Today = new DateRange(1, 'Today', false, false, DateRangeScene.Normal);
|
||||
public static readonly Yesterday = new DateRange(2, 'Yesterday', false, false, DateRangeScene.Normal);
|
||||
public static readonly LastSevenDays = new DateRange(3, 'Recent 7 days', false, false, DateRangeScene.Normal);
|
||||
public static readonly LastThirtyDays = new DateRange(4, 'Recent 30 days', false, false, DateRangeScene.Normal);
|
||||
public static readonly ThisWeek = new DateRange(5, 'This week', false, false, DateRangeScene.Normal);
|
||||
public static readonly LastWeek = new DateRange(6, 'Last week', false, false, DateRangeScene.Normal);
|
||||
public static readonly ThisMonth = new DateRange(7, 'This month', false, false, DateRangeScene.Normal);
|
||||
public static readonly LastMonth = new DateRange(8, 'Last month', false, false, DateRangeScene.Normal);
|
||||
|
||||
// Date ranges for normal and trend analysis scene
|
||||
public static readonly ThisYear = new DateRange(9, 'This year', false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly LastYear = new DateRange(10, 'Last year', false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly ThisFiscalYear = new DateRange(11, 'This fiscal year', false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly LastFiscalYear = new DateRange(12, 'Last fiscal year', false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly ThisYear = new DateRange(9, 'This year', false, false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly LastYear = new DateRange(10, 'Last year', false, false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly ThisFiscalYear = new DateRange(11, 'This fiscal year', false, true, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly LastFiscalYear = new DateRange(12, 'Last fiscal year', false, true, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
|
||||
// Billing cycle date ranges for normal scene only
|
||||
public static readonly PreviousBillingCycle = new DateRange(51, 'Previous Billing Cycle', true, DateRangeScene.Normal);
|
||||
public static readonly CurrentBillingCycle = new DateRange(52, 'Current Billing Cycle', true, DateRangeScene.Normal);
|
||||
public static readonly PreviousBillingCycle = new DateRange(51, 'Previous Billing Cycle', true, true, DateRangeScene.Normal);
|
||||
public static readonly CurrentBillingCycle = new DateRange(52, 'Current Billing Cycle', true, true, DateRangeScene.Normal);
|
||||
|
||||
// Date ranges for trend analysis scene only
|
||||
public static readonly RecentTwelveMonths = new DateRange(101, 'Recent 12 months', false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentTwentyFourMonths = new DateRange(102, 'Recent 24 months', false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentThirtySixMonths = new DateRange(103, 'Recent 36 months', false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentTwoYears = new DateRange(104, 'Recent 2 years', false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentThreeYears = new DateRange(105, 'Recent 3 years', false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentFiveYears = new DateRange(106, 'Recent 5 years', false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentTwelveMonths = new DateRange(101, 'Recent 12 months', false, false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentTwentyFourMonths = new DateRange(102, 'Recent 24 months', false, false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentThirtySixMonths = new DateRange(103, 'Recent 36 months', false, false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentTwoYears = new DateRange(104, 'Recent 2 years', false, false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentThreeYears = new DateRange(105, 'Recent 3 years', false, false, DateRangeScene.TrendAnalysis);
|
||||
public static readonly RecentFiveYears = new DateRange(106, 'Recent 5 years', false, false, DateRangeScene.TrendAnalysis);
|
||||
|
||||
// Custom date range
|
||||
public static readonly Custom = new DateRange(255, 'Custom Date', false, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
public static readonly Custom = new DateRange(255, 'Custom Date', false, true, DateRangeScene.Normal, DateRangeScene.TrendAnalysis);
|
||||
|
||||
public readonly type: number;
|
||||
public readonly name: string;
|
||||
public readonly isBillingCycle: boolean;
|
||||
public readonly isUserCustomRange: boolean;
|
||||
private readonly availableScenes: Record<number, boolean>;
|
||||
|
||||
private constructor(type: number, name: string, isBillingCycle: boolean, ...availableScenes: DateRangeScene[]) {
|
||||
private constructor(type: number, name: string, isBillingCycle: boolean, isUserCustomRange: boolean, ...availableScenes: DateRangeScene[]) {
|
||||
this.type = type;
|
||||
this.name = name;
|
||||
this.isBillingCycle = isBillingCycle;
|
||||
this.isUserCustomRange = isUserCustomRange;
|
||||
this.availableScenes = {};
|
||||
|
||||
if (availableScenes) {
|
||||
|
||||
@@ -944,7 +944,8 @@ export function useI18n() {
|
||||
ret.push({
|
||||
type: dateRange.type,
|
||||
displayName: t(dateRange.name),
|
||||
isBillingCycle: dateRange.isBillingCycle
|
||||
isBillingCycle: dateRange.isBillingCycle,
|
||||
isUserCustomRange: dateRange.isUserCustomRange
|
||||
});
|
||||
}
|
||||
|
||||
@@ -954,7 +955,9 @@ export function useI18n() {
|
||||
if (includeCustom || dateRange.type !== DateRange.Custom.type) {
|
||||
ret.push({
|
||||
type: dateRange.type,
|
||||
displayName: t(dateRange.name)
|
||||
displayName: t(dateRange.name),
|
||||
isBillingCycle: dateRange.isBillingCycle,
|
||||
isUserCustomRange: dateRange.isUserCustomRange
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ export function useStatisticsSettingPageBase() {
|
||||
const allSortingTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsSortingTypes());
|
||||
const allCategoricalChartTypes = computed<TypeAndDisplayName[]>(() => getAllCategoricalChartTypes());
|
||||
const allCategoricalChartDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.Normal, false));
|
||||
const allTrendChartTypes = computed<LocalizedDateRange[]>(() => getAllTrendChartTypes());
|
||||
const allTrendChartTypes = computed<TypeAndDisplayName[]>(() => getAllTrendChartTypes());
|
||||
const allTrendChartDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.TrendAnalysis, false));
|
||||
|
||||
const defaultChartDataType = computed<number>({
|
||||
|
||||
@@ -148,16 +148,6 @@ export function useStatisticsTransactionPageBase() {
|
||||
}
|
||||
});
|
||||
|
||||
const showCustomDateRange = computed<boolean>(() => {
|
||||
if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
|
||||
return query.value.categoricalChartDateType === DateRange.Custom.type && !!query.value.categoricalChartStartTime && !!query.value.categoricalChartEndTime;
|
||||
} else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
|
||||
return query.value.trendChartDateType === DateRange.Custom.type && !!query.value.trendChartStartYearMonth && !!query.value.trendChartEndYearMonth;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
const showAmountInChart = computed<boolean>(() => {
|
||||
if (!showAccountBalance.value
|
||||
&& (query.value.chartDataType === ChartDataType.AccountTotalAssets.type || query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type)) {
|
||||
@@ -200,6 +190,16 @@ export function useStatisticsTransactionPageBase() {
|
||||
const categoricalAnalysisData = computed<TransactionCategoricalAnalysisData>(() => statisticsStore.categoricalAnalysisData);
|
||||
const trendsAnalysisData = computed<TransactionTrendsAnalysisData | null>(() => statisticsStore.trendsAnalysisData);
|
||||
|
||||
function canShowCustomDateRange(dateRangeType: number): boolean {
|
||||
if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
|
||||
return query.value.categoricalChartDateType === dateRangeType && !!query.value.categoricalChartStartTime && !!query.value.categoricalChartEndTime;
|
||||
} else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
|
||||
return query.value.trendChartDateType === dateRangeType && !!query.value.trendChartStartYearMonth && !!query.value.trendChartEndYearMonth;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function getDisplayAmount(amount: number, currency: string, textLimit?: number): string {
|
||||
const finalAmount = formatAmountToLocalizedNumeralsWithCurrency(amount, currency);
|
||||
|
||||
@@ -241,7 +241,6 @@ export function useStatisticsTransactionPageBase() {
|
||||
queryTrendDateAggregationTypeName,
|
||||
isQueryDateRangeChanged,
|
||||
canShiftDateRange,
|
||||
showCustomDateRange,
|
||||
showAmountInChart,
|
||||
totalAmountName,
|
||||
showTotalAmountInTrendsChart,
|
||||
@@ -249,6 +248,7 @@ export function useStatisticsTransactionPageBase() {
|
||||
categoricalAnalysisData,
|
||||
trendsAnalysisData,
|
||||
// functions
|
||||
canShowCustomDateRange,
|
||||
getDisplayAmount
|
||||
};
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
class="cursor-pointer"
|
||||
@click="setDateFilter(dateRange.type)">
|
||||
{{ dateRange.displayName }}
|
||||
<div class="statistics-custom-datetime-range" v-if="dateRange.type === DateRange.Custom.type && showCustomDateRange">
|
||||
<div class="statistics-custom-datetime-range" v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)">
|
||||
<span>{{ queryStartTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
@@ -450,13 +450,13 @@ const {
|
||||
queryDateRangeName,
|
||||
queryTrendDateAggregationTypeName,
|
||||
canShiftDateRange,
|
||||
showCustomDateRange,
|
||||
showAmountInChart,
|
||||
totalAmountName,
|
||||
showTotalAmountInTrendsChart,
|
||||
translateNameInTrendsChart,
|
||||
categoricalAnalysisData,
|
||||
trendsAnalysisData,
|
||||
canShowCustomDateRange,
|
||||
getDisplayAmount
|
||||
} = useStatisticsTransactionPageBase();
|
||||
|
||||
|
||||
@@ -220,7 +220,7 @@
|
||||
<span class="text-sm ms-3">{{ dateRange.displayName }}</span>
|
||||
</div>
|
||||
</v-list-item-title>
|
||||
<div class="ms-3 smaller" v-if="((dateRange.isBillingCycle || dateRange.type === DateRange.Custom.type) && query.dateType === dateRange.type) && query.minTime && query.maxTime">
|
||||
<div class="ms-3 smaller" v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
|
||||
<span>{{ queryMinTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="queryDateRangeType === dateRange.type"></f7-icon>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="((dateRange.isBillingCycle || dateRange.type === DateRange.Custom.type) && queryDateRangeType === dateRange.type) && startTime && endTime">
|
||||
<div v-if="dateRange.isUserCustomRange && queryDateRangeType === dateRange.type && startTime && endTime">
|
||||
<span>{{ displayStartTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
|
||||
@@ -270,7 +270,7 @@
|
||||
<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 === DateRange.Custom.type && showCustomDateRange">
|
||||
<div v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)">
|
||||
<span>{{ queryStartTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
@@ -398,12 +398,12 @@ const {
|
||||
queryTrendDateAggregationTypeName,
|
||||
isQueryDateRangeChanged,
|
||||
canShiftDateRange,
|
||||
showCustomDateRange,
|
||||
showAmountInChart,
|
||||
totalAmountName,
|
||||
translateNameInTrendsChart,
|
||||
categoricalAnalysisData,
|
||||
trendsAnalysisData,
|
||||
canShowCustomDateRange,
|
||||
getDisplayAmount
|
||||
} = useStatisticsTransactionPageBase();
|
||||
|
||||
|
||||
@@ -333,7 +333,7 @@
|
||||
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="((dateRange.isBillingCycle || dateRange.type === DateRange.Custom.type) && query.dateType === dateRange.type) && query.minTime && query.maxTime">
|
||||
<div v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
|
||||
<span>{{ queryMinTime }}</span>
|
||||
<span> - </span>
|
||||
<br/>
|
||||
|
||||
Reference in New Issue
Block a user