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

display items in specified sorting type in tooltip for trend analysis chart

Browse Source
This commit is contained in:
MaysWind
2024-06-23 22:29:47 +08:00
parent 830974500b
commit 9627e65d6d
4 changed files with 69 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/TrendsChart.vue
+28 -5
View File
@@ -17,6 +17,9 @@ import {
getYearMonthStringFromObject,
getAllYearMonthUnixTimesBetweenStartYearMonthAndEndYearMonth
} from '@/lib/datetime.js';
import {
sortStatisticsItems
} from '@/lib/statistics.js';
export default {
props: [
@@ -25,11 +28,13 @@ export default {
'items',
'startYearMonth',
'endYearMonth',
'sortingType',
'idField',
'nameField',
'valueField',
'colorField',
'hiddenField',
'displayOrdersField',
'translateName',
'defaultCurrency',
'showValue',
@@ -223,17 +228,35 @@ export default {
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;
if (params.length === 1 || params[i].data !== 0) {
const value = self.getDisplayCurrency(params[i].data, self.defaultCurrency);
tooltip += '<div><span class="chart-pointer" style="background-color: ' + params[i].color + '"></span>';
tooltip += `<span>${name}</span><span style="margin-left: 20px; float: right">${value}</span><br/>`;
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>';
totalAmount += params[i].data;
}
}
src/lib/statistics.js
+35
View File
@@ -17,3 +17,38 @@ export function isChartDataTypeAvailableForAnalysisType(chartDataType, analysisT
return false;
}
export function sortStatisticsItems(items, sortingType) {
if (sortingType === statisticsConstants.allSortingTypes.DisplayOrder.type) {
items.sort(function (data1, data2) {
for (let i = 0; i < Math.min(data1.displayOrders.length, data2.displayOrders.length); i++) {
if (data1.displayOrders[i] !== data2.displayOrders[i]) {
return data1.displayOrders[i] - data2.displayOrders[i]; // asc
}
}
return data1.name.localeCompare(data2.name, undefined, { // asc
numeric: true,
sensitivity: 'base'
});
});
} else if (sortingType === statisticsConstants.allSortingTypes.Name.type) {
items.sort(function (data1, data2) {
return data1.name.localeCompare(data2.name, undefined, { // asc
numeric: true,
sensitivity: 'base'
});
});
} else {
items.sort(function (data1, data2) {
if (data1.totalAmount !== data2.totalAmount) {
return data2.totalAmount - data1.totalAmount; // desc
}
return data1.name.localeCompare(data2.name, undefined, { // asc
numeric: true,
sensitivity: 'base'
});
});
}
}
src/stores/statistics.js
+4 -32
View File
@@ -23,6 +23,9 @@ import {
getYearAndMonthFromUnixTime,
getDateRangeByDateType
} from '@/lib/datetime.js';
import {
sortStatisticsItems
} from '@/lib/statistics.js';
function assembleAccountAndCategoryInfo(userStore, accountsStore, transactionCategoriesStore, exchangeRatesStore, items) {
const finalItems = [];
@@ -254,38 +257,7 @@ function getCategoryTotalAmountItems(items, transactionStatisticsFilter) {
}
function sortCategoryTotalAmountItems(items, transactionStatisticsFilter) {
if (transactionStatisticsFilter.sortingType === statisticsConstants.allSortingTypes.DisplayOrder.type) {
items.sort(function (data1, data2) {
for (let i = 0; i < Math.min(data1.displayOrders.length, data2.displayOrders.length); i++) {
if (data1.displayOrders[i] !== data2.displayOrders[i]) {
return data1.displayOrders[i] - data2.displayOrders[i]; // asc
}
}
return data1.name.localeCompare(data2.name, undefined, { // asc
numeric: true,
sensitivity: 'base'
});
});
} else if (transactionStatisticsFilter.sortingType === statisticsConstants.allSortingTypes.Name.type) {
items.sort(function (data1, data2) {
return data1.name.localeCompare(data2.name, undefined, { // asc
numeric: true,
sensitivity: 'base'
});
});
} else {
items.sort(function (data1, data2) {
if (data1.totalAmount !== data2.totalAmount) {
return data2.totalAmount - data1.totalAmount; // desc
}
return data1.name.localeCompare(data2.name, undefined, { // asc
numeric: true,
sensitivity: 'base'
});
});
}
sortStatisticsItems(items, transactionStatisticsFilter.sortingType)
}
export const useStatisticsStore = defineStore('statistics', {
src/views/desktop/statistics/TransactionPage.vue
+2
View File
@@ -238,6 +238,7 @@
:type="queryChartType"
:start-year-month="query.trendChartStartYearMonth"
:end-year-month="query.trendChartEndYearMonth"
:sorting-type="querySortingType"
:items="trendsAnalysisData && trendsAnalysisData.items && trendsAnalysisData.items.length ? trendsAnalysisData.items : []"
:translate-name="translateNameInTrendsChart"
:show-value="showAmountInChart"
@@ -248,6 +249,7 @@
name-field="name"
value-field="totalAmount"
hidden-field="hidden"
display-orders-field="displayOrders"
v-else-if="!initing && trendsAnalysisData && trendsAnalysisData.items && trendsAnalysisData.items.length"
@click="clickTrendChartItem"
/>