@gravity-ui/chartkit 3.4.3 → 3.5.0

package/build/plugins/d3/renderer/D3Widget.js

@@ -8,8 +8,8 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     const [dimensions, setDimensions] = React.useState();
     const handleResize = React.useCallback(() => {
         if (ref.current) {
-            const { width, height } = ref.current.getBoundingClientRect();
-            setDimensions({ width, height });
+            const { top, left, width, height } = ref.current.getBoundingClientRect();
+            setDimensions({ top, left, width, height });
         }
     }, []);
     const debuncedHandleResize = React.useMemo(() => {
@@ -35,6 +35,6 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
         // dimensions initialize
         handleResize();
     }, [handleResize]);
-    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { width: dimensions.width, height: dimensions.height, data: props.data }))));
+    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%', position: 'relative' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
 });
 export default D3Widget;

package/build/plugins/d3/renderer/components/Chart.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import type { ChartKitWidgetData } from '../../../../types/widget-data';
 import './styles.css';
 type Props = {
+    top: number;
+    left: number;
     width: number;
     height: number;
     data: ChartKitWidgetData;
 };
-export declare const Chart: ({ width, height, data }: Props) => React.JSX.Element;
+export declare const Chart: (props: Props) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/components/Chart.js

@@ -9,7 +9,8 @@ import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useAxis
 import { isAxisRelatedSeries } from '../utils';
 import './styles.css';
 const b = block('d3');
-export const Chart = ({ width, height, data }) => {
+export const Chart = (props) => {
+    const { top, left, width, height, data } = props;
     // FIXME: add data validation
     const { series } = data;
     const svgRef = React.createRef();
@@ -38,6 +39,10 @@ export const Chart = ({ width, height, data }) => {
         tooltip,
     });
     const { shapes } = useShapes({
+        top,
+        left,
+        boundsWidth,
+        boundsHeight,
         series: chartSeries,
         xAxis,
         xScale,

package/build/plugins/d3/renderer/components/Legend.js

@@ -1,66 +1,85 @@
 import React from 'react';
 import { select } from 'd3';
+import get from 'lodash/get';
 import { block } from '../../../../utils/cn';
+import { isAxisRelatedSeries } from '../utils';
 const b = block('d3-legend');
+const getLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        const isAxisRelated = isAxisRelatedSeries(s);
+        const legendEnabled = get(s, 'legend.enabled', true);
+        if (isAxisRelated) {
+            acc.push(s);
+        }
+        else if (!isAxisRelated && legendEnabled) {
+            acc.push(...s.data);
+        }
+        return acc;
+    }, []);
+};
 export const Legend = (props) => {
     const { width, offsetWidth, height, offsetHeight, chartSeries, onItemClick } = props;
-    return (React.createElement("g", { width: width, height: height, ref: (node) => {
-            if (!node) {
-                return;
-            }
-            const size = 10;
-            const textWidths = [0];
-            const svgElement = select(node);
-            svgElement.selectAll('*').remove();
-            const legendItemTemplate = svgElement
-                .selectAll('legend-history')
-                .data(chartSeries)
-                .enter()
-                .append('g')
-                .attr('class', b('item'))
-                .on('click', function (e, d) {
-                onItemClick({ name: d.name, metaKey: e.metaKey });
-            });
-            svgElement
-                .selectAll('*')
-                .data(chartSeries)
-                .append('text')
-                .text(function (d) {
-                return d.name;
-            })
-                .each(function () {
-                textWidths.push(this.getComputedTextLength());
-            })
-                .remove();
-            legendItemTemplate
-                .append('rect')
-                .attr('x', function (_d, i) {
-                return (offsetWidth +
-                    i * size +
-                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
-            })
-                .attr('y', offsetHeight - size / 2)
-                .attr('width', size)
-                .attr('height', size)
-                .style('fill', function (d) {
-                return d.color;
-            });
-            legendItemTemplate
-                .append('text')
-                .attr('x', function (_d, i) {
-                return (offsetWidth +
-                    i * size +
-                    size +
-                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
-            })
-                .attr('y', offsetHeight)
-                .attr('class', function (d) {
-                const mods = { selected: d.visible, unselected: !d.visible };
-                return b('item-text', mods);
-            })
-                .text(function (d) {
-                return ('name' in d && d.name);
-            })
-                .style('alignment-baseline', 'middle');
-        } }));
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const legendItems = getLegendItems(chartSeries);
+        const size = 10;
+        const textWidths = [0];
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const legendItemTemplate = svgElement
+            .selectAll('legend-history')
+            .data(legendItems)
+            .enter()
+            .append('g')
+            .attr('class', b('item'))
+            .on('click', function (e, d) {
+            onItemClick({ name: d.name, metaKey: e.metaKey });
+        });
+        svgElement
+            .selectAll('*')
+            .data(legendItems)
+            .append('text')
+            .text(function (d) {
+            return d.name;
+        })
+            .each(function () {
+            textWidths.push(this.getComputedTextLength());
+        })
+            .remove();
+        legendItemTemplate
+            .append('rect')
+            .attr('x', function (_d, i) {
+            return (offsetWidth +
+                i * size +
+                textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+        })
+            .attr('y', offsetHeight - size / 2)
+            .attr('width', size)
+            .attr('height', size)
+            .attr('class', b('item-shape'))
+            .style('fill', function (d) {
+            return d.color;
+        });
+        legendItemTemplate
+            .append('text')
+            .attr('x', function (_d, i) {
+            return (offsetWidth +
+                i * size +
+                size +
+                textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+        })
+            .attr('y', offsetHeight)
+            .attr('class', function (d) {
+            const mods = { selected: d.visible, unselected: !d.visible };
+            return b('item-text', mods);
+        })
+            .text(function (d) {
+            return ('name' in d && d.name);
+        })
+            .style('alignment-baseline', 'middle');
+    }, [width, offsetWidth, height, offsetHeight, chartSeries, onItemClick]);
+    return React.createElement("g", { ref: ref, width: width, height: height });
 };

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -14,6 +14,18 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     React.createElement("span", null, "Y:\u00A0"),
                     React.createElement("b", null, yRow))));
         }
