@gravity-ui/chartkit 4.10.0 → 4.11.0

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

@@ -55,12 +55,12 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             xRow))));
             }
             case 'pie': {
-                const pieSeries = series;
+                const pieSeriesData = data;
                 return (React.createElement("div", { key: id },
                     React.createElement("span", null,
-                        pieSeries.name || pieSeries.id,
+                        pieSeriesData.name || pieSeriesData.id,
                         "\u00A0"),
-                    React.createElement("span", null, pieSeries.value)));
+                    React.createElement("span", null, pieSeriesData.value)));
             }
             default: {
                 return null;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -29,10 +29,7 @@ function getLabelSettings({ axis, series, width, autoRotation = true, }) {
     const labelsHeight = rotation
         ? getLabelsSize({
             labels,
-            style: {
-                'font-size': axis.labels.style.fontSize,
-                'font-weight': axis.labels.style.fontWeight || 'normal',
-            },
+            style: axis.labels.style,
             rotation,
         }).maxHeight
         : axis.labels.lineHeight;

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -18,10 +18,7 @@ const getAxisLabelMaxWidth = (args) => {
     }));
     return getLabelsSize({
         labels,
-        style: {
-            'font-size': axis.labels.style.fontSize,
-            'font-weight': axis.labels.style.fontWeight || '',
-        },
+        style: axis.labels.style,
         rotation: axis.labels.rotation,
     }).maxWidth;
 };

package/build/plugins/d3/renderer/hooks/useSeries/prepare-pie.d.ts

@@ -0,0 +1,8 @@
+import { PieSeries } from '../../../../../types';
+import { PreparedLegend, PreparedSeries } from './types';
+type PreparePieSeriesArgs = {
+    series: PieSeries;
+    legend: PreparedLegend;
+};
+export declare function preparePieSeries(args: PreparePieSeriesArgs): PreparedSeries[];
+export {};

package/build/plugins/d3/renderer/hooks/useSeries/prepare-pie.js

@@ -0,0 +1,48 @@
+import { scaleOrdinal } from 'd3';
+import { DEFAULT_PALETTE } from '../../constants';
+import { getRandomCKId } from '../../../../../utils';
+import get from 'lodash/get';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function preparePieSeries(args) {
+    const { series, legend } = args;
+    const dataNames = series.data.map((d) => d.name);
+    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
+    const stackId = getRandomCKId();
+    const preparedSeries = series.data.map((dataItem) => {
+        var _a, _b, _c;
+        const result = {
+            type: 'pie',
+            data: dataItem,
+            dataLabels: {
+                enabled: get(series, 'dataLabels.enabled', true),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style),
+                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                allowOverlap: get(series, 'dataLabels.allowOverlap', false),
+                connectorPadding: get(series, 'dataLabels.connectorPadding', 5),
+                connectorShape: get(series, 'dataLabels.connectorShape', 'polyline'),
+                distance: get(series, 'dataLabels.distance', 25),
+                connectorCurve: get(series, 'dataLabels.connectorCurve', 'basic'),
+            },
+            label: dataItem.label,
+            value: dataItem.value,
+            visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
+            name: dataItem.name,
+            id: '',
+            color: dataItem.color || colorScale(dataItem.name),
+            legend: {
+                enabled: get(series, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(series),
+            },
+            center: series.center || ['50%', '50%'],
+            borderColor: series.borderColor || '',
+            borderRadius: (_b = series.borderRadius) !== null && _b !== void 0 ? _b : 0,
+            borderWidth: (_c = series.borderWidth) !== null && _c !== void 0 ? _c : 1,
+            radius: series.radius || '100%',
+            innerRadius: series.innerRadius || 0,
+            stackId,
+        };
+        return result;
+    });
+    return preparedSeries;
+}

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

@@ -1,13 +1,11 @@
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
-import { scaleOrdinal } from 'd3';
-import { getRandomCKId } from '../../../../../utils';
-import { DEFAULT_PALETTE } from '../../constants';
 import { prepareLineSeries } from './prepare-line-series';
 import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
 import { prepareLegendSymbol } from './utils';
 import { ChartKitError } from '../../../../../libs';
+import { preparePieSeries } from './prepare-pie';
 function prepareAxisRelatedSeries(args) {
     const { colorScale, series, legend } = args;
     const preparedSeries = cloneDeep(series);
@@ -21,41 +19,6 @@ function prepareAxisRelatedSeries(args) {
     };
     return [preparedSeries];
 }
-function preparePieSeries(args) {
-    const { series, legend } = args;
-    const dataNames = series.data.map((d) => d.name);
-    const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
-    const stackId = getRandomCKId();
-    const preparedSeries = series.data.map((dataItem) => {
-        var _a, _b;
-        const result = {
-            type: 'pie',
-            data: dataItem,
-            dataLabels: {
-                enabled: get(series, 'dataLabels.enabled', true),
-            },
-            label: dataItem.label,
-            value: dataItem.value,
-            visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
-            name: dataItem.name,
-            id: '',
-            color: dataItem.color || colorScale(dataItem.name),
-            legend: {
-                enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
-            },
-            center: series.center || ['50%', '50%'],
-            borderColor: series.borderColor || '',
-            borderRadius: (_a = series.borderRadius) !== null && _a !== void 0 ? _a : 0,
-            borderWidth: (_b = series.borderWidth) !== null && _b !== void 0 ? _b : 1,
-            radius: series.radius || '100%',
-            innerRadius: series.innerRadius || 0,
-            stackId,
-        };
-        return result;
-    });
-    return preparedSeries;
-}
 export function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colorScale } = args;
     switch (type) {

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -1,4 +1,4 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData } from '../../../../../types';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -67,12 +67,29 @@ export type PreparedBarYSeries = {
         maxWidth: number;
     };
 } & BasePreparedSeries;
