@gravity-ui/chartkit 3.0.0-beta.10 → 3.0.0-beta.15

package/build/components/ChartKit.d.ts

@@ -8,7 +8,6 @@ declare const ChartKitComponent: <T extends keyof import("../types").ChartKitWid
 export declare const ChartKit: <T extends keyof import("../types").ChartKitWidget>(props: {
     type: T;
     data: import("../types").ChartKitWidget[T]["data"];
-    pluginRef?: import("../types").ChartKitWidget[T]["pluginRef"] | undefined;
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../types").ChartKitOnLoadData<T> | undefined) => void) | undefined;
@@ -17,7 +16,7 @@ export declare const ChartKit: <T extends keyof import("../types").ChartKitWidge
     onError?: import("../types").ChartKitOnError | undefined;
     renderError?: import("../types").RenderError | undefined;
     renderPluginLoader?: (() => React.ReactNode) | undefined;
-} & (Omit<import("../types").ChartKitWidget[T], "widget" | "data" | "pluginRef"> extends infer T_1 ? { [key in keyof T_1]: import("../types").ChartKitWidget[T][key]; } : never) & {
+} & (Omit<import("../types").ChartKitWidget[T], "data" | "widget"> extends infer T_1 ? { [key in keyof T_1]: import("../types").ChartKitWidget[T][key]; } : never) & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;
 }) => ReturnType<typeof ChartKitComponent>;
 export {};

package/build/plugins/highcharts/renderer/HighchartsWidget.d.ts

@@ -3,7 +3,6 @@ import type { ChartKitWidgetRef } from '../../../types';
 declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     type: "highcharts";
     data: import("../types").HighchartsWidgetData;
-    pluginRef?: undefined;
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"highcharts"> | undefined) => void) | undefined;

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -4,7 +4,6 @@ import './IndicatorWidget.css';
 declare const IndicatorWidget: React.ForwardRefExoticComponent<{
     type: "indicator";
     data: import("../types").IndicatorWidgetData;
-    pluginRef?: undefined;
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"indicator"> | undefined) => void) | undefined;

package/build/plugins/yagr/__stories__/Yagr.stories.d.ts

@@ -3,3 +3,4 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 export declare const Line: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
 export declare const Updates: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
+export declare const CustomTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/yagr/__stories__/Yagr.stories.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button } from '@gravity-ui/uikit';
 import { settings } from '../../../libs';
 import { YagrPlugin } from '../../../plugins';
 import { ChartKit } from '../../../components/ChartKit';
 import { getNewConfig, line10 } from './mocks/line10';
 import '@gravity-ui/yagr/dist/index.css';
+import placement from '@gravity-ui/yagr/dist/YagrCore/plugins/tooltip/placement';
 export default {
     title: 'Plugins/Yagr',
     component: ChartKit,
@@ -12,14 +13,12 @@ export default {
 const LineTemplate = () => {
     const [shown, setShown] = React.useState(false);
     const chartkitRef = React.useRef();
-    // Example of usage pluginRef property
-    const yagrPluginRef = React.useRef(null);
     if (!shown) {
         settings.set({ plugins: [YagrPlugin] });
         return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
     }
     return (React.createElement("div", { style: { height: 300, width: '100%' } },
-        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: line10, pluginRef: yagrPluginRef })));
+        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: line10 })));
 };
 const UpdatesTemplate = () => {
     const [shown, setShown] = React.useState(false);
@@ -39,5 +38,52 @@ const UpdatesTemplate = () => {
         React.createElement(Button, { onClick: onStartUpdates }, "Start Updates"),
         React.createElement(Button, { onClick: () => setState(getNewConfig()) }, "Once")));
 };
