feat: add onError property (#24)

* fix: memoize fixes * feat: add onError property * marginy review fixes
gravity-ui · Jul 18, 2022 · 0b51f19 · 0b51f19
1 parent 11cfe6c
commit 0b51f19
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx
@@ -12,10 +12,10 @@ import './ChartKit.scss';
 
 const b = block('chartkit');
 
-export const ChartKit = 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, ...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 @@ export const ChartKit = React.forwardRef<ChartKitRef | undefined, ChartKitProps<
         );
 
         return (
-            <ErrorBoundary>
+            <ErrorBoundary onError={onError}>
                 <React.Suspense fallback={<Loader />}>
                     <div className={b()}>
                         <ChartComponent
@@ -56,3 +56,5 @@ export const ChartKit = React.forwardRef<ChartKitRef | undefined, ChartKitProps<
         );
     },
 );
+
+export const ChartKit = React.memo(ChartKitComponent);
diff --git 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/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}}
             />
         );

diff --git 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 = {