@gravity-ui/chartkit 2.10.1 → 2.11.1-beta.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.11.0](https://github.com/gravity-ui/chartkit/compare/v2.10.1...v2.11.0) (2023-06-20)
+
+
+### Features
+
+* add renderError property ([#175](https://github.com/gravity-ui/chartkit/issues/175)) ([84c03a9](https://github.com/gravity-ui/chartkit/commit/84c03a9f8516e9fb846e25a920aa82b00c660a02))
+
+
+### Bug Fixes
+
+* reset "No data" error on change data ([ac0da94](https://github.com/gravity-ui/chartkit/commit/ac0da94fd21ff558a739c00b8904645d5ba006ef))
+
 ## [2.10.1](https://github.com/gravity-ui/chartkit/compare/v2.10.0...v2.10.1) (2023-06-19)
 
 

package/build/components/ChartKit.d.ts

@@ -13,6 +13,7 @@ export declare const ChartKit: <T extends keyof import("../types").ChartKitWidge
     onLoad?: ((data?: import("../types").ChartKitOnLoadData<T> | undefined) => void) | undefined;
     onRender?: ((data: import("../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../types").ChartKitOnChartLoad<T>) => void) | undefined;
+    renderError?: import("../types").RenderError | undefined;
     onError?: import("../types").ChartKitOnError | undefined;
 } & { [key in keyof Omit<import("../types").ChartKitWidget[T], "widget" | "data">]: import("../types").ChartKitWidget[T][key]; } & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;

package/build/components/ChartKit.js

@@ -36,7 +36,7 @@ const ChartKitComponent = (props) => {
             React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang }, restProps)))));
 };
 const ChartKitComponentWithErrorBoundary = React.forwardRef(function ChartKitComponentWithErrorBoundary(props, ref) {
-    return (React.createElement(ErrorBoundary, { onError: props.onError },
+    return (React.createElement(ErrorBoundary, { onError: props.onError, data: props.data, renderError: props.renderError },
         React.createElement(ChartKitComponent, Object.assign({ instanceRef: ref }, props))));
 }) /* https://stackoverflow.com/a/58473012 */;
 export const ChartKit = typedMemo(ChartKitComponentWithErrorBoundary);

package/build/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ChartKitError } from '../../libs';
-import type { ChartKitOnError } from '../../types';
+import type { ChartKitOnError, ChartKitType, ChartKitWidget, RenderError } from '../../types';
 declare type Props = {
     onError?: ChartKitOnError;
+    data: ChartKitWidget[ChartKitType]['data'];
+    renderError?: RenderError;
 };
 declare type State = {
     error?: ChartKitError | Error;
@@ -13,6 +15,8 @@ export declare class ErrorBoundary extends React.Component<Props, State> {
     };
     state: State;
     componentDidCatch(): void;
+    componentDidUpdate(prevProps: Readonly<Props>): void;
     render(): React.ReactNode;
+    resetError: () => void;
 }
 export {};

package/build/components/ErrorBoundary/ErrorBoundary.js

@@ -1,11 +1,17 @@
 import React from 'react';
-import { ErrorView } from '../ErrorView/ErrorView';
+import { getErrorMessage } from '../../utils/getErrorMessage';
+import { CHARTKIT_ERROR_CODE } from '../../libs';
 export class ErrorBoundary extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
             error: undefined,
         };
+        this.resetError = () => {
+            if (this.state.error) {
+                this.setState({ error: undefined });
+            }
+        };
     }
     static getDerivedStateFromError(error) {
         return { error };
@@ -17,10 +23,26 @@ export class ErrorBoundary extends React.Component {
             (_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a, { error });
         }
     }
+    componentDidUpdate(prevProps) {
+        if (prevProps.data !== this.props.data) {
+            const { error } = this.state;
+            if (error && 'code' in error && error.code === CHARTKIT_ERROR_CODE.NO_DATA) {
+                this.resetError();
+            }
+        }
+    }
     render() {
         const { error } = this.state;
         if (error) {
-            return React.createElement(ErrorView, { error: error });
+            const message = getErrorMessage(error);
+            if (this.props.renderError) {
+                return this.props.renderError({
+                    error,
+                    message,
+                    resetError: this.resetError,
+                });
+            }
+            return React.createElement("div", null, message);
         }
         return this.props.children;
     }

