feat: add onRender & onChartLoad calbacks

gravity-ui · Jan 23, 2023 · 27ddb48 · 27ddb48
1 parent 6ed7889
commit 27ddb48
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 2 deletions.
diff --git a/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx b/src/plugins/highcharts/renderer/components/HighchartsComponent.tsx
@@ -101,11 +101,35 @@ export class HighchartsComponent extends React.PureComponent<Props, State> {
     }>();
 
     componentDidMount() {
-        this.onLoad();
+        if (this.props.onChartLoad) {
+            if (!this.state.isError && !this.props.splitTooltip) {
+                const widget = this.chartComponent.current
+                    ? this.chartComponent.current.chart
+                    : null;
+
+                if (this.state.callback && widget) {
+                    this.state.callback(widget);
+                }
+
+                this.props.onChartLoad?.({
+                    widget,
+                });
+            }
+        } else {
+            this.onLoad();
+        }
     }
 
     componentDidUpdate() {
-        this.onLoad();
+        if (this.props.onRender) {
+            if (!this.state.isError && !this.props.splitTooltip) {
+                this.props.onRender({
+                    renderTime: getChartPerformanceDuration(this.getId()),
+                });
+            }
+        } else {
+            this.onLoad();
+        }
     }
 
     render() {
@@ -164,6 +188,10 @@ export class HighchartsComponent extends React.PureComponent<Props, State> {
         return `${this.props.id}_${this.id}`;
     }
 
+    /**
+     * @depricated: please use onRender & onChartLoad instead
+     * @private
+     */
     private onLoad() {
         if (!this.state.isError && !this.props.splitTooltip) {
             const data = {

diff --git a/src/plugins/indicator/renderer/IndicatorWidget.tsx b/src/plugins/indicator/renderer/IndicatorWidget.tsx
@@ -17,15 +17,22 @@ const IndicatorWidget = React.forwardRef<ChartKitWidgetRef | undefined, ChartKit
     function IndicatorWidgetInner(props, _ref) {
         const {
             onLoad,
+            onRender,
+            onChartLoad,
             formatNumber,
             data: {data = [], defaultColor},
         } = props;
 
         React.useLayoutEffect(() => {
             // TODO: swap to onRender after https://github.com/gravity-ui/chartkit/issues/33
             onLoad?.();
+            onRender?.(); // TODO renderTime ?
         });
 
+        React.useLayoutEffect(() => {
+            onChartLoad?.({widget: null});
+        }, []);
+
         if (isEmpty(data)) {
             throw new ChartKitError({
                 code: CHARTKIT_ERROR_CODE.NO_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,7 @@
+import React from 'react';
+import type Highcharts from 'highcharts';
+import type YagrChartComponent from '@gravity-ui/yagr/dist/react';
+
 import type {ChartKitWidget} from './widget';
 
 export type {ChartKitHolidays} from './misc';
@@ -19,14 +23,37 @@ export type ChartKitOnLoadData<T extends ChartKitType> = {
     widgetRendering?: number;
 };
 
+export type ChartKitOnRenderData = {
+    renderTime?: number;
+};
+
+export type ChartKitOnChartLoad = {
+    widget?: YagrChartComponent['chart'] | Highcharts.Chart | 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
+     * @private
+     */
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
+    /**
+     * called on each render
+     * @param data
+     */
+    onRender?: (data?: ChartKitOnRenderData) => void;
+    /**
+     * called on mount
+     * @param data
+     */
+    onChartLoad?: (data?: ChartKitOnChartLoad) => void;
+
     onError?: ChartKitOnError;
 } & {[key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key]};