@gravity-ui/chartkit 4.14.0 → 4.16.0

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

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

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

@@ -5,10 +5,11 @@ 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 { series, seriesOptions, legend } = args;
     const dataNames = series.data.map((d) => d.name);
     const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
     const stackId = getRandomCKId();
+    const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = series.data.map((dataItem) => {
         var _a, _b, _c;
         const result = {
@@ -41,6 +42,15 @@ export function preparePieSeries(args) {
             radius: series.radius || '100%',
             innerRadius: series.innerRadius || 0,
             stackId,
+            states: {
+                hover: {
+                    halo: {
+                        enabled: get(seriesHoverState, 'halo.enabled', true),
+                        opacity: get(seriesHoverState, 'halo.opacity', 0.25),
+                        size: get(seriesHoverState, 'halo.size', 10),
+                    },
+                },
+            },
         };
         return result;
     });

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

@@ -1,5 +1,6 @@
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
+import { getSymbolType } from '../../utils';
 import { prepareLineSeries } from './prepare-line-series';
 import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
@@ -8,15 +9,17 @@ import { ChartKitError } from '../../../../../libs';
 import { preparePieSeries } from './prepare-pie';
 import { prepareArea } from './prepare-area';
 function prepareAxisRelatedSeries(args) {
-    const { colorScale, series, legend } = args;
+    const { colorScale, series, legend, index } = args;
     const preparedSeries = cloneDeep(series);
     const name = 'name' in series && series.name ? series.name : '';
+    const symbolType = (series.symbolType || getSymbolType(index));
+    preparedSeries.symbolType = symbolType;
     preparedSeries.color = 'color' in series && series.color ? series.color : colorScale(name);
     preparedSeries.name = name;
     preparedSeries.visible = get(preparedSeries, 'visible', true);
     preparedSeries.legend = {
         enabled: get(preparedSeries, 'legend.enabled', legend.enabled),
-        symbol: prepareLegendSymbol(series),
+        symbol: prepareLegendSymbol(series, symbolType),
     };
     return [preparedSeries];
 }
@@ -25,7 +28,7 @@ export function prepareSeries(args) {
     switch (type) {
         case 'pie': {
             return series.reduce((acc, singleSeries) => {
-                acc.push(...preparePieSeries({ series: singleSeries, legend }));
+                acc.push(...preparePieSeries({ series: singleSeries, seriesOptions, legend }));
                 return acc;
             }, []);
         }
@@ -36,8 +39,8 @@ export function prepareSeries(args) {
             return prepareBarYSeries({ series: series, legend, colorScale });
         }
         case 'scatter': {
-            return series.reduce((acc, singleSeries) => {
-                acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale }));
+            return series.reduce((acc, singleSeries, index) => {
+                acc.push(...prepareAxisRelatedSeries({ series: singleSeries, legend, colorScale, index }));
                 return acc;
             }, []);
         }

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

@@ -1,5 +1,6 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, AreaSeries, AreaSeriesData } from '../../../../../types';
+import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, SymbolLegendSymbolOptions, AreaSeries, AreaSeriesData } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
+import { DashStyle, LineCap, SymbolType } from '../../../../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -7,7 +8,11 @@ export type PathLegendSymbol = {
     shape: 'path';
     strokeWidth: number;
 } & Required<PathLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol;
