@gravity-ui/chartkit 3.0.0-beta.11 → 3.0.0-beta.16

package/build/components/ChartKit.css

@@ -8,24 +8,24 @@
 }
 
 .chartkit-theme_common {
-  --highcarts-navigator-border: var(--g-color-line-generic);
-  --highcarts-navigator-track: var(--g-color-base-generic);
-  --highcarts-navigator-body: var(--g-color-scroll-handle);
-  --highcharts-series-border: var(--g-color-base-background);
-  --highcharts-grid-line: var(--g-color-line-generic);
-  --highcharts-axis-line: var(--g-color-line-generic);
-  --highcharts-tick: var(--g-color-line-generic);
-  --highcharts-title: var(--g-color-text-primary);
-  --highcharts-axis-labels: var(--g-color-text-secondary);
-  --highcharts-data-labels: var(--g-color-text-complementary);
-  --highcharts-plot-line-label: var(--g-color-text-complementary);
-  --highcharts-legend-item: var(--g-color-text-secondary);
-  --highcharts-legend-item-hover: var(--g-color-text-primary);
-  --highcharts-legend-item-hidden: var(--g-color-text-hint);
-  --highcharts-floating-bg: var(--g-color-infographics-tooltip-bg);
-  --highcharts-tooltip-text: var(--g-color-text-primary);
+  --highcarts-navigator-border: var(--yc-color-line-generic);
+  --highcarts-navigator-track: var(--yc-color-base-generic);
+  --highcarts-navigator-body: var(--yc-color-scroll-handle);
+  --highcharts-series-border: var(--yc-color-base-background);
+  --highcharts-grid-line: var(--yc-color-line-generic);
+  --highcharts-axis-line: var(--yc-color-line-generic);
+  --highcharts-tick: var(--yc-color-line-generic);
+  --highcharts-title: var(--yc-color-text-primary);
+  --highcharts-axis-labels: var(--yc-color-text-secondary);
+  --highcharts-data-labels: var(--yc-color-text-complementary);
+  --highcharts-plot-line-label: var(--yc-color-text-complementary);
+  --highcharts-legend-item: var(--yc-color-text-secondary);
+  --highcharts-legend-item-hover: var(--yc-color-text-primary);
+  --highcharts-legend-item-hidden: var(--yc-color-text-hint);
+  --highcharts-floating-bg: var(--yc-color-infographics-tooltip-bg);
+  --highcharts-tooltip-text: var(--yc-color-text-primary);
   --highcharts-tooltip-bg: var(--highcharts-floating-bg);
-  --highcharts-tooltip-alternate-bg: var(--g-color-base-generic);
-  --highcharts-tooltip-text-complementary: var(--g-color-text-complementary);
-  --highcharts-holiday-band: var(--g-color-base-generic);
+  --highcharts-tooltip-alternate-bg: var(--yc-color-base-generic);
+  --highcharts-tooltip-text-complementary: var(--yc-color-text-complementary);
+  --highcharts-holiday-band: var(--yc-color-base-generic);
 }

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/mocks/complex.js

@@ -244,7 +244,7 @@ export const data = {
                         .rect(rect.x, rect.y, rect.width, rect.height)
                         .addClass('highcharts-axis-grid-divider')
                         .attr({
-                        fill: 'var(--g-color-base-background)',
+                        fill: 'var(--yc-color-base-background)',
                         zIndex: 8,
                     })
                         .add();

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/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.css

@@ -1,5 +1,5 @@
 .styled-split-pane__pane-resizer {
-  background: var(--g-color-base-generic);
+  background: var(--yc-color-base-generic);
   z-index: 1;
   box-sizing: border-box;
   position: relative;

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -159,12 +159,12 @@ export function buildLegend(options) {
             }
         },
         navigation: {
-            activeColor: 'var(--g-color-base-brand)',
-            inactiveColor: 'var(--g-color-base-generic-accent-disabled)',
-            style: { color: 'var(--g-color-text-primary)' },
+            activeColor: 'var(--yc-color-base-special)',
+            inactiveColor: 'var(--yc-color-base-generic-accent-disabled)',
+            style: { color: 'var(--yc-color-text-primary)' },
         },
         title: {
-            style: { color: 'var(--g-color-text-secondary)' },
+            style: { color: 'var(--yc-color-text-secondary)' },
         },
     };
     if (options.outsideLegend) {

package/build/plugins/highcharts/renderer/helpers/config/options.js

@@ -163,7 +163,7 @@ const options = {
         },
         title: {
             style: {
-                color: 'var(--g-color-text-secondary)',
+                color: 'var(--yc-color-text-secondary)',
             },
         },
     },

package/build/plugins/highcharts/renderer/helpers/graph.css

