feat: add highcharts plugin (#61)

.eslintrc

@@ -1,4 +1,4 @@
 {
-    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/prettier"],
+    "extends": ["@gravity-ui/eslint-config", "@gravity-ui/eslint-config/client"],
     "root": true
 }

package.json

@@ -14,7 +14,10 @@
   },
   "dependencies": {
     "bem-cn-lite": "^4.1.0",
+    "highcharts": "^8.2.2",
+    "highcharts-react-official": "^3.0.0",
     "lodash": "^4.17.21",
+    "react-split-pane": "^0.1.92",
     "yagr": "1.3.7"
   },
   "devDependencies": {

src/components/ChartKit.scss

@@ -6,3 +6,26 @@
         max-height: 3000px;
     }
 }
+
+.chartkit-theme_common {
+    --highcarts-navigator-border: var(--yc-color-line-generic);
+    --highcarts-navigator-track: var(--yc-color-base-generic);
+    --highcarts-navigator-body: var(--yc-color-scroll-handle);
+    --highcharts-series-border: var(--yc-color-base-background);
+    --highcharts-grid-line: var(--yc-color-line-generic);
+    --highcharts-axis-line: var(--yc-color-line-generic);
+    --highcharts-tick: var(--yc-color-line-generic);
+    --highcharts-title: var(--yc-color-text-primary);
+    --highcharts-axis-labels: var(--yc-color-text-secondary);
+    --highcharts-data-labels: var(--yc-color-text-complementary);
+    --highcharts-plot-line-label: var(--yc-color-text-complementary);
+    --highcharts-legend-item: var(--yc-color-text-secondary);
+    --highcharts-legend-item-hover: var(--yc-color-text-primary);
+    --highcharts-legend-item-hidden: var(--yc-color-text-hint);
+    --highcharts-floating-bg: var(--yc-color-infographics-tooltip-bg);
+    --highcharts-tooltip-text: var(--yc-color-text-primary);
+    --highcharts-tooltip-bg: var(--highcharts-floating-bg);
+    --highcharts-tooltip-alternate-bg: var(--yc-color-base-generic);
+    --highcharts-tooltip-text-complementary: var(--yc-color-text-complementary);
+    --highcharts-holiday-band: var(--yc-color-base-generic);
+}

src/components/ChartKit.tsx