+export type SymbolLegendSymbol = {
+    shape: 'symbol';
+    symbolType: SymbolType;
+} & Required<SymbolLegendSymbolOptions>;
+export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
 export type PreparedLegend = Required<ChartKitWidgetLegend> & {
     height: number;
     lineHeight: number;
@@ -22,6 +27,7 @@ export type LegendItem = {
     symbol: PreparedLegendSymbol;
     textWidth: number;
     visible?: boolean;
+    dashStyle?: DashStyle;
 };
 export type LegendConfig = {
     offset: {
@@ -33,6 +39,11 @@ export type LegendConfig = {
         maxPage: number;
     };
 };
+export type PreparedHaloOptions = {
+    enabled: boolean;
+    opacity: number;
+    size: number;
+};
 type BasePreparedSeries = {
     color: string;
     name: string;
@@ -46,6 +57,7 @@ type BasePreparedSeries = {
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
     data: ScatterSeriesData[];
+    symbolType: SymbolType;
 } & BasePreparedSeries;
 export type PreparedBarXSeries = {
     type: BarXSeries['type'];
@@ -93,6 +105,11 @@ export type PreparedPieSeries = {
         distance: number;
         connectorCurve: ConnectorCurve;
     };
+    states: {
+        hover: {
+            halo: PreparedHaloOptions;
+        };
+    };
 } & BasePreparedSeries;
 export type PreparedLineSeries = {
     type: LineSeries['type'];
@@ -118,14 +135,12 @@ export type PreparedLineSeries = {
                 radius: number;
                 borderWidth: number;
                 borderColor: string;
-                halo: {
-                    enabled: boolean;
-                    opacity: number;
-                    radius: number;
-                };
+                halo: PreparedHaloOptions;
             };
         };
     };
+    dashStyle: DashStyle;
+    linecap: LineCap;
 } & BasePreparedSeries;
 export type PreparedAreaSeries = {
     type: AreaSeries['type'];
@@ -154,11 +169,7 @@ export type PreparedAreaSeries = {
                 radius: number;
                 borderWidth: number;
                 borderColor: string;
-                halo: {
-                    enabled: boolean;
-                    opacity: number;
-                    radius: number;
-                };
+                halo: PreparedHaloOptions;
             };
         };
     };

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

