@gravity-ui/chartkit 3.4.2 → 3.5.0

package/build/plugins/d3/renderer/hooks/useSeries/index.js

@@ -1,22 +1,60 @@
 import React from 'react';
-import clone from 'lodash/clone';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
 import { scaleOrdinal } from 'd3';
 import { DEFAULT_PALETTE } from '../../constants';
-import { getSeriesNames } from '../../utils';
+import { getSeriesNames, isAxisRelatedSeries } from '../../utils';
+const prepareAxisRelatedSeries = (args) => {
+    const { activeLegendItems, colorScale, series } = args;
+    const preparedSeries = cloneDeep(series);
+    const legendEnabled = get(preparedSeries, 'legend.enabled', true);
+    const defaultVisible = get(preparedSeries, 'visible', true);
+    const name = 'name' in series && series.name ? series.name : '';
+    const color = 'color' in series && series.color ? series.color : colorScale(name);
+    preparedSeries.color = color;
+    preparedSeries.name = name;
+    preparedSeries.visible = legendEnabled ? activeLegendItems.includes(name) : defaultVisible;
+    return preparedSeries;
+};
+const preparePieSeries = (args) => {
+    const { activeLegendItems, series } = args;
+    const preparedSeries = cloneDeep(series);
+    const legendEnabled = get(preparedSeries, 'legend.enabled', true);
+    const dataNames = series.data.map((d) => d.name);
+    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
+    preparedSeries.data = preparedSeries.data.map((d) => {
+        const defaultVisible = get(d, 'visible', true);
+        d.color = d.color || colorScale(d.name);
+        d.visible = legendEnabled ? activeLegendItems.includes(d.name) : defaultVisible;
+        return d;
+    });
+    // Not axis related series manages their own data visibility inside their data
+    preparedSeries.visible = true;
+    return preparedSeries;
+};
+const prepareNotAxisRelatedSeries = (args) => {
+    const { activeLegendItems, series } = args;
+    switch (series.type) {
+        case 'pie': {
+            return preparePieSeries({ activeLegendItems, series });
+        }
+        default: {
+            throw new Error(`Series type ${series.type} does not support data preparation for series that do not support the presence of axes`);
+        }
+    }
+};
 export const useSeries = (args) => {
     const { activeLegendItems, series } = args;
-    // FIXME: handle case with one pie chart series
     const chartSeries = React.useMemo(() => {
         const seriesNames = getSeriesNames(series);
         const colorScale = scaleOrdinal(seriesNames, DEFAULT_PALETTE);
         return series.map((s) => {
-            const preparedSeries = clone(s);
-            const name = 'name' in s ? s.name : '';
-            const color = 'color' in s && s.color ? s.color : colorScale(name);
-            preparedSeries.color = color;
-            preparedSeries.name = name;
-            preparedSeries.visible = activeLegendItems.includes(name);
-            return preparedSeries;
+            return isAxisRelatedSeries(s)
+                ? prepareAxisRelatedSeries({ activeLegendItems, colorScale, series: s })
+                : prepareNotAxisRelatedSeries({
+                    activeLegendItems,
+                    series: s,
+                });
         });
     }, [activeLegendItems, series]);
     return { chartSeries };

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { ChartOptions } from '../useChartOptions/types';
-import { ChartScale } from '../useScales';
+import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { BarXSeries } from '../../../../../types/widget-data';
 type Args = {
+    top: number;
+    left: number;
     series: BarXSeries[];
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
@@ -11,6 +13,7 @@ type Args = {
     yScale: ChartScale;
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
+    svgContainer: SVGSVGElement | null;
 };
 export declare function prepareBarXSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/bar-x.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../../utils/cn';
+import { pointer } from 'd3';
 const DEFAULT_BAR_RECT_WIDTH = 50;
 const DEFAULT_LINEAR_BAR_RECT_WIDTH = 20;
 const MIN_RECT_GAP = 1;
-const b = block('chartkit-d3-bar');
+const b = block('d3-bar');
 const getRectProperties = (args) => {
     const { point, xAxis, xScale, yAxis, yScale, minPointDistance } = args;
     let cx;
@@ -47,7 +48,7 @@ function minDiff(arr) {
     return result;
 }
 export function prepareBarXSeries(args) {
-    const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave } = args;
+    const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, svgContainer, } = args;
     const seriesData = series.map(({ data }) => data).flat(2);
     const minPointDistance = minDiff(seriesData.map((item) => Number(item.x)));
     return series.reduce((result, item) => {
@@ -61,12 +62,14 @@ export function prepareBarXSeries(args) {
                 yScale,
                 minPointDistance,
             });
-            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function () {
+            result.push(React.createElement("rect", Object.assign({ key: `${i}-${randomKey}`, className: b('rect'), fill: item.color }, rectProps, { onMouseMove: function (e) {
+                    const [x, y] = pointer(e, svgContainer);
                     onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
                         hovered: {
                             data: point,
                             series: item,
                         },
+                        pointerPosition: [x - left, y - top],
                     });
                 }, onMouseLeave: onSeriesMouseLeave })));
         });

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -1,17 +1,22 @@
 import React from 'react';
 import type { ChartOptions } from '../useChartOptions/types';
