diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx index f007f7f5..ad4b07e8 100644 --- a/src/components/ChartKit.tsx +++ b/src/components/ChartKit.tsx @@ -17,7 +17,7 @@ type ChartKitComponentProps = Omit, 'on const ChartKitComponent = (props: ChartKitComponentProps) => { const widgetRef = React.useRef(); - const {instanceRef, id: propsId, type, data, onLoad, isMobile, ...restProps} = props; + const {instanceRef, id: propsId, type, isMobile, ...restProps} = props; const ckId = React.useMemo(() => getRandomCKId(), []); const id = propsId || ckId; @@ -50,14 +50,7 @@ const ChartKitComponent = (props: ChartKitComponentProps return ( }>
- +
); diff --git a/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx b/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx index 1b356123..3fb318ca 100644 --- a/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx +++ b/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx @@ -101,10 +101,35 @@ export class HighchartsComponent extends React.PureComponent { }>(); componentDidMount() { - this.onLoad(); + if (!this.props.onChartLoad) { + this.onLoad(); + return; + } + + const needCallbacks = !this.state.isError && !this.props.splitTooltip; + if (!needCallbacks) { + return; + } + const widget = this.chartComponent.current ? this.chartComponent.current.chart : null; + + if (this.state.callback && widget) { + this.state.callback(widget); + } + + this.props.onChartLoad?.({ + widget, + }); } componentDidUpdate() { + const needRenderCallback = + this.props.onRender && !this.state.isError && !this.props.splitTooltip; + if (needRenderCallback) { + this.props.onRender?.({ + renderTime: getChartPerformanceDuration(this.getId()), + }); + return; + } this.onLoad(); } diff --git a/src/plugins/indicator/renderer/IndicatorWidget.tsx b/src/plugins/indicator/renderer/IndicatorWidget.tsx index 1a5c03a2..2a30d510 100644 --- a/src/plugins/indicator/renderer/IndicatorWidget.tsx +++ b/src/plugins/indicator/renderer/IndicatorWidget.tsx @@ -24,6 +24,7 @@ const IndicatorWidget = React.forwardRef { // TODO: swap to onRender after https://github.com/gravity-ui/chartkit/issues/33 onLoad?.(); + // TODO: add onRender with renderTime Issue #114 }); if (isEmpty(data)) { diff --git a/src/plugins/yagr/renderer/YagrWidget.tsx b/src/plugins/yagr/renderer/YagrWidget.tsx index 6bc44f05..ca2bcbd1 100644 --- a/src/plugins/yagr/renderer/YagrWidget.tsx +++ b/src/plugins/yagr/renderer/YagrWidget.tsx @@ -19,6 +19,8 @@ const YagrWidget = React.forwardRef((props id, data: {data}, onLoad, + onRender, + onChartLoad, } = props; const yagrRef = React.useRef(null); @@ -34,6 +36,7 @@ const YagrWidget = React.forwardRef((props const handleChartLoading: NonNullable = React.useCallback( (chart, {renderTime}) => { onLoad?.({...data, widget: chart, widgetRendering: renderTime}); + onRender?.({renderTime}); }, [onLoad, data], ); @@ -95,6 +98,10 @@ const YagrWidget = React.forwardRef((props }); }); + React.useLayoutEffect(() => { + onChartLoad?.({widget: yagrRef.current?.chart}); + }, []); + return ( = { widgetRendering?: number; }; +export type ChartKitOnRenderData = { + renderTime?: number; +}; + +export type ChartKitOnChartLoad = { + widget?: ChartKitWidget[T]['widget'] | null; +}; + export type ChartKitOnError = (data: {error: any}) => void; export type ChartKitProps = { @@ -26,7 +36,22 @@ export type ChartKitProps = { data: ChartKitWidget[T]['data']; id?: string; isMobile?: boolean; + /** + * @depricated please use onRender & onChartLoad instead + * @param data + */ onLoad?: (data?: ChartKitOnLoadData) => void; + /** + * called on each render + * @param data + */ + onRender?: (data: ChartKitOnRenderData) => void; + /** + * called on chart mount + * @param data + */ + onChartLoad?: (data: ChartKitOnChartLoad) => void; + onError?: ChartKitOnError; } & {[key in keyof Omit]: ChartKitWidget[T][key]};