feat(Highcharts plugin): add tooltip.sort configuration (#170)

* feat(Highcharts plugin): add `tooltip.sort` configuration

* fix: kuzmadom review fixes

src/plugins/highcharts/renderer/helpers/config/config.js

@@ -527,6 +527,8 @@ function getTooltip(tooltip, options, comments, holidays) {
             ],
             count: 1,
             shared: true,
+            unsafe: Boolean(options.unsafe),
+            sort: options?.tooltip?.sort,
         };
 
         if (typeof options.manageTooltipConfig === 'function') {
@@ -592,6 +594,7 @@ function getTooltip(tooltip, options, comments, holidays) {
         withPercent: false,
         tooltipHeader: null,
         unsafe: Boolean(options.unsafe),
+        sort: options?.tooltip?.sort,
     };
 
     if (isDatetimeXAxis) {

src/plugins/highcharts/renderer/helpers/tooltip/helpers.ts

@@ -1,6 +1,20 @@
+import orderBy from 'lodash/orderBy';
+import type {TooltipData, TooltipLine} from './types';
+
 export const escapeHTML = (html = '') => {
     const elem = document.createElement('span');
     elem.innerText = html;
 
     return elem.innerHTML;
 };
+
+export const getSortedLines = (lines: TooltipLine[], sort: TooltipData['sort'] = {}) => {
+    // set eneabled to true after https://github.com/gravity-ui/chartkit/issues/171
+    const {enabled = false, order = 'desc', iteratee = 'originalValue'} = sort;
+
+    if (!enabled) {
+        return [...lines];
+    }
+
+    return orderBy(lines, iteratee, order);
+};

src/plugins/highcharts/renderer/helpers/tooltip/index.ts

@@ -5,7 +5,7 @@ import {i18n} from '../../../../../i18n';
 import type {Highcharts} from '../../../types';
 import type {TooltipData, TooltipLine, RowRenderingConfig} from './types';
 import {renderShapeIcon} from './render-shape-icon';
-import {escapeHTML} from './helpers';
+import {escapeHTML, getSortedLines} from './helpers';
 
 import './tooltip.scss';
 
@@ -211,9 +211,10 @@ export const formatTooltip = (
     isMobile?: boolean,
 ) => {
     const {splitTooltip, activeRowAlwaysFirstInTooltip} = data;
-    const selectedLineIndex = data.lines.findIndex(({selectedSeries}) => selectedSeries);
-    const selectedLine = data.lines[selectedLineIndex];
     const lines = data.lines.slice(0, (tooltip.lastVisibleRowIndex || data.lines.length) + 1);
+    const sortedLines = getSortedLines(lines, data.sort);
+    const selectedLineIndex = sortedLines.findIndex(({selectedSeries}) => selectedSeries);
+    const selectedLine = sortedLines[selectedLineIndex];
     const withShapes = lines.every((line) => line.seriesShape);
     const unsafe = data.unsafe;
     const tooltipHeaderRaw = data.tooltipHeader?.trim();
@@ -327,7 +328,7 @@ export const formatTooltip = (
                             </thead>`
                     }
                     <tbody class="${TOOLTIP_LIST_CLASS_NAME}">
-                        ${lines
+                        ${sortedLines
                             .map((line, index) => renderRow(line, getRowRenderConfig(index)))
                             .join('')}
                     </tbody>

src/plugins/highcharts/renderer/helpers/tooltip/types.ts

@@ -39,6 +39,20 @@ export type TooltipData = {
     /** Sum of the values of the hidden ("not fit" in the tooltip) rows */
     hiddenRowsSum?: number | string;
     unsafe?: boolean;
+    /** Used to manage tooltip lines sorting */
+    sort?: {
+        /** Enable tooltip lines sorting. `false` by default */
+        enabled?: boolean;
+        /** The sort orders. `'desc'` by default */
+        order?: 'asc' | 'desc';
+        /** The iteratees to sort by key(s) from `TooltipLine`. `'originalValue'` by default */
+        iteratee?:
+            | keyof TooltipLine
+            | keyof TooltipLine[]
+            | ((
+                  line: TooltipLine,
+              ) => TooltipLine[keyof TooltipLine] | TooltipLine[keyof TooltipLine][]);
+    };
 };
 
 export type TooltipLine = {

src/plugins/highcharts/types/widget.ts

@@ -103,6 +103,8 @@ export type HighchartsWidgetData = {
                 /** Pin tooltip with pressed meta key */
                 metaKey?: boolean;
             };
+            /** Used to manage tooltip lines sorting */
+            sort?: TooltipData['sort'];
         };
         /**
          * Used to modify tooltip data