-import type { ChartScale } from '../useScales';
+import type { ChartScale } from '../useAxisScales';
 import type { ChartSeries } from '../useSeries';
 import type { OnSeriesMouseMove, OnSeriesMouseLeave } from '../useTooltip/types';
+import './styles.css';
 type Args = {
+    top: number;
+    left: number;
+    boundsWidth: number;
+    boundsHeight: number;
     series: ChartSeries[];
     xAxis: ChartOptions['xAxis'];
-    xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];
-    yScale: ChartScale;
     svgContainer: SVGSVGElement | null;
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
+    xScale?: ChartScale;
+    yScale?: ChartScale;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -3,8 +3,10 @@ import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
 import { prepareBarXSeries } from './bar-x';
 import { prepareScatterSeries } from './scatter';
+import { PieSeriesComponent } from './pie';
+import './styles.css';
 export const useShapes = (args) => {
-    const { series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
+    const { top, left, boundsWidth, boundsHeight, series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
     const shapes = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -12,33 +14,56 @@ export const useShapes = (args) => {
             const [seriesType, chartSeries] = item;
             switch (seriesType) {
                 case 'bar-x': {
-                    acc.push(...prepareBarXSeries({
-                        series: chartSeries,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        onSeriesMouseMove,
-                        onSeriesMouseLeave,
-                    }));
+                    if (xScale && yScale) {
+                        acc.push(...prepareBarXSeries({
+                            top,
+                            left,
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                            onSeriesMouseMove,
+                            onSeriesMouseLeave,
+                            svgContainer,
+                        }));
+                    }
                     break;
                 }
                 case 'scatter': {
-                    acc.push(...prepareScatterSeries({
-                        series: chartSeries,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        onSeriesMouseMove,
-                        onSeriesMouseLeave,
-                        svgContainer,
-                    }));
+                    if (xScale && yScale) {
+                        acc.push(...prepareScatterSeries({
+                            top,
+                            left,
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                            onSeriesMouseMove,
+                            onSeriesMouseLeave,
+                            svgContainer,
+                        }));
+                    }
                     break;
                 }
+                case 'pie': {
+                    acc.push(...chartSeries.map((cs, i) => (React.createElement(PieSeriesComponent, { key: `pie-${i}`, boundsWidth: boundsWidth, boundsHeight: boundsHeight, series: cs, onSeriesMouseMove: onSeriesMouseMove, onSeriesMouseLeave: onSeriesMouseLeave, svgContainer: svgContainer }))));
+                }
             }
             return acc;
         }, []);
-    }, [series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave]);
+    }, [
+        boundsWidth,
+        boundsHeight,
+        series,
+        xAxis,
+        xScale,
+        yAxis,
+        yScale,
+        svgContainer,
+        onSeriesMouseMove,
+        onSeriesMouseLeave,
+    ]);
     return { shapes };
 };