+function Tooltip({ yagr }) {
+    const [x, setX] = useState(null);
+    const [visible, setVisible] = useState(false);
+    const tooltipRef = React.useRef(null);
+    useEffect(() => {
+        var _a, _b, _c;
+        if (!yagr) {
+            return;
+        }
+        const onChange = (_, data) => {
+            var _a, _b;
+            setX((_a = data.data) === null || _a === void 0 ? void 0 : _a.x);
+            setVisible(data.state.visible);
+            if (data.state.visible && tooltipRef.current && ((_b = data.data) === null || _b === void 0 ? void 0 : _b.anchor)) {
+                placement(tooltipRef.current, data.data.anchor, 'right', {
+                    xOffset: 24,
+                    yOffset: 24,
+                });
+            }
+        };
+        (_a = yagr.plugins.tooltip) === null || _a === void 0 ? void 0 : _a.on('render', onChange);
+        (_b = yagr.plugins.tooltip) === null || _b === void 0 ? void 0 : _b.on('show', onChange);
+        (_c = yagr.plugins.tooltip) === null || _c === void 0 ? void 0 : _c.on('hide', onChange);
+    }, [yagr]);
+    if (!visible) {
+        return null;
+    }
+    return (React.createElement("div", { style: {
+            zIndex: 1000,
+            backgroundColor: 'white',
+            padding: 8,
+            pointerEvents: 'none',
+        }, ref: tooltipRef }, x));
+}
+const CustomTooltipImpl = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const [state, setState] = React.useState(line10);
+    if (!shown) {
+        settings.set({ plugins: [YagrPlugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: 300, width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: state, tooltip: (props) => React.createElement(Tooltip, Object.assign({}, props)) }),
+        React.createElement(Button, { onClick: () => setState(getNewConfig()) }, "Change data")));
+};
 export const Line = LineTemplate.bind({});
 export const Updates = UpdatesTemplate.bind({});
+export const CustomTooltip = CustomTooltipImpl.bind({});

package/build/plugins/yagr/__stories__/mocks/line10.d.ts

