feat: add onRender & onChartLoad calbacks (#111)

* feat: add onRender & onChartLoad calbacks * fix: remove unnecessary props drill * fix: fix after review * fix: fix types
gravity-ui · Jan 23, 2023 · f23c008 · f23c008
1 parent 1d5caf1
commit f23c008
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 10 deletions.
diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx
@@ -17,7 +17,7 @@ type ChartKitComponentProps<T extends ChartKitType> = Omit<ChartKitProps<T>, 'on
 
 const ChartKitComponent = <T extends ChartKitType>(props: ChartKitComponentProps<T>) => {
     const widgetRef = React.useRef<ChartKitWidgetRef>();
-    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 = <T extends ChartKitType>(props: ChartKitComponentProps
     return (
         <React.Suspense fallback={<Loader />}>
             <div className={b({mobile: isMobile}, 'chartkit-theme_common')}>
-                <ChartComponent
-                    ref={widgetRef}
-                    id={id}
-                    lang={lang}
-                    data={data}
-                    onLoad={onLoad}
-                    {...restProps}
-                />
+                <ChartComponent ref={widgetRef} id={id} lang={lang} {...restProps} />
             </div>
         </React.Suspense>
     );

diff --git 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<Props, State> {
     }>();
 
     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
@@ -24,6 +24,7 @@ const IndicatorWidget = React.forwardRef<ChartKitWidgetRef | undefined, ChartKit
         React.useLayoutEffect(() => {
             // 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
@@ -19,6 +19,8 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
         id,
         data: {data},
         onLoad,
+        onRender,
+        onChartLoad,
     } = props;
     const yagrRef = React.useRef<YagrComponent>(null);
 
@@ -34,6 +36,7 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
     const handleChartLoading: NonNullable<YagrChartProps['onChartLoad']> = React.useCallback(
         (chart, {renderTime}) => {
             onLoad?.({...data, widget: chart, widgetRendering: renderTime});
+            onRender?.({renderTime});
         },
         [onLoad, data],
     );
@@ -95,6 +98,10 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
         });
     });
 
+    React.useLayoutEffect(() => {
+        onChartLoad?.({widget: yagrRef.current?.chart});
+    }, []);
+
     return (
         <YagrComponent
             ref={yagrRef}

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type {ChartKitWidget} from './widget';
 
 export type {ChartKitHolidays} from './misc';
@@ -19,14 +21,37 @@ export type ChartKitOnLoadData<T extends ChartKitType> = {
     widgetRendering?: number;
 };
 
+export type ChartKitOnRenderData = {
+    renderTime?: number;
+};
+
+export type ChartKitOnChartLoad<T extends ChartKitType> = {
+    widget?: ChartKitWidget[T]['widget'] | null;
+};
+
 export type ChartKitOnError = (data: {error: any}) => void;
 
 export type ChartKitProps<T extends ChartKitType> = {
     type: T;
     data: ChartKitWidget[T]['data'];
     id?: string;
     isMobile?: boolean;
+    /**
+     * @depricated please use onRender & onChartLoad instead
+     * @param data
+     */
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
+    /**
+     * called on each render
+     * @param data
+     */
+    onRender?: (data: ChartKitOnRenderData) => void;
+    /**
+     * called on chart mount
+     * @param data
+     */
+    onChartLoad?: (data: ChartKitOnChartLoad<T>) => void;
+
     onError?: ChartKitOnError;
 } & {[key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key]};