feat: custom react tooltip support in Yagr type widgets

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.4.0",
+    "@gravity-ui/yagr": "^3.6.1",
     "bem-cn-lite": "^4.1.0",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"
@@ -72,9 +72,9 @@
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^5.0.0",
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "highcharts": "^8.2.2",
-    "highcharts-react-official": "^3.2.0"
+    "highcharts-react-official": "^3.2.0",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
     "test": "jest",

src/plugins/yagr/__stories__/Yagr.stories.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {Meta, Story} from '@storybook/react';
 import {Button} from '@gravity-ui/uikit';
 import {settings} from '../../../libs';
-import {YagrPlugin, YagrReactRef} from '../../../plugins';
+import {CustomTooltipProps, TooltipHandlerData, YagrPlugin} from '../../../plugins';
 import {ChartKit} from '../../../components/ChartKit';
 import type {ChartKitRef} from '../../../types';
 import {getNewConfig, line10} from './mocks/line10';
 
 import '@gravity-ui/yagr/dist/index.css';
+import placement from '@gravity-ui/yagr/dist/YagrCore/plugins/tooltip/placement';
+import {dateTime} from '@gravity-ui/date-utils';
 
 export default {
     title: 'Plugins/Yagr',
@@ -17,8 +19,6 @@ 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]});
@@ -27,13 +27,7 @@ const LineTemplate: Story<any> = () => {
 
     return (
         <div style={{height: 300, width: '100%'}}>
-            <ChartKit
-                ref={chartkitRef}
-                id="1"
-                type="yagr"
-                data={line10}
-                pluginRef={yagrPluginRef}
-            />
+            <ChartKit ref={chartkitRef} id="1" type="yagr" data={line10} />
         </div>
     );
 };
@@ -63,5 +57,78 @@ const UpdatesTemplate: Story<any> = () => {
         </div>
     );
 };
+
+function Tooltip({yagr}: CustomTooltipProps) {
+    const [x, setX] = useState<number | null | undefined>(null);
+    const [visible, setVisible] = useState(false);
+    const tooltipRef = React.useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!yagr) {
+            return;
+        }
+
+        const onChange = (_: unknown, data: TooltipHandlerData) => {
+            setX(data.data?.x);
+            setVisible(data.state.visible);
+
+            if (data.state.visible && tooltipRef.current && data.data?.anchor) {
+                placement(tooltipRef.current, data.data.anchor, 'right', {
+                    xOffset: 24,
+                    yOffset: 24,
+                });
+            }
+        };
+
+        yagr.plugins.tooltip?.on('render', onChange);
+        yagr.plugins.tooltip?.on('show', onChange);
+        yagr.plugins.tooltip?.on('hide', onChange);
+    }, [yagr]);
+
+    if (!visible) {
+        return null;
+    }
+
+    return (
+        <div
+            style={{
+                zIndex: 1000,
+                backgroundColor: 'white',
+                padding: 8,
+                pointerEvents: 'none',
+            }}
+            ref={tooltipRef}
+        >
+            {dateTime({input: x ?? 0}).format('DD MMMM YYYY HH:mm:ss')}
+        </div>
+    );
+}
+
+const CustomTooltipImpl: Story<any> = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+
+    const [state, setState] = React.useState(line10);
+
+    if (!shown) {
+        settings.set({plugins: [YagrPlugin]});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <div style={{height: 300, width: '100%'}}>
+            <ChartKit
+                ref={chartkitRef}
+                id="1"
+                type="yagr"
+                data={state}
+                tooltip={(props: CustomTooltipProps) => <Tooltip {...props} />}
+            />
+            <Button onClick={() => setState(getNewConfig())}>Change data</Button>
+        </div>
+    );
+};
+
 export const Line = LineTemplate.bind({});
 export const Updates = UpdatesTemplate.bind({});
+export const CustomTooltip = CustomTooltipImpl.bind({});

src/plugins/yagr/renderer/YagrWidget.tsx

@@ -1,124 +1,123 @@
 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';
+import type {ChartKitWidgetRef} from '../../../types';
 import {CHARTKIT_ERROR_CODE, ChartKitError} from '../../../libs';
 import {useWidgetData} from './useWidgetData';
 import {checkFocus, detectClickOutside, synchronizeTooltipTablesCellsWidth} from './utils';
+import {Yagr, YagrWidgetProps} from '../types';
 
 import './polyfills';
 
 import '@gravity-ui/yagr/dist/index.css';
 import './YagrWidget.scss';
 