@@ -30,6 +30,7 @@ export declare const getNewConfig: () => {
             id?: string | undefined;
             scale?: string | undefined;
             focus?: boolean | undefined;
+            title?: string | ((sIdx: number) => string) | undefined;
             show?: boolean | undefined;
             color?: string | undefined;
             spanGaps?: boolean | undefined;
@@ -38,7 +39,6 @@ export declare const getNewConfig: () => {
             precision?: number | undefined;
             snapToValues?: false | import("@gravity-ui/yagr/dist/YagrCore/types").SnapToValue | undefined;
             stackGroup?: number | undefined;
-            title?: string | ((sIdx: number) => string) | undefined;
             transform?: ((val: string | number | null, series: import("@gravity-ui/yagr/dist/YagrCore/types").DataSeries[], idx: number) => number | null) | undefined;
             showInTooltip?: boolean | undefined;
             postProcess?: ((data: (number | null)[], idx: number, y: import("@gravity-ui/yagr/dist/YagrCore").default<import("@gravity-ui/yagr/dist/YagrCore/types").MinimalValidConfig>) => (number | null)[]) | undefined;

package/build/plugins/yagr/renderer/YagrWidget.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { YagrReactRef } from '@gravity-ui/yagr/dist/react';
 import type { ChartKitWidgetRef } from '../../../types';
 import './polyfills';
 import '@gravity-ui/yagr/dist/index.css';
@@ -7,7 +6,6 @@ import './YagrWidget.css';
 declare const YagrWidget: React.ForwardRefExoticComponent<{
     type: "yagr";
     data: import("../types").YagrWidgetData;
-    pluginRef?: React.MutableRefObject<YagrReactRef | null> | undefined;
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"yagr"> | undefined) => void) | undefined;
@@ -16,7 +14,9 @@ declare const YagrWidget: React.ForwardRefExoticComponent<{
     onError?: import("../../../types").ChartKitOnError | undefined;
     renderError?: import("../../../types").RenderError | undefined;
     renderPluginLoader?: (() => React.ReactNode) | undefined;
-} & {} & {
+} & {
+    tooltip?: (<T extends import("../types").CustomTooltipProps = import("../types").CustomTooltipProps>(props: T) => React.ReactNode) | undefined;
+} & {
     id: string;
 } & React.RefAttributes<ChartKitWidgetRef | undefined>>;
 export default YagrWidget;

package/build/plugins/yagr/renderer/YagrWidget.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
-import { useForkRef } from '@gravity-ui/uikit';
 import YagrComponent from '@gravity-ui/yagr/dist/react';
 import { i18n } from '../../../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
@@ -10,27 +9,24 @@ import './polyfills';
 import '@gravity-ui/yagr/dist/index.css';
 import './YagrWidget.css';
 const YagrWidget = React.forwardRef((props, forwardedRef) => {
-    const { id, data: { data }, pluginRef, onLoad, onRender, onChartLoad, } = props;
+    const { id, data: { data }, onLoad, onRender, onChartLoad, tooltip, } = props;
     const yagrRef = React.useRef(null);
-    const handleRef = useForkRef(pluginRef, yagrRef);
+    const [yagr, setYagr] = React.useState();
     if (!data || isEmpty(data)) {
         throw new ChartKitError({
             code: CHARTKIT_ERROR_CODE.NO_DATA,
             message: i18n('error', 'label_no-data'),
         });
     }
-    const { config, debug } = useWidgetData(Object.assign(Object.assign({}, props.data), { id }));
+    const { config, debug } = useWidgetData(props, id);
     const handleChartLoading = React.useCallback((chart, { renderTime }) => {
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(Object.assign(Object.assign({}, data), { widget: chart, widgetRendering: renderTime }));
         onRender === null || onRender === void 0 ? void 0 : onRender({ renderTime });
-    }, [onLoad, onRender, data]);
+        setYagr(chart);
+    }, [onLoad, onRender, data, setYagr]);
     const onWindowResize = React.useCallback(() => {
-        if (yagrRef.current) {
-            const chart = yagrRef.current.yagr();
-            if (!chart) {
-                return;
-            }
-            chart.reflow();
+        if (yagr) {
+            yagr.reflow();
         }
     }, []);
     React.useImperativeHandle(forwardedRef, () => ({
@@ -39,28 +35,24 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         },
     }), [onWindowResize]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
-        const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr();
-        if (!yagr) {
-            return;
-        }
-        if ((_c = (_b = yagr.config) === null || _b === void 0 ? void 0 : _b.tooltip) === null || _c === void 0 ? void 0 : _c.virtual) {
+        var _a, _b, _c, _d, _e;
+        if (!yagr || ((_b = (_a = yagr.config) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.virtual)) {
             return;
         }
         const handlers = {
             mouseMove: null,
             mouseDown: null,
         };
-        (_d = yagr.plugins.tooltip) === null || _d === void 0 ? void 0 : _d.on('render', (tooltip) => {
+        (_c = yagr.plugins.tooltip) === null || _c === void 0 ? void 0 : _c.on('render', (tooltip) => {
             synchronizeTooltipTablesCellsWidth(tooltip);
         });
-        (_e = yagr.plugins.tooltip) === null || _e === void 0 ? void 0 : _e.on('pin', (tooltip, { actions }) => {
+        (_d = yagr.plugins.tooltip) === null || _d === void 0 ? void 0 : _d.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);
         });
-        (_f = yagr.plugins.tooltip) === null || _f === void 0 ? void 0 : _f.on('unpin', () => {
+        (_e = yagr.plugins.tooltip) === null || _e === void 0 ? void 0 : _e.on('unpin', () => {
             if (handlers.mouseMove) {
                 document.removeEventListener('mousemove', handlers.mouseMove);
                 handlers.mouseMove = null;
@@ -70,11 +62,16 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
                 handlers.mouseDown = null;
             }
         });
-    }, []);
+    }, [yagr]);
     React.useLayoutEffect(() => {
-        var _a;
-        onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.yagr() });
-    }, [yagrRef, onChartLoad]);
-    return (React.createElement(YagrComponent, { ref: handleRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
+        onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: yagr });
+    }, [yagr, onChartLoad]);
+    return (React.createElement(React.Fragment, null,
+        tooltip &&
+            yagr &&
+            tooltip({
+                yagr,
+            }),
+        React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading })));
 });
 export default YagrWidget;

package/build/plugins/yagr/renderer/useWidgetData.d.ts

