feat(Highcharts): add linesLimit property to HighchartsWidgetData.con…

…fig (#135)

* refactor(Highcharts): move mocks folder

* feat(ErrorView): add error code to messsage

* feat(Highcharts): add linesLimit property to HighchartsWidgetData.config

jest.config.ts

@@ -4,6 +4,9 @@ const cfg: Config.InitialOptions = {
     verbose: true,
     preset: 'ts-jest',
     testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.(js|ts)?$': 'ts-jest',
+    },
     modulePathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/'],
     moduleNameMapper: {
         '^.+\\.(css|scss)$': '<rootDir>/test-utils/style.mock.ts',

src/components/ErrorView/ErrorView.tsx

@@ -7,7 +7,8 @@ type Props = {
 };
 
 export const ErrorView = ({error}: Props) => {
-    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 <div>{message}</div>;
 };

src/plugins/highcharts/__stories__/Line.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/react';
 import {ChartKit} from '../../../components/ChartKit';
-import {data} from './mocks/line';
+import {data} from '../mocks/line';
 import {ChartStory} from './components/ChartStory';
 
 export default {

src/plugins/highcharts/__stories__/Pie.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/react';
 import {ChartKit} from '../../../components/ChartKit';
-import {data} from './mocks/pie';
+import {data} from '../mocks/pie';
 import {ChartStory} from './components/ChartStory';
 
 export default {

src/plugins/highcharts/__stories__/area/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/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 {

src/plugins/highcharts/__stories__/area/Stacked.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/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 {

src/plugins/highcharts/__stories__/column/HorizontalStacked.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Story, Meta} from '@storybook/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 {

src/plugins/highcharts/__stories__/column/Vertical.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Story, Meta} from '@storybook/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 {

src/plugins/highcharts/__stories__/column/VerticalStacked.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Story, Meta} from '@storybook/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 {

src/plugins/highcharts/__stories__/combined/ComboChartWithSameLegendValues.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Story, Meta} from '@storybook/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',

src/plugins/highcharts/__stories__/complex/TwoAxis.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Meta, Story} from '@storybook/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',

src/plugins/highcharts/__stories__/components/ChartStory.tsx

@@ -3,7 +3,7 @@ import {Button} from '@gravity-ui/uikit';
 import {ChartKitRef} from '../../../../types';
 import {settings} from '../../../../libs';
 import {HighchartsPlugin} from '../../index';
-import holidays from '../mocks/holidays';
+import holidays from '../../mocks/holidays';
 import {ChartKit} from '../../../../components/ChartKit';
 import {HighchartsWidgetData} from '../../types';
 

src/plugins/highcharts/__tests__/prepare-data.test.ts

@@ -0,0 +1,19 @@
+import {prepareData} from '../renderer/helpers/prepare-data';
+import {data} from '../mocks/line';
+import {ConfigOptions} from '../renderer/helpers/types';
+
+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: Partial<ConfigOptions> = {
+                ...data.config,
+                linesLimit: 1,
+            };
+            expect(() => prepareData(data.data, configWithLinesLimit)).toThrowError();
+        });
+    });
+});

src/plugins/highcharts/__stories__/mocks/area-range.ts → src/plugins/highcharts/mocks/area-range.ts

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

src/plugins/highcharts/__stories__/mocks/area-stacked.ts → src/plugins/highcharts/mocks/area-stacked.ts

@@ -1,4 +1,4 @@
-import {HighchartsWidgetData} from '../../types';
+import {HighchartsWidgetData} from '../types';
 
 export const data: HighchartsWidgetData = {
     data: {

src/plugins/highcharts/__stories__/mocks/column-hor-stacked.ts → src/plugins/highcharts/mocks/column-hor-stacked.ts

@@ -1,4 +1,4 @@
-import {HighchartsWidgetData} from '../../types';
+import {HighchartsWidgetData} from '../types';
 
 export const data: HighchartsWidgetData = {
     data: {

src/plugins/highcharts/__stories__/mocks/column-ver-stacked.ts → src/plugins/highcharts/mocks/column-ver-stacked.ts

@@ -1,4 +1,4 @@
-import {HighchartsWidgetData} from '../../types';
+import {HighchartsWidgetData} from '../types';
 
 export const data: HighchartsWidgetData = {
     data: {

src/plugins/highcharts/__stories__/mocks/column-ver.ts → src/plugins/highcharts/mocks/column-ver.ts

@@ -1,4 +1,4 @@
-import {HighchartsWidgetData} from '../../types';
+import {HighchartsWidgetData} from '../types';
 
 export const data: HighchartsWidgetData = {
     data: {

src/plugins/highcharts/__stories__/mocks/combo-chart-with-same-legend-titles.ts → src/plugins/highcharts/mocks/combo-chart-with-same-legend-titles.ts

@@ -1,4 +1,4 @@
-import {HighchartsWidgetData} from '../../types';
+import {HighchartsWidgetData} from '../types';
 
 export const data: HighchartsWidgetData = {
     data: {

src/plugins/highcharts/__stories__/mocks/complex.ts → src/plugins/highcharts/mocks/complex.ts

@@ -1,5 +1,5 @@
 import type {Chart, SeriesZonesOptionsObject, BBoxObject, OffsetObject} from 'highcharts';
-import type {HighchartsWidgetData} from '../../types';
+import type {HighchartsWidgetData} from '../types';
 
 /**
  * Get the X coordinate of the intersection of the two lines 1-2 and 3-4.

src/plugins/highcharts/__stories__/mocks/line.ts → src/plugins/highcharts/mocks/line.ts

@@ -1,4 +1,4 @@
-import type {HighchartsWidgetData} from '../../types';
+import type {HighchartsWidgetData} from '../types';
 
 export const data: HighchartsWidgetData = {
     data: {
@@ -85,10 +85,9 @@ export const data: HighchartsWidgetData = {
         categories: ['Furniture', 'Office Supplies', 'Technology'],
     },
     config: {
-        withoutLineLimit: true,
+        precision: 2,
         hideHolidaysBands: true,
         enableSum: true,
-        precision: 2,
         hideHolidays: false,
         normalizeDiv: false,
         normalizeSub: false,

src/plugins/highcharts/__stories__/mocks/pie.ts → src/plugins/highcharts/mocks/pie.ts

@@ -1,4 +1,4 @@
-import {HighchartsWidgetData} from '../../types';
+import {HighchartsWidgetData} from '../types';
 
 export const data: HighchartsWidgetData = {
     data: {

src/plugins/highcharts/renderer/helpers/constants.ts

@@ -27,3 +27,5 @@ export enum NavigatorLinesMode {
     All = 'all',
     Selected = 'selected',
 }
+
+export const DEFAULT_LINES_LIMIT = 50;

src/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) {
@@ -96,6 +97,8 @@ 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) ||
@@ -109,7 +112,7 @@ export function prepareData(data, options, holidays) {
     }
 
     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});
         }
 

src/plugins/highcharts/types/widget.ts

@@ -32,14 +32,26 @@ export 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?: {