@gravity-ui/charts 1.46.0 → 1.46.1

package/dist/esm/hooks/useShapes/heatmap/index.js

@@ -1,73 +1,18 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
+import { renderHeatmap } from '../../../core/shapes/heatmap/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-export { prepareHeatmapData } from './prepare-data';
-export * from './types';
+export { prepareHeatmapData } from '../../../core/shapes/heatmap/prepare-data';
+export * from '../../../core/shapes/heatmap/types';
 const b = block('heatmap');
 export const HeatmapSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
-    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
-        var _a, _b;
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        const hoverOptions = (_b = (_a = seriesOptions.heatmap) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.hover;
-        svgElement.selectAll('*').remove();
-        // heatmap cells
-        const cellsSelection = svgElement
-            .selectAll('rect')
-            .data(preparedData.items)
-            .join('rect')
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('height', (d) => d.height)
-            .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.color)
-            .attr('stroke', (d) => d.borderColor)
-            .attr('stroke-width', (d) => d.borderWidth);
-        // dataLabels
-        svgElement
-            .selectAll('text')
-            .data(preparedData.labels)
-            .join('text')
-            .html((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null);
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            if (hoverEnabled) {
-                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
-                    acc.add(d.data);
-                    return acc;
-                }, new Set());
-                cellsSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.color;
-                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.heatmap', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.heatmap', null);
-        };
+        return renderHeatmap({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),

package/dist/esm/hooks/useShapes/index.d.ts

@@ -3,23 +3,21 @@ import type { Dispatch } from 'd3-dispatch';
 import type { SeriesType } from '../../core/constants';
 import type { PreparedSplit } from '../../core/layout/split-types';
 import type { ChartScale } from '../../core/scales/types';
+import type { PreparedSeries, PreparedSeriesOptions } from '../../core/series/types';
+import type { PreparedAreaData } from '../../core/shapes/area/types';
+import type { PreparedBarXData } from '../../core/shapes/bar-x/types';
+import type { PreparedBarYData } from '../../core/shapes/bar-y/types';
+import type { PreparedFunnelData } from '../../core/shapes/funnel/types';
+import type { PreparedHeatmapData } from '../../core/shapes/heatmap/types';
+import type { PreparedLineData } from '../../core/shapes/line/types';
+import type { PreparedPieData } from '../../core/shapes/pie/types';
+import type { PreparedRadarData } from '../../core/shapes/radar/types';
+import type { PreparedSankeyData } from '../../core/shapes/sankey/types';
+import type { PreparedScatterData } from '../../core/shapes/scatter/types';
+import type { PreparedWaterfallData } from '../../core/shapes/waterfall/types';
+import type { PreparedXRangeData } from '../../core/shapes/x-range/types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
-import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { ZoomState } from '../useZoom/types';
-import type { PreparedAreaData } from './area/types';
-import type { PreparedBarXData } from './bar-x';
-import type { PreparedBarYData } from './bar-y/types';
-import type { PreparedFunnelData } from './funnel';
-import type { PreparedHeatmapData } from './heatmap';
-import type { PreparedLineData } from './line/types';
-import type { PreparedPieData } from './pie/types';
-import type { PreparedRadarData } from './radar/types';
-import type { PreparedSankeyData } from './sankey/types';
-import type { PreparedScatterData } from './scatter/types';
-export type { PreparedBarXData } from './bar-x';
-export type { PreparedScatterData } from './scatter/types';
-import type { PreparedWaterfallData } from './waterfall';
-import type { PreparedXRangeData } from './x-range';
 import './styles.css';
 export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
 export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
@@ -50,3 +48,4 @@ export declare const useShapes: (args: Args) => {
     shapesData: ShapeData[];
     shapesReady: boolean;
 };
+export {};

package/dist/esm/hooks/useShapes/index.js

@@ -1,25 +1,25 @@
 import React from 'react';
 import { group } from 'd3-array';
 import { SERIES_TYPE } from '../../core/constants';
+import { prepareAreaData } from '../../core/shapes/area/prepare-data';
+import { prepareLineData } from '../../core/shapes/line/prepare-data';
+import { preparePieData } from '../../core/shapes/pie/prepare-data';
+import { prepareRadarData } from '../../core/shapes/radar/prepare-data';
+import { prepareSankeyData } from '../../core/shapes/sankey/prepare-data';
+import { prepareTreemapData } from '../../core/shapes/treemap/prepare-data';
 import { getOnlyVisibleSeries } from '../../core/utils';
 import { ChartError } from '../../libs';
 import { AreaSeriesShapes } from './area';
-import { prepareAreaData } from './area/prepare-data';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
 import { FunnelSeriesShapes, prepareFunnelData } from './funnel';
 import { HeatmapSeriesShapes, prepareHeatmapData } from './heatmap';
 import { LineSeriesShapes } from './line';
-import { prepareLineData } from './line/prepare-data';
 import { PieSeriesShapes } from './pie';
-import { preparePieData } from './pie/prepare-data';
 import { RadarSeriesShapes } from './radar';
-import { prepareRadarData } from './radar/prepare-data';
 import { SankeySeriesShape } from './sankey';
-import { prepareSankeyData } from './sankey/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { TreemapSeriesShape } from './treemap';
-import { prepareTreemapData } from './treemap/prepare-data';
 import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import { XRangeSeriesShapes, prepareXRangeData } from './x-range';
@@ -217,13 +217,13 @@ export async function getShapes(args) {
                 }
                 break;
             }
