@gravity-ui/chartkit 2.7.2 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.8.0](https://github.com/gravity-ui/chartkit/compare/v2.7.2...v2.8.0) (2023-05-23)
+
+
+### Features
+
+* **Highcharts plugin:** rework tooltip pinning api ([#166](https://github.com/gravity-ui/chartkit/issues/166)) ([9ca62e4](https://github.com/gravity-ui/chartkit/commit/9ca62e4d01d62f36de0c4866e0d21728ca2aa25c))
+
 ## [2.7.2](https://github.com/gravity-ui/chartkit/compare/v2.7.1...v2.7.2) (2023-05-17)
 
 

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

@@ -16,7 +16,7 @@ import { formatNumber } from '../../../../shared';
 import { getCommentsOnLine, drawComments, hideComments, drawOnlyRendererComments, } from '../comments/drawing';
 import formatTooltip, { TOOLTIP_ROW_CLASS_NAME, SERIES_NAME_DATA_ATTRIBUTE, TOOLTIP_HEADER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NANE, } from '../tooltip';
 import defaultOptions from './options';
-import { calculatePrecision, isTooltipShared, isSafari, mergeArrayWithObject, concatStrings, buildNavigatorFallback, addShowInNavigatorToSeries, setNavigatorDefaultPeriod, numberFormat, getFormatOptionsFromLine, } from './utils';
+import { calculatePrecision, isTooltipShared, isSafari, mergeArrayWithObject, concatStrings, buildNavigatorFallback, addShowInNavigatorToSeries, setNavigatorDefaultPeriod, numberFormat, getFormatOptionsFromLine, checkTooltipPinningAvailability, } from './utils';
 import { handleLegendItemClick } from './handleLegendItemClick';
 import { getChartKitFormattedValue } from './utils/getChartKitFormattedValue';
 const b = block('chartkit-tooltip');
@@ -876,7 +876,9 @@ export function hideFixedTooltip(tooltip, isMobile) {
     tooltip.hide();
     if (Array.isArray(tooltip.pointsOnFixedTooltip)) {
         tooltip.pointsOnFixedTooltip.forEach((point) => {
-            point.setState('');
+            if (typeof point.setState === 'function') {
+                point.setState('');
+            }
         });
     }
     else {
@@ -898,8 +900,12 @@ export function hideFixedTooltip(tooltip, isMobile) {
     }
 }
 function fixTooltip(tooltip, options, event) {
-    const pinable = get(options, 'tooltip.pinable', true);
-    if (options.splitTooltip || !pinable) {
+    const availableToPin = checkTooltipPinningAvailability({
+        tooltip: options.tooltip,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+    });
+    if (options.splitTooltip || (!availableToPin && !tooltip.fixed)) {
         return false;
     }
     if (tooltip.fixed) {

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

@@ -5,7 +5,7 @@ export { concatStrings } from './concatStrings';
 export { getChartKitFormattedValue } from './getChartKitFormattedValue';
 export { getFormatOptionsFromLine } from './getFormatOptionsFromLine';
 export { getXAxisThresholdValue } from './getXAxisThresholdValue';
-export { isTooltipShared } from './isTooltipShared';
+export * from './tooltip';
 export { isNavigatorSeries } from './isNavigatorSeries';
 export { isSafari } from './isSafari';
 export { mergeArrayWithObject } from './mergeArrayWithObject';

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

@@ -5,7 +5,7 @@ export { concatStrings } from './concatStrings';
 export { getChartKitFormattedValue } from './getChartKitFormattedValue';
 export { getFormatOptionsFromLine } from './getFormatOptionsFromLine';
 export { getXAxisThresholdValue } from './getXAxisThresholdValue';
-export { isTooltipShared } from './isTooltipShared';
+export * from './tooltip';
 export { isNavigatorSeries } from './isNavigatorSeries';
 export { isSafari } from './isSafari';
 export { mergeArrayWithObject } from './mergeArrayWithObject';

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

@@ -0,0 +1,7 @@
+import { HighchartsWidgetData } from '../../../../types';
+export declare const isTooltipShared: (chartType: string) => boolean;
+export declare const checkTooltipPinningAvailability: (args?: {
+    tooltip?: HighchartsWidgetData['config']['tooltip'];
+    altKey?: boolean;
+    metaKey?: boolean;
+}) => boolean;

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

@@ -0,0 +1,25 @@
+// In case of using 'sankey' or 'xrange', the shared property must be set to false, otherwise the tooltip behaves incorrectly:
+// Point.onMouseOver -> Highcharts.Pointer.runPointActions -> H.Tooltip.refresh -> Cannot read property 'series' of undefined
+export const isTooltipShared = (chartType) => {
+    if (['sankey', 'xrange'].includes(chartType)) {
+        return false;
+    }
+    return true;
+};
+export const checkTooltipPinningAvailability = (args = {}) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { tooltip, altKey, metaKey } = args;
+    const enabled = (_b = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true;
+    const shouldAltKeyBePressed = (_d = (_c = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _c === void 0 ? void 0 : _c.altKey) !== null && _d !== void 0 ? _d : false;
+    const shouldMetaKeyBePressed = (_f = (_e = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _e === void 0 ? void 0 : _e.metaKey) !== null && _f !== void 0 ? _f : false;
+    if (!enabled) {
+        return false;
+    }
+    if (shouldAltKeyBePressed && !altKey) {
+        return false;
+    }
+    if (shouldMetaKeyBePressed && !metaKey) {
+        return false;
+    }
+    return true;
+};

package/build/plugins/highcharts/renderer/helpers/config/utils/tooltip.test.js

@@ -0,0 +1,45 @@
+import { HighchartsType } from '../../constants';
+import { checkTooltipPinningAvailability, isTooltipShared } from './tooltip';
+const chartTypes = [
+    [HighchartsType.Sankey, false],
+    [HighchartsType.Xrange, false],
+    [HighchartsType.Line, true],
+    [HighchartsType.Area, true],
+    [HighchartsType.Arearange, true],
+    [HighchartsType.Bar, true],
+    [HighchartsType.Column, true],
+    [HighchartsType.Columnrange, true],
+    [HighchartsType.Funnel, true],
+    [HighchartsType.Pie, true],
+    [HighchartsType.Map, true],
+    [HighchartsType.Scatter, true],
+    [HighchartsType.Bubble, true],
+    [HighchartsType.Heatmap, true],
+    [HighchartsType.Treemap, true],
+    [HighchartsType.Networkgraph, true],
+    [HighchartsType.Variwide, true],
+    [HighchartsType.Waterfall, true],
+    [HighchartsType.Streamgraph, true],
+    [HighchartsType.Wordcloud, true],
+    [HighchartsType.Boxplot, true],
+    [HighchartsType.Timeline, true],
+];
+describe('plugins/highcharts/config', () => {
+    test.each(chartTypes)(`calculatePrecision for %s return %s`, (chartType, expected) => {
+        expect(isTooltipShared(chartType)).toBe(expected);
+    });
+    test.each([
+        [undefined, true],
+        [{ tooltip: { pin: { altKey: true } }, altKey: true }, true],
+        [{ tooltip: { pin: { metaKey: true } }, metaKey: true }, true],
+        [{ tooltip: { pin: { altKey: true, metaKey: true } }, altKey: true, metaKey: true }, true],
+        [{ tooltip: { pin: { enabled: false } } }, false],
+        [{ tooltip: { pin: { altKey: true } }, altKey: false }, false],
+        [{ tooltip: { pin: { metaKey: true } }, metaKey: false }, false],
+        [{ tooltip: { pin: { altKey: true, metaKey: true } }, altKey: false, metaKey: true }, false],
+        [{ tooltip: { pin: { altKey: true, metaKey: true } }, altKey: true, metaKey: false }, false],
+    ])(`checkTooltipPinningAvailability (args: %j)`, (args, expected) => {
+        const result = checkTooltipPinningAvailability(args);
+        expect(result).toBe(expected);
+    });
+});

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

@@ -80,10 +80,19 @@ export declare type HighchartsWidgetData = {
         enableSum?: boolean;
         unsafe?: boolean;
         /**
+         * @experimental
          * Tooltip config
          */
         tooltip?: {
-            pinable?: boolean;
+            /** Pin config */
+            pin?: {
+                /** Enable tooltip`s pinning by click */
+                enabled?: boolean;
+                /** Pin tooltip with pressed alt key */
+                altKey?: boolean;
+                /** Pin tooltip with pressed meta key */
+                metaKey?: boolean;
+            };
         };
         /**
          * Used to modify tooltip data

package/package.json

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

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

@@ -1 +0,0 @@
-export declare const isTooltipShared: (chartType: string) => boolean;

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

@@ -1,8 +0,0 @@
-// In case of using 'sankey' or 'xrange', the shared property must be set to false, otherwise the tooltip behaves incorrectly:
-// Point.onMouseOver -> Highcharts.Pointer.runPointActions -> H.Tooltip.refresh -> Cannot read property 'series' of undefined
-export const isTooltipShared = (chartType) => {
-    if (['sankey', 'xrange'].includes(chartType)) {
-        return false;
-    }
-    return true;
-};

package/build/plugins/highcharts/renderer/helpers/config/utils/isTooltipShared.test.js

@@ -1,31 +0,0 @@
-import { HighchartsType } from '../../constants';
-import { isTooltipShared } from './isTooltipShared';
-const chartTypes = [
-    [HighchartsType.Sankey, false],
-    [HighchartsType.Xrange, false],
-    [HighchartsType.Line, true],
-    [HighchartsType.Area, true],
-    [HighchartsType.Arearange, true],
-    [HighchartsType.Bar, true],
-    [HighchartsType.Column, true],
-    [HighchartsType.Columnrange, true],
-    [HighchartsType.Funnel, true],
-    [HighchartsType.Pie, true],
-    [HighchartsType.Map, true],
-    [HighchartsType.Scatter, true],
-    [HighchartsType.Bubble, true],
-    [HighchartsType.Heatmap, true],
-    [HighchartsType.Treemap, true],
-    [HighchartsType.Networkgraph, true],
-    [HighchartsType.Variwide, true],
-    [HighchartsType.Waterfall, true],
-    [HighchartsType.Streamgraph, true],
-    [HighchartsType.Wordcloud, true],
-    [HighchartsType.Boxplot, true],
-    [HighchartsType.Timeline, true],
-];
-describe('plugins/highcharts/config/calculatePrecision', () => {
-    test.each(chartTypes)(`for %s return %s`, (chartType, assert) => {
-        expect(isTooltipShared(chartType)).toBe(assert);
-    });
-});