-export type PreparedPieSeries = BasePreparedSeries & Required<Omit<PieSeries, 'data'>> & {
+export type PreparedPieSeries = {
+    type: PieSeries['type'];
     data: PieSeriesData;
     value: PieSeriesData['value'];
+    borderColor: string;
+    borderWidth: number;
+    borderRadius: number;
+    center?: [string | number | null, string | number | null];
+    radius?: string | number;
+    innerRadius?: string | number;
     stackId: string;
     label?: PieSeriesData['label'];
-};
+    dataLabels: {
+        enabled: boolean;
+        padding: number;
+        style: BaseTextStyle;
+        allowOverlap: boolean;
+        connectorPadding: number;
+        connectorShape: ConnectorShape;
+        distance: number;
+        connectorCurve: ConnectorCurve;
+    };
+} & BasePreparedSeries;
 export type PreparedLineSeries = {
     type: LineSeries['type'];
     data: LineSeriesData[];

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

@@ -5,12 +5,13 @@ import type { ChartScale } from '../useAxisScales';
 import type { PreparedSeries, PreparedSeriesOptions } from '../';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedScatterData } from './scatter';
+import type { PreparedPieData } from './pie/types';
 import type { PreparedLineData } from './line/types';
 import type { PreparedBarYData } from './bar-y/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

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

@@ -3,7 +3,8 @@ import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
-import { PieSeriesComponent } from './pie';
+import { PieSeriesShapes } from './pie';
+import { preparePieData } from './pie/prepare-data';
 import { prepareLineData } from './line/prepare-data';
 import { LineSeriesShapes } from './line';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
@@ -75,10 +76,12 @@ export const useShapes = (args) => {
                     break;
                 }
                 case 'pie': {
-                    const groupedPieSeries = group(chartSeries, (pieSeries) => pieSeries.stackId);
-                    acc.push(...Array.from(groupedPieSeries).map(([key, pieSeries]) => {
-                        return (React.createElement(PieSeriesComponent, { key: `pie-${key}`, boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, series: pieSeries, seriesOptions: seriesOptions, svgContainer: svgContainer }));
-                    }));
+                    const preparedData = preparePieData({
+                        series: chartSeries,
+                        boundsWidth,
+                        boundsHeight,
+                    });
+                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
                 }
             }
             return acc;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import { PreparedSeriesOptions } from '../../useSeries/types';
