feat(Highcharts plugin)!: remove sort logic from tooltip to higher le…

…vel (#200)
gravity-ui · Jul 17, 2023 · 703191c · 703191c
1 parent 8c11708
commit 703191c
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 36 deletions.
diff --git a/src/plugins/highcharts/renderer/helpers/config/config.js b/src/plugins/highcharts/renderer/helpers/config/config.js
@@ -42,6 +42,7 @@ import {
     numberFormat,
     getFormatOptionsFromLine,
     checkTooltipPinningAvailability,
+    getSortedData,
 } from './utils';
 import {handleLegendItemClick} from './handleLegendItemClick';
 import {getChartKitFormattedValue} from './utils/getChartKitFormattedValue';
@@ -528,7 +529,6 @@ function getTooltip(tooltip, options, comments, holidays) {
             count: 1,
             shared: true,
             unsafe: Boolean(options.unsafe),
-            sort: options?.tooltip?.sort,
         };
 
         if (typeof options.manageTooltipConfig === 'function') {
@@ -573,7 +573,7 @@ function getTooltip(tooltip, options, comments, holidays) {
     let shared;
 
     if (this.points) {
-        points = this.points;
+        points = getSortedData(this.points, options?.tooltip?.sort);
         shared = true;
     } else {
         points.push(Object.assign({}, this.point));
@@ -594,7 +594,6 @@ function getTooltip(tooltip, options, comments, holidays) {
         withPercent: false,
         tooltipHeader: null,
         unsafe: Boolean(options.unsafe),
-        sort: options?.tooltip?.sort,
     };
 
     if (isDatetimeXAxis) {

diff --git a/src/plugins/highcharts/renderer/helpers/config/utils/index.ts b/src/plugins/highcharts/renderer/helpers/config/utils/index.ts
@@ -1,3 +1,6 @@
+import orderBy from 'lodash/orderBy';
+import type {HighchartsSortData} from '../../../../types/widget';
+
 export {addShowInNavigatorToSeries} from './addShowInNavigatorToSeries';
 export {buildNavigatorFallback} from './buildNavigatorFallback';
 export {calculatePrecision} from './calculatePrecision';
@@ -11,3 +14,16 @@ export {isSafari} from './isSafari';
 export {mergeArrayWithObject} from './mergeArrayWithObject';
 export {numberFormat} from './numberFormat';
 export {setNavigatorDefaultPeriod} from './setNavigatorDefaultPeriod';
+
+export const getSortedData = <T extends Record<string, any>>(
+    data: T[],
+    sort: HighchartsSortData = {},
+) => {
+    const {enabled = true, order = 'desc', iteratee = 'y'} = sort;
+
+    if (!enabled) {
+        return [...data];
+    }
+
+    return orderBy(data, iteratee, order);
+};
diff --git a/src/plugins/highcharts/renderer/helpers/tooltip/helpers.ts b/src/plugins/highcharts/renderer/helpers/tooltip/helpers.ts
@@ -1,19 +1,6 @@
-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'] = {}) => {
-    const {enabled = true, order = 'desc', iteratee = 'originalValue'} = sort;
-
-    if (!enabled) {
-        return [...lines];
-    }
-
-    return orderBy(lines, iteratee, order);
-};
diff --git a/src/plugins/highcharts/renderer/helpers/tooltip/index.ts b/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, getSortedLines} from './helpers';
+import {escapeHTML} from './helpers';
 
 import './tooltip.scss';
 
@@ -212,9 +212,8 @@ export const formatTooltip = (
 ) => {
     const {splitTooltip, activeRowAlwaysFirstInTooltip} = data;
     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 selectedLineIndex = lines.findIndex(({selectedSeries}) => selectedSeries);
+    const selectedLine = lines[selectedLineIndex];
     const withShapes = lines.every((line) => line.seriesShape);
     const unsafe = data.unsafe;
     const tooltipHeaderRaw = data.tooltipHeader?.trim();
@@ -328,7 +327,7 @@ export const formatTooltip = (
                             </thead>`
                     }
                     <tbody class="${TOOLTIP_LIST_CLASS_NAME}">
-                        ${sortedLines
+                        ${lines
                             .map((line, index) => renderRow(line, getRowRenderConfig(index)))
                             .join('')}
                     </tbody>

diff --git a/src/plugins/highcharts/renderer/helpers/tooltip/types.ts b/src/plugins/highcharts/renderer/helpers/tooltip/types.ts
@@ -39,20 +39,6 @@ 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 = {

diff --git a/src/plugins/highcharts/types/widget.ts b/src/plugins/highcharts/types/widget.ts
@@ -34,6 +34,20 @@ export type HighchartsManageTooltipConfig = (
     chart: Highcharts.Chart,
 ) => HighchartsManageTooltipConfigOptions;
 
+export type HighchartsSortData = {
+    /** 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 HighchartsWidgetData = {
     data: (
         | CkHighchartsSeriesOptionsType[]
@@ -105,7 +119,7 @@ export type HighchartsWidgetData = {
                 metaKey?: boolean;
             };
             /** Used to manage tooltip lines sorting */
-            sort?: TooltipData['sort'];
+            sort?: HighchartsSortData;
         };
         /**
          * Used to modify tooltip data