@gravity-ui/chartkit 4.10.1 → 4.12.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { select } from 'd3';
+import { select, line as lineGenerator } from 'd3';
 import { block } from '../../../../utils/cn';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
@@ -56,6 +56,58 @@ const appendPaginator = (args) => {
     });
     paginationLine.attr('transform', transform);
 };
+const legendSymbolGenerator = lineGenerator()
+    .x((d) => d.x)
+    .y((d) => d.y);
+function renderLegendSymbol(args) {
+    const { selection, legend } = args;
+    const line = selection.data();
+    const getXPosition = (i) => {
+        return line.slice(0, i).reduce((acc, legendItem) => {
+            return (acc +
+                legendItem.symbol.width +
+                legendItem.symbol.padding +
+                legendItem.textWidth +
+                legend.itemDistance);
+        }, 0);
+    };
+    selection.each(function (d, i) {
+        const element = select(this);
+        const x = getXPosition(i);
+        const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
+        const color = d.visible ? d.color : '';
+        switch (d.symbol.shape) {
+            case 'path': {
+                const y = legend.lineHeight / 2;
+                const points = [
+                    { x: x, y },
+                    { x: x + d.symbol.width, y },
+                ];
+                element
+                    .append('path')
+                    .attr('d', legendSymbolGenerator(points))
+                    .attr('fill', 'none')
+                    .attr('stroke-width', d.symbol.strokeWidth)
+                    .attr('class', className)
+                    .style('stroke', color);
+                break;
+            }
+            case 'rect': {
+                const y = (legend.lineHeight - d.symbol.height) / 2;
+                element
+                    .append('rect')
+                    .attr('x', x)
+                    .attr('y', y)
+                    .attr('width', d.symbol.width)
+                    .attr('height', d.symbol.height)
+                    .attr('rx', d.symbol.radius)
+                    .attr('class', className)
+                    .style('fill', color);
+                break;
+            }
+        }
+    });
+}
 export const Legend = (props) => {
     const { boundsWidth, chartSeries, legend, items, config, onItemClick } = props;
     const ref = React.useRef(null);
@@ -95,25 +147,7 @@ export const Legend = (props) => {
                         legend.itemDistance);
                 }, 0);
             };
-            legendItemTemplate
-                .append('rect')
-                .attr('x', function (_d, i) {
-                return getXPosition(i);
-            })
-                .attr('y', (legendItem) => {
-                return (legend.lineHeight - legendItem.symbol.height) / 2;
-            })
-                .attr('width', (legendItem) => {
-                return legendItem.symbol.width;
-            })
-                .attr('height', (legendItem) => legendItem.symbol.height)
-                .attr('rx', (legendItem) => legendItem.symbol.radius)
-                .attr('class', function (d) {
-                return b('item-shape', { unselected: !d.visible });
-            })
-                .style('fill', function (d) {
-                return d.visible ? d.color : '';
-            });
+            renderLegendSymbol({ selection: legendItemTemplate, legend });
             legendItemTemplate
                 .append('text')
                 .attr('x', function (legendItem, i) {

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

@@ -21,12 +21,12 @@
   user-select: none;
 }
 
-.chartkit-d3-legend__item-shape {
-  fill: var(--g-color-base-misc-medium);
+.chartkit-d3-legend__item-symbol_shape_rect.chartkit-d3-legend__item-symbol_unselected {
+  fill: var(--g-color-text-hint);
 }
 
-.chartkit-d3-legend__item-shape_unselected {
-  fill: var(--g-color-text-hint);
+.chartkit-d3-legend__item-symbol_shape_path.chartkit-d3-legend__item-symbol_unselected {
+  stroke: var(--g-color-text-hint);
 }
 
 .chartkit-d3-legend__item-text {

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

@@ -1,4 +1,5 @@
 import { BaseTextStyle } from '../../../../../types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export declare const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export declare const DEFAULT_DATALABELS_PADDING = 5;
 export declare const DEFAULT_DATALABELS_STYLE: BaseTextStyle;

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

@@ -1,4 +1,5 @@
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 8;
+export const DEFAULT_LEGEND_SYMBOL_PADDING = 5;
 export const DEFAULT_DATALABELS_PADDING = 5;
 export const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',

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

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetData } from '../../../../../types/widget-data';
+import type { ChartKitWidgetData } from '../../../../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, LegendItem } from './types';
 export declare const getPreparedLegend: (args: {

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

@@ -1,6 +1,8 @@
 import { ScaleOrdinal } from 'd3';
 import { ChartKitWidgetSeriesOptions, LineSeries } from '../../../../../types';
 import { PreparedLegend, PreparedSeries } from './types';
+export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
+export declare const DEFAULT_LINE_WIDTH = 1;
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: LineSeries[];

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

@@ -1,10 +1,22 @@
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
-import { prepareLegendSymbol } from './utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_LEGEND_SYMBOL_PADDING, } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
+export const DEFAULT_LINE_WIDTH = 1;
+function prepareLineLegendSymbol(series, seriesOptions) {
+    var _a;
+    const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    return {
+        shape: 'path',
+        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
+        strokeWidth: get(series, 'lineWidth', defaultLineWidth),
+    };
+}
 export function prepareLineSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
-    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', 1);
+    const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
     return seriesList.map((series) => {
         var _a, _b;
         const id = getRandomCKId();
@@ -19,7 +31,7 @@ export function prepareLineSeries(args) {
             visible: get(series, 'visible', true),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
+                symbol: prepareLineLegendSymbol(series, seriesOptions),
             },
             data: series.data,
             dataLabels: {

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,9 +1,13 @@
-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, PathLegendSymbolOptions } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol;
+export type PathLegendSymbol = {
+    shape: 'path';
+    strokeWidth: number;
+} & Required<PathLegendSymbolOptions>;
+export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol;
 export type PreparedLegend = Required<ChartKitWidgetLegend> & {
     height: number;
     lineHeight: number;
@@ -67,12 +71,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/useSeries/utils.js

@@ -1,4 +1,4 @@
-import { DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -19,6 +19,6 @@ export function prepareLegendSymbol(series) {
         width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
         height: symbolHeight,
         radius: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.radius) || symbolHeight / 2,
-        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || 5,
+        padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

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 {};