package/build/plugins/d3/renderer/hooks/useShapes/pie.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PieSeries } from '../../../../../types/widget-data';
+import type { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
+type PreparePieSeriesArgs = {
+    boundsWidth: number;
+    boundsHeight: number;
+    series: PieSeries;
+    svgContainer: SVGSVGElement | null;
+    onSeriesMouseMove?: OnSeriesMouseMove;
+    onSeriesMouseLeave?: OnSeriesMouseLeave;
+};
+export declare function PieSeriesComponent(args: PreparePieSeriesArgs): React.JSX.Element;
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/pie.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { arc, pie, select } from 'd3';
+import { block } from '../../../../../utils/cn';
+import { calculateNumericProperty } from '../../utils';
+const b = block('d3-pie');
+const getCenter = (boundsWidth, boundsHeight, center) => {
+    var _a, _b;
+    const defaultX = boundsWidth * 0.5;
+    const defaultY = boundsHeight * 0.5;
+    if (!center) {
+        return [defaultX, defaultY];
+    }
+    const [x, y] = center;
+    const resultX = (_a = calculateNumericProperty({ value: x, base: boundsWidth })) !== null && _a !== void 0 ? _a : defaultX;
+    const resultY = (_b = calculateNumericProperty({ value: y, base: boundsHeight })) !== null && _b !== void 0 ? _b : defaultY;
+    return [resultX, resultY];
+};
+export function PieSeriesComponent(args) {
+    const { boundsWidth, boundsHeight, series, onSeriesMouseMove, onSeriesMouseLeave, svgContainer } = args;
+    const ref = React.useRef(null);
+    const [x, y] = getCenter(boundsWidth, boundsHeight, series.center);
+    React.useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!ref.current) {
+            return;
+        }
+        const svgElement = select(ref.current);
+        const radiusRelatedToChart = Math.min(boundsWidth, boundsHeight) / 2;
+        const radius = (_a = calculateNumericProperty({ value: series.radius, base: radiusRelatedToChart })) !== null && _a !== void 0 ? _a : radiusRelatedToChart;
+        const innerRadius = (_b = calculateNumericProperty({ value: series.innerRadius, base: radius })) !== null && _b !== void 0 ? _b : 0;
+        const pieGenerator = pie().value((d) => d.value);
+        const visibleData = series.data.filter((d) => d.visible);
+        const dataReady = pieGenerator(visibleData);
+        const arcGenerator = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(radius)
+            .cornerRadius((_c = series.borderRadius) !== null && _c !== void 0 ? _c : 0);
+        svgElement.selectAll('*').remove();
+        svgElement
+            .selectAll('*')
+            .data(dataReady)
+            .enter()
+            .append('path')
+            .attr('d', arcGenerator)
+            .attr('class', b('segment'))
+            .attr('fill', (d) => d.data.color || '')
+            .style('stroke', series.borderColor || '')
+            .style('stroke-width', (_d = series.borderWidth) !== null && _d !== void 0 ? _d : 1);
+    }, [boundsWidth, boundsHeight, series, onSeriesMouseMove, onSeriesMouseLeave, svgContainer]);
+    return React.createElement("g", { ref: ref, className: b(), transform: `translate(${x}, ${y})` });
+}

