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

package/build/components/ChartKit.css

@@ -8,24 +8,24 @@
 }
 
 .chartkit-theme_common {
-  --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);
+  --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);
   --highcharts-tooltip-bg: var(--highcharts-floating-bg);
-  --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);
+  --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);
 }

package/build/components/ChartKit.d.ts

@@ -1,21 +1,23 @@
 import React from 'react';
 import type { ChartKitType, ChartKitRef, ChartKitProps } from '../types';
 import './ChartKit.css';
-declare type ChartKitComponentProps<T extends ChartKitType> = Omit<ChartKitProps<T>, 'onError'> & {
+type ChartKitComponentProps<T extends ChartKitType> = Omit<ChartKitProps<T>, 'onError'> & {
     instanceRef?: React.ForwardedRef<ChartKitRef | undefined>;
 };
-declare const ChartKitComponent: <T extends keyof import("../types").ChartKitWidget>(props: ChartKitComponentProps<T>) => JSX.Element;
+declare const ChartKitComponent: <T extends keyof import("../types").ChartKitWidget>(props: ChartKitComponentProps<T>) => React.JSX.Element;
 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;
     onRender?: ((data: import("../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../types").ChartKitOnChartLoad<T>) => void) | undefined;
-    renderError?: import("../types").RenderError | undefined;
     onError?: import("../types").ChartKitOnError | undefined;
-} & { [key in keyof Omit<import("../types").ChartKitWidget[T], "widget" | "data">]: import("../types").ChartKitWidget[T][key]; } & {
+    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) & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;
 }) => ReturnType<typeof ChartKitComponent>;
 export {};

package/build/components/ChartKit.js

@@ -10,7 +10,7 @@ import './ChartKit.css';
 const b = block('chartkit');
 const ChartKitComponent = (props) => {
     const widgetRef = React.useRef();
-    const { instanceRef, id: propsId, type, isMobile } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile"]);
+    const { instanceRef, id: propsId, type, isMobile, renderPluginLoader } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile", "renderPluginLoader"]);
     const ckId = React.useMemo(() => getRandomCKId(), []);
     const id = propsId || ckId;
     const lang = settings.get('lang');
@@ -31,7 +31,7 @@ const ChartKitComponent = (props) => {
             }
         },
     }), []);
-    return (React.createElement(React.Suspense, { fallback: React.createElement(Loader, null) },
+    return (React.createElement(React.Suspense, { fallback: (renderPluginLoader === null || renderPluginLoader === void 0 ? void 0 : renderPluginLoader()) || React.createElement(Loader, null) },
         React.createElement("div", { className: b({ mobile: isMobile }, 'chartkit-theme_common') },
             React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang }, restProps)))));
 };

package/build/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { ChartKitError } from '../../libs';
 import type { ChartKitOnError, ChartKitType, ChartKitWidget, RenderError } from '../../types';
