@gravity-ui/chartkit 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,16 +1,33 @@
 # Changelog
 
+## [2.2.0](https://github.com/gravity-ui/chartkit/compare/v2.1.0...v2.2.0) (2023-03-21)
+
+
+### Features
+
+* **Higcharts plugin:** add type for manageTooltipConfig ([#139](https://github.com/gravity-ui/chartkit/issues/139)) ([f781cca](https://github.com/gravity-ui/chartkit/commit/f781cca112bb1e87607d24916aa38bf44fe2abf6))
+
+
+### Bug Fixes
+
+* **Highcharts:** fix resetZoomButton styles ([#137](https://github.com/gravity-ui/chartkit/issues/137)) ([07f610e](https://github.com/gravity-ui/chartkit/commit/07f610e443f2c9a2543ac68bbff443112a1d650a))
+
+## [2.1.0](https://github.com/gravity-ui/chartkit/compare/v2.0.0...v2.1.0) (2023-03-13)
+
+
+### Features
+
+* **Highcharts:** add linesLimit property to HighchartsWidgetData.config ([#135](https://github.com/gravity-ui/chartkit/issues/135)) ([91d16a3](https://github.com/gravity-ui/chartkit/commit/91d16a32aad00fb683c68f3f39a6477f14f18c33))
+
 ## [2.0.0](https://github.com/gravity-ui/chartkit/compare/v1.6.7...v2.0.0) (2023-03-09)
 
 
 ### ⚠ BREAKING CHANGES
 
-* update uikit up to 4
 * update uikit up to 4 ([#133](https://github.com/gravity-ui/chartkit/issues/133))
 
 ### Features
 
-* update uikit up to 4 ([8ae0c8d](https://github.com/gravity-ui/chartkit/commit/8ae0c8d179273a448de8f670dfe1b3f2314c0523))
 * update uikit up to 4 ([#133](https://github.com/gravity-ui/chartkit/issues/133)) ([8ae0c8d](https://github.com/gravity-ui/chartkit/commit/8ae0c8d179273a448de8f670dfe1b3f2314c0523))
 
 ## [1.6.7](https://github.com/gravity-ui/chartkit/compare/v1.6.6...v1.6.7) (2023-02-21)

package/build/components/ErrorView/ErrorView.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { i18n } from '../../i18n';
 export const ErrorView = ({ error }) => {
-    const message = error.message || i18n('error', 'label_unknown-error');
+    const code = 'code' in error && error.code;
+    const message = error.message || code || i18n('error', 'label_unknown-error');
     return React.createElement("div", null, message);
 };

package/build/plugins/highcharts/__stories__/Line.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../components/ChartKit';
-import { data } from './mocks/line';
+import { data } from '../mocks/line';
 import { ChartStory } from './components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Line',

package/build/plugins/highcharts/__stories__/Pie.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../components/ChartKit';
-import { data } from './mocks/pie';
+import { data } from '../mocks/pie';
 import { ChartStory } from './components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Pie',

package/build/plugins/highcharts/__stories__/area/Range.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
-import { data } from '../mocks/area-range';
+import { data } from '../../mocks/area-range';
 import { ChartStory } from '../components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Area',

package/build/plugins/highcharts/__stories__/area/Stacked.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
-import { data } from '../mocks/area-stacked';
+import { data } from '../../mocks/area-stacked';
 import { ChartStory } from '../components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Area',

package/build/plugins/highcharts/__stories__/column/HorizontalStacked.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
-import { data } from '../mocks/column-hor-stacked';
+import { data } from '../../mocks/column-hor-stacked';
 import { ChartStory } from '../components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Column',

package/build/plugins/highcharts/__stories__/column/Vertical.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
-import { data } from '../mocks/column-ver';
+import { data } from '../../mocks/column-ver';
 import { ChartStory } from '../components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Column',

package/build/plugins/highcharts/__stories__/column/VerticalStacked.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
-import { data } from '../mocks/column-ver-stacked';
+import { data } from '../../mocks/column-ver-stacked';
 import { ChartStory } from '../components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Column',

package/build/plugins/highcharts/__stories__/combined/ComboChartWithSameLegendValues.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
-import { data } from '../mocks/combo-chart-with-same-legend-titles';
+import { data } from '../../mocks/combo-chart-with-same-legend-titles';
 import { ChartStory } from '../components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Combined Charts',

package/build/plugins/highcharts/__stories__/complex/TwoAxis.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ChartKit } from '../../../../components/ChartKit';
 import { ChartStory } from '../components/ChartStory';
-import { data } from '../mocks/complex';
+import { data } from '../../mocks/complex';
 export default {
     title: 'Plugins/Highcharts/TwoAxis',
     component: ChartKit,

package/build/plugins/highcharts/__stories__/components/ChartStory.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button } from '@gravity-ui/uikit';
 import { settings } from '../../../../libs';
 import { HighchartsPlugin } from '../../index';
-import holidays from '../mocks/holidays';
+import holidays from '../../mocks/holidays';
 import { ChartKit } from '../../../../components/ChartKit';
 const DEFAULT_STORY_HEIGHT = '300px';
 const DEFAULT_STORY_WIDTH = '100%';

package/build/plugins/highcharts/__tests__/prepare-data.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/plugins/highcharts/__tests__/prepare-data.test.js

@@ -0,0 +1,13 @@
+import { prepareData } from '../renderer/helpers/prepare-data';
+import { data } from '../mocks/line';
+describe('plugins/highcharts/helpers', () => {
+    describe('prepareData', () => {
+        it('should not throw an error', () => {
+            expect(() => prepareData(data.data, data.config)).not.toThrowError();
+        });
+        it('should throw an error', () => {
+            const configWithLinesLimit = Object.assign(Object.assign({}, data.config), { linesLimit: 1 });
+            expect(() => prepareData(data.data, configWithLinesLimit)).toThrowError();
+        });
+    });
+});

package/build/plugins/highcharts/mocks/area-range.d.ts

@@ -0,0 +1,2 @@
+import type { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/area-stacked.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/column-hor-stacked.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/column-ver-stacked.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/column-ver.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/combo-chart-with-same-legend-titles.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/complex.d.ts

@@ -0,0 +1,2 @@
+import type { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/line.d.ts

@@ -0,0 +1,2 @@
+import type { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/{__stories__/mocks → mocks}/line.js

@@ -83,13 +83,18 @@ export const data = {
         categories: ['Furniture', 'Office Supplies', 'Technology'],
     },
     config: {
-        withoutLineLimit: true,
+        precision: 2,
         hideHolidaysBands: true,
         enableSum: true,
-        precision: 2,
         hideHolidays: false,
         normalizeDiv: false,
         normalizeSub: false,
+        manageTooltipConfig: (config) => {
+            config.lines.forEach((line, index) => {
+                line.commentText = `Some comment ${index + 1}`;
+            });
+            return config;
+        },
     },
     libraryConfig: {
         chart: {

package/build/plugins/highcharts/mocks/pie.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

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

@@ -487,6 +487,9 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                 labels: {
                     formatter: () => any;
                 };
+                events: {
+                    setExtremes: () => void;
+                };
             };
             yAxis: {
                 gridLineColor: string;

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

@@ -565,6 +565,9 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
         labels: {
             formatter: () => any;
         };
+        events: {
+            setExtremes: () => void;
+        };
     };
     yAxis: {
         crosshair: boolean | {

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

@@ -924,7 +924,7 @@ function fixTooltip(tooltip, options, event) {
             top = tooltipRect.top;
             tooltip.preFixationHeight = height;
         }
-        tooltip.lastVisibleRowIndex = null;
+        tooltip.lastVisibleRowIndex = undefined;
         tooltip.update({
             style: Object.assign(Object.assign({}, tooltip.style), { pointerEvents: 'auto' }),
         });
@@ -1324,6 +1324,20 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
                 },
             },
+            events: {
+                setExtremes: function () {
+                    // There is no better way to align zoom button text
+                    // Callback setExtremes used because of it obligatory invocation on every zoom event
+                    // setTimeout used because of absence resetZoomButton node in dom on first zoom event
+                    setTimeout(() => {
+                        var _a;
+                        const text = (_a = this.chart.resetZoomButton) === null || _a === void 0 ? void 0 : _a.text;
+                        if (text) {
+                            text.translate(0, -6);
+                        }
+                    }, 0);
+                },
+            },
         }, yAxis: {
             crosshair: options.splitTooltip
                 ? getCrosshairConfig(hasScatterSeries ? 'scatter' : chartType, true)

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

@@ -26,3 +26,4 @@ export declare enum NavigatorLinesMode {
     All = "all",
     Selected = "selected"
 }
+export declare const DEFAULT_LINES_LIMIT = 50;

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

@@ -28,3 +28,4 @@ export var NavigatorLinesMode;
     NavigatorLinesMode["All"] = "all";
     NavigatorLinesMode["Selected"] = "selected";
 })(NavigatorLinesMode || (NavigatorLinesMode = {}));
+export const DEFAULT_LINES_LIMIT = 50;

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

@@ -481,6 +481,9 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
             labels: {
                 formatter: () => any;
             };
+            events: {
+                setExtremes: () => void;
+            };
         };
         yAxis: {
             gridLineColor: string;

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

@@ -31,11 +31,15 @@ Highcharts.setOptions({
         resetZoomButton: {
             relativeTo: 'chart',
             theme: {
-                width: 16,
-                height: 16,
+                r: 6,
+                width: 12,
+                height: 12,
                 'text-align': 'center',
                 opacity: '0.8',
                 cursor: 'pointer',
+                style: {
+                    fontSize: '20px',
+                },
             },
             position: {
                 y: 30,
@@ -223,7 +227,7 @@ function initHighcharts({ isMobile }) {
     });
     Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (proceed, ...rest) {
         if (this.lastVisibleRowIndex) {
-            this.lastVisibleRowIndex = null;
+            this.lastVisibleRowIndex = undefined;
         }
         if (this.scrollHandler && !this.fixed) {
             window.removeEventListener('scroll', this.scrollHandler);
@@ -257,7 +261,7 @@ function initHighcharts({ isMobile }) {
         const isFixation = rest[1];
         if ((!this.fixed || isFixation) && points) {
             if (isFixation) {
-                this.lastVisibleRowIndex = null;
+                this.lastVisibleRowIndex = undefined;
             }
             proceed.apply(this, [points, ...rest]);
             if (chartType === 'timeline') {
@@ -292,7 +296,7 @@ function initHighcharts({ isMobile }) {
                 const bottomPadding = parseFloat(window.getComputedStyle(tooltipNode, null).getPropertyValue('padding-bottom'), 10);
                 const containerBottomEdge = top + height;
                 const rows = tooltipNode.querySelectorAll(`.${TOOLTIP_LIST_CLASS_NAME} .${TOOLTIP_ROW_CLASS_NAME}`);
-                let lastVisibleRowIndex = null;
+                let lastVisibleRowIndex;
                 const selectedSeriesIndex = this.chart.hoverPoints.indexOf(this.chart.hoverPoint);
                 const rowForSelectedSeriesHeight = selectedSeriesIndex >= 0
                     ? rows[selectedSeriesIndex].getBoundingClientRect().height

package/build/plugins/highcharts/renderer/helpers/prepare-data.js

@@ -1,6 +1,7 @@
 import moment from 'moment';
 import lodashMin from 'lodash/min';
 import { ChartKitError, CHARTKIT_ERROR_CODE } from '../../../../libs';
+import { DEFAULT_LINES_LIMIT } from './constants';
 function prepareValue(value, firstValue, options) {
     if (value === null) {
         return null;
@@ -83,6 +84,7 @@ function removeHolidays(data, options, holidays) {
 }
 // eslint-disable-next-line complexity
 export function prepareData(data, options, holidays) {
+    const limit = options.linesLimit || DEFAULT_LINES_LIMIT;
     if (!data ||
         (typeof data === 'object' && !Object.keys(data).length) ||
         (data.graphs &&
@@ -91,7 +93,7 @@ export function prepareData(data, options, holidays) {
         throw new ChartKitError({ code: CHARTKIT_ERROR_CODE.NO_DATA });
     }
     if (data.graphs) {
-        if (data.graphs.length > 50 && !options.withoutLineLimit) {
+        if (data.graphs.length > limit && !options.withoutLineLimit) {
             throw new ChartKitError({ code: CHARTKIT_ERROR_CODE.TOO_MANY_LINES });
         }
         data.graphs.forEach((graph) => {

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

@@ -160,7 +160,8 @@ export const formatTooltip = (data, tooltip, isMobile) => {
         cellsRenderers,
         useCompareFrom: data.useCompareFrom,
         isSelectedLine: true,
-        allowComment: selectedLineIndex > tooltip.lastVisibleRowIndex,
+        allowComment: typeof tooltip.lastVisibleRowIndex === 'number' &&
+            selectedLineIndex > tooltip.lastVisibleRowIndex,
     };
     // @ts-ignore
     const windowHeight = document.body.clientHeight / ((window.visualViewport && window.visualViewport.scale) || 1);

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

@@ -1,11 +1,32 @@
 import type { Highcharts } from './lib';
 import type { HighchartsComment } from './comments';
 import type { DrillDownConfig, StringParams } from './misc';
+import type { TooltipData, TooltipLine } from '../renderer/helpers/tooltip/types';
 export declare type CkHighchartsSeriesOptionsType = Highcharts.SeriesOptionsType & {
     title?: string;
     sname?: string;
     fname?: string;
 };
+export declare type HighchartsManageTooltipConfigOptions = {
+    count: number;
+    lines: TooltipLine[];
+    shared: boolean;
+    this: {
+        x: string;
+        y: number;
+        points: Highcharts.Point[];
+    };
+    activeRowAlwaysFirstInTooltip?: boolean;
+    hiddenRowsNumber?: number;
+    hiddenRowsSum?: string;
+    splitTooltip?: boolean;
+    tooltipHeader?: string;
+    unsafe?: boolean;
+    useCompareFrom?: boolean;
+    withPercent?: boolean;
+    xComments?: TooltipData['xComments'];
+};
+export declare type HighchartsManageTooltipConfig = (options: HighchartsManageTooltipConfigOptions, chart: Highcharts.Chart) => HighchartsManageTooltipConfigOptions;
 export declare type HighchartsWidgetData = {
     data: (CkHighchartsSeriesOptionsType[] | {
         graphs: CkHighchartsSeriesOptionsType[];
@@ -27,14 +48,26 @@ export declare type HighchartsWidgetData = {
         showLegend?: boolean;
         /**
          * Percentage value displayed in tooltip.
+         *
          * Relevant in case of initialized [stacking](https://api.highcharts.com/highcharts/plotOptions.column.stacking) property only.
          */
         showPercentInTooltip?: boolean;
         disableExternalComments?: boolean;
         normalizeDiv?: boolean;
         normalizeSub?: boolean;
+        /**
+         * Used to ignore `linesLimit` option
+         */
         withoutLineLimit?: boolean;
         precision?: number;
+        /**
+         * Lines (series) count limit.
+         *
+         * If you have lines more than `limit`, your chart will throw an error 'ERR.CK.TOO_MANY_LINES'.
+         *
+         * Ingnored in case of `withoutLineLimit: true`. Default: 50.
+         */
+        linesLimit?: number;
         title?: string;
         subtitle?: string;
         highstock?: {
@@ -46,6 +79,10 @@ export declare type HighchartsWidgetData = {
         drillDown?: DrillDownConfig;
         enableSum?: boolean;
         unsafe?: boolean;
+        /**
+         * Used to modify tooltip data
+         */
+        manageTooltipConfig?: HighchartsManageTooltipConfig;
     };
     libraryConfig: Highcharts.Options;
     params?: StringParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.0.0",
+  "version": "2.2.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/__stories__/mocks/area-range.d.ts

@@ -1,2 +0,0 @@
-import type { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/area-stacked.d.ts

@@ -1,2 +0,0 @@
-import { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/column-hor-stacked.d.ts

@@ -1,2 +0,0 @@
-import { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/column-ver-stacked.d.ts

@@ -1,2 +0,0 @@
-import { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/column-ver.d.ts

@@ -1,2 +0,0 @@
-import { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/combo-chart-with-same-legend-titles.d.ts

@@ -1,2 +0,0 @@
-import { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/complex.d.ts

@@ -1,2 +0,0 @@
-import type { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/line.d.ts

@@ -1,2 +0,0 @@
-import type { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/pie.d.ts

@@ -1,2 +0,0 @@
-import { HighchartsWidgetData } from '../../types';
-export declare const data: HighchartsWidgetData;