package/build/plugins/highcharts/__stories__/components/ChartStory.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
+import { RenderError } from '../../../../types';
 import { HighchartsWidgetData } from '../../types';
 export declare type ChartStoryProps = {
+    data: HighchartsWidgetData;
+    withoutPlugin?: boolean;
+    visible?: boolean;
     height?: string;
     width?: string;
-    data: HighchartsWidgetData;
+    renderError?: RenderError;
 };
 export declare const ChartStory: React.FC<ChartStoryProps>;

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

@@ -8,15 +8,21 @@ const DEFAULT_STORY_HEIGHT = '300px';
 const DEFAULT_STORY_WIDTH = '100%';
 export const ChartStory = (props) => {
     const { height, width, data } = props;
-    const [visible, setVisible] = React.useState(false);
+    const initRef = React.useRef(false);
+    const [visible, setVisible] = React.useState(Boolean(props.visible));
     const chartKitRef = React.useRef();
+    if (!initRef.current) {
+        if (!props.withoutPlugin) {
+            settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
+        }
+        initRef.current = true;
+    }
     if (!visible) {
-        settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
         return React.createElement(Button, { onClick: () => setVisible(true) }, "Show chart");
     }
     return (React.createElement("div", { style: {
             height: height || DEFAULT_STORY_HEIGHT,
             width: width || DEFAULT_STORY_WIDTH,
         } },
-        React.createElement(ChartKit, { ref: chartKitRef, type: "highcharts", data: data })));
+        React.createElement(ChartKit, { ref: chartKitRef, type: "highcharts", data: data, renderError: props.renderError })));
 };

package/build/plugins/highcharts/__stories__/custom-error-render/custom-error-render.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 CustomErrorRender: Story<import("@storybook/react").Args>;

package/build/plugins/highcharts/__stories__/custom-error-render/custom-error-render.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ChartStory } from '../components/ChartStory';
+import { Button } from '@gravity-ui/uikit';
+import { CHARTKIT_ERROR_CODE, settings } from '../../../../libs';
+import { HighchartsPlugin } from '../../index';
+import holidays from '../../mocks/holidays';
+import { noData, filledData } from '../../mocks/custom-error-render';
+export default {
+    title: 'Plugins/Highcharts/CustomErrorRender',
+    component: ChartKit,
+};
+const Template = () => {
+    const [data, setData] = React.useState(noData);
+    const renderErrorView = React.useCallback(({ error, message, resetError }) => {
+        function renderFixButton() {
+            if (!('code' in error)) {
+                return null;
+            }
+            switch (error.code) {
+                case CHARTKIT_ERROR_CODE.UNKNOWN_PLUGIN:
+                    return (React.createElement(Button, { onClick: () => {
+                            settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
+                            resetError();
+                        } }, "Add highcharts plugin"));
+                case CHARTKIT_ERROR_CODE.NO_DATA:
+                    return (React.createElement(Button, { onClick: () => {
+                            setData(filledData);
+                        } }, "Add data"));
+                default:
+                    return null;
+            }
+        }
+        return (React.createElement("div", null,
+            React.createElement("h2", null, message),
+            renderFixButton()));
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(ChartStory, { withoutPlugin: true, data: data, visible: true, renderError: renderErrorView })));
+};
+export const CustomErrorRender = Template.bind({});

package/build/plugins/highcharts/__stories__/no-data/no-data.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 NoData: Story<import("@storybook/react").Args>;

