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

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) {
+                            displayItems.push({
-                                const value = self.getDisplayCurrency(params[i].data, self.defaultCurrency);
+                                name: name,
-                                tooltip += '<div><span class="chart-pointer" style="background-color: ' + params[i].color + '"></span>';
+                                color: color,
-                                tooltip += `<span>${name}</span><span style="margin-left: 20px; float: right">${value}</span><br/>`;
+                                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

@@ -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

@@ -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) {
+    sortStatisticsItems(items, transactionStatisticsFilter.sortingType)
-        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'
-            });
-        });
-    }
 }
 
 export const useStatisticsStore = defineStore('statistics', {

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"
                                         />