+import { PreparedPieData } from './types';
+type PreparePieSeriesArgs = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedPieData[];
+    seriesOptions: PreparedSeriesOptions;
+    svgContainer: SVGSVGElement | null;
+};
+export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;
+export {};

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import get from 'lodash/get';
+import { arc, color, pointer, select } from 'd3';
+import { block } from '../../../../../../utils/cn';
+import { setActiveState } from '../utils';
+import { line as lineGenerator } from 'd3-shape';
+import { setEllipsisForOverflowTexts } from '../../../utils';
+import { getCurveFactory } from './utils';
+const b = block('d3-pie');
+export function PieSeriesShapes(args) {
+    const { dispatcher, preparedData, seriesOptions, svgContainer } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const segmentSelector = `.${b('segment')}`;
+        const connectorSelector = `.${b('connector')}`;
+        const shapesSelection = svgElement
+            .selectAll('pie')
+            .data(preparedData)
+            .join('g')
+            .attr('id', (pieData) => pieData.id)
+            .attr('class', b('item'))
+            .attr('transform', (pieData) => {
+            const [x, y] = pieData.center;
+            return `translate(${x}, ${y})`;
+        })
+            .style('stroke', (pieData) => pieData.borderColor)
+            .style('stroke-width', (pieData) => pieData.borderWidth);
+        shapesSelection
+            .selectAll(segmentSelector)
+            .data((pieData) => pieData.segments)
+            .join('path')
+            .attr('d', (d) => {
+            const arcGenerator = arc()
+                .innerRadius(d.data.pie.innerRadius)
+                .outerRadius(d.data.pie.radius)
+                .cornerRadius(d.data.pie.borderRadius);
+            return arcGenerator(d);
+        })
+            .attr('class', b('segment'))
+            .attr('fill', (d) => d.data.color);
+        shapesSelection
+            .selectAll('text')
+            .data((pieData) => pieData.labels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null)
+            .call(setEllipsisForOverflowTexts, (d) => d.size.width > d.maxWidth ? d.maxWidth : Infinity);
+        // Add the polyline between chart and labels
+        shapesSelection
+            .selectAll(connectorSelector)
+            .data((pieData) => pieData.labels)
+            .enter()
+            .append('path')
+            .attr('class', b('connector'))
+            .attr('d', (d) => {
+            let line = lineGenerator();
+            const curveFactory = getCurveFactory(d.segment.pie);
+            if (curveFactory) {
+                line = line.curve(curveFactory);
+            }
+            return line(d.connector.points);
+        })
+            .attr('stroke', (d) => d.connector.color)
+            .attr('stroke-width', 1)
+            .attr('stroke-linejoin', 'round')
+            .attr('stroke-linecap', 'round')
+            .style('fill', 'none');
+        const eventName = `hover-shape.pie`;
+        const hoverOptions = get(seriesOptions, 'pie.states.hover');
+        const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
+        svgElement
+            .on('mousemove', (e) => {
+            const datum = select(e.target).datum();
+            const seriesId = get(datum, 'data.series.id', get(datum, 'series.id'));
+            const currentSegment = preparedData.reduce((result, pie) => {
+                var _a;
+                return (result || ((_a = pie.segments.find((s) => s.data.series.id === seriesId)) === null || _a === void 0 ? void 0 : _a.data));
+            }, undefined);
+            if (currentSegment) {
+                const data = {
+                    series: {
+                        id: currentSegment.series.id,
+                        type: 'pie',
+                        name: currentSegment.series.name,
+                    },
+                    data: currentSegment.series,
+                };
+                dispatcher.call('hover-shape', {}, [data], pointer(e, svgContainer));
+            }
+        })
+            .on('mouseleave', () => {
+            dispatcher.call('hover-shape', {}, undefined);
+        });
+        dispatcher.on(eventName, (data) => {
+            const selectedSeriesId = data === null || data === void 0 ? void 0 : data[0].series.id;
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+            shapesSelection.datum((_d, index, list) => {
+                const pieSelection = select(list[index]);
+                pieSelection
+                    .selectAll(segmentSelector)
+                    .datum((d, i, elements) => {
+                    const hovered = Boolean(hoverEnabled && d.data.series.id === selectedSeriesId);
+                    if (d.data.hovered !== hovered) {
+                        d.data.hovered = hovered;
+                        select(elements[i]).attr('fill', () => {
+                            var _a;
+                            const initialColor = d.data.color;
+                            if (d.data.hovered) {
+                                return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
+                            }
+                            return initialColor;
+                        });
+                    }
+                    setActiveState({
+                        element: elements[i],
+                        state: inactiveOptions,
+                        active: Boolean(!inactiveEnabled ||
+                            !selectedSeriesId ||
+                            selectedSeriesId === d.data.series.id),
+                        datum: d.data,
+                    });
+                    return d;
+                });
+                const labelSelection = pieSelection.selectAll('tspan');
+                const connectorSelection = pieSelection.selectAll(connectorSelector);
+                labelSelection.merge(connectorSelection).datum((d, i, elements) => {
+                    return setActiveState({
+                        element: elements[i],
+                        state: inactiveOptions,
+                        active: Boolean(!inactiveEnabled ||
+                            !selectedSeriesId ||
+                            selectedSeriesId === d.series.id),
+                        datum: d,
+                    });
+                });
+            });
+        });
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [dispatcher, preparedData, seriesOptions, svgContainer]);
+    return React.createElement("g", { ref: ref, className: b(), style: { zIndex: 9 } });
+}

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

@@ -0,0 +1,9 @@
+import { PreparedPieSeries } from '../../useSeries/types';
+import { PreparedPieData } from './types';
+type Args = {
+    series: PreparedPieSeries[];
+    boundsWidth: number;
+    boundsHeight: number;
+};
+export declare function preparePieData(args: Args): PreparedPieData[];
+export {};

package/build/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.js