package/build/plugins/highcharts/__stories__/no-data/no-data.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { noData, filledData } from '../../mocks/no-data';
+import { ChartStory } from '../components/ChartStory';
+import { Button } from '@gravity-ui/uikit';
+export default {
+    title: 'Plugins/Highcharts/NoData',
+    component: ChartKit,
+};
+const Template = () => {
+    const [data, setData] = React.useState(noData);
+    const handleUpdateData = React.useCallback(() => {
+        setData(filledData);
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { marginBottom: 12 } },
+            React.createElement(Button, { onClick: handleUpdateData }, "Add data")),
+        React.createElement(ChartStory, { data: data, visible: true })));
+};
+export const NoData = Template.bind({});

package/build/plugins/highcharts/mocks/custom-error-render.d.ts

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

package/build/plugins/highcharts/mocks/custom-error-render.js

@@ -0,0 +1,69 @@
+const baseData = {
+    config: {
+        hideHolidays: false,
+        normalizeDiv: false,
+        normalizeSub: false,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'arearange',
+        },
+        title: {
+            text: 'Temperature variation by day',
+        },
+        xAxis: {
+            type: 'datetime',
+        },
+        tooltip: {
+            valueSuffix: '°C',
+        },
+    },
+};
+export const noData = Object.assign(Object.assign({}, baseData), { data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [],
+            },
+        ],
+    } });
+export const filledData = Object.assign(Object.assign({}, baseData), { 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],
+                ],
+            },
+        ],
+    } });

package/build/plugins/highcharts/mocks/no-data.d.ts

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

package/build/plugins/highcharts/mocks/no-data.js

@@ -0,0 +1,69 @@
+const baseData = {
+    config: {
+        hideHolidays: false,
+        normalizeDiv: false,
+        normalizeSub: false,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'arearange',
+        },
+        title: {
+            text: 'Temperature variation by day',
+        },
+        xAxis: {
+            type: 'datetime',
+        },
+        tooltip: {
+            valueSuffix: '°C',
+        },
+    },
+};
+export const noData = Object.assign(Object.assign({}, baseData), { data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [],
+            },
+        ],
+    } });
+export const filledData = Object.assign(Object.assign({}, baseData), { 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],
+                ],
+            },
+        ],
+    } });

package/build/plugins/highcharts/renderer/HighchartsWidget.d.ts

@@ -8,6 +8,7 @@ declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"highcharts"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"highcharts">) => void) | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     hoistConfigError?: boolean | undefined;

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.js

@@ -43,6 +43,9 @@ function getPointsForInitialRefresh(chart) {
 }
 function forceHoverState(chart, activePoints) {
     const chartType = get(chart, 'userOptions.chart.type');
+    if (!chartType) {
+        return;
+    }
     if (chartType === 'pie') {
         chart.tooltip.refresh(activePoints);
         chart.pointsForInitialRefresh = activePoints;
@@ -205,6 +208,6 @@ export const withSplitPane = (ComposedComponent) => {
         }
     }
     return React.forwardRef((props, ref) => {
-        return React.createElement(WithSplitPane, Object.assign({ forwardedRef: ref }, props));
+        return React.createElement(WithSplitPane, Object.assign({}, props, { forwardedRef: ref }));
     });
 };

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -9,6 +9,7 @@ declare const IndicatorWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"indicator"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"indicator">) => void) | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     formatNumber?: (<T = any>(value: number, options?: T | undefined) => string) | undefined;

package/build/plugins/yagr/__stories__/Yagr.stories.d.ts

@@ -1,4 +1,6 @@
 import { Meta, Story } from '@storybook/react';
+import '@gravity-ui/yagr/dist/index.css';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Line: Story<any>;
+export declare const Updates: Story<any>;

package/build/plugins/yagr/__stories__/Yagr.stories.js

@@ -3,12 +3,13 @@ import { Button } from '@gravity-ui/uikit';
 import { settings } from '../../../libs';
 import { YagrPlugin } from '../../../plugins';
 import { ChartKit } from '../../../components/ChartKit';
-import { line10 } from './mocks/line10';
+import { getNewConfig, line10 } from './mocks/line10';
+import '@gravity-ui/yagr/dist/index.css';
 export default {
     title: 'Plugins/Yagr',
     component: ChartKit,
 };
