@gravity-ui/chartkit 2.7.2 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### 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/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

@@ -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/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/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/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/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.1",
   "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);
-    });
-});