@@ -1,8 +1,6 @@
 import type { YagrChartProps } from '@gravity-ui/yagr/dist/react';
-import type { YagrWidgetData, MinimalValidConfig } from '../types';
-export declare const useWidgetData: (args: YagrWidgetData & {
-    id: string;
-}) => {
+import type { MinimalValidConfig, YagrWidgetProps } from '../types';
+export declare const useWidgetData: (props: YagrWidgetProps, id: string) => {
     config: MinimalValidConfig;
     debug: YagrChartProps['debug'];
 };

package/build/plugins/yagr/renderer/useWidgetData.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import { useThemeValue } from '@gravity-ui/uikit';
 import { shapeYagrConfig } from './utils';
-export const useWidgetData = (args) => {
-    const { id, data, sources, libraryConfig } = args;
+export const useWidgetData = (props, id) => {
+    const { data, sources, libraryConfig } = props.data;
     const theme = useThemeValue();
-    const config = React.useMemo(() => shapeYagrConfig({ data, libraryConfig, theme }), [data, libraryConfig, theme]);
+    const config = React.useMemo(() => shapeYagrConfig({
+        data,
+        libraryConfig,
+        theme,
+        customTooltip: Boolean(props.tooltip),
+    }), [data, libraryConfig, theme, props.tooltip]);
     const debug = React.useMemo(() => {
         const filename = sources
             ? Object.values(sources)

package/build/plugins/yagr/renderer/utils.d.ts

@@ -3,6 +3,7 @@ type ShapeYagrConfigArgs = {
     data: YagrWidgetData['data'];
     libraryConfig: YagrWidgetData['libraryConfig'];
     theme: YagrTheme;
+    customTooltip?: boolean;
 };
 export declare const synchronizeTooltipTablesCellsWidth: (tooltipContainer: HTMLElement) => void;
 export declare const checkFocus: (args: {

package/build/plugins/yagr/renderer/utils.js

@@ -101,6 +101,9 @@ export const shapeYagrConfig = (args) => {
             // "className" property prevent default yagr styles adding
             config.tooltip.className = 'chartkit-yagr-tooltip';
         }
+        if (args.customTooltip) {
+            config.tooltip.virtual = true;
+        }
     }
     config.axes = config.axes || {};
     const xAxis = config.axes[defaults.DEFAULT_X_SCALE];

package/build/plugins/yagr/types.d.ts

@@ -1,7 +1,15 @@
-import type { RawSerieData, YagrConfig } from '@gravity-ui/yagr';
+import type { MinimalValidConfig, RawSerieData, YagrConfig } from '@gravity-ui/yagr';
+import type Yagr from '@gravity-ui/yagr';
+import { ChartKitProps } from 'src/types';
 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 interface CustomTooltipProps {
+    yagr: Yagr<MinimalValidConfig> | undefined;
+}
+export type YagrWidgetProps = ChartKitProps<'yagr'> & {
+    id: string;
+};
 export type YagrWidgetData = {
     data: {
         graphs: RawSerieData[];

package/build/types/index.d.ts

@@ -26,8 +26,6 @@ export type ChartKitOnError = (data: {
 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;
@@ -42,7 +40,7 @@ export type ChartKitProps<T extends ChartKitType> = {
     /** Used to render user's plugin loader component */
     renderPluginLoader?: () => React.ReactNode;
 } & {
-    [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget' | 'pluginRef'>]: ChartKitWidget[T][key];
+    [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key];
 };
 export type ChartKitPlugin = {
     type: ChartKitType;

package/build/types/widget.d.ts

@@ -1,23 +1,21 @@
 /// <reference types="react" />
-import type { Yagr, YagrReactRef, YagrWidgetData } from '../plugins/yagr/types';
+import type { CustomTooltipProps, Yagr, 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>;
+        tooltip?: <T extends CustomTooltipProps = CustomTooltipProps>(props: T) => React.ReactNode;
     };
     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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.15",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.4.0",
+    "@gravity-ui/yagr": "^3.7.2",
     "bem-cn-lite": "^4.1.0",
     "highcharts": "^8.2.2",
     "highcharts-react-official": "^3.0.0",