-type Props = ChartKitProps<'yagr'> & {id: string};
-
-const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, Props>((props, forwardedRef) => {
-    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({
-            code: CHARTKIT_ERROR_CODE.NO_DATA,
-            message: i18n('error', 'label_no-data'),
-        });
-    }
-
-    const {config, debug} = useWidgetData({...props.data, id});
-
-    const handleChartLoading: NonNullable<YagrChartProps['onChartLoad']> = React.useCallback(
-        (chart, {renderTime}) => {
-            onLoad?.({...data, widget: chart, widgetRendering: renderTime});
-            onRender?.({renderTime});
-        },
-        [onLoad, onRender, data],
-    );
-
-    const onWindowResize = React.useCallback(() => {
-        if (yagrRef.current) {
-            const chart = yagrRef.current.yagr();
-
-            if (!chart) {
-                return;
-            }
-
-            chart.reflow();
+const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, YagrWidgetProps>(
+    (props, forwardedRef) => {
+        const {
+            id,
+            data: {data},
+            onLoad,
+            onRender,
+            onChartLoad,
+            tooltip,
+        } = props;
+
+        const yagrRef = React.useRef<YagrReactRef>(null);
+        const [yagr, setYagr] = React.useState<Yagr>();
+
+        if (!data || isEmpty(data)) {
+            throw new ChartKitError({
+                code: CHARTKIT_ERROR_CODE.NO_DATA,
+                message: i18n('error', 'label_no-data'),
+            });
         }
-    }, []);
-
-    React.useImperativeHandle(
-        forwardedRef,
-        () => ({
-            reflow() {
-                onWindowResize();
-            },
-        }),
-        [onWindowResize],
-    );
 
-    React.useEffect(() => {
-        const yagr = yagrRef.current?.yagr();
+        const {config, debug} = useWidgetData(props, id);
 
-        if (!yagr) {
-            return;
-        }
-
-        if (yagr.config?.tooltip?.virtual) {
-            return;
-        }
+        const handleChartLoading: NonNullable<YagrChartProps['onChartLoad']> = React.useCallback(
+            (chart, {renderTime}) => {
+                onLoad?.({...data, widget: chart, widgetRendering: renderTime});
+                onRender?.({renderTime});
+                setYagr(chart);
+            },
+            [onLoad, onRender, data, setYagr],
+        );
 
-        const handlers: Record<string, null | ((event: MouseEvent) => void)> = {
-            mouseMove: null,
-            mouseDown: null,
-        };
-
-        yagr.plugins.tooltip?.on('render', (tooltip) => {
-            synchronizeTooltipTablesCellsWidth(tooltip);
-        });
-
-        yagr.plugins.tooltip?.on('pin', (tooltip, {actions}) => {
-            handlers.mouseMove = checkFocus({tooltip, yagr});
-            handlers.mouseDown = detectClickOutside({tooltip, actions, yagr});
-            document.addEventListener('mousemove', handlers.mouseMove);
-            document.addEventListener('mousedown', handlers.mouseDown);
-        });
-
-        yagr.plugins.tooltip?.on('unpin', () => {
-            if (handlers.mouseMove) {
-                document.removeEventListener('mousemove', handlers.mouseMove);
-                handlers.mouseMove = null;
+        const onWindowResize = React.useCallback(() => {
+            if (yagr) {
+                yagr.reflow();
             }
-
-            if (handlers.mouseDown) {
-                document.removeEventListener('mousedown', handlers.mouseDown);
-                handlers.mouseDown = null;
+        }, []);
+
+        React.useImperativeHandle(
+            forwardedRef,
+            () => ({
+                reflow() {
+                    onWindowResize();
+                },
+            }),
+            [onWindowResize],
+        );
+
+        React.useEffect(() => {
+            if (!yagr || yagr.config?.tooltip?.virtual) {
+                return;
             }
-        });
-    }, []);
-
-    React.useLayoutEffect(() => {
-        onChartLoad?.({widget: yagrRef.current?.yagr()});
-    }, [yagrRef, onChartLoad]);
-
-    return (
-        <YagrComponent
-            ref={handleRef}
-            id={id}
-            config={config}
-            debug={debug}
-            onChartLoad={handleChartLoading}
-        />
-    );
-});
+
+            const handlers: Record<string, null | ((event: MouseEvent) => void)> = {
+                mouseMove: null,
+                mouseDown: null,
+            };
+
+            yagr.plugins.tooltip?.on('render', (tooltip) => {
+                synchronizeTooltipTablesCellsWidth(tooltip);
+            });
+
+            yagr.plugins.tooltip?.on('pin', (tooltip, {actions}) => {
+                handlers.mouseMove = checkFocus({tooltip, yagr});
+                handlers.mouseDown = detectClickOutside({tooltip, actions, yagr});
+                document.addEventListener('mousemove', handlers.mouseMove);
+                document.addEventListener('mousedown', handlers.mouseDown);
+            });
+
+            yagr.plugins.tooltip?.on('unpin', () => {
+                if (handlers.mouseMove) {
+                    document.removeEventListener('mousemove', handlers.mouseMove);
+                    handlers.mouseMove = null;
+                }
+
+                if (handlers.mouseDown) {
+                    document.removeEventListener('mousedown', handlers.mouseDown);
+                    handlers.mouseDown = null;
+                }
+            });
+        }, [yagr]);
+
+        React.useLayoutEffect(() => {
+            onChartLoad?.({widget: yagr});
+        }, [yagr, onChartLoad]);
+
+        return (
+            <React.Fragment>
+                {tooltip &&
+                    yagr &&
+                    tooltip({
+                        yagr,
+                    })}
+                <YagrComponent
+                    ref={yagrRef}
+                    id={id}
+                    config={config}
+                    debug={debug}
+                    onChartLoad={handleChartLoading}
+                />
+            </React.Fragment>
+        );
+    },
+);
 
 export default YagrWidget;