+        case 'bar-x': {
+            const barXData = data;
+            const xRow = xAxis.type === 'category' ? barXData.category : barXData.x;
+            const yRow = yAxis.type === 'category' ? barXData.category : barXData.y;
+            return (React.createElement("div", null,
+                React.createElement("div", null, xRow),
+                React.createElement("div", null,
+                    React.createElement("span", null,
+                        React.createElement("b", null, series.name),
+                        ": ",
+                        yRow))));
+        }
         default: {
             return null;
         }

package/build/plugins/d3/renderer/components/styles.css

@@ -19,6 +19,10 @@
   user-select: none;
 }
 
+.chartkit-d3-legend__item-shape {
+  fill: var(--g-color-base-misc-medium);
+}
+
 .chartkit-d3-legend__item-text {
   fill: var(--g-color-text-secondary);
 }
@@ -31,19 +35,6 @@
   fill: var(--g-color-text-complementary);
 }
 
-.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-title {
   font-size: var(--g-text-subheader-2-font-size);
   font-weight: var(--g-text-subheader-font-weight);

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -1,6 +1,6 @@
 import { select, max } from 'd3';
 import get from 'lodash/get';
-import { formatAxisTickLabel, getDomainDataYBySeries } from '../../utils';
+import { formatAxisTickLabel, getDomainDataYBySeries, isAxisRelatedSeries } from '../../utils';
 import { getHorisontalSvgTextDimensions } from './utils';
 const AXIS_WIDTH = 1;
 const getAxisLabelMaxWidth = (args) => {
@@ -45,17 +45,24 @@ const getAxisLabelMaxWidth = (args) => {
 };
 export const getPreparedChart = (args) => {
     const { chart, series, preparedXAxis, preparedY1Axis } = args;
-    const marginBottom = get(chart, 'margin.bottom', 0) +
-        preparedXAxis.labels.padding +
-        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
-    const marginLeft = get(chart, 'margin.left', AXIS_WIDTH) +
-        preparedY1Axis.labels.padding +
-        getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
-        (preparedY1Axis.title.height || 0);
-    const marginTop = get(chart, 'margin.top', 0) +
-        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
-    const marginRight = get(chart, 'margin.right', 0) +
-        getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
+    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
+    let marginBottom = get(chart, 'margin.bottom', 0);
+    let marginLeft = get(chart, 'margin.left', 0);
+    let marginTop = get(chart, 'margin.top', 0);
+    let marginRight = get(chart, 'margin.right', 0);
+    if (hasAxisRelatedSeries) {
+        marginBottom +=
+            preparedXAxis.labels.padding +
+                getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
+        marginLeft +=
+            AXIS_WIDTH +
+                preparedY1Axis.labels.padding +
+                getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
+                (preparedY1Axis.title.height || 0);
+        marginTop +=
+            getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+        marginRight += getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
+    }
     return {
         margin: {
             top: marginTop,

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

@@ -1,3 +1,5 @@
 import type { ChartKitWidgetData } from '../../../../../types/widget-data';
 import type { ChartOptions } from './types';
-export declare const useChartOptions: (args: ChartKitWidgetData) => ChartOptions;
+type Args = ChartKitWidgetData;
+export declare const useChartOptions: (args: Args) => ChartOptions;
+export {};

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

@@ -1,8 +1,39 @@
 import React from 'react';
-import { getVisibleSeriesNames } from '../../utils';
+import get from 'lodash/get';
+import { isAxisRelatedSeries } from '../../utils';
+const getActiveLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        const isAxisRelated = isAxisRelatedSeries(s);
+        const isLegendEnabled = get(s, 'legend.enabled', true);
+        const isSeriesVisible = get(s, 'visible', true);
+        if (isLegendEnabled && isAxisRelated && isSeriesVisible && 'name' in s) {
+            acc.push(s.name);
+        }
+        else if (isLegendEnabled && !isAxisRelated) {
+            s.data.forEach((d) => {
+                const isDataVisible = get(d, 'visible', true);
+                if (isDataVisible && 'name' in d) {
+                    acc.push(d.name);
+                }
+            });
+        }
+        return acc;
+    }, []);
+};
+const getAllLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        if (isAxisRelatedSeries(s) && 'name' in s) {
+            acc.push(s.name);
+        }
+        else {
+            acc.push(...s.data.map((d) => ('name' in d && d.name) || ''));
+        }
+        return acc;
+    }, []);
+};
 export const useLegend = (args) => {
     const { series } = args;
-    const [activeLegendItems, setActiveLegendItems] = React.useState(getVisibleSeriesNames(series));
+    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(series));
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
         let nextActiveLegendItems;
