@gravity-ui/chartkit 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [0.10.0](https://github.com/gravity-ui/chartkit/compare/v0.9.1...v0.10.0) (2022-11-18)
+
+
+### Features
+
+* add highcharts plugin ([#61](https://github.com/gravity-ui/chartkit/issues/61)) ([9329ede](https://github.com/gravity-ui/chartkit/commit/9329edeaba8c4ef84b1fc30bb7196ba350dc3abd))
+
+
+### Bug Fixes
+
+* **Highcharts plaugin:** fix error handling and reflow method ([#63](https://github.com/gravity-ui/chartkit/issues/63)) ([ba4f2ad](https://github.com/gravity-ui/chartkit/commit/ba4f2ada96ae642a93ebd203438463f72883e245))
+* yagr & indicator types fixes ([#64](https://github.com/gravity-ui/chartkit/issues/64)) ([479c552](https://github.com/gravity-ui/chartkit/commit/479c552f5ce1890451f3f104fc8efb730f2baf67))
+
+## [0.9.1](https://github.com/gravity-ui/chartkit/compare/v0.9.0...v0.9.1) (2022-11-14)
+
+
+### Bug Fixes
+
+* fix yagr theme ininitialization ([7247873](https://github.com/gravity-ui/chartkit/commit/724787380b8d81f6dfdaae1f6e5c1b806af32e3c))
+* fix yagr theme initialization ([#59](https://github.com/gravity-ui/chartkit/issues/59)) ([7247873](https://github.com/gravity-ui/chartkit/commit/724787380b8d81f6dfdaae1f6e5c1b806af32e3c))
+
 ## [0.9.0](https://github.com/gravity-ui/chartkit/compare/v0.8.0...v0.9.0) (2022-11-08)
 
 

package/build/components/ChartKit.css

@@ -5,4 +5,27 @@
 
 .chartkit_mobile .chartkit-scrollable-node {
   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);
 }

package/build/components/ChartKit.d.ts

@@ -13,7 +13,6 @@ export declare const ChartKit: <T extends keyof import("../types").ChartkitWidge
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../types").ChartKitOnLoadData<T> | undefined) => void) | undefined;
     onError?: import("../types").ChartKitOnError | undefined;
-    formatNumber?: import("../types").ChartKitFormatNumber | undefined;
 } & { [key in keyof Omit<import("../types").ChartkitWidget[T], "widget" | "data">]: import("../types").ChartkitWidget[T][key]; } & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;
 }) => ReturnType<typeof ChartKitComponent>;

package/build/components/ChartKit.js

@@ -31,12 +31,11 @@ const ChartKitComponent = (props) => {
         },
     }), []);
     return (React.createElement(React.Suspense, { fallback: React.createElement(Loader, null) },
-        React.createElement("div", { className: b({ mobile: isMobile }) },
+        React.createElement("div", { className: b({ mobile: isMobile }, 'chartkit-theme_common') },
             React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang, data: data, onLoad: onLoad }, restProps)))));
 };
-const ChartKitComponentWithErrorBoundary = React.forwardRef((props, ref) => {
-    const { onError } = props, componentProps = __rest(props, ["onError"]);
-    return (React.createElement(ErrorBoundary, { onError: onError },
-        React.createElement(ChartKitComponent, Object.assign({ instanceRef: ref }, componentProps))));
+const ChartKitComponentWithErrorBoundary = React.forwardRef(function ChartKitComponentWithErrorBoundary(props, ref) {
+    return (React.createElement(ErrorBoundary, { onError: props.onError },
+        React.createElement(ChartKitComponent, Object.assign({ instanceRef: ref }, props))));
 }) /* https://stackoverflow.com/a/58473012 */;
 export const ChartKit = typedMemo(ChartKitComponentWithErrorBoundary);

package/build/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"
   }
 }

package/build/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": "Декабрь"
   }
 }

package/build/libs/chartkit-error/chartkit-error.d.ts

