From 2d30b6fadd91eebc3d90a6e4b0e1260689b1d378 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B0=D0=B5=D0=B2=20=D0=95=D0=B2=D0=B3=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B9?= <alaev89@yandex-team.ru>
Date: Fri, 15 Jul 2022 22:36:16 +0300
Subject: [PATCH 1/3] fix: memoize fixes

---
 src/components/ChartKit.tsx              |  4 +++-
 src/plugins/yagr/renderer/YagrWidget.tsx | 13 +++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx
index d8f029ef..6ed0a048 100644
--- a/src/components/ChartKit.tsx
+++ b/src/components/ChartKit.tsx
@@ -12,7 +12,7 @@ import './ChartKit.scss';
 
 const b = block('chartkit');
 
-export const ChartKit = React.forwardRef<ChartKitRef | undefined, ChartKitProps<ChartkitType>>(
+const Component = React.forwardRef<ChartKitRef | undefined, ChartKitProps<ChartkitType>>(
     (props, ref) => {
         const widgetRef = React.useRef<ChartKitWidgetRef>();
         const {id = getRandomCKId(), type, data, onLoad, ...restProps} = props;
@@ -56,3 +56,5 @@ export const ChartKit = React.forwardRef<ChartKitRef | undefined, ChartKitProps<
         );
     },
 );
+
+export const ChartKit = React.memo(Component);
diff --git a/src/plugins/yagr/renderer/YagrWidget.tsx b/src/plugins/yagr/renderer/YagrWidget.tsx
index 6393c865..9fa78b64 100644
--- a/src/plugins/yagr/renderer/YagrWidget.tsx
+++ b/src/plugins/yagr/renderer/YagrWidget.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import debounce from 'lodash/debounce';
 import {useThemeValue} from '@yandex-cloud/uikit';
-import YagrComponent from 'yagr/dist/react';
+import YagrComponent, {YagrChartProps} from 'yagr/dist/react';
 import {
     YagrConfig,
     TooltipRow,
@@ -233,6 +233,13 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, YagrWidgetPro
                   .join(', ') || id
             : id;
 
+        const handleChartLoading: NonNullable<YagrChartProps['onChartLoad']> = React.useCallback(
+            (chart, {renderTime}) => {
+                onLoad?.({...data, widget: chart, widgetRendering: renderTime});
+            },
+            [onLoad, data],
+        );
+
         const onWindowResize = React.useCallback(() => {
             if (yagrRef.current?.chart) {
                 const chart = yagrRef.current.chart;
@@ -268,9 +275,7 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, YagrWidgetPro
                 ref={yagrRef}
                 id={id}
                 config={config}
-                onChartLoad={(chart, {renderTime}) =>
-                    onLoad && onLoad({...props.data, widget: chart, widgetRendering: renderTime})
-                }
+                onChartLoad={handleChartLoading}
                 debug={{filename: debugFileName}}
             />
         );

From 65618bd387a4616ce4d3355fea937b62fa6b5ae1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B0=D0=B5=D0=B2=20=D0=95=D0=B2=D0=B3=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B9?= <alaev89@yandex-team.ru>
Date: Fri, 15 Jul 2022 22:36:51 +0300
Subject: [PATCH 2/3] feat: add onError property

---
 src/components/ChartKit.tsx                    |  4 ++--
 src/components/ErrorBoundary/ErrorBoundary.tsx | 15 ++++++++++++++-
 src/types/index.ts                             |  3 +++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx
index 6ed0a048..6fdd721b 100644
--- a/src/components/ChartKit.tsx
+++ b/src/components/ChartKit.tsx
@@ -15,7 +15,7 @@ const b = block('chartkit');
 const Component = React.forwardRef<ChartKitRef | undefined, ChartKitProps<ChartkitType>>(
     (props, ref) => {
         const widgetRef = React.useRef<ChartKitWidgetRef>();
-        const {id = getRandomCKId(), type, data, onLoad, ...restProps} = props;
+        const {id = getRandomCKId(), type, data, onLoad, onError, ...restProps} = props;
         const lang = settings.get('lang');
         const plugins = settings.get('plugins');
         const plugin = plugins.find((iteratedPlugin) => iteratedPlugin.type === type);
@@ -39,7 +39,7 @@ const Component = React.forwardRef<ChartKitRef | undefined, ChartKitProps<Chartk
         );
 
         return (
-            <ErrorBoundary>
+            <ErrorBoundary onError={onError}>
                 <React.Suspense fallback={<Loader />}>
                     <div className={b()}>
                         <ChartComponent
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
index 6666ebfd..1ed128ac 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
+import type {ChartKitOnError} from '../../types';
 import {ErrorView} from '../ErrorView/ErrorView';
 
+type Props = {
+    onError?: ChartKitOnError;
+};
+
 type State = {
     error?: Error;
 };
 
-export class ErrorBoundary extends React.Component<{}, State> {
+export class ErrorBoundary extends React.Component<Props, State> {
     static getDerivedStateFromError(error: Error) {
         return {error};
     }
@@ -14,6 +19,14 @@ export class ErrorBoundary extends React.Component<{}, State> {
         error: undefined,
     };
 
+    componentDidUpdate() {
+        const {error} = this.state;
+
+        if (error) {
+            this.props.onError?.({error});
+        }
+    }
+
     render() {
         if (this.state.error) {
             return <ErrorView />;
diff --git a/src/types/index.ts b/src/types/index.ts
index 01c78a63..5bc6261e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -17,11 +17,14 @@ export type ChartKitOnLoadData<T extends ChartkitType> = {
     widgetRendering?: number;
 };
 
+export type ChartKitOnError = (data: {error: any}) => void;
+
 export type ChartKitProps<T extends ChartkitType> = {
     type: T;
     data: ChartkitWidget[T]['data'];
     id?: string;
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
+    onError?: ChartKitOnError;
 } & {[key in keyof Omit<ChartkitWidget[T], 'data' | 'widget'>]: ChartkitWidget[T][key]};
 
 export type ChartKitPlugin = {

From fd7a6dede6b5ce01d45b8f83ab05414dfacd260e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B0=D0=B5=D0=B2=20=D0=95=D0=B2=D0=B3=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B9?= <alaev89@yandex-team.ru>
Date: Mon, 18 Jul 2022 12:53:22 +0300
Subject: [PATCH 3/3] marginy review fixes

---
 src/components/ChartKit.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx
index 6fdd721b..1dcdbcc7 100644
--- a/src/components/ChartKit.tsx
+++ b/src/components/ChartKit.tsx
@@ -12,7 +12,7 @@ import './ChartKit.scss';
 
 const b = block('chartkit');
 
-const Component = React.forwardRef<ChartKitRef | undefined, ChartKitProps<ChartkitType>>(
+const ChartKitComponent = React.forwardRef<ChartKitRef | undefined, ChartKitProps<ChartkitType>>(
     (props, ref) => {
         const widgetRef = React.useRef<ChartKitWidgetRef>();
         const {id = getRandomCKId(), type, data, onLoad, onError, ...restProps} = props;
@@ -57,4 +57,4 @@ const Component = React.forwardRef<ChartKitRef | undefined, ChartKitProps<Chartk
     },
 );
 
-export const ChartKit = React.memo(Component);
+export const ChartKit = React.memo(ChartKitComponent);