@gravity-ui/chartkit 4.13.0 → 4.15.0

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

@@ -0,0 +1,137 @@
+import React from 'react';
+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');
+export const AreaSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions } = args;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'area.states.hover');
+        const inactiveOptions = get(seriesOptions, 'area.states.inactive');
+        const line = lineGenerator()
+            .x((d) => d.x)
+            .y((d) => d.y);
+        svgElement.selectAll('*').remove();
+        const shapeSelection = svgElement
+            .selectAll('shape')
+            .data(preparedData)
+            .join('g')
+            .attr('class', b('series'));
+        shapeSelection
+            .append('path')
+            .attr('class', b('line'))
+            .attr('d', (d) => line(d.points))
+            .attr('fill', 'none')
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.width)
+            .attr('stroke-linejoin', 'round')
+            .attr('stroke-linecap', 'round');
+        const area = areaGenerator()
+            .x((d) => d.x)
+            .y0((d) => d.y0)
+            .y1((d) => d.y);
+        shapeSelection
+            .append('path')
+            .attr('class', b('region'))
+            .attr('d', (d) => area(d.points))
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => d.opacity);
+        let dataLabels = preparedData.reduce((acc, d) => {
+            return acc.concat(d.labels);
+        }, []);
+        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
+        const labelsSelection = svgElement
+            .selectAll('text')
+            .data(dataLabels)
+            .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);
+        const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
+        const markerSelection = svgElement
+            .selectAll('marker')
+            .data(markers)
+            .join('g')
+            .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) => {
+            var _a;
+            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'area');
+            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
+            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
+            shapeSelection.datum((d, index, list) => {
+                var _a;
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    let strokeColor = d.color || '';
+                    if (d.hovered) {
+                        strokeColor =
+                            ((_a = color(strokeColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
+                                strokeColor;
+                    }
+                    elementSelection.selectAll(`.${b('line')}`).attr('stroke', strokeColor);
+                    elementSelection.selectAll(`.${b('region')}`).attr('fill', strokeColor);
+                }
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.id),
+                    datum: d,
+                });
+            });
+            labelsSelection.datum((d, index, list) => {
+                return setActiveState({
+                    element: list[index],
+                    state: inactiveOptions,
+                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    datum: d,
+                });
+            });
+            markerSelection.datum((d, index, list) => {
+                const elementSelection = select(list[index]);
+                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                if (d.hovered !== hovered) {
+                    d.hovered = hovered;
+                    elementSelection.attr('visibility', getMarkerVisibility(d));
+                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
+                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
+                }
+                if (d.point.series.marker.states.normal.enabled) {
+                    const isActive = Boolean(!inactiveEnabled ||
+                        !selectedSeriesId ||
+                        selectedSeriesId === d.point.series.id);
+                    setActiveState({
+                        element: list[index],
+                        state: inactiveOptions,
+                        active: isActive,
+                        datum: d,
+                    });
+                }
+                return d;
+            });
+        });
+        return () => {
+            dispatcher.on('hover-shape.area', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

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

@@ -0,0 +1,11 @@
+import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAreaData } from './types';
+export declare const prepareAreaData: (args: {
+    series: PreparedAreaSeries[];
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale;
+}) => PreparedAreaData[];

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

@@ -0,0 +1,114 @@
+import { group, sort } from 'd3';
+import { getXValue, getYValue } from '../utils';
+import { getLabelsSize, getLeftPosition } from '../../../utils';
+function getLabelData(point, series, xMax) {
+    const text = String(point.data.label || point.data.y);
+    const style = series.dataLabels.style;
+    const size = getLabelsSize({ labels: [text], style });
+    const labelData = {
+        text,
+        x: point.x,
+        y: point.y - series.dataLabels.padding,
+        style,
+        size: { width: size.maxWidth, height: size.maxHeight },
+        textAnchor: 'middle',
+        series: series,
+        active: true,
+    };
+    const left = getLeftPosition(labelData);
+    if (left < 0) {
+        labelData.x = labelData.x + Math.abs(left);
+    }
+    else {
+        const right = left + labelData.size.width;
+        if (right > xMax) {
+            labelData.x = labelData.x - xMax - right;
+        }
+    }
+    return labelData;
+}
+function getXValues(series, xAxis, xScale) {
+    const xValues = series.reduce((acc, s) => {
+        s.data.forEach((d) => {
+            const key = String(d.x);
+            if (!acc.has(key)) {
+                acc.set(key, getXValue({ point: d, xAxis, xScale }));
+            }
+        });
+        return acc;
+    }, new Map());
+    if (xAxis.type === 'category') {
+        return (xAxis.categories || []).reduce((acc, category) => {
+            const xValue = xValues.get(category);
+            if (typeof xValue === 'number') {
+                acc.push([category, xValue]);
+            }
+            return acc;
+        }, []);
+    }
+    return sort(Array.from(xValues), ([_x, xValue]) => xValue);
+}
+export const prepareAreaData = (args) => {
+    const { series, xAxis, xScale, yScale } = args;
+    const yAxis = args.yAxis[0];
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    const [yMin, _yMax] = yScale.range();
+    return Array.from(group(series, (s) => s.stackId)).reduce((result, [_stackId, seriesStack]) => {
+        const xValues = getXValues(seriesStack, xAxis, xScale);
+        const accumulatedYValues = new Map();
+        xValues.forEach(([key]) => {
+            accumulatedYValues.set(key, 0);
+        });
+        const seriesStackData = seriesStack.reduce((acc, s) => {
+            const seriesData = s.data.reduce((m, d) => {
+                return m.set(String(d.x), d);
+            }, new Map());
+            const points = xValues.reduce((pointsAcc, [x, xValue]) => {
+                const accumulatedYValue = accumulatedYValues.get(x) || 0;
+                const d = seriesData.get(x) ||
+                    {
+                        x,
+                        // FIXME: think about how to break the series into separate areas(null Y values)
+                        y: 0,
+                    };
+                const yValue = getYValue({ point: d, yAxis, yScale }) - accumulatedYValue;
+                accumulatedYValues.set(x, yMin - yValue);
+                pointsAcc.push({
+                    y0: yMin - accumulatedYValue,
+                    x: xValue,
+                    y: yValue,
+                    data: d,
+                    series: s,
+                });
+                return pointsAcc;
+            }, []);
+            let labels = [];
+            if (s.dataLabels.enabled) {
+                labels = points.map((p) => getLabelData(p, s, xMax));
+            }
+            let markers = [];
+            if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
+                markers = points.map((p) => ({
+                    point: p,
+                    active: true,
+                    hovered: false,
+                }));
+            }
+            acc.push({
+                points,
+                markers,
+                labels,
+                color: s.color,
+                opacity: s.opacity,
+                width: s.lineWidth,
+                series: s,
+                hovered: false,
+                active: true,
+                id: s.id,
+            });
+            return acc;
+        }, []);
+        return result.concat(seriesStackData);
+    }, []);
+};

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