-const Template = () => {
+const LineTemplate = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef();
     if (!shown) {
@@ -18,4 +19,23 @@ const Template = () => {
     return (React.createElement("div", { style: { height: 300, width: '100%' } },
         React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: line10 })));
 };
-export const Line = Template.bind({});
+const UpdatesTemplate = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const [state, setState] = React.useState(line10);
+    const onStartUpdates = React.useCallback(() => {
+        setInterval(() => {
+            setState(getNewConfig());
+        }, 1000);
+    }, []);
+    if (!shown) {
+        settings.set({ plugins: [YagrPlugin] });
+        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: "yagr", data: state }),
+        React.createElement(Button, { onClick: onStartUpdates }, "Start Updates"),
+        React.createElement(Button, { onClick: () => setState(getNewConfig()) }, "Once")));
+};
+export const Line = LineTemplate.bind({});
+export const Updates = UpdatesTemplate.bind({});

package/build/plugins/yagr/__stories__/mocks/line10.d.ts

@@ -1,2 +1,52 @@
 import type { YagrWidgetData } from '../../types';
 export declare const line10: YagrWidgetData;
+export declare const getNewConfig: () => {
+    libraryConfig: {
+        title: {
+            text: string;
+        };
+        chart?: import("@gravity-ui/yagr/dist/YagrCore/types").YagrChartOptions | undefined;
+        legend?: import("@gravity-ui/yagr/dist/YagrCore/plugins/legend/legend").LegendOptions | undefined;
+        axes?: Record<string, import("@gravity-ui/yagr/dist/YagrCore/types").AxisOptions> | undefined;
+        cursor?: import("@gravity-ui/yagr/dist/YagrCore/plugins/cursor/cursor").CursorOptions | undefined;
+        timeline?: number[] | undefined;
+        tooltip?: Partial<import("@gravity-ui/yagr/dist/YagrCore/plugins/tooltip/types").TooltipOptions> | undefined;
+        grid?: import("uplot").Axis.Grid | undefined;
+        markers?: import("@gravity-ui/yagr/dist/YagrCore/types").MarkersOptions | undefined;
+        scales?: Record<string, import("@gravity-ui/yagr/dist/YagrCore/types").Scale> | undefined;
+        series?: import("@gravity-ui/yagr/dist/YagrCore/types").RawSerieData<Omit<import("@gravity-ui/yagr/dist/YagrCore/types").SeriesOptions, "type"> & {
+            type?: import("@gravity-ui/yagr/dist/YagrCore/types").ChartType | undefined;
+        }>[] | undefined;
+        hooks?: import("@gravity-ui/yagr/dist/YagrCore/types").YagrHooks | undefined;
+        processing?: import("@gravity-ui/yagr/dist/YagrCore/types").ProcessingSettings | undefined;
+        editUplotOptions?: ((opts: import("uplot").Options) => import("uplot").Options) | undefined;
+        plugins?: Record<string, import("@gravity-ui/yagr/dist/YagrCore/types").YagrPlugin<{}, []>> | undefined;
+    };
+    data: {
+        timeline: number[];
+        graphs: {
+            data: number[];
+            name?: string | undefined;
+            id?: string | undefined;
+            scale?: string | undefined;
+            focus?: boolean | undefined;
+            show?: boolean | undefined;
+            color?: string | undefined;
+            spanGaps?: boolean | undefined;
+            cursorOptions?: Pick<import("@gravity-ui/yagr/dist/YagrCore/plugins/cursor/cursor").CursorOptions, "snapToValues" | "markersSize"> | undefined;
+            formatter?: ((value: string | number | null, serie: import("uplot").Series) => string) | undefined;
+            precision?: number | undefined;
+            snapToValues?: false | import("@gravity-ui/yagr/dist/YagrCore/types").SnapToValue | undefined;
+            stackGroup?: number | undefined;
+            title?: string | ((sIdx: number) => string) | undefined;
+            transform?: ((val: string | number | null, series: import("@gravity-ui/yagr/dist/YagrCore/types").DataSeries[], idx: number) => number | null) | undefined;
+            showInTooltip?: boolean | undefined;
+            type?: import("@gravity-ui/yagr/dist/YagrCore/types").ChartType | undefined;
+        }[];
+    };
+    sources?: Record<number, {
+        data: {
+            program: string;
+        };
+    }> | undefined;
+};