@@ -46,7 +46,7 @@ const ChartKitComponent = <T extends ChartkitType>(props: ChartKitComponentProps
 
     return (
         <React.Suspense fallback={<Loader />}>
-            <div className={b({mobile: isMobile})}>
+            <div className={b({mobile: isMobile}, 'chartkit-theme_common')}>
                 <ChartComponent
                     ref={widgetRef}
                     id={id}
@@ -63,7 +63,7 @@ const ChartKitComponent = <T extends ChartkitType>(props: ChartKitComponentProps
 const ChartKitComponentWithErrorBoundary = React.forwardRef<
     ChartKitRef | undefined,
     ChartKitProps<ChartkitType>
->((props, ref) => {
+>(function ChartKitComponentWithErrorBoundary(props, ref) {
     const {onError, ...componentProps} = props;
 
     return (

src/i18n/keysets/en.json

@@ -3,9 +3,69 @@
     "tooltip-sum": "Sum",
     "tooltip-rest": "Rest"
   },
+  "chartkit": {
+    "error": "Error",
+    "legend-series-hide": "Hide all lines",
+    "legend-series-show": "Show all lines",
+
+    "tooltip-point-format-size": "Size",
+    "tooltip-sum": "Sum",
+    "tooltip-rest": "Rest",
+
+    "error-incorrect-key-value-intro": "Incorrect notation of an object passed to",
+    "error-incorrect-key": ", object keys must be convertible to integer",
+    "error-incorrect-value": ", object values must be a string or a function which returns a string"
+  },
+  "chartkit-table": {
+    "message-no-data": "No data",
+    "paginator-rows": "Rows"
+  },
+  "chartkit-ymap-legend": {
+    "label-more": "Show more {{count}}",
+    "label-hide": "Hide",
+    "label-heatmap": "Heatmap"
+  },
   "error": {
     "label_no-data": "No data",
     "label_unknown-plugin": "Unknown plugin type \"{{type}}\"",
     "label_unknown-error": "Unknown error"
+  },
+  "highcharts": {
+    "reset-zoom-title": "Reset zoom",
+
+    "decimal-point": ".",
+    "thousands-sep": " ",
+
+    "Mon": "Mon",
+    "Tue": "Tue",
+    "Wed": "Wed",
+    "Thu": "Thu",
+    "Fri": "Fri",
+    "Sat": "Sat",
+    "Sun": "Sun",
+    "Jan": "Jan",
+
+    "January": "January",
+    "Feb": "Feb",
+    "February": "February",
+    "Mar": "Mar",
+    "March": "March",
+    "Apr": "Apr",
+    "April": "April",
+    "May": "May",
+    "Jun": "Jun",
+    "June": "June",
+    "Jul": "Jul",
+    "July": "July",
+    "Aug": "Aug",
+    "August": "August",
+    "Sep": "Sep",
+    "September": "September",
+    "Oct": "Oct",
+    "October": "October",
+    "Nov": "Nov",
+    "November": "November",
+    "Dec": "Dec",
+    "December": "December"
   }
 }

src/i18n/keysets/ru.json

@@ -3,9 +3,71 @@
     "tooltip-sum": "Сумма",
     "tooltip-rest": "Остальные"
   },
+  "chartkit": {
+    "error": "Ошибка",
+    "legend-series-hide": "Скрыть все линии",
+    "legend-series-show": "Показать все линии",
+
+    "loading": "Загрузка",
+
+    "tooltip-point-format-size": "Размер",
+    "tooltip-sum": "Сумма",
+    "tooltip-rest": "Остальные",
+
+    "error-incorrect-key-value-intro": "Некорректный формат объекта переданного как значение в",
+    "error-incorrect-key": ", ключи объекта должны быть преобразуемы в целое число",
+    "error-incorrect-value": ", значением объекта может быть либо строка, либо функция возвращающая строку"
+  },
+  "chartkit-table": {
+    "message-no-data": "Нет данных",
+    "paginator-rows": "Строки"
+  },
+  "chartkit-ymap-legend": {
+    "label-more": "Показать ещё {{count}}",
+    "label-hide": "Свернуть",
+    "label-heatmap": "Тепловая карта"
+  },
   "error": {
     "label_no-data": "Нет данных",
     "label_unknown-plugin": "Неизвестный тип плагина \"{{type}}\"",
     "label_unknown-error": "Неизвестная ошибка"
+  },
+  "highcharts": {
+    "reset-zoom-title": "Сбросить увеличение",
+
+    "decimal-point": ",",
+    "thousands-sep": " ",
+
+    "Mon": "Пн",
+    "Tue": "Вт",
+    "Wed": "Ср",
+    "Thu": "Чт",
+    "Fri": "Пт",
+    "Sat": "Сб",
+    "Sun": "Вс",
+    "Jan": "Янв",
+
+    "January": "Январь",
+    "Feb": "Фев",
+    "February": "Февраль",
+    "Mar": "Мар",
+    "March": "Март",
+    "Apr": "Апр",
+    "April": "Апрель",
+    "May": "Май",
+    "Jun": "Июн",
+    "June": "Июнь",
+    "Jul": "Июл",
+    "July": "Июль",
+    "Aug": "Авг",
+    "August": "Август",
+    "Sep": "Сен",
+    "September": "Сентябрь",
+    "Oct": "Окт",
+    "October": "Октябрь",
+    "Nov": "Ноя",
+    "November": "Ноябрь",
+    "Dec": "Дек",
+    "December": "Декабрь"
   }
 }

src/libs/chartkit-error/chartkit-error.ts

@@ -8,6 +8,7 @@ export const CHARTKIT_ERROR_CODE = {
     NO_DATA: 'ERR.CK.NO_DATA',
     UNKNOWN: 'ERR.CK.UNKNOWN_ERROR',
     UNKNOWN_PLUGIN: 'ERR.CK.UNKNOWN_PLUGIN',
+    TOO_MANY_LINES: 'ERR.CK.TOO_MANY_LINES',
 };
 
 export class ChartKitError extends Error {

src/libs/settings/__tests__/settings.test.ts

@@ -9,7 +9,7 @@ const resetSettings = () =>
 describe('libs/settings', () => {
     it('Default locale should be equal DEFAULT_LOCALE_SPECIFICATION', () => {
         const result = settings.get('locale');
-        expect(result).toBe(DEFAULT_LOCALE_SPECIFICATION);
+        expect(result).toStrictEqual(DEFAULT_LOCALE_SPECIFICATION);
     });
 
     it('Default lang should be equal to en', () => {

src/libs/settings/settings.ts

@@ -1,13 +1,19 @@
 import moment from 'moment';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
 import {configure} from '@gravity-ui/uikit';
 import {i18nFactory} from '../../i18n';
-import type {ChartKitPlugin, ChartKitLang} from '../../types';
+import type {ChartKitPlugin, ChartKitLang, ChartKitHolidays} from '../../types';
 
-type Settings = {
+interface Settings {
     plugins: ChartKitPlugin[];
     lang: ChartKitLang;
     locale?: moment.LocaleSpecification;
-};
+    extra?: {
+        holidays?: ChartKitHolidays;
+    };
+}
+
 type SettingKey = keyof Settings;
 
 export const DEFAULT_LOCALE_SPECIFICATION: moment.LocaleSpecification = {week: {dow: 1, doy: 7}};
@@ -41,7 +47,7 @@ class ChartKitSettings {
     };
 
     get<T extends SettingKey>(key: T) {
-        return this.settings[key];
+        return get(this.settings, key);
     }
 
     set(updates: Partial<Settings>) {
@@ -53,10 +59,7 @@ class ChartKitSettings {
             updateLocale({lang, locale});
         }
 
-        this.settings = {
-            ...this.settings,
-            ...filteredUpdates,
-        };
+        this.settings = merge(this.settings, filteredUpdates);
     }
 }
 

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react';
+import {Button} from '@gravity-ui/uikit';
+import {settings} from '../../../libs';
+import {HighchartsPlugin} from '../..';
+import {ChartKit} from '../../../components/ChartKit';
+import type {ChartKitRef} from '../../../types';
+import {data} from './mocks/area-range';
+import holidays from './mocks/holidays';
+
+export default {
+    title: 'Plugins/Highcharts/AreaRange',
+    component: ChartKit,
+} as Meta;
+
+const Template: Story<any> = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+
+    if (!shown) {
+        settings.set({plugins: [HighchartsPlugin], extra: {holidays}});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <div style={{height: 300, width: '100%'}}>
+            <ChartKit ref={chartkitRef} id="1" type="highcharts" data={data} />
+        </div>
+    );
+};
+export const AreaRange = Template.bind({});