feat: add pluginRef property (#195)

* feat: added rendererRef property * fix: new patch version of yagr * fix: plugin component ref refactoring * fix: fixed package-lock --------- Co-authored-by: Trdat Mkrtchyan <zeffirsky@zeffirsky-dev.vla.yp-c.yandex.net> Co-authored-by: Evgeny Alaev <alaev89@yandex-team.ru>
gravity-ui · Jul 7, 2023 · 6102a40 · 6102a40
1 parent a783772
commit 6102a40
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 11 deletions.
diff --git a/src/plugins/yagr/__stories__/Yagr.stories.tsx b/src/plugins/yagr/__stories__/Yagr.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Meta, Story} from '@storybook/react';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../libs';
-import {YagrPlugin} from '../../../plugins';
+import {YagrPlugin, YagrReactRef} from '../../../plugins';
 import {ChartKit} from '../../../components/ChartKit';
 import type {ChartKitRef} from '../../../types';
 import {getNewConfig, line10} from './mocks/line10';
@@ -17,6 +17,8 @@ export default {
 const LineTemplate: Story<any> = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef<ChartKitRef>();
+    // Example of usage pluginRef property
+    const yagrPluginRef = React.useRef<YagrReactRef>(null);
 
     if (!shown) {
         settings.set({plugins: [YagrPlugin]});
@@ -25,7 +27,13 @@ const LineTemplate: Story<any> = () => {
 
     return (
         <div style={{height: 300, width: '100%'}}>
-            <ChartKit ref={chartkitRef} id="1" type="yagr" data={line10} />
+            <ChartKit
+                ref={chartkitRef}
+                id="1"
+                type="yagr"
+                data={line10}
+                pluginRef={yagrPluginRef}
+            />
         </div>
     );
 };

diff --git a/src/plugins/yagr/renderer/YagrWidget.tsx b/src/plugins/yagr/renderer/YagrWidget.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
+import {useForkRef} from '@gravity-ui/uikit';
 import YagrComponent, {YagrChartProps, YagrReactRef} from '@gravity-ui/yagr/dist/react';
 import {i18n} from '../../../i18n';
 import type {ChartKitWidgetRef, ChartKitProps} from '../../../types';
@@ -18,11 +19,13 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
     const {
         id,
         data: {data},
+        pluginRef,
         onLoad,
         onRender,
         onChartLoad,
     } = props;
     const yagrRef = React.useRef<YagrReactRef>(null);
+    const handleRef = useForkRef(pluginRef, yagrRef);
 
     if (!data || isEmpty(data)) {
         throw new ChartKitError({
@@ -38,7 +41,7 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
             onLoad?.({...data, widget: chart, widgetRendering: renderTime});
             onRender?.({renderTime});
         },
-        [onLoad, data],
+        [onLoad, onRender, data],
     );
 
     const onWindowResize = React.useCallback(() => {
@@ -49,11 +52,7 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
                 return;
             }
 
-            const root = chart.root;
-            const height = root.offsetHeight;
-            const width = root.offsetWidth;
-            chart.uplot.setSize({width, height});
-            chart.uplot.redraw();
+            chart.reflow();
         }
     }, []);
 
@@ -74,6 +73,10 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
             return;
         }
 
+        if (yagr.config?.tooltip?.virtual) {
+            return;
+        }
+
         const handlers: Record<string, null | ((event: MouseEvent) => void)> = {
             mouseMove: null,
             mouseDown: null,
@@ -109,7 +112,7 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props
 
     return (
         <YagrComponent
-            ref={yagrRef}
+            ref={handleRef}
             id={id}
             config={config}
             debug={debug}

diff --git a/src/plugins/yagr/types.ts b/src/plugins/yagr/types.ts
@@ -1,6 +1,7 @@
 import type {RawSerieData, YagrConfig} from '@gravity-ui/yagr';
 
 export type {default as Yagr} from '@gravity-ui/yagr';
+export type {YagrReactRef} from '@gravity-ui/yagr/dist/react';
 export * from '@gravity-ui/yagr/dist/types';
 
 export type YagrWidgetData = {

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -35,6 +35,8 @@ export type ChartKitOnError = (data: {error: any}) => void;
 export type ChartKitProps<T extends ChartKitType> = {
     type: T;
     data: ChartKitWidget[T]['data'];
+    /** Plugin component's react ref */
+    pluginRef?: ChartKitWidget[T]['pluginRef'];
     id?: string;
     isMobile?: boolean;
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
@@ -48,7 +50,9 @@ export type ChartKitProps<T extends ChartKitType> = {
     renderError?: RenderError;
     /** Used to render user's plugin loader component */
     renderPluginLoader?: () => React.ReactNode;
-} & {[key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key]};
+} & {
+    [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget' | 'pluginRef'>]: ChartKitWidget[T][key];
+};
 
 export type ChartKitPlugin = {
     type: ChartKitType;

diff --git a/src/types/widget.ts b/src/types/widget.ts
@@ -1,20 +1,23 @@
-import type {Yagr, YagrWidgetData} from '../plugins/yagr/types';
+import type {Yagr, YagrReactRef, YagrWidgetData} from '../plugins/yagr/types';
 import type {IndicatorWidgetData} from '../plugins/indicator/types';
 import type {Highcharts, HighchartsWidgetData, StringParams} from '../plugins/highcharts/types';
 
 export interface ChartKitWidget {
     yagr: {
         data: YagrWidgetData;
         widget: Yagr;
+        pluginRef: React.MutableRefObject<YagrReactRef | null>;
     };
     indicator: {
         data: IndicatorWidgetData;
         widget: never;
+        pluginRef: never;
         formatNumber?: <T = any>(value: number, options?: T) => string;
     };
     highcharts: {
         data: HighchartsWidgetData;
         widget: Highcharts.Chart | null;
+        pluginRef: never;
         hoistConfigError?: boolean;
         nonBodyScroll?: boolean;
         splitTooltip?: boolean;