package/build/plugins/yagr/__stories__/mocks/line10.js

@@ -61,3 +61,18 @@ export const line10 = {
         processing: {},
     },
 };
+export const getNewConfig = () => {
+    const startPoint = (Math.random() * 10 ** 5) >> 0; // eslint-disable-line no-bitwise
+    return Object.assign(Object.assign({}, line10), { libraryConfig: Object.assign(Object.assign({}, line10.libraryConfig), { title: {
+                text: 'line: random 100 pts',
+            } }), data: {
+            timeline: new Array(100).fill(0).map((_, i) => {
+                return startPoint + i * 1000;
+            }),
+            graphs: line10.data.graphs.map((graph) => {
+                return Object.assign(Object.assign({}, graph), { data: new Array(100).fill(0).map(() => {
+                        return (Math.random() * 100) >> 0; // eslint-disable-line no-bitwise
+                    }) });
+            }),
+        } });
+};

package/build/plugins/yagr/__tests__/utils.test.js

@@ -6,13 +6,13 @@ const DATA = {
 describe('plugins/yagr/utils', () => {
     describe('shapeYagrConfig > check chart property', () => {
         test.each([
-            [{}, { appereance: { locale: 'en', theme: 'dark' } }],
-            [{ appereance: { locale: 'ru' } }, { appereance: { locale: 'ru', theme: 'dark' } }],
-            [{ appereance: { theme: 'light' } }, { appereance: { locale: 'en', theme: 'light' } }],
+            [{}, { appearance: { locale: 'en', theme: 'dark' } }],
+            [{ appearance: { locale: 'ru' } }, { appearance: { locale: 'ru', theme: 'dark' } }],
+            [{ appearance: { theme: 'light' } }, { appearance: { locale: 'en', theme: 'light' } }],
             [
                 { series: { type: 'dots' }, select: { zoom: false }, timeMultiplier: 1 },
                 {
-                    appereance: { locale: 'en', theme: 'dark' },
+                    appearance: { locale: 'en', theme: 'dark' },
                     series: { type: 'dots' },
                     select: { zoom: false },
                     timeMultiplier: 1,

package/build/plugins/yagr/renderer/YagrWidget.d.ts

@@ -11,6 +11,7 @@ declare const YagrWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"yagr"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"yagr">) => void) | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {} & {
     id: string;

package/build/plugins/yagr/renderer/YagrWidget.js

@@ -23,9 +23,11 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         onRender === null || onRender === void 0 ? void 0 : onRender({ renderTime });
     }, [onLoad, data]);
     const onWindowResize = React.useCallback(() => {
-        var _a;
-        if ((_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart) {
-            const chart = yagrRef.current.chart;
+        if (yagrRef.current) {
+            const chart = yagrRef.current.yagr();
+            if (!chart) {
+                return;
+            }
             const root = chart.root;
             const height = root.offsetHeight;
             const width = root.offsetWidth;
@@ -38,9 +40,9 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
             onWindowResize();
         },
     }), [onWindowResize]);
-    React.useLayoutEffect(() => {
+    React.useEffect(() => {
         var _a, _b, _c, _d;
-        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
+        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr();
         if (!yagr) {
             return;
         }
@@ -67,11 +69,11 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
                 handlers.mouseDown = null;
             }
         });
-    });
+    }, []);
     React.useLayoutEffect(() => {
         var _a;
-        onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart });
-    }, []);
+        onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr() });
+    }, [yagrRef, onChartLoad]);
     return (React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
 });
 export default YagrWidget;

