fix(D3 plugin): fix onRender callback (#297)

* fix(D3 plugin): call onRender callback * fix onLoad
gravity-ui · Sep 20, 2023 · daefbfd · daefbfd
1 parent 05ea715
commit daefbfd
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 5 deletions.
diff --git a/src/plugins/d3/__stories__/scatter/PerformanceIssue.stories.tsx b/src/plugins/d3/__stories__/scatter/PerformanceIssue.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../../libs';
 import {ChartKit} from '../../../../components/ChartKit';
@@ -42,8 +43,7 @@ const Template: Story = () => {
 
     return (
         <div style={{height: '300px', width: '100%'}}>
-            {/* @ts-ignore */}
-            <ChartKit ref={chartkitRef} type="d3" data={widgetData} />
+            <ChartKit ref={chartkitRef} type="d3" data={widgetData} onRender={action('onRender')} />
         </div>
     );
 };

diff --git a/src/plugins/d3/renderer/D3Widget.tsx b/src/plugins/d3/renderer/D3Widget.tsx
@@ -17,10 +17,22 @@ type ChartDimensions = {
 
 const D3Widget = React.forwardRef<ChartKitWidgetRef | undefined, ChartKitProps<'d3'>>(
     function D3Widget(props, forwardedRef) {
+        const {data, onLoad, onRender} = props;
         const ref = React.useRef<HTMLDivElement>(null);
         const debounced = React.useRef<DebouncedFunc<() => void> | undefined>();
         const [dimensions, setDimensions] = React.useState<Partial<ChartDimensions>>();
 
+        //FIXME: add chartPerfomance data to callbacks;
+        React.useLayoutEffect(() => {
+            if (onLoad) {
+                onLoad({});
+            }
+
+            if (onRender) {
+                onRender({});
+            }
+        }, []);
+
         const handleResize = React.useCallback(() => {
             const parentElement = ref.current?.parentElement;
 
@@ -78,7 +90,7 @@ const D3Widget = React.forwardRef<ChartKitWidgetRef | undefined, ChartKitProps<'
                         left={dimensions.left || 0}
                         width={dimensions.width}
                         height={dimensions.height}
-                        data={props.data}
+                        data={data}
                     />
                 )}
             </div>

diff --git a/src/plugins/highcharts/__stories__/scatter/PerformanceIssue.stories.tsx b/src/plugins/highcharts/__stories__/scatter/PerformanceIssue.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../../libs';
 import {ChartKit} from '../../../../components/ChartKit';
@@ -44,7 +45,12 @@ const Template: Story = () => {
 
     return (
         <div style={{height: '300px', width: '100%'}}>
-            <ChartKit ref={chartkitRef} type="highcharts" data={widgetData} />
+            <ChartKit
+                ref={chartkitRef}
+                type="highcharts"
+                data={widgetData}
+                onLoad={action('onLoad')}
+            />
         </div>
     );
 };

diff --git a/src/plugins/indicator/__stories__/Indicator.stories.tsx b/src/plugins/indicator/__stories__/Indicator.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Meta, Story} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
 import {withKnobs, boolean, color as colorKnob, radios, text} from '@storybook/addon-knobs';
 import {cloneDeep} from 'lodash';
 import {Button} from '@gravity-ui/uikit';
@@ -48,7 +49,13 @@ const Template: Story = () => {
 
     return (
         <div style={{height: 300, width: '100%'}}>
-            <ChartKit ref={chartkitRef} id="1" type="indicator" data={resultData} />
+            <ChartKit
+                ref={chartkitRef}
+                id="1"
+                type="indicator"
+                data={resultData}
+                onLoad={action('onLoad')}
+            />
         </div>
     );
 };