@@ -1,6 +1,7 @@
 import { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
 import { ChartKitWidgetSeries } from '../../../../../types';
+import { SymbolType } from '../../../../../constants';
 export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
 export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
-export declare function prepareLegendSymbol(series: ChartKitWidgetSeries): PreparedLegendSymbol;
+export declare function prepareLegendSymbol(series: ChartKitWidgetSeries, symbolType?: SymbolType): PreparedLegendSymbol;
 export declare function getSeriesStackId(series: StackedSeries): string;

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

@@ -1,6 +1,7 @@
 import memoize from 'lodash/memoize';
-import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
+import { SymbolType } from '../../../../../constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
@@ -12,15 +13,13 @@ export const getActiveLegendItems = (series) => {
 export const getAllLegendItems = (series) => {
     return series.map((s) => s.name);
 };
-export function prepareLegendSymbol(series) {
+export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
-    const symbolHeight = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.height) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
-        shape: 'rect',
+        shape: 'symbol',
+        symbolType: symbolType || SymbolType.Circle,
         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) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

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

@@ -1,43 +1,11 @@
 import React from 'react';
-import { color, line as lineGenerator, area as areaGenerator, select, symbol, symbolCircle, symbolSquare, } from 'd3';
+import { color, line as lineGenerator, area as areaGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
 import { setActiveState } from '../utils';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 const b = block('d3-area');
-function setMarker(selection, state) {
-    selection
-        .attr('d', (d) => {
-        const radius = d.point.series.marker.states[state].radius +
-            d.point.series.marker.states[state].borderWidth;
-        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
-    })
-        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
-        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
-}
-function getMarkerSymbol(type, radius) {
-    switch (type) {
-        case 'square': {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolSquare, size)();
-        }
-        case 'circle':
-        default: {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolCircle, size)();
-        }
-    }
-}
-const getMarkerVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
-    return enabled ? '' : 'hidden';
-};
-const getMarkerHaloVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = markerStates.hover.halo.enabled && d.hovered;
-    return enabled ? '' : 'hidden';
-};
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
@@ -100,28 +68,7 @@ export const AreaSeriesShapes = (args) => {
             .selectAll('marker')
             .data(markers)
             .join('g')
-            .attr('class', b('marker'))
-            .attr('visibility', getMarkerVisibility)
-            .attr('transform', (d) => {
-            return `translate(${d.point.x},${d.point.y})`;
-        });
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-halo'))
-            .attr('d', (d) => {
-            const type = d.point.series.marker.states.normal.symbol;
-            const radius = d.point.series.marker.states.hover.halo.radius;
-            return getMarkerSymbol(type, radius);
-        })
-            .attr('fill', (d) => d.point.series.color)
-            .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
-            .attr('z-index', -1)
-            .attr('visibility', getMarkerHaloVisibility);
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-symbol'))
-            .call(setMarker, 'normal')
-            .attr('fill', (d) => d.point.series.color);
+            .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.area', (data) => {
@@ -165,12 +112,8 @@ export const AreaSeriesShapes = (args) => {
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
-                    elementSelection
-                        .select(`.${b('marker-halo')}`)
-                        .attr('visibility', getMarkerHaloVisibility);
-                    elementSelection
-                        .select(`.${b('marker-symbol')}`)
-                        .call(setMarker, hovered ? 'hover' : 'normal');
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
                 }
                 if (d.point.series.marker.states.normal.enabled) {
                     const isActive = Boolean(!inactiveEnabled ||

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

@@ -1,43 +1,11 @@
 import React from 'react';
-import { color, line as lineGenerator, select, symbol, symbolCircle, symbolSquare } from 'd3';
+import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
-import { setActiveState } from '../utils';
+import { getLineDashArray, setActiveState } from '../utils';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 const b = block('d3-line');
-function setMarker(selection, state) {
-    selection
-        .attr('d', (d) => {
-        const radius = d.point.series.marker.states[state].radius +
-            d.point.series.marker.states[state].borderWidth;
-        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
-    })
-        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
-        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
-}
-function getMarkerSymbol(type, radius) {
-    switch (type) {
-        case 'square': {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolSquare, size)();
-        }
-        case 'circle':
-        default: {
-            const size = Math.pow(radius, 2) * Math.PI;
-            return symbol(symbolCircle, size)();
-        }
-    }
-}
-const getMarkerVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
-    return enabled ? '' : 'hidden';
-};
-const getMarkerHaloVisibility = (d) => {
-    const markerStates = d.point.series.marker.states;
-    const enabled = markerStates.hover.halo.enabled && d.hovered;
-    return enabled ? '' : 'hidden';
-};
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
@@ -61,8 +29,9 @@ export const LineSeriesShapes = (args) => {
             .attr('fill', 'none')
             .attr('stroke', (d) => d.color)
             .attr('stroke-width', (d) => d.width)
-            .attr('stroke-linejoin', 'round')
-            .attr('stroke-linecap', 'round');
+            .attr('stroke-linejoin', (d) => d.linecap)
+            .attr('stroke-linecap', (d) => d.linecap)
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width));
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);
@@ -86,28 +55,7 @@ export const LineSeriesShapes = (args) => {
             .selectAll('marker')
             .data(markers)
             .join('g')
-            .attr('class', b('marker'))
-            .attr('visibility', getMarkerVisibility)
-            .attr('transform', (d) => {
-            return `translate(${d.point.x},${d.point.y})`;
-        });
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-halo'))
-            .attr('d', (d) => {
-            const type = d.point.series.marker.states.normal.symbol;
-            const radius = d.point.series.marker.states.hover.halo.radius;
-            return getMarkerSymbol(type, radius);
-        })
-            .attr('fill', (d) => d.point.series.color)
-            .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
-            .attr('z-index', -1)
-            .attr('visibility', getMarkerHaloVisibility);
-        markerSelection
-            .append('path')
-            .attr('class', b('marker-symbol'))
-            .call(setMarker, 'normal')
-            .attr('fill', (d) => d.point.series.color);
+            .call(renderMarker);
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.line', (data) => {
@@ -150,12 +98,8 @@ export const LineSeriesShapes = (args) => {
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
-                    elementSelection
-                        .select(`.${b('marker-halo')}`)
-                        .attr('visibility', getMarkerHaloVisibility);
-                    elementSelection
-                        .select(`.${b('marker-symbol')}`)
-                        .call(setMarker, hovered ? 'hover' : 'normal');
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
                 }
                 if (d.point.series.marker.states.normal.enabled) {
                     const isActive = Boolean(!inactiveEnabled ||

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

@@ -51,7 +51,7 @@ export const prepareLineData = (args) => {
                 hovered: false,
             }));
         }
