@gravity-ui/chartkit 3.0.0-beta.6 → 3.0.0-beta.8

package/build/components/ChartKit.d.ts

@@ -8,6 +8,7 @@ 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;
@@ -16,7 +17,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"> extends infer T_1 ? { [key in keyof T_1]: import("../types").ChartKitWidget[T][key]; } : never) & {
+} & (Omit<import("../types").ChartKitWidget[T], "widget" | "data" | "pluginRef"> 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/libs/settings/__tests__/settings.test.js

@@ -1,13 +1,6 @@
-import { DEFAULT_LOCALE_SPECIFICATION, settings } from '../settings';
-const resetSettings = () => settings.set({
-    lang: 'en',
-    locale: DEFAULT_LOCALE_SPECIFICATION,
-});
+import { settings } from '../settings';
+const resetSettings = () => settings.set({ lang: 'en' });
 describe('libs/settings', () => {
-    it('Default locale should be equal DEFAULT_LOCALE_SPECIFICATION', () => {
-        const result = settings.get('locale');
-        expect(result).toStrictEqual(DEFAULT_LOCALE_SPECIFICATION);
-    });
     it('Default lang should be equal to en', () => {
         const result = settings.get('lang');
         expect(result).toBe('en');

package/build/libs/settings/eventEmitter.d.ts

@@ -0,0 +1,11 @@
+type EventObject<T = unknown> = {
+    id: string;
+    action: (args: T) => void;
+};
+export declare class EventEmitter<EventsMap = unknown> {
+    private events;
+    on<MapKey extends keyof EventsMap>(type: MapKey, event: EventObject<EventsMap[MapKey]>): void;
+    off<MapKey extends keyof EventsMap>(type: MapKey, eventId: string): void;
+    dispatch<MapKey extends keyof EventsMap>(type: MapKey, args: EventsMap[MapKey]): void;
+}
+export {};

package/build/libs/settings/eventEmitter.js

@@ -0,0 +1,25 @@
+export class EventEmitter {
+    constructor() {
+        this.events = {};
+    }
+    on(type, event) {
+        if (this.events[type]) {
+            this.events[type].push(event);
+        }
+        else {
+            this.events[type] = [event];
+        }
+    }
+    off(type, eventId) {
+        if (this.events[type]) {
+            this.events[type] = this.events[type].filter(({ id }) => id !== eventId);
+        }
+    }
+    dispatch(type, args) {
+        if (this.events[type]) {
+            this.events[type].forEach(({ action }) => {
+                action(args);
+            });
+        }
+    }
+}

package/build/libs/settings/settings.d.ts

@@ -1,17 +1,20 @@
-import moment from 'moment';
 import type { ChartKitPlugin, ChartKitLang, ChartKitHolidays } from '../../types';
+import { EventEmitter } from './eventEmitter';
 interface Settings {
     plugins: ChartKitPlugin[];
     lang: ChartKitLang;
-    locale?: moment.LocaleSpecification;
     extra?: {
         holidays?: ChartKitHolidays;
     };
 }
 type SettingKey = keyof Settings;
-export declare const DEFAULT_LOCALE_SPECIFICATION: moment.LocaleSpecification;
+type SettingsEventsMap = {
+    'change-lang': ChartKitLang;
+};
+export declare const settingsEventEmitter: EventEmitter<SettingsEventsMap>;
 declare class ChartKitSettings {
     private settings;
+    constructor();
     get<T extends SettingKey>(key: T): Settings[T];
     set(updates: Partial<Settings>): void;
 }

package/build/libs/settings/settings.js

@@ -1,9 +1,9 @@
-import moment from 'moment';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { configure } from '@gravity-ui/uikit';
 import { i18nFactory } from '../../i18n';
-export const DEFAULT_LOCALE_SPECIFICATION = { week: { dow: 1, doy: 7 } };
+import { EventEmitter } from './eventEmitter';
+export const settingsEventEmitter = new EventEmitter();
 const removeUndefinedValues = (data) => {
     return Object.entries(data).reduce((acc, [key, value]) => {
         if (typeof value !== 'undefined') {
@@ -12,12 +12,7 @@ const removeUndefinedValues = (data) => {
         return acc;
     }, {});
 };
-const updateLocale = (args) => {
-    const { lang, locale } = args;
-    if (locale) {
-        moment.updateLocale(lang, locale);
-    }
-    moment.locale(lang);
+const updateLang = (lang) => {
     configure({ lang });
     i18nFactory.setLang(lang);
 };
@@ -27,19 +22,19 @@ class ChartKitSettings {
             plugins: [],
             lang: 'en',
         };
+        updateLang(this.get('lang'));
     }
     get(key) {
         return get(this.settings, key);
     }
     set(updates) {
         const filteredUpdates = removeUndefinedValues(updates);
-        if (filteredUpdates.lang || filteredUpdates.locale) {
+        this.settings = merge(this.settings, filteredUpdates);
+        if (filteredUpdates.lang) {
             const lang = filteredUpdates.lang || this.get('lang');
-            const locale = filteredUpdates.locale || this.get('locale');
-            updateLocale({ lang, locale });
+            updateLang(lang);
+            settingsEventEmitter.dispatch('change-lang', lang);
         }
-        this.settings = merge(this.settings, filteredUpdates);
     }
 }
 export const settings = new ChartKitSettings();
-settings.set({ locale: DEFAULT_LOCALE_SPECIFICATION });

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

@@ -3,6 +3,7 @@ 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/HighchartsComponent.js

@@ -3,12 +3,18 @@ import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import get from 'lodash/get';
 import { settings } from '../../../../libs';
+import { settingsEventEmitter } from '../../../../libs/settings/settings';
 import { markChartPerformance, getChartPerformanceDuration, getRandomCKId } from '../../../../utils';
 import { getGraph } from '../helpers/graph';
 import { initHighchartsModules } from '../helpers/init-highcharts-modules';
+import { initHighchartsLangOptions } from '../helpers/highcharts/highcharts';
 import { withSplitPane } from './withSplitPane/withSplitPane';
 import './HighchartsComponent.css';
 const HighcharsReactWithSplitPane = withSplitPane(HighchartsReact);
+settingsEventEmitter.on('change-lang', {
+    id: 'hc-lang-handler',
+    action: initHighchartsLangOptions,
+});
 initHighchartsModules();
 export class HighchartsComponent extends React.PureComponent {
     constructor() {

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

@@ -10,13 +10,13 @@ import isNumber from 'lodash/isNumber';
 import throttle from 'lodash/throttle';
 import pick from 'lodash/pick';
 import debounce from 'lodash/debounce';
-import moment from 'moment';
+import { dateTime } from '@gravity-ui/date-utils';
 import { i18n } from '../../../../../i18n';
 import { formatNumber } from '../../../../shared';
 import { getCommentsOnLine, drawComments, hideComments, drawOnlyRendererComments, } from '../comments/drawing';
 import formatTooltip, { TOOLTIP_ROW_CLASS_NAME, SERIES_NAME_DATA_ATTRIBUTE, TOOLTIP_HEADER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NANE, } from '../tooltip';
 import defaultOptions from './options';
-import { calculatePrecision, isTooltipShared, isSafari, mergeArrayWithObject, concatStrings, buildNavigatorFallback, addShowInNavigatorToSeries, setNavigatorDefaultPeriod, numberFormat, getFormatOptionsFromLine, checkTooltipPinningAvailability, } from './utils';
+import { calculatePrecision, isTooltipShared, isSafari, mergeArrayWithObject, concatStrings, buildNavigatorFallback, addShowInNavigatorToSeries, setNavigatorDefaultPeriod, numberFormat, getFormatOptionsFromLine, checkTooltipPinningAvailability, getSortedData, } from './utils';
 import { handleLegendItemClick } from './handleLegendItemClick';
 import { getChartKitFormattedValue } from './utils/getChartKitFormattedValue';
 const b = block('chartkit-tooltip');
@@ -381,7 +381,7 @@ function validateCellManipulationConfig(tooltipOptions, property, item) {
     }
 }
 function getTooltip(tooltip, options, comments, holidays) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const serieType = (this.series && this.series.type) || tooltip.chart.options.chart.type;
     const chart = tooltip.chart;
     const xAxis = chart.xAxis[0];
@@ -412,7 +412,6 @@ function getTooltip(tooltip, options, comments, holidays) {
             count: 1,
             shared: true,
             unsafe: Boolean(options.unsafe),
-            sort: (_b = options === null || options === void 0 ? void 0 : options.tooltip) === null || _b === void 0 ? void 0 : _b.sort,
         };
         if (typeof options.manageTooltipConfig === 'function') {
             json = callManageTooltipConfig(options, json, chart);
@@ -440,7 +439,7 @@ function getTooltip(tooltip, options, comments, holidays) {
     let points = [];
     let shared;
     if (this.points) {
-        points = this.points;
+        points = getSortedData(this.points, (_b = options === null || options === void 0 ? void 0 : options.tooltip) === null || _b === void 0 ? void 0 : _b.sort);
         shared = true;
     }
     else {
@@ -459,7 +458,6 @@ function getTooltip(tooltip, options, comments, holidays) {
         withPercent: false,
         tooltipHeader: null,
         unsafe: Boolean(options.unsafe),
-        sort: (_c = options === null || options === void 0 ? void 0 : options.tooltip) === null || _c === void 0 ? void 0 : _c.sort,
     };
     if (isDatetimeXAxis) {
         const items = this.points || Highcharts.splat(this);
@@ -476,9 +474,9 @@ function getTooltip(tooltip, options, comments, holidays) {
         }
         json.tooltipHeader = chart.time.dateFormat(xDateFormat, this.x);
     }
-    else if ((_f = (_e = (_d = extendedPoint.point) === null || _d === void 0 ? void 0 : _d.options) === null || _e === void 0 ? void 0 : _e.xFormatted) !== null && _f !== void 0 ? _f : (extendedPoint.x || extendedPoint.x === 0)) {
-        const customTooltipHeaderFormatter = (_g = options === null || options === void 0 ? void 0 : options.highcharts) === null || _g === void 0 ? void 0 : _g.tooltipHeaderFormatter;
-        const tooltipHeaderStringValue = String((_k = (_j = (_h = extendedPoint.point) === null || _h === void 0 ? void 0 : _h.options) === null || _j === void 0 ? void 0 : _j.xFormatted) !== null && _k !== void 0 ? _k : extendedPoint.x);
+    else if ((_e = (_d = (_c = extendedPoint.point) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.xFormatted) !== null && _e !== void 0 ? _e : (extendedPoint.x || extendedPoint.x === 0)) {
+        const customTooltipHeaderFormatter = (_f = options === null || options === void 0 ? void 0 : options.highcharts) === null || _f === void 0 ? void 0 : _f.tooltipHeaderFormatter;
+        const tooltipHeaderStringValue = String((_j = (_h = (_g = extendedPoint.point) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.xFormatted) !== null && _j !== void 0 ? _j : extendedPoint.x);
         json.tooltipHeader = customTooltipHeaderFormatter
             ? customTooltipHeaderFormatter(tooltipHeaderStringValue)
             : tooltipHeaderStringValue;
@@ -1071,7 +1069,9 @@ function drillOnClick(event, { options, chartType }) {
                 drillDownFilter =
                     chartType === 'scatter' ? drillDownFilter - 180 * 60 * 1000 : drillDownFilter;
             }
-            return isDateTime ? moment(drillDownFilter).format('YYYY-MM-DD') : drillDownFilter;
+            return isDateTime
+                ? dateTime({ input: drillDownFilter }).format('YYYY-MM-DD')
+                : drillDownFilter;
         }
         return filter;
     });

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

@@ -1,3 +1,4 @@
+import type { HighchartsSortData } from '../../../../types/widget';
 export { addShowInNavigatorToSeries } from './addShowInNavigatorToSeries';
 export { buildNavigatorFallback } from './buildNavigatorFallback';
 export { calculatePrecision } from './calculatePrecision';
@@ -11,3 +12,35 @@ export { isSafari } from './isSafari';
 export { mergeArrayWithObject } from './mergeArrayWithObject';
 export { numberFormat } from './numberFormat';
 export { setNavigatorDefaultPeriod } from './setNavigatorDefaultPeriod';
+export declare const getSortedData: <T extends Record<string, any>>(data: T[], sort?: HighchartsSortData) => (number | T | (() => IterableIterator<T>) | (() => {
+    copyWithin: boolean;
+    entries: boolean;
+    fill: boolean;
+    find: boolean;
+    findIndex: boolean;
+    keys: boolean;
+    values: boolean;
+}) | (() => string) | (() => string) | (() => T | undefined) | ((...items: T[]) => number) | {
+    (...items: ConcatArray<T>[]): T[];
+    (...items: (T | ConcatArray<T>)[]): T[];
+} | ((separator?: string | undefined) => string) | (() => T[]) | (() => T | undefined) | ((start?: number | undefined, end?: number | undefined) => T[]) | ((compareFn?: ((a: T, b: T) => number) | undefined) => T[]) | {
+    (start: number, deleteCount?: number | undefined): T[];
+    (start: number, deleteCount: number, ...items: T[]): T[];
+} | ((...items: T[]) => number) | ((searchElement: T, fromIndex?: number | undefined) => number) | ((searchElement: T, fromIndex?: number | undefined) => number) | {
+    <S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): this is S[];
+    (predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
+} | ((predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any) => boolean) | ((callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any) => void) | (<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any) => U[]) | {
+    <S_1 extends T>(predicate: (value: T, index: number, array: T[]) => value is S_1, thisArg?: any): S_1[];
+    (predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
+} | {
+    (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
+    (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
+    <U_1>(callbackfn: (previousValue: U_1, currentValue: T, currentIndex: number, array: T[]) => U_1, initialValue: U_1): U_1;
+} | {
+    (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
+    (callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
+    <U_2>(callbackfn: (previousValue: U_2, currentValue: T, currentIndex: number, array: T[]) => U_2, initialValue: U_2): U_2;
+} | {
+    <S_2 extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S_2, thisArg?: any): S_2 | undefined;
+    (predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;
+} | ((predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any) => number) | ((value: T, start?: number | undefined, end?: number | undefined) => T[]) | ((target: number, start: number, end?: number | undefined) => T[]) | (() => IterableIterator<[number, T]>) | (() => IterableIterator<number>) | (() => IterableIterator<T>) | ((searchElement: T, fromIndex?: number | undefined) => boolean) | (<U_3, This = undefined>(callback: (this: This, value: T, index: number, array: T[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | ((index: number) => T | undefined))[];

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

@@ -1,3 +1,4 @@
+import orderBy from 'lodash/orderBy';
 export { addShowInNavigatorToSeries } from './addShowInNavigatorToSeries';
 export { buildNavigatorFallback } from './buildNavigatorFallback';
 export { calculatePrecision } from './calculatePrecision';
@@ -11,3 +12,10 @@ export { isSafari } from './isSafari';
 export { mergeArrayWithObject } from './mergeArrayWithObject';
 export { numberFormat } from './numberFormat';
 export { setNavigatorDefaultPeriod } from './setNavigatorDefaultPeriod';
+export const getSortedData = (data, sort = {}) => {
+    const { enabled = true, order = 'desc', iteratee = 'y' } = sort;
+    if (!enabled) {
+        return [...data];
+    }
+    return orderBy(data, iteratee, order);
+};

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/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.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/types.d.ts

@@ -38,15 +38,6 @@ export 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 type TooltipLine = {
     /** Color displayed in a separate cell */

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

@@ -27,6 +27,14 @@ export type HighchartsManageTooltipConfigOptions = {
     xComments?: TooltipData['xComments'];
 };
 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[];
@@ -95,7 +103,7 @@ export type HighchartsWidgetData = {
                 metaKey?: boolean;
             };
             /** Used to manage tooltip lines sorting */
-            sort?: TooltipData['sort'];
+            sort?: HighchartsSortData;
         };
         /**
          * Used to modify tooltip data

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

@@ -4,6 +4,7 @@ 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.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/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,6 +7,7 @@ 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;

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/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,5 +1,6 @@
 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 = {
     data: {

package/build/types/index.d.ts

@@ -26,6 +26,8 @@ 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;
@@ -40,7 +42,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'>]: ChartKitWidget[T][key];
+    [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget' | 'pluginRef'>]: ChartKitWidget[T][key];
 };
 export type ChartKitPlugin = {
     type: ChartKitType;

package/build/types/widget.d.ts

@@ -1,19 +1,23 @@
-import type { Yagr, YagrWidgetData } from '../plugins/yagr/types';
+/// <reference types="react" />
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.8",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -13,6 +13,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@gravity-ui/date-utils": "^1.4.1",
     "@gravity-ui/yagr": "^3.3.5",
     "bem-cn-lite": "^4.1.0",
     "highcharts": "^8.2.2",
@@ -54,7 +55,6 @@
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.2",
     "lint-staged": "^10.2.7",
-    "moment": "^2.29.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.0",
     "react": "^17.0.2",
@@ -72,7 +72,6 @@
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^4.0.0",
-    "moment": "^2.19.3",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {