From 9627e65d6da3eb4966b2b6d21b717eb5f981c2e7 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sun, 23 Jun 2024 22:29:47 +0800 Subject: [PATCH] display items in specified sorting type in tooltip for trend analysis chart --- src/components/desktop/TrendsChart.vue | 33 ++++++++++++++--- src/lib/statistics.js | 35 ++++++++++++++++++ src/stores/statistics.js | 36 +++---------------- .../desktop/statistics/TransactionPage.vue | 2 ++ 4 files changed, 69 insertions(+), 37 deletions(-) diff --git a/src/components/desktop/TrendsChart.vue b/src/components/desktop/TrendsChart.vue index 1ac27936..4639ce65 100644 --- a/src/components/desktop/TrendsChart.vue +++ b/src/components/desktop/TrendsChart.vue @@ -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 += '
'; - tooltip += `${name}${value}
`; + 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 += '
'; + tooltip += `${item.name}${value}
`; tooltip += '
'; - totalAmount += params[i].data; } } diff --git a/src/lib/statistics.js b/src/lib/statistics.js index 27b579d5..8d372fcc 100644 --- a/src/lib/statistics.js +++ b/src/lib/statistics.js @@ -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' + }); + }); + } +} diff --git a/src/stores/statistics.js b/src/stores/statistics.js index 065708f9..4bd394b9 100644 --- a/src/stores/statistics.js +++ b/src/stores/statistics.js @@ -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', { diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue index 1d6aee8b..9dacea26 100644 --- a/src/views/desktop/statistics/TransactionPage.vue +++ b/src/views/desktop/statistics/TransactionPage.vue @@ -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" />