-        acc.push({
+        const result = {
             points,
             markers,
             labels,
@@ -61,7 +61,10 @@ export const prepareLineData = (args) => {
             hovered: false,
             active: true,
             id: s.id,
-        });
+            dashStyle: s.dashStyle,
+            linecap: s.linecap,
+        };
+        acc.push(result);
         return acc;
     }, []);
 };

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

@@ -1,6 +1,7 @@
 import { PreparedLineSeries } from '../../useSeries/types';
 import { LineSeriesData } from '../../../../../../types';
 import { LabelData } from '../../../types';
+import { DashStyle, LineCap } from '../../../../../../constants';
 export type PointData = {
     x: number;
     y: number;
@@ -22,4 +23,6 @@ export type PreparedLineData = {
     hovered: boolean;
     active: boolean;
     labels: LabelData[];
+    dashStyle: DashStyle;
+    linecap: LineCap;
 };

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

@@ -0,0 +1,12 @@
+import { BaseType, Selection } from 'd3';
+import { MarkerData as LineMarkerData } from './line/types';
+import { MarkerData as AreaMarkerData } from './area/types';
+type MarkerData = LineMarkerData | AreaMarkerData;
+export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType | SVGGElement, T, SVGGElement, unknown>): Selection<SVGGElement | BaseType, T, SVGGElement, unknown>;
+export declare function getMarkerVisibility(d: MarkerData): "" | "hidden";
+export declare function getMarkerHaloVisibility(d: MarkerData): "" | "hidden";
+export declare function setMarker<T extends BaseType, D extends MarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
+export declare function getMarkerSymbol(type: string, radius: number): string | null;
+export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export {};

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

@@ -0,0 +1,70 @@
+import { symbol, symbolCircle, symbolSquare } from 'd3';
+import { block } from '../../../../../utils/cn';
+const b = block('d3-marker');
+const haloClassName = b('halo');
+const symbolClassName = b('symbol');
+export function renderMarker(selection) {
+    const markerSelection = selection
+        .attr('class', b('wrapper'))
+        .attr('visibility', getMarkerVisibility)
+        .attr('transform', (d) => {
+        return `translate(${d.point.x},${d.point.y})`;
+    });
+    markerSelection
+        .append('path')
+        .attr('class', haloClassName)
+        .attr('d', (d) => {
+        const type = d.point.series.marker.states.normal.symbol;
+        const radius = d.point.series.marker.states.hover.halo.size;
+        return getMarkerSymbol(type, radius);
+    })
+        .attr('fill', (d) => d.point.series.color)
+        .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity)
+        .attr('z-index', -1)
+        .attr('visibility', getMarkerHaloVisibility);
+    markerSelection
+        .append('path')
+        .attr('class', symbolClassName)
+        .call(setMarker, 'normal')
+        .attr('fill', (d) => d.point.series.color);
+    return markerSelection;
+}
+export function getMarkerVisibility(d) {
+    const markerStates = d.point.series.marker.states;
+    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
+    return enabled ? '' : 'hidden';
+}
+export function getMarkerHaloVisibility(d) {
+    const markerStates = d.point.series.marker.states;
+    const enabled = markerStates.hover.halo.enabled && d.hovered;
+    return enabled ? '' : 'hidden';
+}
+export function setMarker(selection, state) {
+    selection
+        .attr('d', (d) => {
+        const radius = d.point.series.marker.states[state].radius +
+            d.point.series.marker.states[state].borderWidth;
+        return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius);
+    })
+        .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth)
+        .attr('stroke', (d) => d.point.series.marker.states[state].borderColor);
+}
+export function getMarkerSymbol(type, radius) {
+    switch (type) {
+        case 'square': {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolSquare, size)();
+        }
+        case 'circle':
+        default: {
+            const size = Math.pow(radius, 2) * Math.PI;
+            return symbol(symbolCircle, size)();
+        }
+    }
+}
+export function selectMarkerHalo(parentSelection) {
+    return parentSelection.select(`.${haloClassName}`);
+}
+export function selectMarkerSymbol(parentSelection) {
+    return parentSelection.select(`.${symbolClassName}`);
+}

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

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

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