package/build/plugins/yagr/renderer/tooltip/renderTooltip.js

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { formatTooltip } from './tooltip';
 const calcOption = (d) => {
-    return typeof d === 'object'
+    return typeof d === 'object' && d !== null
         ? Object.values(d).reduce((_, t) => {
             return t;
         })
@@ -16,7 +16,7 @@ export const renderTooltip = (data) => {
     const cfg = data.yagr.config;
     const timeMultiplier = cfg.chart.timeMultiplier || 1;
     const opts = data.options;
-    const { x, pinned } = data;
+    const { x, state } = data;
     let sumTotal = 0;
     const rows = Object.values(data.scales).reduce((acc, scale) => {
         sumTotal += scale.sum || 0;
@@ -27,7 +27,7 @@ export const renderTooltip = (data) => {
     const maxLines = calcOption(opts.maxLines);
     const valueFormatter = calcOption(opts.value);
     // eslint-disable-next-line no-nested-ternary
-    const hiddenRowsNumber = pinned
+    const hiddenRowsNumber = state.pinned
         ? undefined
         : lines > maxLines
             ? Math.abs(maxLines - lines)
@@ -50,6 +50,6 @@ export const renderTooltip = (data) => {
         tooltipFormatOptions.sum = valueFormatter(sumTotal);
     }
     return formatTooltip(tooltipFormatOptions, {
-        lastVisibleRowIndex: pinned ? rows.length - 1 : maxLines - 1,
+        lastVisibleRowIndex: state.pinned ? rows.length - 1 : maxLines - 1,
     });
 };

package/build/plugins/yagr/renderer/utils.js

@@ -87,7 +87,7 @@ export const shapeYagrConfig = (args) => {
     const { data, libraryConfig, theme } = args;
     const config = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
     const chart = {
-        appereance: {
+        appearance: {
             locale: settings.get('lang'),
             theme,
         },

package/build/types/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ChartKitWidget } from './widget';
+import { ChartKitError } from '../libs';
 export type { ChartKitHolidays } from './misc';
 export declare type ChartKitLang = 'ru' | 'en';
 export declare type ChartKitType = keyof ChartKitWidget;
@@ -38,6 +39,7 @@ export declare type ChartKitProps<T extends ChartKitType> = {
      * @param data
      */
     onChartLoad?: (data: ChartKitOnChartLoad<T>) => void;
+    renderError?: RenderError;
     onError?: ChartKitOnError;
 } & {
     [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key];
@@ -46,4 +48,10 @@ export declare type ChartKitPlugin = {
     type: ChartKitType;
     renderer: React.LazyExoticComponent<any>;
 };
+export declare type RenderErrorOpts = {
+    message: string;
+    error: ChartKitError | Error;
+    resetError: () => void;
+};
+export declare type RenderError = (opts: RenderErrorOpts) => React.ReactNode;
 export type { ChartKitWidget };

package/build/utils/getErrorMessage.d.ts

@@ -0,0 +1,2 @@
+import type { ChartKitError } from '../libs';
+export declare function getErrorMessage(error: ChartKitError | Error): string;

package/build/utils/getErrorMessage.js

@@ -0,0 +1,5 @@
+import { i18n } from '../i18n';
+export function getErrorMessage(error) {
+    const code = 'code' in error && error.code;
+    return (error.message || code || i18n('error', 'label_unknown-error')).toString();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.10.1",
+  "version": "2.11.1-beta.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -13,7 +13,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@gravity-ui/yagr": "^2.2.5",
+    "@gravity-ui/yagr": "^3.1.0",
     "bem-cn-lite": "^4.1.0",
     "highcharts": "^8.2.2",
     "highcharts-react-official": "^3.0.0",
@@ -65,9 +65,9 @@
     "typescript": "^4.2.3"
   },
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@gravity-ui/uikit": "^4.0.0",
     "moment": "^2.19.3",
-    "@gravity-ui/uikit": "^4.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "test": "jest",

package/build/components/ErrorView/ErrorView.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { ChartKitError } from '../../libs';
-declare type Props = {
-    error: ChartKitError | Error;
-};
-export declare const ErrorView: ({ error }: Props) => JSX.Element;
-export {};

package/build/components/ErrorView/ErrorView.js

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