@gravity-ui/chartkit 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Bug Fixes
+
+* **options:** fixed default options for yAxis title color ([#168](https://github.com/gravity-ui/chartkit/issues/168)) ([52bf4cc](https://github.com/gravity-ui/chartkit/commit/52bf4cca79770982e9584e89c9a408086850acd5))
+
 ## [2.8.0](https://github.com/gravity-ui/chartkit/compare/v2.7.2...v2.8.0) (2023-05-23)
 
 

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -506,6 +506,11 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                         color: string;
                     };
                 };
+                title: {
+                    style: {
+                        color: string;
+                    };
+                };
             } & {
                 crosshair: boolean | {
                     width: number;

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

@@ -107,6 +107,11 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
                 color: string;
             };
         };
+        title: {
+            style: {
+                color: string;
+            };
+        };
     };
     plotOptions: {
         series: {

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/config/options.d.ts

@@ -86,6 +86,14 @@ declare namespace options {
             }
             export { style_3 as style };
         }
+        export namespace title_1 {
+            export namespace style_4 {
+                const color_7: string;
+                export { color_7 as color };
+            }
+            export { style_4 as style };
+        }
+        export { title_1 as title };
     }
     namespace plotOptions {
         export namespace series {
@@ -99,13 +107,13 @@ declare namespace options {
             }
             export { tooltip_1 as tooltip };
             export namespace dataLabels {
-                export namespace style_4 {
+                export namespace style_5 {
                     const textOutline_1: string;
                     export { textOutline_1 as textOutline };
-                    const color_7: string;
-                    export { color_7 as color };
+                    const color_8: string;
+                    export { color_8 as color };
                 }
-                export { style_4 as style };
+                export { style_5 as style };
             }
             export const turboThreshold: number;
         }

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

@@ -161,6 +161,11 @@ const options = {
                 color: 'var(--highcharts-data-labels)',
             },
         },
+        title: {
+            style: {
+                color: 'var(--yc-color-text-secondary)',
+            },
+        },
     },
     plotOptions: {
         series: {

package/build/plugins/highcharts/renderer/helpers/graph.css

@@ -7,6 +7,15 @@
   opacity: 0.5;
 }
 
+.chartkit-graph .highcharts-legend .highcharts-coloraxis-labels text {
+  fill: var(--yc-color-text-secondary) !important;
+  color: var(--yc-color-text-secondary) !important;
+}
+
+.chartkit-graph .highcharts-legend .highcharts-coloraxis-grid path {
+  stroke: var(--yc-color-base-background);
+}
+
 .chartkit-tooltip {
   border: 1px solid var(--highcharts-grid-line);
   border-radius: 3px;

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

@@ -500,6 +500,11 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
                     color: string;
                 };
             };
+            title: {
+                style: {
+                    color: string;
+                };
+            };
         } & {
             crosshair: boolean | {
                 width: number;

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.0",
+  "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",