@gravity-ui/chartkit 2.8.1 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.9.0](https://github.com/gravity-ui/chartkit/compare/v2.8.1...v2.9.0) (2023-05-31)
+
+
+### Features
+
+* **Highcharts plugin:** add `tooltip.sort` configuration ([#170](https://github.com/gravity-ui/chartkit/issues/170)) ([0825a91](https://github.com/gravity-ui/chartkit/commit/0825a91155592d9e06dbdd452547a0c31b71c07a))
+
 ## [2.8.1](https://github.com/gravity-ui/chartkit/compare/v2.8.0...v2.8.1) (2023-05-30)
 
 

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -381,7 +381,7 @@ function validateCellManipulationConfig(tooltipOptions, property, item) {
     }
 }
 function getTooltip(tooltip, options, comments, holidays) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const serieType = (this.series && this.series.type) || tooltip.chart.options.chart.type;
     const chart = tooltip.chart;
     const xAxis = chart.xAxis[0];
@@ -411,6 +411,8 @@ function getTooltip(tooltip, options, comments, holidays) {
             ],
             count: 1,
             shared: true,
+            unsafe: Boolean(options.unsafe),
+            sort: (_b = options === null || options === void 0 ? void 0 : options.tooltip) === null || _b === void 0 ? void 0 : _b.sort,
         };
         if (typeof options.manageTooltipConfig === 'function') {
             json = callManageTooltipConfig(options, json, chart);
@@ -457,6 +459,7 @@ function getTooltip(tooltip, options, comments, holidays) {
         withPercent: false,
         tooltipHeader: null,
         unsafe: Boolean(options.unsafe),
+        sort: (_c = options === null || options === void 0 ? void 0 : options.tooltip) === null || _c === void 0 ? void 0 : _c.sort,
     };
     if (isDatetimeXAxis) {
         const items = this.points || Highcharts.splat(this);
@@ -473,9 +476,9 @@ function getTooltip(tooltip, options, comments, holidays) {
         }
         json.tooltipHeader = chart.time.dateFormat(xDateFormat, this.x);
     }
-    else if ((_d = (_c = (_b = extendedPoint.point) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.xFormatted) !== null && _d !== void 0 ? _d : (extendedPoint.x || extendedPoint.x === 0)) {
-        const customTooltipHeaderFormatter = (_e = options === null || options === void 0 ? void 0 : options.highcharts) === null || _e === void 0 ? void 0 : _e.tooltipHeaderFormatter;
-        const tooltipHeaderStringValue = String((_h = (_g = (_f = extendedPoint.point) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.xFormatted) !== null && _h !== void 0 ? _h : extendedPoint.x);
+    else if ((_f = (_e = (_d = extendedPoint.point) === null || _d === void 0 ? void 0 : _d.options) === null || _e === void 0 ? void 0 : _e.xFormatted) !== null && _f !== void 0 ? _f : (extendedPoint.x || extendedPoint.x === 0)) {
+        const customTooltipHeaderFormatter = (_g = options === null || options === void 0 ? void 0 : options.highcharts) === null || _g === void 0 ? void 0 : _g.tooltipHeaderFormatter;
+        const tooltipHeaderStringValue = String((_k = (_j = (_h = extendedPoint.point) === null || _h === void 0 ? void 0 : _h.options) === null || _j === void 0 ? void 0 : _j.xFormatted) !== null && _k !== void 0 ? _k : extendedPoint.x);
         json.tooltipHeader = customTooltipHeaderFormatter
             ? customTooltipHeaderFormatter(tooltipHeaderStringValue)
             : tooltipHeaderStringValue;

package/build/plugins/highcharts/renderer/helpers/tooltip/helpers.d.ts

@@ -1 +1,3 @@
+import type { TooltipData, TooltipLine } from './types';
 export declare const escapeHTML: (html?: string) => string;
+export declare const getSortedLines: (lines: TooltipLine[], sort?: TooltipData['sort']) => TooltipLine[];

package/build/plugins/highcharts/renderer/helpers/tooltip/helpers.js

@@ -1,5 +1,14 @@
+import orderBy from 'lodash/orderBy';
 export const escapeHTML = (html = '') => {
     const elem = document.createElement('span');
     elem.innerText = html;
     return elem.innerHTML;
 };
+export const getSortedLines = (lines, 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);
+};

package/build/plugins/highcharts/renderer/helpers/tooltip/index.js

@@ -2,7 +2,7 @@
 import _escape from 'lodash/escape';
 import { i18n } from '../../../../../i18n';
 import { renderShapeIcon } from './render-shape-icon';
-import { escapeHTML } from './helpers';
+import { escapeHTML, getSortedLines } from './helpers';
 import './tooltip.css';
 export const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
 export const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
@@ -128,9 +128,10 @@ const renderRow = (line, { isSelectedLine, cellsRenderers, isSingleLine, allowCo
 export const formatTooltip = (data, tooltip, isMobile) => {
     var _a, _b, _c;
     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 = (_a = data.tooltipHeader) === null || _a === void 0 ? void 0 : _a.trim();
@@ -212,7 +213,7 @@ export const formatTooltip = (data, tooltip, isMobile) => {
             .join('')}</tr>
                             </thead>`}
                     <tbody class="${TOOLTIP_LIST_CLASS_NAME}">
-                        ${lines
+                        ${sortedLines
         .map((line, index) => renderRow(line, getRowRenderConfig(index)))
         .join('')}
                     </tbody>

package/build/plugins/highcharts/renderer/helpers/tooltip/types.d.ts

@@ -38,6 +38,15 @@ export declare 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 declare type TooltipLine = {
     /** Color displayed in a separate cell */

package/build/plugins/highcharts/types/widget.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",