@@ -7,6 +7,10 @@ import { line as lineGenerator } from 'd3-shape';
 import { setEllipsisForOverflowTexts } from '../../../utils';
 import { getCurveFactory } from './utils';
 const b = block('d3-pie');
+export function getHaloVisibility(d) {
+    const enabled = d.data.pie.halo.enabled && d.data.hovered;
+    return enabled ? '' : 'hidden';
+}
 export function PieSeriesShapes(args) {
     const { dispatcher, preparedData, seriesOptions, svgContainer } = args;
     const ref = React.useRef(null);
@@ -30,6 +34,27 @@ export function PieSeriesShapes(args) {
         })
             .style('stroke', (pieData) => pieData.borderColor)
             .style('stroke-width', (pieData) => pieData.borderWidth);
+        shapesSelection
+            .selectAll('halo')
+            .data((pieData) => {
+            if (pieData.halo.enabled) {
+                return pieData.segments;
+            }
+            return [];
+        })
+            .join('path')
+            .attr('d', (d) => {
+            const arcGenerator = arc()
+                .innerRadius(d.data.pie.innerRadius)
+                .outerRadius(d.data.pie.radius + d.data.pie.halo.size)
+                .cornerRadius(d.data.pie.borderRadius);
+            return arcGenerator(d);
+        })
+            .attr('class', b('halo'))
+            .attr('fill', (d) => d.data.color)
+            .attr('opacity', (d) => d.data.pie.halo.opacity)
+            .attr('z-index', -1)
+            .attr('visibility', getHaloVisibility);
         shapesSelection
             .selectAll(segmentSelector)
             .data((pieData) => pieData.segments)
@@ -108,6 +133,7 @@ export function PieSeriesShapes(args) {
             const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
             shapesSelection.datum((_d, index, list) => {
                 const pieSelection = select(list[index]);
+                const haloSelection = pieSelection.selectAll(`.${b('halo')}`);
                 pieSelection
                     .selectAll(segmentSelector)
                     .datum((d, i, elements) => {
@@ -122,6 +148,8 @@ export function PieSeriesShapes(args) {
                             }
                             return initialColor;
                         });
+                        const currentSegmentHalo = haloSelection.nodes()[i];
+                        select(currentSegmentHalo).attr('visibility', getHaloVisibility);
                     }
                     setActiveState({
                         element: elements[i],

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

@@ -15,12 +15,13 @@ const getCenter = (boundsWidth, boundsHeight, center) => {
     return [resultX, resultY];
 };
 export function preparePieData(args) {
-    const { series: prepapredSeries, boundsWidth, boundsHeight } = args;
+    const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
-    const groupedPieSeries = group(prepapredSeries, (pieSeries) => pieSeries.stackId);
+    const groupedPieSeries = group(preparedSeries, (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 series = items[0];
+        const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
         const radius = (_a = calculateNumericProperty({ value: seriesRadius, base: maxRadius })) !== null && _a !== void 0 ? _a : maxRadius;
         const data = {
             id: stackId,
@@ -34,6 +35,11 @@ export function preparePieData(args) {
             borderRadius,
             series: items[0],
             connectorCurve: dataLabels.connectorCurve,
+            halo: {
+                enabled: series.states.hover.halo.enabled,
+                opacity: series.states.hover.halo.opacity,
+                size: series.states.hover.halo.size,
+            },
         };
         const segments = items.map((item) => {
             return {

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

@@ -31,4 +31,9 @@ export type PreparedPieData = {
     borderColor: string;
     series: PreparedPieSeries;
     connectorCurve: ConnectorCurve;
+    halo: {
+        enabled: boolean;
+        opacity: number;
+        size: number;
+    };
 };