-declare type Props = {
+type Props = {
     onError?: ChartKitOnError;
     data: ChartKitWidget[ChartKitType]['data'];
     renderError?: RenderError;
 };
-declare type State = {
+type State = {
     error?: ChartKitError | Error;
 };
 export declare class ErrorBoundary extends React.Component<Props, State> {

package/build/components/Loader/Loader.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { LoaderProps as BaseLoaderProps } from '@gravity-ui/uikit';
 import './Loader.css';
-declare type LoaderProps = BaseLoaderProps;
-export declare const Loader: (props: LoaderProps) => JSX.Element;
+type LoaderProps = BaseLoaderProps;
+export declare const Loader: (props: LoaderProps) => React.JSX.Element;
 export {};

package/build/i18n/index.d.ts

@@ -1,7 +1,7 @@
 import { I18N, I18NFn } from '@gravity-ui/i18n';
 import en from './keysets/en.json';
-declare type Keysets = typeof en;
-declare type TypedI18n = I18NFn<Keysets>;
+type Keysets = typeof en;
+type TypedI18n = I18NFn<Keysets>;
 declare const i18nFactory: I18N;
 declare const i18n: TypedI18n;
 export { i18nFactory, i18n };

package/build/libs/chartkit-error/chartkit-error.d.ts

@@ -1,4 +1,4 @@
-export declare type ChartKitErrorArgs = {
+export type ChartKitErrorArgs = {
     code?: number | string;
     originalError?: Error;
     message?: string;

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;
     };
 }
-declare type SettingKey = keyof Settings;
-export declare const DEFAULT_LOCALE_SPECIFICATION: moment.LocaleSpecification;
+type SettingKey = keyof Settings;
+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/__stories__/Line.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 Line: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/Pie.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 Pie: Story<any>;
+export declare const Pie: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/area/Range.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 AreaRange: Story<any>;
+export declare const AreaRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/area/Stacked.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 AreaStacked: Story<any>;
+export declare const AreaStacked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/column/HorizontalStacked.stories.d.ts

@@ -1,4 +1,3 @@
-import { Story, Meta } from '@storybook/react';
-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 HorizontalStacked: Story<any>;
+export declare const HorizontalStacked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/column/Vertical.stories.d.ts

@@ -1,4 +1,3 @@
-import { Story, Meta } from '@storybook/react';
-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 Vertical: Story<any>;
+export declare const Vertical: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/column/VerticalStacked.stories.d.ts

@@ -1,4 +1,3 @@
-import { Story, Meta } from '@storybook/react';
-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 VerticalStacked: Story<any>;
+export declare const VerticalStacked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/combined/ComboChartWithSameLegendValues.stories.d.ts

@@ -1,4 +1,3 @@
-import { Story, Meta } from '@storybook/react';
-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 ComboChart: Story<any>;
+export declare const ComboChart: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/complex/TwoAxis.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 TwoAxis: Story<import("@storybook/react").Args>;
+export declare const TwoAxis: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;

package/build/plugins/highcharts/__stories__/components/ChartStory.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RenderError } from '../../../../types';
 import { HighchartsWidgetData } from '../../types';
-export declare type ChartStoryProps = {
+export type ChartStoryProps = {
     data: HighchartsWidgetData;
     withoutPlugin?: boolean;
     visible?: boolean;

package/build/plugins/highcharts/__stories__/custom-error-render/custom-error-render.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 CustomErrorRender: Story<import("@storybook/react").Args>;
+export declare const CustomErrorRender: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;

package/build/plugins/highcharts/__stories__/no-data/no-data.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 NoData: Story<import("@storybook/react").Args>;
+export declare const NoData: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;

package/build/plugins/highcharts/__stories__/pie/WithTotals.stories.d.ts

@@ -1,4 +1,3 @@
-import { Meta, Story } from '@storybook/react';
-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 WithTotals: Story<any>;
+export declare const WithTotals: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

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(--yc-color-base-background)',
+                        fill: 'var(--g-color-base-background)',
                         zIndex: 8,
                     })
                         .add();

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

@@ -3,13 +3,15 @@ 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;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"highcharts">) => void) | undefined;
-    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
+    renderPluginLoader?: (() => React.ReactNode) | undefined;
 } & {
     hoistConfigError?: boolean | undefined;
     nonBodyScroll?: boolean | undefined;

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -3,8 +3,8 @@ import Highcharts, { ChartCallbackFunction, Options, Chart } from 'highcharts';
 import type { ChartKitProps } from '../../../../types';
 import type { HighchartsWidgetData, StringParams } from '../../types';
 import './HighchartsComponent.css';
-declare type Props = ChartKitProps<'highcharts'>;
-declare type State = {
+type Props = ChartKitProps<'highcharts'>;
+type State = {
     prevData: HighchartsWidgetData | null;
     options: (Options & {
         useHighStock: boolean;
@@ -576,7 +576,7 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
     private chartComponent;
     componentDidMount(): void;
     componentDidUpdate(): void;
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
     reflow: () => void;
     extendChartInstance: (chart: Chart) => void;
     getParams: () => StringParams;

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

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

package/build/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Split, SplitPaneProps } from 'react-split-pane';
 import './StyledSplitPane.css';
-export declare type PaneSplit = Split;
-declare type Props = SplitPaneProps & {
+export type PaneSplit = Split;
+type Props = SplitPaneProps & {
     paneOneRender: () => React.ReactNode;
     paneTwoRender: () => React.ReactNode;
 };
-export declare const StyledSplitPane: ({ paneOneRender, paneTwoRender, ...splitPaneProps }: Props) => JSX.Element;
+export declare const StyledSplitPane: ({ paneOneRender, paneTwoRender, ...splitPaneProps }: Props) => React.JSX.Element;
 export {};

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.js

@@ -1,7 +1,7 @@
 /* eslint callback-return: 0 */
 import React from 'react';
 import block from 'bem-cn-lite';
-import { get, debounce } from 'lodash';
+import { debounce, get } from 'lodash';
 import { getRandomCKId } from '../../../../../utils';
 import { chartTypesWithoutCrosshair } from '../../helpers/config/config';
 import { StyledSplitPane } from '../StyledSplitPane/StyledSplitPane';
@@ -42,10 +42,7 @@ function getPointsForInitialRefresh(chart) {
     return points;
 }
 function forceHoverState(chart, activePoints) {
-    const chartType = get(chart, 'userOptions.chart.type');
-    if (!chartType) {
-        return;
-    }
+    const chartType = get(chart, 'userOptions.chart.type') || '';
     if (chartType === 'pie') {
         chart.tooltip.refresh(activePoints);
         chart.pointsForInitialRefresh = activePoints;

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

@@ -588,4 +588,3 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
 export const chartTypesWithoutCrosshair: string[];
 export const chartTypesWithoutYCrosshair: string[];
 export const chartTypesWithNativeTooltip: string[];
-import Highcharts from "highcharts";

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

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

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

@@ -1,6 +1,6 @@
-export declare type NavigatorPeriod = {
+export type NavigatorPeriod = {
     type: string;
     value: string;
     period: Period;
 };
-export declare type Period = 'month' | 'year' | 'day' | 'hour' | 'week' | 'quarter';
+export type Period = 'month' | 'year' | 'day' | 'hour' | 'week' | 'quarter';