@@ -8,12 +8,12 @@
 }
 
 .chartkit-graph .highcharts-legend .highcharts-coloraxis-labels text {
-  fill: var(--g-color-text-secondary) !important;
-  color: var(--g-color-text-secondary) !important;
+  fill: var(--yc-color-text-secondary) !important;
+  color: var(--yc-color-text-secondary) !important;
 }
 
 .chartkit-graph .highcharts-legend .highcharts-coloraxis-grid path {
-  stroke: var(--g-color-base-background);
+  stroke: var(--yc-color-base-background);
 }
 
 .chartkit-tooltip {
@@ -31,7 +31,7 @@
   border: none;
   border-radius: 0;
   box-shadow: none;
-  border-bottom: 1px solid var(--g-color-line-generic);
+  border-bottom: 1px solid var(--yc-color-line-generic);
 }
 
 .chartkit-tooltip_yandex-map {

package/build/plugins/highcharts/renderer/helpers/tooltip/tooltip.css

@@ -4,19 +4,19 @@
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 ._tooltip {
@@ -347,7 +347,7 @@
 }
 
 ._tooltip-right__traf-div_for-split-tooltip {
-  color: var(--g-color-text-secondary);
+  color: var(--yc-color-text-secondary);
   padding-left: 8px;
   border-top: none;
   border-left: 2px solid;

package/build/plugins/indicator/renderer/IndicatorWidget.css

@@ -49,7 +49,7 @@
 .chartkit-indicator__item-title {
   font-weight: 500;
   line-height: 1.2;
-  color: var(--g-color-text-primary);
+  color: var(--yc-color-text-primary);
   font-size: 16px;
   padding-bottom: 0.125em;
 }

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.css

@@ -1,4 +1,4 @@
 .yagr-tooltip {
-  background-color: var(--g-color-infographics-tooltip-bg);
+  background-color: var(--yc-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
 }

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/tooltip/tooltip.css

@@ -4,26 +4,26 @@
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
-  padding-right: calc(18px + var(--g-scrollbar-width, 15px));
+  padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
 }
 
 ._tooltip {
   border-radius: 5px;
-  background: var(--g-color-infographics-tooltip-bg);
-  background-color: var(--g-color-infographics-tooltip-bg);
-  color: var(--g-color-text-primary);
+  background: var(--yc-color-infographics-tooltip-bg);
+  background-color: var(--yc-color-infographics-tooltip-bg);
+  color: var(--yc-color-text-primary);
   font-size: 12px;
   overflow: hidden;
   box-sizing: border-box;
@@ -150,7 +150,7 @@
 ._tooltip-rows__table thead._tooltip-header tr:not(._tooltip-fake-row):first-child td {
   padding-top: 6px;
   padding-bottom: 6px;
-  border-bottom: 1px solid var(--g-color-line-generic);
+  border-bottom: 1px solid var(--yc-color-line-generic);
 }
 
 ._tooltip-rows__table tbody {
@@ -169,11 +169,11 @@
 }
 
 ._tooltip-rows__table tbody._tooltip-list ._tooltip-row-dark-bg {
-  background-color: var(--g-color-base-generic);
+  background-color: var(--yc-color-base-generic);
 }
 
 ._tooltip-rows__table tbody ._hidden-rows-sum._hidden-rows-sum-dark-bg {
-  background-color: var(--g-color-base-generic);
+  background-color: var(--yc-color-base-generic);
 }
 
 ._tooltip-rows__table tbody ._hidden-rows-sum td {
@@ -281,9 +281,9 @@
 
 ._tooltip-rows__summ-td {
   padding: 6px 0 6px 3px;
-  color: var(--g-color-text-complementary);
+  color: var(--yc-color-text-complementary);
   font-size: 12px;
-  border-top: 1px solid var(--g-color-line-generic);
+  border-top: 1px solid var(--yc-color-line-generic);
 }
 
 ._tooltip-rows__summ-td-value {
@@ -308,7 +308,7 @@
 ._tooltip-right__td {
   vertical-align: top;
   opacity: 0.9;
-  border-left: 1px solid var(--g-color-line-generic);
+  border-left: 1px solid var(--yc-color-line-generic);
   white-space: normal;
   font-size: 8pt;
   position: relative;
@@ -348,7 +348,7 @@
 }
 
 ._tooltip-right__traf-div_for-split-tooltip {
-  color: var(--g-color-text-secondary);
+  color: var(--yc-color-text-secondary);
   padding-left: 8px;
   border-top: none;
   border-left: 2px solid;

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.11",
+  "version": "3.0.0-beta.16",
   "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.4",
     "bem-cn-lite": "^4.1.0",
     "highcharts": "^8.2.2",
     "highcharts-react-official": "^3.0.0",
@@ -30,7 +30,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.0.0-beta.1",
+    "@gravity-ui/uikit": "^4.2.0",
     "@storybook/addon-essentials": "^7.0.26",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/cli": "^7.0.26",
@@ -71,7 +71,7 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^5.0.0-beta.1",
+    "@gravity-ui/uikit": "^4.0.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {