zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate trends bar chart to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-25 23:02:40 +08:00
parent ad4b351a32
commit acaad355ed
7 changed files with 680 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/TrendsChartBase.ts
+64
View File
@@ -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
}
}
src/components/desktop/TrendsChart.vue
+366 -359
View File
@@ -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>
src/components/mobile/TrendsBarChart.vue
+228 -224
View File
@@ -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>
src/lib/statistics.ts
+6 -3
View File
@@ -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;
src/locales/helper.js
-14
View File
@@ -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),
src/models/transaction.ts
+14 -2
View File
@@ -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;
src/views/desktop/statistics/TransactionPage.vue
+2
View File
@@ -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"