@@ -0,0 +1,161 @@
+import { arc, group } from 'd3';
+import { calculateNumericProperty, getLabelsSize, getLeftPosition, isLabelsOverlapping, } from '../../../utils';
+import { pieGenerator } from './utils';
+const FULL_CIRCLE = Math.PI * 2;
+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 preparePieData(args) {
+    const { series: prepapredSeries, boundsWidth, boundsHeight } = args;
+    const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
+    const groupedPieSeries = group(prepapredSeries, (pieSeries) => pieSeries.stackId);
+    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        var _a, _b, _c;
+        const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = items[0];
+        const radius = (_a = calculateNumericProperty({ value: seriesRadius, base: maxRadius })) !== null && _a !== void 0 ? _a : maxRadius;
+        const data = {
+            id: stackId,
+            center: getCenter(boundsWidth, boundsHeight, center),
+            innerRadius: (_b = calculateNumericProperty({ value: seriesInnerRadius, base: radius })) !== null && _b !== void 0 ? _b : 0,
+            radius,
+            segments: [],
+            labels: [],
+            borderColor,
+            borderWidth,
+            borderRadius,
+            series: items[0],
+            connectorCurve: dataLabels.connectorCurve,
+        };
+        const segments = items.map((item) => {
+            return {
+                value: item.value,
+                color: item.color,
+                series: item,
+                hovered: false,
+                active: true,
+                pie: data,
+            };
+        });
+        data.segments = pieGenerator(segments);
+        if (dataLabels.enabled) {
+            const { style, connectorPadding, distance } = dataLabels;
+            const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
+            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
+            if (data.radius > minSegmentRadius) {
+                data.radius = minSegmentRadius;
+                data.innerRadius =
+                    (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
+            }
+            const connectorStartPointGenerator = arc()
+                .innerRadius(data.radius)
+                .outerRadius(data.radius);
+            const connectorMidPointRadius = data.radius + distance / 2;
+            const connectorMidPointGenerator = arc()
+                .innerRadius(connectorMidPointRadius)
+                .outerRadius(connectorMidPointRadius);
+            const connectorArcRadius = data.radius + distance;
+            const connectorEndPointGenerator = arc()
+                .innerRadius(connectorArcRadius)
+                .outerRadius(connectorArcRadius);
+            const labelArcRadius = connectorArcRadius + connectorPadding;
+            const labelArcGenerator = arc()
+                .innerRadius(labelArcRadius)
+                .outerRadius(labelArcRadius);
+            const labels = [];
+            items.forEach((d, index) => {
+                const prevLabel = labels[labels.length - 1];
+                const text = String(d.data.label || d.data.value);
+                const labelSize = getLabelsSize({ labels: [text], style });
+                const labelWidth = labelSize.maxWidth;
+                const relatedSegment = data.segments[index];
+                const getLabelPosition = (angle) => {
+                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                    x = Math.max(-boundsWidth / 2, x);
+                    if (y < 0) {
+                        y -= labelHeight;
+                    }
+                    return [x, y];
+                };
+                const getConnectorPoints = (angle) => {
+                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
+                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                    if (dataLabels.connectorShape === 'straight-line') {
+                        return [connectorStartPoint, connectorEndPoint];
+                    }
+                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
+                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
+                };
+                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
+                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
+                const [x, y] = getLabelPosition(midAngle);
+                const label = {
+                    text,
+                    x,
+                    y,
+                    style,
+                    size: { width: labelWidth, height: labelHeight },
+                    maxWidth: labelWidth,
+                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
+                    series: { id: d.id },
+                    active: true,
+                    connector: {
+                        points: getConnectorPoints(midAngle),
+                        color: relatedSegment.data.color,
+                    },
+                    segment: relatedSegment.data,
+                    angle: midAngle,
+                };
+                let overlap = false;
+                if (prevLabel) {
+                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                    if (overlap) {
+                        let shouldAdjustAngle = true;
+                        const step = Math.PI / 180;
+                        while (shouldAdjustAngle) {
+                            const newAngle = label.angle + step;
+                            if (newAngle > FULL_CIRCLE &&
+                                newAngle % FULL_CIRCLE > labels[0].angle) {
+                                shouldAdjustAngle = false;
+                            }
+                            else {
+                                label.angle = newAngle;
+                                const [newX, newY] = getLabelPosition(newAngle);
+                                label.x = newX;
+                                label.y = newY;
+                                label.connector.points = getConnectorPoints(newAngle);
+                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
+                                    shouldAdjustAngle = false;
+                                    overlap = false;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (dataLabels.allowOverlap || !overlap) {
+                    const left = getLeftPosition(label);
+                    if (Math.abs(left) > boundsWidth / 2) {
+                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                    }
+                    else {
+                        const right = left + label.size.width;
+                        if (right > boundsWidth / 2) {
+                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
+                        }
+                    }
+                    labels.push(label);
+                }
+            });
+            data.labels = labels;
+        }
+        return data;
+    });
+}

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

@@ -0,0 +1,34 @@
+import type { PieArcDatum } from 'd3';
+import { PreparedPieSeries } from '../../useSeries/types';
+import { LabelData } from '../../../types';
+import { ConnectorCurve } from '../../../../../../types';
+export type SegmentData = {
+    value: number;
+    color: string;
+    series: PreparedPieSeries;
+    hovered: boolean;
+    active: boolean;
+    pie: PreparedPieData;
+};
+export type PieLabelData = LabelData & {
+    connector: {
+        points: [number, number][];
+        color: string;
+    };
+    segment: SegmentData;
+    angle: number;
+    maxWidth: number;
+};
+export type PreparedPieData = {
+    id: string;
+    segments: PieArcDatum<SegmentData>[];
+    labels: PieLabelData[];
+    center: [number, number];
+    radius: number;
+    innerRadius: number;
+    borderRadius: number;
+    borderWidth: number;
+    borderColor: string;
+    series: PreparedPieSeries;
+    connectorCurve: ConnectorCurve;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import type { CurveFactory } from 'd3';
+import type { PreparedPieData, SegmentData } from './types';
+export declare const pieGenerator: import("d3-shape").Pie<any, SegmentData>;
+export declare function getCurveFactory(data: PreparedPieData): CurveFactory | undefined;

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

@@ -0,0 +1,15 @@
+import { pie, curveBasis, curveLinear } from 'd3';
+export const pieGenerator = pie()
+    .value((d) => d.value)
+    .sort(null);
+export function getCurveFactory(data) {
+    switch (data.connectorCurve) {
+        case 'basic': {
+            return curveBasis;
+        }
+        case 'linear': {
+            return curveLinear;
+        }
+    }
+    return undefined;
+}

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

@@ -10,6 +10,7 @@
   fill: var(--g-color-text-complementary);
   font-size: 11px;
   font-weight: bold;
+  alignment-baseline: before-edge;
 }
 
 .chartkit-d3-bar-x__label {

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

@@ -29,12 +29,8 @@ export function setActiveState(args) {
     const elementSelection = select(element);
     if (datum.active !== active) {
         datum.active = active;
-        elementSelection.attr('opacity', function (d) {
-            if (!d.active) {
-                return (state === null || state === void 0 ? void 0 : state.opacity) || null;
-            }
-            return null;
-        });
+        const opacity = datum.active ? null : state === null || state === void 0 ? void 0 : state.opacity;
+        elementSelection.attr('opacity', opacity || null);
     }
     return datum;
 }

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

@@ -8,7 +8,7 @@ export type LabelData = {
         width: number;
         height: number;
     };
-    textAnchor: 'middle';
+    textAnchor: 'start' | 'end' | 'middle';
     series: {
         id: string;
     };

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -20,7 +20,7 @@ export function axisBottom(args) {
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
     const labelHeight = getLabelsSize({
         labels: values,
-        style: { 'font-size': (labelsStyle === null || labelsStyle === void 0 ? void 0 : labelsStyle.fontSize) || '' },
+        style: labelsStyle,
     }).maxHeight;
     return function (selection) {
         var _a, _b;

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

@@ -1,3 +1,6 @@
 import type { LabelData } from '../types';
 export declare function getLeftPosition(label: LabelData): number;
-export declare function filterOverlappingLabels(labels: LabelData[]): LabelData[];
+export declare function getOverlappingByX(rect1: LabelData, rect2: LabelData, gap?: number): number;
+export declare function getOverlappingByY(rect1: LabelData, rect2: LabelData, gap?: number): number;
+export declare function isLabelsOverlapping<T extends LabelData>(label1: T, label2: T, padding?: number): boolean;
+export declare function filterOverlappingLabels<T extends LabelData>(labels: T[]): T[];

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

@@ -1,33 +1,42 @@
 import sortBy from 'lodash/sortBy';
 export function getLeftPosition(label) {
     switch (label.textAnchor) {
+        case 'start': {
+            return label.x;
+        }
         case 'middle': {
             return label.x - label.size.width / 2;
         }
+        case 'end': {
+            return label.x - label.size.width;
+        }
         default: {
             return label.x;
         }
     }
 }
-function hasOverlappingByX(rect1, rect2) {
+export function getOverlappingByX(rect1, rect2, gap = 0) {
     const left1 = getLeftPosition(rect1);
     const right1 = left1 + rect1.size.width;
     const left2 = getLeftPosition(rect2);
     const right2 = left2 + rect2.size.width;
-    return Math.max(0, Math.min(right1, right2) - Math.max(left1, left2)) > 0;
+    return Math.max(0, Math.min(right1, right2) - Math.max(left1, left2) + gap);
 }
-function hasOverlappingByY(rect1, rect2) {
+export function getOverlappingByY(rect1, rect2, gap = 0) {
     const top1 = rect1.y - rect1.size.height;
     const bottom1 = rect1.y;
     const top2 = rect2.y - rect2.size.height;
     const bottom2 = rect2.y;
-    return Math.max(0, Math.min(bottom1, bottom2) - Math.max(top1, top2)) > 0;
+    return Math.max(0, Math.min(bottom1, bottom2) - Math.max(top1, top2) + gap);
+}
+export function isLabelsOverlapping(label1, label2, padding = 0) {
+    return Boolean(getOverlappingByX(label1, label2, padding) && getOverlappingByY(label1, label2, padding));
 }
 export function filterOverlappingLabels(labels) {
     const result = [];
     const sorted = sortBy(labels, (d) => d.y, getLeftPosition);
     sorted.forEach((label) => {
-        if (!result.some((l) => hasOverlappingByX(l, label) && hasOverlappingByY(l, label))) {
+        if (!result.some((l) => isLabelsOverlapping(label, l))) {
             result.push(label);
         }
     });

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

@@ -1,7 +1,7 @@
 import type { Selection } from 'd3';
 import { BaseTextStyle } from '../../../../types';
-export declare function setEllipsisForOverflowText(selection: Selection<SVGTextElement, unknown, null, unknown>, maxWidth: number): void;
-export declare function setEllipsisForOverflowTexts(selection: Selection<SVGTextElement, string, any, unknown>, maxWidth: number): void;
+export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number): void;
+export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, any, unknown>, maxWidth: ((datum: T) => number) | number): void;
 export declare function hasOverlappingLabels({ width, labels, padding, style, }: {
     width: number;
     labels: string[];
@@ -10,7 +10,7 @@ export declare function hasOverlappingLabels({ width, labels, padding, style, }:
 }): boolean;
 export declare function getLabelsSize({ labels, style, rotation, }: {
     labels: string[];
-    style?: Record<string, string>;
+    style?: BaseTextStyle;
     rotation?: number;
 }): {
     maxHeight: number;

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

@@ -12,8 +12,9 @@ export function setEllipsisForOverflowText(selection, maxWidth) {
     }
 }
 export function setEllipsisForOverflowTexts(selection, maxWidth) {
-    selection.each(function () {
-        setEllipsisForOverflowText(select(this), maxWidth);
+    selection.each(function (datum) {
+        const textMaxWidth = typeof maxWidth === 'function' ? maxWidth(datum) : maxWidth;
+        setEllipsisForOverflowText(select(this), textMaxWidth);
     });
 }
 export function hasOverlappingLabels({ width, labels, padding = 0, style, }) {
@@ -31,9 +32,8 @@ export function hasOverlappingLabels({ width, labels, padding = 0, style, }) {
 }
 function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
     const text = selection.append('g').append('text');
-    Object.entries(style).forEach(([name, value]) => {
-        text.style(name, value);
-    });
+    text.style('font-size', style.fontSize || '');
+    text.style('font-weight', style.fontWeight || '');
     Object.entries(attrs).forEach(([name, value]) => {
         text.attr(name, value);
     });
@@ -48,7 +48,10 @@ function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
 }
 export function getLabelsSize({ labels, style, rotation, }) {
     var _a;
-    const svg = select(document.body).append('svg');
+    const container = select(document.body)
+        .append('div')
+        .attr('class', 'chartkit chartkit-theme_common');
+    const svg = container.append('svg');
     const textSelection = renderLabels(svg, { labels, style });
     if (rotation) {
         textSelection
@@ -56,6 +59,6 @@ export function getLabelsSize({ labels, style, rotation, }) {
             .style('transform', `rotate(${rotation}deg)`);
     }
     const { height = 0, width = 0 } = ((_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
-    svg.remove();
+    container.remove();
     return { maxHeight: height, maxWidth: width };
 }

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

@@ -42,12 +42,13 @@ function getPointsForInitialRefresh(chart) {
     return points;
 }
 function forceHoverState(chart, activePoints) {
+    var _a, _b, _c;
     const chartType = get(chart, 'userOptions.chart.type') || '';
     if (chartType === 'pie') {
         chart.tooltip.refresh(activePoints);
         chart.pointsForInitialRefresh = activePoints;
     }
-    else if (chart.series.length === 1) {
+    else if (((_a = chart.series) === null || _a === void 0 ? void 0 : _a.length) === 1) {
         const series = chart.series[0];
         const seriesType = (series && series.type) || (chart.options.chart && chart.options.chart.type);
         if (seriesType && seriesTypesNeedsOnlyHoverState.indexOf(seriesType)) {
@@ -61,8 +62,8 @@ function forceHoverState(chart, activePoints) {
     }
     if (chartTypesWithoutCrosshair.indexOf(chartType) === -1) {
         const point = Array.isArray(activePoints) ? activePoints[0] : activePoints;
-        chart.xAxis[0].drawCrosshair(undefined, point);
-        chart.yAxis[0].drawCrosshair(undefined, point);
+        (_b = chart.xAxis) === null || _b === void 0 ? void 0 : _b[0].drawCrosshair(undefined, point);
+        (_c = chart.yAxis) === null || _c === void 0 ? void 0 : _c[0].drawCrosshair(undefined, point);
     }
 }
 var PaneSplits;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
-import YagrComponent from '@gravity-ui/yagr/dist/react';
+import YagrComponent from '@gravity-ui/yagr/react';
 import { i18n } from '../../../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
 import { useWidgetData } from './useWidgetData';

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

@@ -1,4 +1,4 @@
-import type { YagrChartProps } from '@gravity-ui/yagr/dist/react';
+import type { YagrChartProps } from '@gravity-ui/yagr/react';
 import type { MinimalValidConfig, YagrWidgetProps } from '../types';
 export declare const useWidgetData: (props: YagrWidgetProps, id: string) => {
     config: MinimalValidConfig;

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

@@ -104,6 +104,12 @@ export const shapeYagrConfig = (args) => {
         if (args.customTooltip) {
             config.tooltip.virtual = true;
         }
+        /**
+         * @todo remove this on next chartkit major release
+         * This added to prevent breaking changes in chartkit, while updating yagr@4 which
+         * has fixed tooltip sorting (@see https://github.com/gravity-ui/yagr/issues/149)
+         */
+        config.tooltip.sort = config.tooltip.sort || ((a, b) => b.rowIdx - a.rowIdx);
     }
     config.axes = config.axes || {};
     const xAxis = config.axes[defaults.DEFAULT_X_SCALE];

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

@@ -2,7 +2,7 @@ import type { MinimalValidConfig, RawSerieData, YagrConfig } from '@gravity-ui/y
 import type Yagr from '@gravity-ui/yagr';
 import { ChartKitProps } from 'src/types';
 export type { default as Yagr } from '@gravity-ui/yagr';
-export type { YagrReactRef } from '@gravity-ui/yagr/dist/react';
+export type { YagrReactRef } from '@gravity-ui/yagr/react';
 export * from '@gravity-ui/yagr/dist/types';
 export interface CustomTooltipProps {
     yagr: Yagr<MinimalValidConfig> | undefined;

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

@@ -10,6 +10,8 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     /** Initial data label of the pie segment. If not specified, the value is used. */
     label?: string;
 };
+export type ConnectorShape = 'straight-line' | 'polyline';
+export type ConnectorCurve = 'linear' | 'basic';
 export type PieSeries<T = any> = BaseSeries & {
     type: 'pie';
     data: PieSeriesData<T>[];
@@ -41,4 +43,31 @@ export type PieSeries<T = any> = BaseSeries & {
     legend?: ChartKitWidgetLegend & {
         symbol?: RectLegendSymbolOptions;
     };
+    dataLabels?: BaseSeries['dataLabels'] & {
+        /**
+         * The distance of the data label from the pie's edge.
+         *
+         * @default 30
+         * */
+        distance?: number;
+        /**
+         * The distance from the data label to the connector.
+         *
+         * @default 5
+         * */
+        connectorPadding?: number;
+        /**
+         * The method that is used to generate the connector path.
+         *
+         * @default 'polyline'
+         * */
+        connectorShape?: ConnectorShape;
+        /**
+         * How to interpolate between two-dimensional [x, y] points for a connector.
+         * Works only if connectorShape equals to 'polyline'
+         *
+         * @default 'basic'
+         * */
+        connectorCurve?: ConnectorCurve;
+    };
 };

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

@@ -14,7 +14,11 @@ export type TooltipDataChunkBarY<T = any> = {
 };
 export type TooltipDataChunkPie<T = any> = {
     data: PieSeriesData<T>;
-    series: Omit<PieSeries<T>, 'data'>;
+    series: {
+        type: PieSeries['type'];
+        id: string;
+        name: string;
+    };
 };
 export type TooltipDataChunkScatter<T = any> = {
     data: ScatterSeriesData<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.11.3",
+    "@gravity-ui/yagr": "^4.0.0",
     "afterframe": "^1.0.2",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { Dispatch } from 'd3';
-import { PreparedPieSeries, PreparedSeriesOptions } from '../useSeries/types';
-type PreparePieSeriesArgs = {
-    boundsWidth: number;
-    boundsHeight: number;
-    dispatcher: Dispatch<object>;
-    series: PreparedPieSeries[];
-    seriesOptions: PreparedSeriesOptions;
-    svgContainer: SVGSVGElement | null;
-};
-export declare function PieSeriesComponent(args: PreparePieSeriesArgs): React.JSX.Element;
-export {};

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

@@ -1,204 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import kebabCase from 'lodash/kebabCase';
-import { arc, color, pie, pointer, select } from 'd3';
-import { block } from '../../../../../utils/cn';
-import { calculateNumericProperty, extractD3DataFromNode, getHorisontalSvgTextHeight, isNodeContainsD3Data, } from '../../utils';
-const b = block('d3-pie');
-const preparePieData = (series) => {
-    return series.map((s) => ({ series: s, data: s.data }));
-};
-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];
-};
-const getOpacity = (args) => {
-    const { data, hoveredData, opacity } = args;
-    if (data.series.id !== (hoveredData === null || hoveredData === void 0 ? void 0 : hoveredData.series.id)) {
-        return opacity || null;
-    }
-    return null;
-};
-const isNodeContainsPieData = (node) => {
-    return isNodeContainsD3Data(node);
-};
-export function PieSeriesComponent(args) {
-    var _a;
-    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, svgContainer } = args;
-    const ref = React.useRef(null);
-    const [x, y] = getCenter(boundsWidth, boundsHeight, (_a = series[0]) === null || _a === void 0 ? void 0 : _a.center);
-    React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (!ref.current) {
-            return () => { };
-        }
-        const svgElement = select(ref.current);
-        const hoverOptions = get(seriesOptions, 'pie.states.hover');
-        const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        const isLabelsEnabled = (_b = (_a = series[0]) === null || _a === void 0 ? void 0 : _a.dataLabels) === null || _b === void 0 ? void 0 : _b.enabled;
-        let radiusRelatedToChart = Math.min(boundsWidth, boundsHeight) / 2;
-        if (isLabelsEnabled) {
-            // To have enough space for labels
-            radiusRelatedToChart *= 0.9;
-        }
-        let radius = (_d = calculateNumericProperty({ value: (_c = series[0]) === null || _c === void 0 ? void 0 : _c.radius, base: radiusRelatedToChart })) !== null && _d !== void 0 ? _d : radiusRelatedToChart;
-        const labelsArcRadius = ((_e = series[0]) === null || _e === void 0 ? void 0 : _e.radius) ? radius : radiusRelatedToChart;
-        if (isLabelsEnabled) {
-            // To have enough space for labels lines
-            radius *= 0.9;
-        }
-        const innerRadius = (_f = calculateNumericProperty({ value: series[0].innerRadius, base: radius })) !== null && _f !== void 0 ? _f : 0;
-        const preparedData = preparePieData(series);
-        const pieGenerator = pie().value((d) => d.data.value);
-        const visibleData = preparedData.filter((d) => d.series.visible);
-        const dataReady = pieGenerator(visibleData);
-        const arcGenerator = arc()
-            .innerRadius(innerRadius)
-            .outerRadius(radius)
-            .cornerRadius((d) => d.data.series.borderRadius);
-        svgElement.selectAll('*').remove();
-        const segmentSelection = svgElement
-            .selectAll('segments')
-            .data(dataReady)
-            .enter()
-            .append('path')
-            .attr('d', arcGenerator)
-            .attr('class', b('segment'))
-            .attr('fill', (d) => d.data.series.color)
-            .style('stroke', ((_g = series[0]) === null || _g === void 0 ? void 0 : _g.borderColor) || '')
-            .style('stroke-width', (_j = (_h = series[0]) === null || _h === void 0 ? void 0 : _h.borderWidth) !== null && _j !== void 0 ? _j : 1);
-        let polylineSelection;
-        let labelSelection;
-        if ((_l = (_k = series[0]) === null || _k === void 0 ? void 0 : _k.dataLabels) === null || _l === void 0 ? void 0 : _l.enabled) {
-            const labelHeight = getHorisontalSvgTextHeight({ text: 'tmp' });
-            const outerArc = arc()
-                .innerRadius(labelsArcRadius)
-                .outerRadius(labelsArcRadius);
-            const polylineArc = arc()
-                .innerRadius(radius)
-                .outerRadius(radius);
-            // Add the polylines between chart and labels
-            polylineSelection = svgElement
-                .selectAll('polylines')
-                .data(dataReady)
-                .enter()
-                .append('polyline')
-                .attr('stroke', (d) => d.data.series.color || '')
-                .attr('stroke-width', 1)
-                .attr('points', (d) => {
-                // Line insertion in the slice
-                const posA = polylineArc.centroid(d);
-                // Line break: we use the other arc generator that has been built only for that
-                const posB = outerArc.centroid(d);
-                const posC = outerArc.centroid(d);
-                // We need the angle to see if the X position will be at the extreme right or extreme left
-                const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
-                const result = [posA, posB, posC];
-                if (midangle < Math.PI) {
-                    // polylines located to the right
-                    const nextCx = radiusRelatedToChart * 0.95;
-                    if (nextCx > result[1][0]) {
-                        result[2][0] = nextCx;
-                    }
-                    else {
-                        result.splice(2, 1);
-                    }
-                }
-                else {
-                    // polylines located to the left
-                    const nextCx = radiusRelatedToChart * 0.95 * -1;
-                    if (nextCx < result[1][0]) {
-                        result[2][0] = nextCx;
-                    }
-                    else {
-                        result.splice(2, 1);
-                    }
-                }
-                return result.join(' ');
-            })
-                .attr('pointer-events', 'none')
-                .style('fill', 'none');
-            // Add the polylines between chart and labels
-            labelSelection = svgElement
-                .selectAll('labels')
-                .data(dataReady)
-                .join('text')
-                .text((d) => d.data.series.label || d.value)
-                .attr('class', b('label'))
-                .attr('transform', (d) => {
-                const pos = outerArc.centroid(d);
-                const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
-                pos[0] = radiusRelatedToChart * 0.99 * (midangle < Math.PI ? 1 : -1);
-                pos[1] += labelHeight / 4;
-                return `translate(${pos})`;
-            })
-                .attr('pointer-events', 'none')
-                .style('text-anchor', (d) => {
-                const midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
-                return midangle < Math.PI ? 'start' : 'end';
-            });
-        }
-        svgElement
-            .on('mousemove', (e) => {
-            const segment = e.target;
-            if (!isNodeContainsPieData(segment)) {
-                return;
-            }
-            const [pointerX, pointerY] = pointer(e, svgContainer);
-            const segmentData = extractD3DataFromNode(segment).data;
-            dispatcher.call('hover-shape', {}, [segmentData], [pointerX, pointerY]);
-        })
-            .on('mouseleave', () => {
-            dispatcher.call('hover-shape', {}, undefined);
-        });
-        const eventName = `hover-shape.pie-${kebabCase(preparedData[0].series.id)}`;
-        dispatcher.on(eventName, (datas) => {
-            const data = datas === null || datas === void 0 ? void 0 : datas[0];
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            if (hoverEnabled && data) {
-                segmentSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.data.series.color;
-                    if (d.data.series.id === data.series.id) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-            else if (hoverEnabled) {
-                segmentSelection.attr('fill', (d) => d.data.series.color);
-            }
-            if (inactiveEnabled && data) {
-                const opacity = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity;
-                segmentSelection.attr('opacity', (d) => {
-                    return getOpacity({ data: d.data, hoveredData: data, opacity });
-                });
-                polylineSelection === null || polylineSelection === void 0 ? void 0 : polylineSelection.attr('opacity', (d) => {
-                    return getOpacity({ data: d.data, hoveredData: data, opacity });
-                });
-                labelSelection === null || labelSelection === void 0 ? void 0 : labelSelection.attr('opacity', (d) => {
-                    return getOpacity({ data: d.data, hoveredData: data, opacity });
-                });
-            }
-            else if (inactiveEnabled) {
-                segmentSelection.attr('opacity', null);
-                polylineSelection === null || polylineSelection === void 0 ? void 0 : polylineSelection.attr('opacity', null);
-                labelSelection === null || labelSelection === void 0 ? void 0 : labelSelection.attr('opacity', null);
-            }
-        });
-        return () => {
-            dispatcher.on(eventName, null);
-        };
-    }, [boundsWidth, boundsHeight, dispatcher, series, seriesOptions, svgContainer]);
-    return React.createElement("g", { ref: ref, className: b(), transform: `translate(${x}, ${y})` });
-}