@@ -7,6 +7,7 @@ export declare const CHARTKIT_ERROR_CODE: {
     NO_DATA: string;
     UNKNOWN: string;
     UNKNOWN_PLUGIN: string;
+    TOO_MANY_LINES: string;
 };
 export declare class ChartKitError extends Error {
     readonly code: number | string;

package/build/libs/chartkit-error/chartkit-error.js

@@ -2,6 +2,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 {
     constructor({ originalError, message, code = CHARTKIT_ERROR_CODE.UNKNOWN, } = {}) {

package/build/libs/settings/__tests__/settings.test.js

@@ -6,7 +6,7 @@ const resetSettings = () => settings.set({
 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', () => {
         const result = settings.get('lang');

package/build/libs/settings/settings.d.ts

@@ -1,10 +1,13 @@
 import moment from 'moment';
-import type { ChartKitPlugin, ChartKitLang } from '../../types';
-declare type Settings = {
+import type { ChartKitPlugin, ChartKitLang, ChartKitHolidays } from '../../types';
+interface Settings {
     plugins: ChartKitPlugin[];
     lang: ChartKitLang;
     locale?: moment.LocaleSpecification;
-};
+    extra?: {
+        holidays?: ChartKitHolidays;
+    };
+}
 declare type SettingKey = keyof Settings;
 export declare const DEFAULT_LOCALE_SPECIFICATION: moment.LocaleSpecification;
 declare class ChartKitSettings {

package/build/libs/settings/settings.js

@@ -1,4 +1,6 @@
 import moment from 'moment';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
 import { configure } from '@gravity-ui/uikit';
 import { i18nFactory } from '../../i18n';
 export const DEFAULT_LOCALE_SPECIFICATION = { week: { dow: 1, doy: 7 } };
@@ -27,7 +29,7 @@ class ChartKitSettings {
         };
     }
     get(key) {
-        return this.settings[key];
+        return get(this.settings, key);
     }
     set(updates) {
         const filteredUpdates = removeUndefinedValues(updates);
@@ -36,7 +38,7 @@ class ChartKitSettings {
             const locale = filteredUpdates.locale || this.get('locale');
             updateLocale({ lang, locale });
         }
-        this.settings = Object.assign(Object.assign({}, this.settings), filteredUpdates);
+        this.settings = merge(this.settings, filteredUpdates);
     }
 }
 export const settings = new ChartKitSettings();

package/build/plugins/highcharts/__stories__/AreaRange.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const AreaRange: Story<any>;

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

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

package/build/plugins/highcharts/__stories__/Line.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Line: Story<any>;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../libs';
+import { HighchartsPlugin } from '../../../plugins';
+import { ChartKit } from '../../../components/ChartKit';
+import { data } from './mocks/line';
+export default {
+    title: 'Plugins/Highcharts/Line',
+    component: ChartKit,
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    if (!shown) {
+        settings.set({ plugins: [HighchartsPlugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: 300, width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "highcharts", data: data, hoistConfigError: false, onError: () => console.log('onError invoked') })));
+};
+export const Line = Template.bind({});

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

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

package/build/plugins/highcharts/__stories__/mocks/area-range.js

@@ -0,0 +1,61 @@
+export const data = {
+    data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [
+                    [1246406400000, 10.4, 17],
+                    [1246492800000, 10.3, 28.6],
+                    [1246579200000, 14.8, 18.4],
+                    [1246665600000, 11.5, 25.8],
+                    [1246752000000, 11.1, 24.4],
+                    [1246838400000, 17.7, 19.6],
+                    [1246924800000, 15.1, 18.1],
+                    [1247011200000, 15.1, 27.2],
+                    [1247097600000, 17, 17.5],
+                    [1247184000000, 12.6, 18.5],
+                    [1247270400000, 12.2, 26],
+                    [1247356800000, 15.9, 22.9],
+                    [1247443200000, 17.1, 18.1],
+                    [1247529600000, 13.3, 24.2],
+                    [1247616000000, 17, 28.1],
+                    [1247702400000, 16.2, 22.6],
+                    [1247788800000, 10.6, 19],
+                    [1247875200000, 11.3, 19.7],
+                    [1247961600000, 14.1, 24.6],
+                    [1248048000000, 14.2, 22.5],
+                    [1248134400000, 14.1, 28.5],
+                    [1248220800000, 14, 27],
+                    [1248307200000, 10.2, 20.6],
+                    [1248393600000, 13.1, 29.9],
+                    [1248480000000, 13.7, 21.1],
+                    [1248566400000, 15, 28.6],
+                    [1248652800000, 12, 17.5],
+                    [1248739200000, 17.8, 24.4],
+                    [1248825600000, 11.7, 25.9],
+                    [1248912000000, 13.6, 25.6],
+                    [1248998400000, 17.3, 22.2],
+                ],
+            },
+        ],
+    },
+    config: {
+        hideHolidays: false,
+        normalizeDiv: false,
+        normalizeSub: false,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'arearange',
+        },
+        title: {
+            text: 'Temperature variation by day',
+        },
+        xAxis: {
+            type: 'datetime',
+        },
+        tooltip: {
+            valueSuffix: '°C',
+        },
+    },
+};