-            case 'funnel': {
+            case SERIES_TYPE.Funnel: {
                 const preparedData = await prepareFunnelData({
                     series: chartSeries,
                     boundsWidth,
                     boundsHeight,
                 });
-                shapes[index] = (React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                shapes[index] = (React.createElement(FunnelSeriesShapes, { key: SERIES_TYPE.Funnel, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                 shapesData.splice(index, 0, preparedData);
                 break;
             }
@@ -254,8 +254,8 @@ export async function getShapes(args) {
 }
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
-    const [shapesElemens, setShapesElements] = React.useState([]);
-    const [shapesElemensData, setShapesElemensData] = React.useState([]);
+    const [shapesElements, setShapesElements] = React.useState([]);
+    const [shapesElementsData, setShapesElementsData] = React.useState([]);
     const shapesReadyRef = React.useRef(false);
     const countedRef = React.useRef(0);
     React.useEffect(() => {
@@ -286,7 +286,7 @@ export const useShapes = (args) => {
             if (countedRef.current === currentRun) {
                 shapesReadyRef.current = true;
                 setShapesElements(shapes);
-                setShapesElemensData(shapesData);
+                setShapesElementsData(shapesData);
             }
         })();
     }, [
@@ -308,8 +308,8 @@ export const useShapes = (args) => {
         zoomState,
     ]);
     return {
-        shapes: shapesElemens,
-        shapesData: shapesElemensData,
+        shapes: shapesElements,
+        shapesData: shapesElementsData,
         shapesReady: shapesReadyRef.current,
     };
 };

package/dist/esm/hooks/useShapes/line/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedLineData } from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedLineData } from '../../../core/shapes/line/types';
 type Args = {
     boundsHeight: number;
     boundsWidth: number;

package/dist/esm/hooks/useShapes/line/index.js

@@ -1,190 +1,32 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { line as lineGenerator } from 'd3-shape';
-import get from 'lodash/get';
-import { getLineDashArray } from '../../../core/utils';
+import { renderLine } from '../../../core/shapes/line/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { renderAnnotations } from '../annotation';
-import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
-import { setActiveState } from '../utils';
 const b = block('line');
 export const LineSeriesShapes = (args) => {
     const { boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId, } = args;
-    const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
     const hoverMarkersRef = React.useRef(null);
     const annotationsRef = React.useRef(null);
     React.useEffect(() => {
-        var _a, _b;
-        if (!plotRef.current || !markersRef.current) {
+        if (!plotRef.current ||
+            !markersRef.current ||
+            !hoverMarkersRef.current ||
+            !annotationsRef.current) {
             return () => { };
         }
-        const plotSvgElement = select(plotRef.current);
-        const markersSvgElement = select(markersRef.current);
-        const hoverMarkersSvgElement = select(hoverMarkersRef.current);
-        const hoverOptions = get(seriesOptions, 'line.states.hover');
-        const inactiveOptions = get(seriesOptions, 'line.states.inactive');
-        const line = lineGenerator()
-            .defined((d) => d.y !== null && d.x !== null)
-            .x((d) => d.x)
-            .y((d) => d.y);
-        plotSvgElement.selectAll('*').remove();
-        markersSvgElement.selectAll('*').remove();
-        const lineSelection = plotSvgElement
-            .selectAll('path')
-            .data(preparedData)
-            .join('path')
-            .attr('d', (d) => line(d.points))
-            .attr('fill', 'none')
-            .attr('stroke', (d) => d.color)
-            .attr('stroke-width', (d) => d.lineWidth)
-            .attr('stroke-linejoin', (d) => d.linejoin)
-            .attr('stroke-linecap', (d) => d.linecap)
-            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
-            .attr('opacity', (d) => d.opacity)
-            .attr('cursor', (d) => d.series.cursor);
-        const dataLabels = preparedData.reduce((acc, d) => {
-            return acc.concat(d.svgLabels);
-        }, []);
-        const labelsSelection = plotSvgElement
-            .selectAll('text')
-            .data(dataLabels)
-            .join('text')
-            .html((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 = markersSvgElement
-            .selectAll('marker')
-            .data(markers)
-            .join('g')
-            .call(renderMarker);
-        if (annotationsRef.current) {
-            const anchors = preparedData.flatMap((d) => d.annotations);
-            renderAnnotations({
-                anchors,
-                container: select(annotationsRef.current),
-                plotHeight: boundsHeight,
-                plotWidth: boundsWidth,
-            });
-        }
-        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
-            const selectedDataItems = selected.map((d) => d.data);
-            const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
-            lineSelection.datum((d, index, list) => {
-                const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
-                if (d.hovered !== hovered) {
-                    d.hovered = hovered;
-                    elementSelection.attr('stroke', (dSelection) => {
-                        var _a;
-                        const initialColor = dSelection.color || '';
-                        if (dSelection.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;
-                    });
-                }
-                return setActiveState({
-                    element: list[index],
-                    state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.id)),
-                    datum: d,
-                });
-            });
-            labelsSelection.datum((d, index, list) => {
-                return setActiveState({
-                    element: list[index],
-                    state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.series.id)),
-                    datum: d,
-                });
-            });
-            markerSelection.datum((d, index, list) => {
-                const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
-                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 ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.point.series.id));
-                    setActiveState({
-                        element: list[index],
-                        state: inactiveOptions,
-                        active: isActive,
-                        datum: d,
-                    });
-                }
-                return d;
-            });
-            hoverMarkersSvgElement.selectAll('*').remove();
-            if (hoverEnabled && selected.length > 0) {
-                const hoverOnlyMarkers = [];
-                for (const chunk of selected) {
-                    const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
-                    if (!seriesData) {
-                        continue;
-                    }
-                    const { series } = seriesData;
-                    if (series.marker.states.normal.enabled ||
-                        !series.marker.states.hover.enabled) {
-                        continue;
-                    }
-                    const point = seriesData.points.find((p) => p.data === chunk.data);
-                    if (!point || point.x === null || point.y === null) {
-                        continue;
-                    }
-                    hoverOnlyMarkers.push({
-                        point: point,
-                        active: true,
-                        hovered: true,
-                        clipped: false,
-                    });
-                }
-                if (hoverOnlyMarkers.length > 0) {
-                    hoverMarkersSvgElement
-                        .selectAll('g')
-                        .data(hoverOnlyMarkers)
-                        .join('g')
-                        .call(renderMarker)
-                        .each((_d, i, nodes) => {
-                        selectMarkerSymbol(select(nodes[i])).call(setMarker, 'hover');
-                    });
-                }
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        const eventName = `hover-shape.line-${(_b = (_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'unknown'}`;
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
-        };
+        return renderLine({
+            plot: plotRef.current,
+            markers: markersRef.current,
+            hoverMarkers: hoverMarkersRef.current,
+            annotations: annotationsRef.current,
+            boundsWidth,
+            boundsHeight,
+        }, preparedData, seriesOptions, dispatcher);
     }, [boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
-        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
+        const items = preparedData.flatMap((d) => d.htmlLabels);
         return { htmlElements: items };
     }, [preparedData]);
     return (React.createElement(React.Fragment, null,

package/dist/esm/hooks/useShapes/pie/index.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PieArcDatum } from 'd3-shape';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedPieData, SegmentData } from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedPieData } from '../../../core/shapes/pie/types';
+export { getHaloVisibility } from '../../../core/shapes/pie/renderer';
 type PreparePieSeriesArgs = {
     htmlLayout: HTMLElement | null;
     preparedData: PreparedPieData[];
     seriesOptions: PreparedSeriesOptions;
     dispatcher?: Dispatch<object>;
 };
-export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
 export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;
-export {};

package/dist/esm/hooks/useShapes/pie/index.js

@@ -1,17 +1,9 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { arc } from 'd3-shape';
-import get from 'lodash/get';
-import { setEllipsisForOverflowTexts } from '../../../core/utils';
+import { renderPie } from '../../../core/shapes/pie/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { setActiveState } from '../utils';
+export { getHaloVisibility } from '../../../core/shapes/pie/renderer';
 const b = block('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, htmlLayout } = args;
     const ref = React.useRef(null);
@@ -19,154 +11,7 @@ export function PieSeriesShapes(args) {
         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-width', (pieData) => pieData.borderWidth)
-            .attr('cursor', (pieData) => pieData.series.cursor);
-        // Render halo appearing outside the hovered slice
-        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.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);
-        // Render segments
-        shapesSelection
-            .selectAll(segmentSelector)
-            .data((pieData) => pieData.segments)
-            .join('path')
-            .attr('d', (d) => {
-            const arcGenerator = arc()
-                .innerRadius(d.data.pie.innerRadius)
-                .outerRadius(d.data.radius)
-                .cornerRadius(d.data.pie.borderRadius);
-            return arcGenerator(d);
-        })
-            .attr('class', b('segment'))
-            .style('stroke', (d) => d.data.series.borderColor)
-            .attr('fill', (d) => d.data.color)
-            .attr('opacity', (d) => d.data.opacity);
-        // render Labels
-        shapesSelection
-            .selectAll('text')
-            .data((pieData) => pieData.labels)
-            .join('text')
-            .html((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.connectors)
-            .enter()
-            .append('path')
-            .attr('class', b('connector'))
-            .attr('d', (d) => d.path)
-            .attr('stroke', (d) => d.color)
-            .attr('stroke-width', 1)
-            .attr('stroke-linejoin', 'round')
-            .attr('stroke-linecap', 'round')
-            .style('fill', 'none');
-        // Render custom shapes if defined
-        shapesSelection.each(async function (d, index, nodes) {
-            var _a, _b;
-            const customShape = await ((_b = (_a = d.series).renderCustomShape) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                series: {
-                    innerRadius: d.innerRadius,
-                },
-            }));
-            if (customShape) {
-                nodes[index].append(customShape);
-            }
-        });
-        const eventName = `hover-shape.pie`;
-        const hoverOptions = get(seriesOptions, 'pie.states.hover');
-        const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
-            var _a, _b;
-            const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.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]);
-                const haloSelection = pieSelection.selectAll(`.${b('halo')}`);
-                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;
-                        });
-                        const currentSegmentHalo = haloSelection.nodes()[i];
-                        select(currentSegmentHalo).attr('visibility', getHaloVisibility);
-                    }
-                    setActiveState({
-                        element: elements[i],
-                        state: inactiveOptions,
-                        active: Boolean(!inactiveEnabled ||
-                            !selectedSeriesId ||
-                            selectedSeriesId === d.data.series.id),
-                        datum: d.data,
-                    });
-                    return d;
-                });
-                const labelSelection = pieSelection.selectAll(`.${b('label')} 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 === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
-        };
+        return renderPie({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
     return (React.createElement(React.Fragment, null,

package/dist/esm/hooks/useShapes/radar/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedRadarData } from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedRadarData } from '../../../core/shapes/radar/types';
 type PrepareRadarSeriesArgs = {
     htmlLayout: HTMLElement | null;
     series: PreparedRadarData[];