@@ -0,0 +1,27 @@
+import { PreparedAreaSeries } from '../../useSeries/types';
+import { AreaSeriesData } from '../../../../../../types';
+import { LabelData } from '../../../types';
+export type PointData = {
+    y0: number;
+    x: number;
+    y: number;
+    data: AreaSeriesData;
+    series: PreparedAreaSeries;
+};
+export type MarkerData = {
+    point: PointData;
+    active: boolean;
+    hovered: boolean;
+};
+export type PreparedAreaData = {
+    id: string;
+    points: PointData[];
+    markers: MarkerData[];
+    color: string;
+    opacity: number;
+    width: number;
+    series: PreparedAreaSeries;
+    hovered: boolean;
+    active: boolean;
+    labels: LabelData[];
+};

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

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

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

@@ -10,8 +10,9 @@ 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 type { PreparedAreaData } from './area/types';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

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

@@ -8,6 +8,8 @@ import { preparePieData } from './pie/prepare-data';
 import { prepareLineData } from './line/prepare-data';
 import { LineSeriesShapes } from './line';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { AreaSeriesShapes } from './area';
+import { prepareAreaData } from './area/prepare-data';
 import './styles.css';
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, svgContainer, } = args;
@@ -62,6 +64,20 @@ export const useShapes = (args) => {
                     }
                     break;
                 }
+                case 'area': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareAreaData({
+                            series: chartSeries,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
                 case 'scatter': {
                     if (xScale && yScale) {
                         const preparedData = prepareScatterData({

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 {