diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx index d8f029ef..1dcdbcc7 100644 --- 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>( +const ChartKitComponent = React.forwardRef>( (props, ref) => { const widgetRef = React.useRef(); - 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 + }>
{ +export class ErrorBoundary extends React.Component { 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 ; 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 = 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 - 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 index 01c78a63..5bc6261e 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -17,11 +17,14 @@ export type ChartKitOnLoadData = { widgetRendering?: number; }; +export type ChartKitOnError = (data: {error: any}) => void; + export type ChartKitProps = { type: T; data: ChartkitWidget[T]['data']; id?: string; onLoad?: (data?: ChartKitOnLoadData) => void; + onError?: ChartKitOnError; } & {[key in keyof Omit]: ChartkitWidget[T][key]}; export type ChartKitPlugin = {