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

package/build/plugins/highcharts/renderer/helpers/config/utils/numberFormat.d.ts

@@ -1,2 +1,2 @@
 import type { FormatNumberOptions } from '../../../../../shared';
-export declare const numberFormat: (val: number, round?: number | undefined, options?: FormatNumberOptions) => string | null;
+export declare const numberFormat: (val: number, round?: number, options?: FormatNumberOptions) => string | null;

package/build/plugins/highcharts/renderer/helpers/config/utils/setNavigatorDefaultPeriod.d.ts

@@ -1,10 +1,10 @@
 import type { Highcharts } from '../../../../types';
 import type { NavigatorPeriod } from '../types';
-declare type SetNavigatorDefaultPeriod = {
+type SetNavigatorDefaultPeriod = {
     params: Record<string, any>;
     periodSettings: NavigatorPeriod;
 };
-declare type NavigatorPeriodInMS = {
+type NavigatorPeriodInMS = {
     minRange: number;
     range: number;
 };

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

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import { dateTime } from '@gravity-ui/date-utils';
 import { getXAxisThresholdValue } from './getXAxisThresholdValue';
 const HOUR_IN_MS = 1000 * 60 * 60;
 const DAY_IN_MS = HOUR_IN_MS * 24;
@@ -18,7 +18,7 @@ export const getDefaultPeriodInMS = (periodSettings, series) => {
     if (maxXValue === null) {
         return null;
     }
-    const minXValue = moment(maxXValue).subtract(value, period);
+    const minXValue = dateTime({ input: maxXValue }).subtract(value, period);
     const range = maxXValue - minXValue.valueOf();
     return {
         minRange,

package/build/plugins/highcharts/renderer/helpers/graph.d.ts

@@ -2,7 +2,7 @@ import type { ChartKitHolidays } from '../../../../types';
 import type { Highcharts, HighchartsWidgetData, HighchartsComment, ExtendedHChart } from '../../types';
 import type { ConfigOptions } from './types';
 import './graph.css';
-declare type GetGraphArgs = {
+type GetGraphArgs = {
     options: ConfigOptions;
     data: HighchartsWidgetData['data'];
     comments?: HighchartsComment[];

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

@@ -14,7 +14,7 @@ function getGraph({ options, data, comments, isMobile, holidays }) {
     return {
         config: Object.assign({ _externalComments: (!options.disableExternalComments && comments) || [], _internalComments: data.comments || [] }, prepareConfig(data, options, isMobile, holidays)),
         callback: (chart) => {
-            var _a, _b, _c;
+            var _a, _b;
             if (!chart) {
                 console.error('CHARTKIT_NO_CHART_CALLBACK');
                 return;
@@ -63,7 +63,7 @@ function getGraph({ options, data, comments, isMobile, holidays }) {
                         xAxis !== chart.navigator.xAxis) || ((_a = chart.navigator) === null || _a === void 0 ? void 0 : _a.xAxis);
                     extmin = Math.max((_b = chart.xAxis[0]) === null || _b === void 0 ? void 0 : _b.dataMin, extmin);
                     extmax = Math.min(chart.xAxis[0].dataMax, extmax);
-                    (_c = xAxis) === null || _c === void 0 ? void 0 : _c.setExtremes(extmin, extmax, false, false);
+                    xAxis === null || xAxis === void 0 ? void 0 : xAxis.setExtremes(extmin, extmax, false, false);
                     needRedraw = true;
                 }
             }

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

@@ -2,3 +2,4 @@ export function initHighcharts({ isMobile }: {
     isMobile: any;
 }): void;
 export function initHighchartsMap(): void;
+export function initHighchartsLangOptions(): void;

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

@@ -113,7 +113,7 @@ Highcharts.setOptions({
         },
     },
 });
-function initHighcharts({ isMobile }) {
+function initHighchartsLangOptions() {
     Highcharts.setOptions({
         lang: {
             resetZoom: '⟲',
@@ -159,6 +159,9 @@ function initHighcharts({ isMobile }) {
             thousandsSep: i18n('highcharts', 'thousands-sep'),
         },
     });
+}
+function initHighcharts({ isMobile }) {
+    initHighchartsLangOptions();
     // https://github.com/highcharts/highcharts/issues/11494
     (function (H) {
         H.wrap(H.Tooltip.prototype, 'getLabel', function (proceed, ...rest) {
@@ -347,4 +350,4 @@ function initHighchartsMap() {
         }
     });
 }
-export { initHighcharts, initHighchartsMap };
+export { initHighcharts, initHighchartsMap, initHighchartsLangOptions };

package/build/plugins/highcharts/renderer/helpers/prepare-data.js

@@ -1,5 +1,5 @@
-import moment from 'moment';
 import lodashMin from 'lodash/min';
+import { dateTime } from '@gravity-ui/date-utils';
 import { i18n } from '../../../../i18n';
 import { ChartKitError, CHARTKIT_ERROR_CODE } from '../../../../libs';
 import { DEFAULT_LINES_LIMIT } from './constants';
@@ -70,9 +70,9 @@ function removeHolidays(data, options, holidays) {
         graphsData[i] = [];
     });
     data.categories_ms.forEach((ts, i) => {
-        const datetime = moment(ts).format('YYYYMMDD');
+        const key = dateTime({ input: ts }).format('YYYYMMDD');
         const region = (options.region && options.region.toLowerCase()) || 'tot';
-        const holiday = holidays.holiday[region][datetime] || holidays.weekend[region][datetime];
+        const holiday = holidays.holiday[region][key] || holidays.weekend[region][key];
         if (!holiday) {
             timeline.push(ts);
             data.graphs.forEach((graph, j) => graphsData[j].push(graph.data[i]));

package/build/plugins/highcharts/renderer/helpers/tooltip/helpers.d.ts

@@ -1,3 +1 @@
-import type { TooltipData, TooltipLine } from './types';
 export declare const escapeHTML: (html?: string) => string;
-export declare const getSortedLines: (lines: TooltipLine[], sort?: TooltipData['sort']) => TooltipLine[];

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

@@ -1,14 +1,5 @@
-import orderBy from 'lodash/orderBy';
 export const escapeHTML = (html = '') => {
     const elem = document.createElement('span');
     elem.innerText = html;
     return elem.innerHTML;
 };
-export const getSortedLines = (lines, sort = {}) => {
-    // set eneabled to true after https://github.com/gravity-ui/chartkit/issues/171
-    const { enabled = false, order = 'desc', iteratee = 'originalValue' } = sort;
-    if (!enabled) {
-        return [...lines];
-    }
-    return orderBy(lines, iteratee, order);
-};

package/build/plugins/highcharts/renderer/helpers/tooltip/index.d.ts

@@ -9,5 +9,5 @@ export declare const TOOLTIP_ROW_CLASS_NAME = "_tooltip-row";
 export declare const TOOLTIP_HEADER_CLASS_NAME = "_tooltip-header";
 export declare const TOOLTIP_LIST_CLASS_NAME = "_tooltip-list";
 export declare const TOOLTIP_FOOTER_CLASS_NAME = "_tooltip-footer";
-export declare const formatTooltip: (data: TooltipData, tooltip: Highcharts.Tooltip, isMobile?: boolean | undefined) => string;
+export declare const formatTooltip: (data: TooltipData, tooltip: Highcharts.Tooltip, isMobile?: boolean) => string;
 export default formatTooltip;

package/build/plugins/highcharts/renderer/helpers/tooltip/index.js

@@ -2,7 +2,7 @@
 import _escape from 'lodash/escape';
 import { i18n } from '../../../../../i18n';
 import { renderShapeIcon } from './render-shape-icon';
-import { escapeHTML, getSortedLines } from './helpers';
+import { escapeHTML } from './helpers';
 import './tooltip.css';
 export const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
 export const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
@@ -129,9 +129,8 @@ export const formatTooltip = (data, tooltip, isMobile) => {
     var _a, _b, _c;
     const { splitTooltip, activeRowAlwaysFirstInTooltip } = data;
     const lines = data.lines.slice(0, (tooltip.lastVisibleRowIndex || data.lines.length) + 1);
-    const sortedLines = getSortedLines(lines, data.sort);
-    const selectedLineIndex = sortedLines.findIndex(({ selectedSeries }) => selectedSeries);
-    const selectedLine = sortedLines[selectedLineIndex];
+    const selectedLineIndex = lines.findIndex(({ selectedSeries }) => selectedSeries);
+    const selectedLine = lines[selectedLineIndex];
     const withShapes = lines.every((line) => line.seriesShape);
     const unsafe = data.unsafe;
     const tooltipHeaderRaw = (_a = data.tooltipHeader) === null || _a === void 0 ? void 0 : _a.trim();
@@ -213,7 +212,7 @@ export const formatTooltip = (data, tooltip, isMobile) => {
             .join('')}</tr>
                             </thead>`}
                     <tbody class="${TOOLTIP_LIST_CLASS_NAME}">
-                        ${sortedLines
+                        ${lines
         .map((line, index) => renderRow(line, getRowRenderConfig(index)))
         .join('')}
                     </tbody>

package/build/plugins/highcharts/renderer/helpers/tooltip/render-shape-icon/types.d.ts

@@ -1,4 +1,4 @@
-export declare type CommonIconProps = {
+export type CommonIconProps = {
     width: string;
     height: string;
 };

package/build/plugins/highcharts/renderer/helpers/tooltip/types.d.ts

@@ -1,6 +1,6 @@
 import type { FormatNumberOptions } from '../../../../shared';
 import type { LineShapeType } from './constants';
-export declare type TooltipData = {
+export type TooltipData = {
     /** Tooltip lines data */
     lines: Array<TooltipLine>;
     /** Tooltip comments */
@@ -38,17 +38,8 @@ export declare type TooltipData = {
     /** Sum of the values of the hidden ("not fit" in the tooltip) rows */
     hiddenRowsSum?: number | string;
     unsafe?: boolean;
-    /** Used to manage tooltip lines sorting */
-    sort?: {
-        /** Enable tooltip lines sorting. `false` by default */
-        enabled?: boolean;
-        /** The sort orders. `'desc'` by default */
-        order?: 'asc' | 'desc';
-        /** The iteratees to sort by key(s) from `TooltipLine`. `'originalValue'` by default */
-        iteratee?: keyof TooltipLine | keyof TooltipLine[] | ((line: TooltipLine) => TooltipLine[keyof TooltipLine] | TooltipLine[keyof TooltipLine][]);
-    };
 };
-export declare type TooltipLine = {
+export type TooltipLine = {
     /** Color displayed in a separate cell */
     seriesColor: string;
     /** Series name */
@@ -84,7 +75,7 @@ export declare type TooltipLine = {
     chartKitShowRankDelimiter?: FormatNumberOptions['showRankDelimiter'];
     chartKitUnit?: FormatNumberOptions['unit'];
 };
-export declare type RowRenderingConfig = {
+export type RowRenderingConfig = {
     cellsRenderers: Array<(line: TooltipLine) => string>;
     isSelectedLine?: boolean;
     allowComment?: boolean;

package/build/plugins/highcharts/renderer/helpers/types.d.ts

@@ -1,6 +1,6 @@
 import type { FormatNumberOptions } from '../../../shared';
 import type { DrillDownConfig, HighchartsWidgetData } from '../../types';
-export declare type ConfigOptions = {
+export type ConfigOptions = {
     highcharts: HighchartsWidgetData['libraryConfig'];
     nonBodyScroll?: boolean;
     splitTooltip?: boolean;
@@ -10,7 +10,7 @@ export declare type ConfigOptions = {
         max?: number;
     };
 } & HighchartsWidgetData['config'];
-export declare type ChartKitFormatNumberSettings = {
+export type ChartKitFormatNumberSettings = {
     chartKitFormatting?: boolean;
     chartKitFormat?: FormatNumberOptions['format'];
     chartKitPostfix?: FormatNumberOptions['postfix'];

package/build/plugins/highcharts/types/comments.d.ts

@@ -47,5 +47,5 @@ interface CommentFlagX extends CommentBase {
         shape: string;
     };
 }
-export declare type HighchartsComment = CommentDotXY | CommentBandX | CommentLineX | CommentFlagX;
+export type HighchartsComment = CommentDotXY | CommentBandX | CommentLineX | CommentFlagX;
 export {};

package/build/plugins/highcharts/types/misc.d.ts

@@ -1,14 +1,14 @@
 import type { HighchartsComment } from './comments';
-export declare type StringParams = Record<string, string | string[]>;
-export declare type DrillDownConfig = {
+export type StringParams = Record<string, string | string[]>;
+export type DrillDownConfig = {
     breadcrumbs: string[];
 };
-export declare type XAxisItem = Highcharts.Axis & {
+export type XAxisItem = Highcharts.Axis & {
     dataMin: number;
     dataMax: number;
     setExtremes: (...args: any[]) => void;
 };
-export declare type ExtendedHChart = Highcharts.Chart & {
+export type ExtendedHChart = Highcharts.Chart & {
     userOptions: Highcharts.Options & {
         _internalComments: HighchartsComment[];
         _externalComments: HighchartsComment[];

package/build/plugins/highcharts/types/widget.d.ts

@@ -2,12 +2,12 @@ import type { Highcharts } from './lib';
 import type { HighchartsComment } from './comments';
 import type { DrillDownConfig, StringParams } from './misc';
 import type { TooltipData, TooltipLine } from '../renderer/helpers/tooltip/types';
-export declare type CkHighchartsSeriesOptionsType = Highcharts.SeriesOptionsType & {
+export type CkHighchartsSeriesOptionsType = Highcharts.SeriesOptionsType & {
     title?: string;
     sname?: string;
     fname?: string;
 };
-export declare type HighchartsManageTooltipConfigOptions = {
+export type HighchartsManageTooltipConfigOptions = {
     count: number;
     lines: TooltipLine[];
     shared: boolean;
@@ -26,8 +26,16 @@ export declare type HighchartsManageTooltipConfigOptions = {
     withPercent?: boolean;
     xComments?: TooltipData['xComments'];
 };
-export declare type HighchartsManageTooltipConfig = (options: HighchartsManageTooltipConfigOptions, chart: Highcharts.Chart) => HighchartsManageTooltipConfigOptions;
-export declare type HighchartsWidgetData = {
+export type HighchartsManageTooltipConfig = (options: HighchartsManageTooltipConfigOptions, chart: Highcharts.Chart) => HighchartsManageTooltipConfigOptions;
+export type HighchartsSortData = {
+    /** Enable tooltip lines sorting. `false` by default */
+    enabled?: boolean;
+    /** The sort orders. `'desc'` by default */
+    order?: 'asc' | 'desc';
+    /** The iteratees to sort by key(s) from `TooltipLine`. `'originalValue'` by default */
+    iteratee?: keyof TooltipLine | keyof TooltipLine[] | ((line: TooltipLine) => TooltipLine[keyof TooltipLine] | TooltipLine[keyof TooltipLine][]);
+};
+export type HighchartsWidgetData = {
     data: (CkHighchartsSeriesOptionsType[] | {
         graphs: CkHighchartsSeriesOptionsType[];
         categories_ms: number[];
@@ -95,7 +103,7 @@ export declare type HighchartsWidgetData = {
                 metaKey?: boolean;
             };
             /** Used to manage tooltip lines sorting */
-            sort?: TooltipData['sort'];
+            sort?: HighchartsSortData;
         };
         /**
          * Used to modify tooltip data

package/build/plugins/indicator/__stories__/Indicator.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
-export declare const Showcase: Story<import("@storybook/react").Args>;
+import { Meta } from '@storybook/react';
+export declare const Showcase: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 declare const meta: Meta;
 export default meta;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { ChartKitProps } from '../../../types';
 import type { IndicatorWidgetDataItem } from '../types';
 export declare const IndicatorItem: (props: IndicatorWidgetDataItem & {
     defaultColor?: string;
     formatNumber?: ChartKitProps<'indicator'>['formatNumber'];
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -4,13 +4,15 @@ 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;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"indicator">) => void) | undefined;
-    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | undefined;
 } & {
     formatNumber?: (<T = any>(value: number, options?: T | undefined) => string) | undefined;
 } & React.RefAttributes<ChartKitWidgetRef | undefined>>;

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

@@ -1,4 +1,4 @@
-export declare type IndicatorWidgetDataItem = {
+export type IndicatorWidgetDataItem = {
     content: {
         current: {
             value: string | number;
@@ -9,7 +9,7 @@ export declare type IndicatorWidgetDataItem = {
     title?: string;
     nowrap?: boolean;
 };
-export declare type IndicatorWidgetData = {
+export type IndicatorWidgetData = {
     data?: IndicatorWidgetDataItem[];
     defaultColor?: string;
 };

package/build/plugins/shared/format-number/i18n/i18n.d.ts

@@ -1,5 +1,5 @@
 import { I18N } from '@gravity-ui/i18n';
-declare type KeysetData = Parameters<InstanceType<typeof I18N>['registerKeysets']>[1];
+type KeysetData = Parameters<InstanceType<typeof I18N>['registerKeysets']>[1];
 declare const i18nInstance: I18N;
 declare const makeInstance: (keysetName: string, keysetsData: Record<string, KeysetData>) => (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export { i18nInstance, makeInstance };

package/build/plugins/shared/format-number/types.d.ts

@@ -1,11 +1,11 @@
-export declare type FormatOptions = {
+export type FormatOptions = {
     precision?: number | 'auto';
     unitRate?: number;
     showRankDelimiter?: boolean;
     lang?: string;
     labelMode?: string;
 };
-export declare type FormatNumberOptions = FormatOptions & {
+export type FormatNumberOptions = FormatOptions & {
     format?: 'number' | 'percent';
     multiplier?: number;
     prefix?: string;

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

@@ -1,6 +1,5 @@
-import { Meta, Story } from '@storybook/react';
 import '@gravity-ui/yagr/dist/index.css';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Line: Story<any>;
-export declare const Updates: Story<any>;
+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>;

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

@@ -12,12 +12,14 @@ 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 })));
+        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "yagr", data: line10, pluginRef: yagrPluginRef })));
 };
 const UpdatesTemplate = () => {
     const [shown, setShown] = React.useState(false);

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

@@ -41,6 +41,7 @@ export declare const getNewConfig: () => {
             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;
             type?: import("@gravity-ui/yagr/dist/YagrCore/types").ChartType | undefined;
         }[];
     };

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

@@ -1,4 +1,5 @@
 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';
@@ -6,13 +7,15 @@ 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;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"yagr">) => void) | undefined;
-    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | undefined;
 } & {} & {
     id: string;
 } & React.RefAttributes<ChartKitWidgetRef | undefined>>;

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

@@ -1,5 +1,6 @@
 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';
@@ -9,8 +10,9 @@ import './polyfills';
 import '@gravity-ui/yagr/dist/index.css';
 import './YagrWidget.css';
 const YagrWidget = React.forwardRef((props, forwardedRef) => {
-    const { id, data: { data }, onLoad, onRender, onChartLoad, } = props;
+    const { id, data: { data }, pluginRef, onLoad, onRender, onChartLoad, } = props;
     const yagrRef = React.useRef(null);
+    const handleRef = useForkRef(pluginRef, yagrRef);
     if (!data || isEmpty(data)) {
         throw new ChartKitError({
             code: CHARTKIT_ERROR_CODE.NO_DATA,
@@ -21,18 +23,14 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
     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, data]);
+    }, [onLoad, onRender, data]);
     const onWindowResize = React.useCallback(() => {
         if (yagrRef.current) {
             const chart = yagrRef.current.yagr();
             if (!chart) {
                 return;
             }
-            const root = chart.root;
-            const height = root.offsetHeight;
-            const width = root.offsetWidth;
-            chart.uplot.setSize({ width, height });
-            chart.uplot.redraw();
+            chart.reflow();
         }
     }, []);
     React.useImperativeHandle(forwardedRef, () => ({
@@ -41,25 +39,28 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         },
     }), [onWindowResize]);
     React.useEffect(() => {
-        var _a, _b, _c, _d;
+        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) {
+            return;
+        }
         const handlers = {
             mouseMove: null,
             mouseDown: null,
         };
-        (_b = yagr.plugins.tooltip) === null || _b === void 0 ? void 0 : _b.on('render', (tooltip) => {
+        (_d = yagr.plugins.tooltip) === null || _d === void 0 ? void 0 : _d.on('render', (tooltip) => {
             synchronizeTooltipTablesCellsWidth(tooltip);
         });
-        (_c = yagr.plugins.tooltip) === null || _c === void 0 ? void 0 : _c.on('pin', (tooltip, { actions }) => {
+        (_e = yagr.plugins.tooltip) === null || _e === void 0 ? void 0 : _e.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);
         });
-        (_d = yagr.plugins.tooltip) === null || _d === void 0 ? void 0 : _d.on('unpin', () => {
+        (_f = yagr.plugins.tooltip) === null || _f === void 0 ? void 0 : _f.on('unpin', () => {
             if (handlers.mouseMove) {
                 document.removeEventListener('mousemove', handlers.mouseMove);
                 handlers.mouseMove = null;
@@ -74,6 +75,6 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
         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: yagrRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
+    return (React.createElement(YagrComponent, { ref: handleRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
 });
 export default YagrWidget;

package/build/plugins/yagr/renderer/tooltip/renderTooltip.js

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import { dateTime } from '@gravity-ui/date-utils';
 import { formatTooltip } from './tooltip';
 const calcOption = (d) => {
     return typeof d === 'object' && d !== null
@@ -39,7 +39,7 @@ export const renderTooltip = (data) => {
         : undefined;
     const tooltipFormatOptions = {
         activeRowAlwaysFirstInTooltip: rows.length > 1,
-        tooltipHeader: moment(x / timeMultiplier).format('DD MMMM YYYY HH:mm:ss'),
+        tooltipHeader: dateTime({ input: x / timeMultiplier }).format('DD MMMM YYYY HH:mm:ss'),
         shared: true,
         lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: row.color, selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
         withPercent: calcOption(opts.percent),

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

@@ -1,4 +1,4 @@
-export declare type TooltipData = {
+export type TooltipData = {
     /** Tooltip lines data */
     lines: Array<TooltipLine>;
     /** Tooltip comments */
@@ -35,10 +35,10 @@ export declare type TooltipData = {
     /** Sum of the values of the hidden ("not fit" in the tooltip) rows */
     hiddenRowsSum?: number | string;
 };
-export declare type TooltipExtraData = {
+export type TooltipExtraData = {
     lastVisibleRowIndex: number;
 };
-export declare type TooltipLine = {
+export type TooltipLine = {
     /** Color displayed in a separate cell */
     seriesColor: string;
     /** Series name */
@@ -64,7 +64,7 @@ export declare type TooltipLine = {
     replaceCellAt?: Record<number, (line: TooltipLine) => string>;
     insertCellAt?: Record<number, (line: TooltipLine) => string>;
 };
-export declare type RowRenderingConfig = {
+export type RowRenderingConfig = {
     cellsRenderers: Array<(line: TooltipLine) => string>;
     isSelectedLine?: boolean;
     allowComment?: boolean;

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

@@ -1,5 +1,5 @@
 import type { Yagr, YagrWidgetData, YagrTheme, MinimalValidConfig } from '../types';
-declare type ShapeYagrConfigArgs = {
+type ShapeYagrConfigArgs = {
     data: YagrWidgetData['data'];
     libraryConfig: YagrWidgetData['libraryConfig'];
     theme: YagrTheme;

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

@@ -1,5 +1,5 @@
-import moment from 'moment';
 import merge from 'lodash/merge';
+import { dateTime } from '@gravity-ui/date-utils';
 import { defaults } from '@gravity-ui/yagr';
 import { settings } from '../../../libs';
 import { renderTooltip } from './tooltip';
@@ -75,8 +75,8 @@ export const detectClickOutside = (args) => (event) => {
 const getXAxisFormatter = (msm = 1) => (_, ticks) => {
     const range = (ticks[ticks.length - 1] - ticks[0]) / msm;
     return ticks.map((rawValue) => {
-        const d = moment(rawValue / msm);
-        if (d.hour() === 0 && d.minutes() === 0 && d.seconds() === 0) {
+        const d = dateTime({ input: rawValue / msm });
+        if (d.hour() === 0 && d.minute() === 0 && d.second() === 0) {
             return d.format('DD.MM.YY');
         }
         return d.format(range < 300 ? 'HH:mm:ss' : 'HH:mm');

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

@@ -1,7 +1,8 @@
 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 declare type YagrWidgetData = {
+export type YagrWidgetData = {
     data: {
         graphs: RawSerieData[];
         timeline: number[];