package/build/plugins/d3/renderer/hooks/useShapes/scatter.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { ChartOptions } from '../useChartOptions/types';
-import { ChartScale } from '../useScales';
+import { ChartScale } from '../useAxisScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
 import { ScatterSeries } from '../../../../../types/widget-data';
 type PrepareScatterSeriesArgs = {
+    top: number;
+    left: number;
     series: ScatterSeries[];
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;

package/build/plugins/d3/renderer/hooks/useShapes/scatter.js

@@ -1,7 +1,7 @@
 import { pointer } from 'd3';
 import React from 'react';
-import block from 'bem-cn-lite';
-const b = block('chartkit-d3-scatter');
+import { block } from '../../../../../utils/cn';
+const b = block('d3-scatter');
 const DEFAULT_SCATTER_POINT_RADIUS = 4;
 const prepareCategoricalScatterData = (data) => {
     return data.filter((d) => typeof d.category === 'string');
@@ -33,7 +33,7 @@ const getPointProperties = (args) => {
     return { r, cx, cy };
 };
 export function prepareScatterSeries(args) {
-    const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, key, svgContainer, } = args;
+    const { top, left, series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave, key, svgContainer, } = args;
     return series.reduce((result, s) => {
         var _a;
         const preparedData = xAxis.type === 'category' || ((_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.type) === 'category'
@@ -48,12 +48,13 @@ export function prepareScatterSeries(args) {
                 yScale,
             });
             return (React.createElement("circle", Object.assign({ key: `${i}-${key}`, className: b('point'), fill: s.color }, pointProps, { onMouseMove: function (e) {
+                    const [x, y] = pointer(e, svgContainer);
                     onSeriesMouseMove === null || onSeriesMouseMove === void 0 ? void 0 : onSeriesMouseMove({
                         hovered: {
                             data: point,
                             series: s,
                         },
-                        pointerPosition: pointer(e, svgContainer),
+                        pointerPosition: [x - left, y - top],
                     });
                 }, onMouseLeave: onSeriesMouseLeave })));
         }));

package/build/plugins/d3/renderer/hooks/useShapes/styles.css

@@ -0,0 +1,16 @@
+.chartkit-d3-scatter__point {
+  stroke-width: 1px;
+}
+
+.chartkit-d3_hovered .chartkit-d3-scatter__point {
+  opacity: 0.5;
+}
+
+.chartkit-d3-scatter__point:hover {
+  stroke: #fff;
+  opacity: 1;
+}
+
+.chartkit-d3-pie__segment {
+  stroke: var(--g-color-base-background);
+}

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -1,10 +1,16 @@
 import type { AxisDomain } from 'd3';
 import type { ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+export * from './math';
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
 export declare const isAxisRelatedSeries: (series: ChartKitWidgetSeries) => boolean;
 export declare const getDomainDataXBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
 export declare const getDomainDataYBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
 export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
-export declare const getVisibleSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
 export declare const getOnlyVisibleSeries: <T extends ChartKitWidgetSeries<any>>(series: T[]) => T[];
 export declare const parseTransformStyle: (style: string | null) => {
     x?: number | undefined;

package/build/plugins/d3/renderer/utils/index.js

@@ -1,7 +1,13 @@
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
+export * from './math';
 const CHARTS_WITHOUT_AXIS = ['pie'];
-// Сhecks whether the series should be drawn with axes
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
 export const isAxisRelatedSeries = (series) => {
     return !CHARTS_WITHOUT_AXIS.includes(series.type);
 };
@@ -26,17 +32,6 @@ export const getSeriesNames = (series) => {
         return acc;
     }, []);
 };
-// Uses to get all visible series names array (except `pie` charts)
-export const getVisibleSeriesNames = (series) => {
-    return series.reduce((acc, s) => {
-        var _a;
-        const visible = (_a = s.visible) !== null && _a !== void 0 ? _a : true;
-        if ('name' in s && typeof s.name === 'string' && visible) {
-            acc.push(s.name);
-        }
-        return acc;
-    }, []);
-};
 export const getOnlyVisibleSeries = (series) => {
     return series.filter((s) => s.visible);
 };

package/build/plugins/d3/renderer/utils/math.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Calculates a numeric property based on the given arguments.
+ *
+ * @param {Object} args - The arguments for the calculation.
+ * @param {string | number | null} args.value - The value to calculate the property for.
+ * @param {number} args.base - The base value to use in the calculation.
+ * @return {number | undefined} The calculated numeric property, or undefined if the value is invalid.
+ * @example
+ * const result1 = calculateNumericProperty({value: 1});
+ * console.log(result1); // Output: 1
+ * const result2 = calculateNumericProperty({value: '10px'});
+ * console.log(result2); // Output: 10
+ * const result3 = calculateNumericProperty({value: '50%', base: 200});
+ * console.log(result3); // Output: 100
+ * const result4 = calculateNumericProperty({value: '50%'});
+ * console.log(result4); // Output: undefined
+ * const result5 = calculateNumericProperty({value: 'invalid_value'});
+ * console.log(result5); // Output: undefined
+ */
+export declare const calculateNumericProperty: (args: {
+    value?: string | number | null;
+    base?: number;
+}) => number | undefined;

package/build/plugins/d3/renderer/utils/math.js

@@ -0,0 +1,43 @@
+import isNil from 'lodash/isNil';
+const isStringValueInPercent = (value = '') => {
+    return value.endsWith('%') && !Number.isNaN(Number.parseFloat(value));
+};
+const isStringValueInPixel = (value = '') => {
+    return value.endsWith('px') && !Number.isNaN(Number.parseFloat(value));
+};
+/**
+ * Calculates a numeric property based on the given arguments.
+ *
+ * @param {Object} args - The arguments for the calculation.
+ * @param {string | number | null} args.value - The value to calculate the property for.
+ * @param {number} args.base - The base value to use in the calculation.
+ * @return {number | undefined} The calculated numeric property, or undefined if the value is invalid.
+ * @example
+ * const result1 = calculateNumericProperty({value: 1});
+ * console.log(result1); // Output: 1
+ * const result2 = calculateNumericProperty({value: '10px'});
+ * console.log(result2); // Output: 10
+ * const result3 = calculateNumericProperty({value: '50%', base: 200});
+ * console.log(result3); // Output: 100
+ * const result4 = calculateNumericProperty({value: '50%'});
+ * console.log(result4); // Output: undefined
+ * const result5 = calculateNumericProperty({value: 'invalid_value'});
+ * console.log(result5); // Output: undefined
+ */
+export const calculateNumericProperty = (args) => {
+    const { value = '', base } = args;
+    if (isNil(value)) {
+        return undefined;
+    }
+    if (typeof value === 'string') {
+        if (isStringValueInPercent(value) && typeof base === 'number') {
+            const fraction = Number.parseFloat(value) / 100;
+            return base * fraction;
+        }
+        if (isStringValueInPixel(value)) {
+            return Number.parseFloat(value);
+        }
+        return undefined;
+    }
+    return value;
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
+import HighchartsReact from './HighchartsReact';
 import get from 'lodash/get';
 import { settings } from '../../../../libs';
 import { settingsEventEmitter } from '../../../../libs/settings/settings';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import Highcharts from 'highcharts';
+interface HighchartsReactRefObject {
+    chart: Highcharts.Chart | null | undefined;
+    container: React.RefObject<HTMLDivElement | undefined>;
+}
+interface HighchartsReactProps {
+    [key: string]: any;
+    constructorType?: keyof typeof Highcharts;
+    containerProps?: {
+        [key: string]: any;
+    };
+    highcharts?: typeof Highcharts;
+    options: Highcharts.Options;
+    callback?: Highcharts.ChartCallbackFunction;
+}
+export declare const HighchartsReact: React.ForwardRefExoticComponent<React.PropsWithoutRef<HighchartsReactProps> & React.RefAttributes<HighchartsReactRefObject>>;
+export default HighchartsReact;

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

@@ -0,0 +1,46 @@
+/* eslint no-console: ["error", { allow: ["warn", "error"]}] */
+import React from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+export const HighchartsReact = React.memo(React.forwardRef(function HighchartsReact(props, ref) {
+    const containerRef = React.useRef(null);
+    const chartRef = React.useRef();
+    useIsomorphicLayoutEffect(() => {
+        function createChart() {
+            const { highcharts: HighchartsComponent } = props;
+            const constructorType = props.constructorType || 'chart';
+            if (!HighchartsComponent) {
+                console.warn('The "highcharts" property was not passed.');
+            }
+            else if (!HighchartsComponent[constructorType]) {
+                console.warn('The "constructorType" property is incorrect or some ' +
+                    'required module is not imported.');
+            }
+            else if (props.options) {
+                chartRef.current = HighchartsComponent[constructorType](containerRef.current, props.options, props.callback);
+            }
+            else {
+                console.warn('The "options" property was not passed.');
+            }
+        }
+        if (!chartRef.current) {
+            createChart();
+        }
+    }, [props.options, props.allowChartUpdate, props.containerProps, props.highcharts, props.constructorType]);
+    useIsomorphicLayoutEffect(() => {
+        return () => {
+            if (chartRef.current) {
+                chartRef.current.destroy();
+                chartRef.current = null;
+            }
+        };
+    }, []);
+    React.useImperativeHandle(ref, () => ({
+        get chart() {
+            return chartRef.current;
+        },
+        container: containerRef,
+    }), []);
+    return React.createElement("div", Object.assign({}, props.containerProps, { ref: containerRef }));
+}));
+HighchartsReact.displayName = 'HighchartsReact';
+export default HighchartsReact;

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

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import React from 'react';
 import SplitPane, { Pane } from 'react-split-pane';
-import block from 'bem-cn-lite';
+import { cn } from '../../../../../utils/cn';
 import './StyledSplitPane.css';
-const b = block('styled-split-pane');
+const b = cn('styled-split-pane');
 const resizerClassName = b('pane-resizer');
 export const StyledSplitPane = (_a) => {
     var { paneOneRender, paneTwoRender } = _a, splitPaneProps = __rest(_a, ["paneOneRender", "paneTwoRender"]);

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

@@ -1,12 +1,12 @@
 /* eslint callback-return: 0 */
 import React from 'react';
-import block from 'bem-cn-lite';
 import { debounce, get } from 'lodash';
 import { getRandomCKId } from '../../../../../utils';
+import { cn } from '../../../../../utils/cn';
 import { chartTypesWithoutCrosshair } from '../../helpers/config/config';
 import { StyledSplitPane } from '../StyledSplitPane/StyledSplitPane';
 import './WithSplitPane.css';
-const b = block('with-split-pane');
+const b = cn('with-split-pane');
 const PANE_RESIZER_HEIGHT = 24;
 const CHART_SECTION_PERCENTAGE = 0.6;
 const MIN_TOOLTIP_SECTION_HEIGHT = 62;

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

@@ -1,6 +1,5 @@
 /* eslint new-cap: 0, complexity: 0 */
 import Highcharts from 'highcharts';
-import block from 'bem-cn-lite';
 import merge from 'lodash/merge';
 import mergeWith from 'lodash/mergeWith';
 import get from 'lodash/get';
@@ -13,13 +12,14 @@ import debounce from 'lodash/debounce';
 import { dateTime } from '@gravity-ui/date-utils';
 import { i18n } from '../../../../../i18n';
 import { formatNumber } from '../../../../shared';
+import { block } from '../../../../../utils/cn';
 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, getSortedData, } from './utils';
 import { handleLegendItemClick } from './handleLegendItemClick';
 import { getChartKitFormattedValue } from './utils/getChartKitFormattedValue';
-const b = block('chartkit-tooltip');
+const b = block('tooltip');
 const TOOLTIP_OFFSET_FROM_CURSOR = 15;
 const TOOLTIP_ROOT_CLASS_NAME = 'chartkit-highcharts-tooltip-container';
 const MOBILE_TOOLTIP_OFFSET_FROM_POINTER = 30;

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

@@ -1,10 +1,10 @@
 /** Default options for Highcharts & Highstock */
-import block from 'bem-cn-lite';
 import merge from 'lodash/merge';
 import { i18n } from '../../../../../i18n';
+import { block } from '../../../../../utils/cn';
 import { getChartKitFormattedValue } from './utils';
 import LocalStorage from './utils/localStorage';
-const b = block('chartkit-tooltip');
+const b = block('tooltip');
 function getTooltipHeaderFormat(format, showColor) {
     return `<div class="${b('header')}">
         ${showColor

package/build/plugins/index.d.ts

@@ -4,3 +4,4 @@ export { IndicatorPlugin } from './indicator';
 export type { IndicatorWidgetData } from './indicator/types';
 export { HighchartsPlugin } from './highcharts';
 export * from './highcharts/types';
+export { HighchartsReact } from './highcharts/renderer/components/HighchartsReact';