@@ -13,7 +44,7 @@ export const useLegend = (args) => {
             nextActiveLegendItems = activeLegendItems.concat(name);
         }
         else if (onlyItemSelected) {
-            nextActiveLegendItems = getVisibleSeriesNames(series);
+            nextActiveLegendItems = getAllLegendItems(series);
         }
         else {
             nextActiveLegendItems = [name];
@@ -22,7 +53,7 @@ export const useLegend = (args) => {
     }, [series, activeLegendItems]);
     // FIXME: remove effect. It initiates extra rerender
     React.useEffect(() => {
-        setActiveLegendItems(getVisibleSeriesNames(series));
+        setActiveLegendItems(getActiveLegendItems(series));
     }, [series]);
     return { activeLegendItems, handleLegendItemClick };
 };

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

@@ -4,6 +4,8 @@ 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,5 +1,6 @@
 import React from 'react';
 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;
@@ -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

@@ -3,7 +3,12 @@ import type { ChartOptions } from '../useChartOptions/types';
 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'];
     yAxis: ChartOptions['yAxis'];

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);
@@ -14,6 +16,8 @@ export const useShapes = (args) => {
                 case 'bar-x': {
                     if (xScale && yScale) {
                         acc.push(...prepareBarXSeries({
+                            top,
+                            left,
                             series: chartSeries,
                             xAxis,
                             xScale,
@@ -21,6 +25,7 @@ export const useShapes = (args) => {
                             yScale,
                             onSeriesMouseMove,
                             onSeriesMouseLeave,
+                            svgContainer,
                         }));
                     }
                     break;
@@ -28,6 +33,8 @@ export const useShapes = (args) => {
                 case 'scatter': {
                     if (xScale && yScale) {
                         acc.push(...prepareScatterSeries({
+                            top,
+                            left,
                             series: chartSeries,
                             xAxis,
                             xScale,
@@ -40,9 +47,23 @@ export const useShapes = (args) => {
                     }
                     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

@@ -4,6 +4,8 @@ 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

@@ -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/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';

package/build/plugins/index.js

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

package/build/types/widget-data/bar-x.d.ts

@@ -11,7 +11,7 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
 export type BarXSeries<T = any> = BaseSeries & {
     type: 'bar-x';
     data: BarXSeriesData<T>[];
-    /** The name of the series (used in legend) */
+    /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;

package/build/types/widget-data/base.d.ts

@@ -1,4 +1,7 @@
+import type { ChartKitWidgetLegend } from './legend';
 export type BaseSeries = {
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend;
     /** Initial visibility of the series */
     visible?: boolean;
 };

package/build/types/widget-data/pie.d.ts

@@ -1,10 +1,27 @@
 import type { BaseSeries, BaseSeriesData } from './base';
 export type PieSeriesData<T = any> = BaseSeriesData<T> & {
+    /** The value of the pie segment. */
     value: number;
-    color: string;
+    /** The name of the pie segment (used in legend, tooltip etc). */
     name: string;
+    /** Individual color for the pie segment. */
+    color?: string;
+    /** Initial visibility of the pie segment. */
+    visible?: boolean;
 };
 export type PieSeries<T = any> = BaseSeries & {
     type: 'pie';
     data: PieSeriesData<T>[];
+    /** The color of the border surrounding each segment. Default `--g-color-base-background` from @gravity-ui/uikit. */
+    borderColor?: string;
+    /** The width of the border surrounding each segment. Default 1px. */
+    borderWidth?: number;
+    /** The corner radius of the border surrounding each segment. Default 0. */
+    borderRadius?: number;
+    /** The center of the pie chart relative to the chart area. */
+    center?: [string | number | null, string | number | null];
+    /** The inner radius of the pie. Default 0. */
+    innerRadius?: string | number;
+    /** The radius of the pie relative to the chart area. The default behaviour is to scale to the chart area. */
+    radius?: string | number;
 };

package/build/types/widget-data/scatter.d.ts

@@ -11,7 +11,7 @@ export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
 export type ScatterSeries<T = any> = BaseSeries & {
     type: 'scatter';
     data: ScatterSeriesData<T>[];
-    /** The name of the series (used in legend) */
+    /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.4.3",
+  "version": "3.5.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -54,7 +54,6 @@
     "gulp-replace": "^1.1.3",
     "gulp-typescript": "^5.0.1",
     "highcharts": "^8.2.2",
-    "highcharts-react-official": "^3.2.0",
     "husky": "^4.2.5",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.2",
@@ -77,7 +76,6 @@
   "peerDependencies": {
     "@gravity-ui/uikit": "^5.0.0",
     "highcharts": "^8.2.2",
-    "highcharts-react-official": "^3.2.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {