@gravity-ui/charts 1.46.0 → 1.47.0

package/dist/esm/{hooks/useShapes → core/shapes}/funnel/types.d.ts

@@ -1,7 +1,7 @@
 import type { Path } from 'd3-path';
-import type { DashStyle } from 'src/core/constants';
 import type { FunnelSeriesData, LabelData } from '../../../types';
-import type { PreparedFunnelSeries } from '../../useSeries/types';
+import type { DashStyle } from '../../constants';
+import type { PreparedFunnelSeries } from '../../series/types';
 export type FunnelItemData = {
     x: number;
     y: number;

package/dist/esm/{hooks/useShapes → core/shapes}/heatmap/prepare-data.d.ts

@@ -1,6 +1,6 @@
-import type { ChartScale } from '../../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis } from '../../../hooks/useAxis/types';
-import type { PreparedHeatmapSeries } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedHeatmapSeries } from '../../series/types';
 import type { PreparedHeatmapData } from './types';
 type PrepareHeatmapDataArgs = {
     series: PreparedHeatmapSeries;

package/dist/esm/{hooks/useShapes → core/shapes}/heatmap/prepare-data.js

@@ -1,5 +1,5 @@
-import { getDomainDataXBySeries, getDomainDataYBySeries, getFormattedValue, getLabelsSize, getTextSizeFn, getTextWithElipsis, isBandScale, } from '../../../core/utils';
-import { getBandSize } from '../../../hooks/utils/get-band-size';
+import { getDomainDataXBySeries, getDomainDataYBySeries, getFormattedValue, getLabelsSize, getTextSizeFn, getTextWithElipsis, isBandScale, } from '../../utils';
+import { getBandSize } from '../../utils/band-size';
 export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale, }) {
     var _a, _b, _c, _d, _e;
     const yDomainData = getDomainDataYBySeries([series]);
@@ -84,6 +84,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
                             x: item.x + item.width / 2 - size.width / 2,
                             y: item.y + item.height / 2 - size.height / 2 + size.hangingOffset,
                             text,
+                            textAnchor: 'start',
                             style: series.dataLabels.style,
                         });
                     }

package/dist/esm/core/shapes/heatmap/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedHeatmapData } from './types';
+export declare function renderHeatmap(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedHeatmapData, seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/heatmap/renderer.js

@@ -0,0 +1,50 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
+const b = block('heatmap');
+export function renderHeatmap(elements, preparedData, seriesOptions, dispatcher) {
+    var _a, _b;
+    const svgElement = select(elements.plot);
+    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
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.labels,
+        className: b('label'),
+    });
+    function handleShapeHover(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;
+            });
+        }
+    }
+    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);
+    };
+}

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/heatmap/types.d.ts

@@ -1,5 +1,5 @@
 import type { BaseTextStyle, HeatmapSeriesData, HtmlItem } from '../../../types';
-import type { PreparedHeatmapSeries } from '../../useSeries/types';
+import type { PreparedHeatmapSeries } from '../../series/types';
 export type HeatmapItem = {
     x: number;
     y: number;
@@ -14,6 +14,7 @@ export type HeatmapLabel = {
     x: number;
     y: number;
     text: string;
+    textAnchor: 'start' | 'end' | 'middle';
     style: BaseTextStyle;
 };
 export type PreparedHeatmapData = {

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/line/prepare-data.d.ts

@@ -1,8 +1,8 @@
-import type { PreparedSplit } from '../../../core/layout/split-types';
-import type { ChartScale } from '../../../core/scales/types';
 import type { ShapeDataWithLabels } from '../../../types';
-import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedLineSeries, PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { PreparedSplit } from '../../layout/split-types';
+import type { ChartScale } from '../../scales/types';
+import type { PreparedLineSeries, PreparedSeriesOptions } from '../../series/types';
 import type { PreparedLineData } from './types';
 export declare const prepareLineData: (args: {
     series: PreparedLineSeries[];

package/dist/esm/{hooks/useShapes → core/shapes}/line/prepare-data.js

@@ -1,7 +1,7 @@
-import { prepareAnnotation } from '../../../core/series/prepare-annotation';
-import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
-import { getXValue, getYValue } from '../utils';
+import { prepareAnnotation } from '../../series/prepare-annotation';
+import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../utils';
+import { getFormattedValue } from '../../utils/format';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
     var _a;
     const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
@@ -129,6 +129,14 @@ export const prepareLineData = async (args) => {
             }
             return result;
         }, []);
+        markHiddenPointsOutOfYRange({
+            points,
+            yScale: seriesYScale,
+            yAxisTop,
+            axisMin: seriesYAxis.min,
+            axisMax: seriesYAxis.max,
+            getDataY: (p) => p.data.y,
+        });
         const result = {
             annotations,
             points,

package/dist/esm/core/shapes/line/renderer.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedLineData } from './types';
+export declare function renderLine(elements: {
+    plot: SVGGElement;
+    markers: SVGGElement;
+    hoverMarkers: SVGGElement;
+    annotations: SVGGElement;
+    boundsWidth: number;
+    boundsHeight: number;
+}, preparedData: PreparedLineData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/line/renderer.js

@@ -0,0 +1,161 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { line as lineGenerator } from 'd3-shape';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { getLineDashArray } from '../../utils';
+import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
+import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { setActiveState } from '../utils';
+const b = block('line');
+export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
+    var _a, _b;
+    const plotSvgElement = select(elements.plot);
+    const markersSvgElement = select(elements.markers);
+    const hoverMarkersSvgElement = select(elements.hoverMarkers);
+    const annotationsSvgElement = select(elements.annotations);
+    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 && !d.hiddenInLine)
+        .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 = renderDataLabels({
+        container: plotSvgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
+    const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
+    const markerSelection = markersSvgElement
+        .selectAll('marker')
+        .data(markers)
+        .join('g')
+        .call(renderMarker);
+    renderAnnotations({
+        anchors: preparedData.flatMap((d) => d.annotations),
+        container: annotationsSvgElement,
+        plotHeight: elements.boundsHeight,
+        plotWidth: elements.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) {
+        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');
+                });
+            }
+        }
+    }
+    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);
+    };
+}

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/line/types.d.ts

@@ -1,15 +1,14 @@
-import type { DashStyle, LineCap, LineJoin } from '../../../core/constants';
-import type { PreparedAnnotation } from '../../../core/series/types';
 import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
-import type { PreparedLineSeries } from '../../useSeries/types';
-import type { AnnotationAnchor } from '../annotation';
+import type { DashStyle, LineCap, LineJoin } from '../../constants';
+import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
 export type PointData = {
-    x: number | null;
-    y: number | null;
-    data: LineSeriesData;
-    series: PreparedLineSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: LineSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedLineSeries;
+    x: number | null;
+    y: number | null;
 };
 export type MarkerPointData = PointData & {
     y: number;

package/dist/esm/core/shapes/marker.d.ts

@@ -0,0 +1,45 @@
+import type { BaseType, Selection } from 'd3-selection';
+import { SymbolType } from '../constants';
+export interface BaseMarkerData {
+    point: {
+        x: number;
+        y: number;
+        color?: string;
+        data: unknown;
+        series: {
+            color: string;
+            marker: {
+                states: {
+                    normal: {
+                        symbol: `${SymbolType}`;
+                        enabled: boolean;
+                        radius: number;
+                        borderWidth: number;
+                        borderColor: string;
+                    };
+                    hover: {
+                        enabled: boolean;
+                        radius: number;
+                        borderWidth: number;
+                        borderColor: string;
+                        halo: {
+                            enabled: boolean;
+                            size: number;
+                            opacity: number;
+                        };
+                    };
+                };
+            };
+        };
+    };
+    active: boolean;
+    hovered: boolean;
+    clipped?: boolean;
+}
+export declare function renderMarker<T extends BaseMarkerData>(selection: Selection<BaseType, T, BaseType, unknown>): Selection<BaseType, T, BaseType, unknown>;
+export declare function getMarkerVisibility(d: BaseMarkerData): "" | "hidden";
+export declare function getMarkerHaloVisibility(d: BaseMarkerData): "" | "hidden";
+export declare function setMarker<T extends BaseType, D extends BaseMarkerData>(selection: Selection<T, D, BaseType | null, unknown>, state: 'normal' | 'hover'): void;
+export declare function getMarkerSymbol(type: `${SymbolType}` | undefined, 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>;

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/marker.js

@@ -1,8 +1,8 @@
 import { symbol } from 'd3-shape';
 import get from 'lodash/get';
-import { SymbolType } from '../../core/constants';
-import { getSymbol } from '../../core/utils';
 import { block } from '../../utils';
+import { SymbolType } from '../constants';
+import { getSymbol } from '../utils';
 const b = block('marker');
 const haloClassName = b('halo');
 const symbolClassName = b('symbol');

package/dist/esm/{hooks/useShapes → core/shapes}/pie/prepare-data.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedPieSeries } from '../../useSeries/types';
+import type { PreparedPieSeries } from '../../series/types';
 import type { PreparedPieData } from './types';
 type Args = {
     series: PreparedPieSeries[];

package/dist/esm/{hooks/useShapes → core/shapes}/pie/prepare-data.js

@@ -1,9 +1,9 @@
 import { group, max } from 'd3-array';
 import { arc, line as lineGenerator } from 'd3-shape';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_STYLE } from '../../../core/constants';
-import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
+import { DEFAULT_DATALABELS_STYLE } from '../../constants';
+import { calculateNumericProperty, getLabelsSize, getLeftPosition, getTextSizeFn, isLabelsOverlapping, } from '../../utils';
+import { getFormattedValue } from '../../utils/format';
 import { getCurveFactory, getInscribedAngle, pieGenerator } from './utils';
 const FULL_CIRCLE = Math.PI * 2;
 const getCenter = (boundsWidth, boundsHeight, center) => {

package/dist/esm/core/shapes/pie/renderer.d.ts

@@ -0,0 +1,8 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PieArcDatum } from 'd3-shape';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedPieData, SegmentData } from './types';
+export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
+export declare function renderPie(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedPieData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

package/dist/esm/core/shapes/pie/renderer.js

@@ -0,0 +1,160 @@
+import { color } from 'd3-color';
+import { select } from 'd3-selection';
+import { arc } from 'd3-shape';
+import get from 'lodash/get';
+import { block } from '../../../utils';
+import { setActiveState } from '../../shapes/utils';
+import { setEllipsisForOverflowTexts } from '../../utils';
+const b = block('pie');
+export function getHaloVisibility(d) {
+    const enabled = d.data.pie.halo.enabled && d.data.hovered;
+    return enabled ? '' : 'hidden';
+}
+export function renderPie(elements, preparedData, seriesOptions, dispatcher) {
+    const svgElement = select(elements.plot);
+    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);
+    };
+}

package/dist/esm/{hooks/useShapes → core/shapes}/pie/types.d.ts

@@ -1,6 +1,6 @@
 import type { PieArcDatum } from 'd3-shape';
 import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
-import type { PreparedPieSeries } from '../../useSeries/types';
+import type { PreparedPieSeries } from '../../series/types';
 export type SegmentData = {
     value: number;
     color: string;

package/dist/esm/{hooks/useShapes → core/shapes}/radar/prepare-data.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedRadarSeries } from '../../useSeries/types';
+import type { PreparedRadarSeries } from '../../series/types';
 import type { PreparedRadarData } from './types';
 type Args = {
     series: PreparedRadarSeries[];

package/dist/{cjs/hooks/useShapes → esm/core/shapes}/radar/prepare-data.js

@@ -1,8 +1,8 @@
 import { range } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
 import { curveLinearClosed, line } from 'd3-shape';
-import { getLabelsSize, getTextSizeFn } from '../../../core/utils';
-import { getFormattedValue } from '../../../core/utils/format';
+import { getLabelsSize, getTextSizeFn } from '../../utils';
+import { getFormattedValue } from '../../utils/format';
 export async function prepareRadarData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;

package/dist/esm/core/shapes/radar/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { Dispatch } from 'd3-dispatch';
+import type { PreparedSeriesOptions } from '../../series/types';
+import type { PreparedRadarData } from './types';
+export declare function renderRadar(elements: {
+    plot: SVGGElement;
+}, preparedData: PreparedRadarData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;