@gravity-ui/charts 0.7.0 → 0.9.0

package/dist/cjs/hooks/useChartOptions/y-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, DashStyle, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
@@ -108,6 +108,14 @@ export const getPreparedYAxis = ({ series, yAxis, height, }) => {
             },
             position: get(axisItem, 'position', defaultAxisPosition),
             plotIndex: get(axisItem, 'plotIndex', 0),
+            plotLines: get(axisItem, 'plotLines', []).map((d) => ({
+                value: get(d, 'value', 0),
+                color: get(d, 'color', 'var(--g-color-base-brand)'),
+                width: get(d, 'width', 1),
+                dashStyle: get(d, 'dashStyle', DashStyle.Solid),
+                opacity: get(d, 'opacity', 1),
+                layerPlacement: get(d, 'layerPlacement', 'before'),
+            })),
         };
         if (labelsEnabled) {
             preparedAxis.labels.width = getAxisLabelMaxWidth({ axis: preparedAxis, series });

package/dist/cjs/hooks/useSeries/constants.js

@@ -4,7 +4,7 @@ export const DEFAULT_DATALABELS_PADDING = 5;
 export const DEFAULT_DATALABELS_STYLE = {
     fontSize: '11px',
     fontWeight: 'bold',
-    fontColor: 'var(--d3-data-labels)',
+    fontColor: 'var(--gcharts-data-labels)',
 };
 export const DEFAULT_HALO_OPTIONS = {
     enabled: true,

package/dist/cjs/hooks/useSeries/prepare-bar-x.d.ts

@@ -1,10 +1,11 @@
 import type { ScaleOrdinal } from 'd3';
-import type { BarXSeries } from '../../types';
+import type { BarXSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareBarXSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: BarXSeries[];
     legend: PreparedLegend;
+    seriesOptions?: ChartSeriesOptions;
 };
 export declare function prepareBarXSeries(args: PrepareBarXSeriesArgs): PreparedSeries[];
 export {};

package/dist/cjs/hooks/useSeries/prepare-bar-x.js

@@ -3,7 +3,7 @@ import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 export function prepareBarXSeries(args) {
-    const { colorScale, series: seriesList, legend } = args;
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
         var _a, _b, _c, _d, _e;
         const name = series.name || '';
@@ -33,6 +33,7 @@ export function prepareBarXSeries(args) {
             },
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
+            borderRadius: get(series, 'borderRadius', get(seriesOptions, 'bar-x.borderRadius', 0)),
         };
     }, []);
 }

package/dist/cjs/hooks/useSeries/prepare-bar-y.d.ts

@@ -1,10 +1,11 @@
 import type { ScaleOrdinal } from 'd3';
-import type { BarYSeries } from '../../types';
+import type { BarYSeries, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareBarYSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: BarYSeries[];
     legend: PreparedLegend;
+    seriesOptions?: ChartSeriesOptions;
 };
 export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): PreparedSeries[];
 export {};

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -24,8 +24,9 @@ function prepareDataLabels(series) {
     };
 }
 export function prepareBarYSeries(args) {
-    const { colorScale, series: seriesList, legend } = args;
+    const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
+        var _a, _b, _c;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         return {
@@ -43,6 +44,7 @@ export function prepareBarYSeries(args) {
             stackId: getSeriesStackId(series),
             dataLabels: prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
+            borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
         };
     }, []);
 }

package/dist/cjs/hooks/useSeries/prepare-pie.js

@@ -11,7 +11,7 @@ export function preparePieSeries(args) {
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = series.data.map((dataItem, i) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const result = {
             type: 'pie',
             data: dataItem,
@@ -40,7 +40,7 @@ export function preparePieSeries(args) {
             borderColor: series.borderColor || '',
             borderRadius: (_b = series.borderRadius) !== null && _b !== void 0 ? _b : 0,
             borderWidth: (_c = series.borderWidth) !== null && _c !== void 0 ? _c : 1,
-            radius: series.radius || '100%',
+            radius: (_e = (_d = dataItem.radius) !== null && _d !== void 0 ? _d : series.radius) !== null && _e !== void 0 ? _e : '100%',
             innerRadius: series.innerRadius || 0,
             stackId,
             states: {

package/dist/cjs/hooks/useSeries/prepare-sankey.d.ts

@@ -0,0 +1,11 @@
+import type { ScaleOrdinal } from 'd3';
+import type { ChartSeriesOptions, SankeySeries } from '../../types';
+import type { PreparedLegend, PreparedSankeySeries } from './types';
+type PrepareSankeySeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    legend: PreparedLegend;
+    series: SankeySeries[];
+    seriesOptions?: ChartSeriesOptions;
+};
+export declare function prepareSankeySeries(args: PrepareSankeySeriesArgs): PreparedSankeySeries[];
+export {};

package/dist/cjs/hooks/useSeries/prepare-sankey.js

@@ -0,0 +1,38 @@
+import get from 'lodash/get';
+import { getUniqId } from '../../utils';
+import { DEFAULT_DATALABELS_STYLE } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function prepareSankeySeries(args) {
+    const { colorScale, legend, series } = args;
+    return series.map((s) => {
+        var _a;
+        const id = getUniqId();
+        const name = s.name || '';
+        const color = colorScale(name);
+        const preparedSeries = {
+            color,
+            data: s.data.map((d) => {
+                var _a;
+                return ({
+                    name: d.name,
+                    color: (_a = d.color) !== null && _a !== void 0 ? _a : colorScale(d.name),
+                    links: d.links,
+                });
+            }),
+            dataLabels: {
+                enabled: get(s, 'dataLabels.enabled', true),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = s.dataLabels) === null || _a === void 0 ? void 0 : _a.style),
+            },
+            id,
+            type: s.type,
+            name,
+            visible: get(s, 'visible', true),
+            legend: {
+                enabled: get(s, 'legend.enabled', legend.enabled),
+                symbol: prepareLegendSymbol(s),
+            },
+            cursor: get(s, 'cursor', null),
+        };
+        return preparedSeries;
+    });
+}

package/dist/cjs/hooks/useSeries/prepareSeries.js

@@ -4,6 +4,7 @@ import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
 import { prepareLineSeries } from './prepare-line';
 import { preparePieSeries } from './prepare-pie';
+import { prepareSankeySeries } from './prepare-sankey';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 import { prepareWaterfallSeries } from './prepare-waterfall';
@@ -17,10 +18,20 @@ export function prepareSeries(args) {
             }, []);
         }
         case 'bar-x': {
-            return prepareBarXSeries({ series: series, legend, colorScale });
+            return prepareBarXSeries({
+                series: series,
+                legend,
+                colorScale,
+                seriesOptions,
+            });
         }
         case 'bar-y': {
-            return prepareBarYSeries({ series: series, legend, colorScale });
+            return prepareBarYSeries({
+                series: series,
+                legend,
+                colorScale,
+                seriesOptions,
+            });
         }
         case 'scatter': {
             return prepareScatterSeries({ series: series, legend, colorScale });
@@ -56,6 +67,14 @@ export function prepareSeries(args) {
                 colorScale,
             });
         }
+        case 'sankey': {
+            return prepareSankeySeries({
+                series: series,
+                seriesOptions,
+                colorScale,
+                legend,
+            });
+        }
         default: {
             throw new ChartError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -107,6 +107,7 @@ export type PreparedBarXSeries = {
         padding: number;
         html: boolean;
     };
+    borderRadius: number;
     yAxis: number;
 } & BasePreparedSeries;
 export type PreparedBarYSeries = {
@@ -122,6 +123,7 @@ export type PreparedBarYSeries = {
         maxWidth: number;
         html: boolean;
     };
+    borderRadius: number;
 } & BasePreparedSeries;
 export type PreparedPieSeries = {
     type: PieSeries['type'];
@@ -248,7 +250,15 @@ export type PreparedWaterfallSeries = {
     positiveColor: string;
     negativeColor: string;
 } & BasePreparedSeries;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries;
+export type PreparedSankeySeries = {
+    type: SankeySeries['type'];
+    data: SankeySeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+    };
+} & BasePreparedSeries & Omit<SankeySeries, keyof BasePreparedSeries>;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries | PreparedSankeySeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

package/dist/cjs/hooks/useSeries/utils.js

@@ -1,6 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
-import { getUniqId } from '../../utils';
+import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {

package/dist/cjs/hooks/useShapes/area/index.js

@@ -5,7 +5,7 @@ import { block, filterOverlappingLabels } from '../../..//utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
-const b = block('d3-area');
+const b = block('area');
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/bar-x/index.js

@@ -3,9 +3,10 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block, filterOverlappingLabels } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
+import { getRectPath } from '../utils';
 export { prepareBarXData } from './prepare-data';
 export * from './types';
-const b = block('d3-bar-x');
+const b = block('bar-x');
 export const BarXSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);
@@ -22,7 +23,20 @@ export const BarXSeriesShapes = (args) => {
         const rectSelection = svgElement
             .selectAll('allRects')
             .data(preparedData)
-            .join('rect')
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = d.isLastStackItem
+                ? Math.min(d.height, d.width / 2, d.series.borderRadius)
+                : 0;
+            const p = getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius: [borderRadius, borderRadius, 0, 0],
+            });
+            return p.toString();
+        })
             .attr('class', b('segment'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -103,7 +103,7 @@ export const prepareBarXData = (args) => {
             const sortedData = sortKey
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
-            sortedData.forEach((yValue) => {
+            sortedData.forEach((yValue, yValueIndex) => {
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
                 let xCenter;
@@ -129,6 +129,7 @@ export const prepareBarXData = (args) => {
                     data: yValue.data,
                     series: yValue.series,
                     htmlElements: [],
+                    isLastStackItem: yValueIndex === sortedData.length - 1,
                 };
                 const label = getLabelData(barData);
                 if (yValue.series.dataLabels.html && label) {

package/dist/cjs/hooks/useShapes/bar-x/types.d.ts

@@ -9,4 +9,5 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     series: PreparedBarXSeries;
     label?: LabelData;
     htmlElements: HtmlItem[];
+    isLastStackItem: boolean;
 };

package/dist/cjs/hooks/useShapes/bar-y/index.js

@@ -3,8 +3,9 @@ import { color, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
+import { getRectPath } from '../utils';
 export { prepareBarYData } from './prepare-data';
-const b = block('d3-bar-y');
+const b = block('bar-y');
 export const BarYSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);
@@ -18,7 +19,20 @@ export const BarYSeriesShapes = (args) => {
         const rectSelection = svgElement
             .selectAll('rect')
             .data(preparedData)
-            .join('rect')
+            .join('path')
+            .attr('d', (d) => {
+            const borderRadius = d.isLastStackItem
+                ? Math.min(d.height, d.width / 2, d.series.borderRadius)
+                : 0;
+            const p = getRectPath({
+                x: d.x,
+                y: d.y,
+                width: d.width,
+                height: d.height,
+                borderRadius: [0, borderRadius, borderRadius, 0],
+            });
+            return p.toString();
+        })
             .attr('class', b('segment'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -124,7 +124,7 @@ export const prepareBarYData = (args) => {
             const sortedData = sortKey
                 ? sort(measureValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : measureValues;
-            sortedData.forEach(({ data, series: s }) => {
+            sortedData.forEach(({ data, series: s }, xValueIndex) => {
                 let center;
                 if (yAxis[0].type === 'category') {
                     const bandScale = yScale;
@@ -147,6 +147,7 @@ export const prepareBarYData = (args) => {
                     data,
                     series: s,
                     htmlElements: [],
+                    isLastStackItem: xValueIndex === sortedData.length - 1,
                 };
                 stackItems.push(item);
                 stackSum += width + 1;

package/dist/cjs/hooks/useShapes/bar-y/types.d.ts

@@ -10,4 +10,5 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     series: PreparedBarYSeries;
     label?: LabelData;
     htmlElements: HtmlItem[];
+    isLastStackItem: boolean;
 };

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

@@ -8,12 +8,13 @@ import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
 import type { PreparedLineData } from './line/types';
 import type { PreparedPieData } from './pie/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 './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { group } from 'd3';
+import { ChartError } from '../../libs';
 import { getOnlyVisibleSeries } from '../../utils';
 import { AreaSeriesShapes } from './area';
 import { prepareAreaData } from './area/prepare-data';
@@ -9,6 +10,8 @@ import { LineSeriesShapes } from './line';
 import { prepareLineData } from './line/prepare-data';
 import { PieSeriesShapes } from './pie';
 import { preparePieData } from './pie/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';
@@ -134,6 +137,22 @@ export const useShapes = (args) => {
                     });
                     acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                     shapesData.push(preparedData);
+                    break;
+                }
+                case 'sankey': {
+                    const preparedData = prepareSankeyData({
+                        series: chartSeries[0],
+                        width: boundsWidth,
+                        height: boundsHeight,
+                    });
+                    acc.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapesData.push(preparedData);
+                    break;
+                }
+                default: {
+                    throw new ChartError({
+                        message: `The display method is not defined for a series with type "${seriesType}"`,
+                    });
                 }
             }
             return acc;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
-import { block, filterOverlappingLabels } from '../../../utils';
+import { block, filterOverlappingLabels, getLineDashArray } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
-import { getLineDashArray, setActiveState } from '../utils';
-const b = block('d3-line');
+import { setActiveState } from '../utils';
+const b = block('line');
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
     const hoveredDataRef = React.useRef(null);

package/dist/cjs/hooks/useShapes/marker.js

@@ -2,7 +2,7 @@ import { symbol } from 'd3';
 import get from 'lodash/get';
 import { SymbolType } from '../../constants';
 import { block, getSymbol } from '../../utils';
-const b = block('d3-marker');
+const b = block('marker');
 const haloClassName = b('halo');
 const symbolClassName = b('symbol');
 export function renderMarker(selection) {

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

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import { block, setEllipsisForOverflowTexts } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { setActiveState } from '../utils';
-const b = block('d3-pie');
+const b = block('pie');
 export function getHaloVisibility(d) {
     const enabled = d.data.pie.halo.enabled && d.data.hovered;
     return enabled ? '' : 'hidden';
@@ -30,7 +30,6 @@ export function PieSeriesShapes(args) {
             const [x, y] = pieData.center;
             return `translate(${x}, ${y})`;
         })
-            .style('stroke', (pieData) => pieData.borderColor)
             .style('stroke-width', (pieData) => pieData.borderWidth)
             .attr('cursor', (pieData) => pieData.series.cursor);
         // Render halo appearing outside the hovered slice
@@ -46,7 +45,7 @@ export function PieSeriesShapes(args) {
             .attr('d', (d) => {
             const arcGenerator = arc()
                 .innerRadius(d.data.pie.innerRadius)
-                .outerRadius(d.data.pie.radius + d.data.pie.halo.size)
+                .outerRadius(d.data.radius + d.data.pie.halo.size)
                 .cornerRadius(d.data.pie.borderRadius);
             return arcGenerator(d);
         })
@@ -63,11 +62,12 @@ export function PieSeriesShapes(args) {
             .attr('d', (d) => {
             const arcGenerator = arc()
                 .innerRadius(d.data.pie.innerRadius)
-                .outerRadius(d.data.pie.radius)
+                .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

package/dist/cjs/hooks/useShapes/pie/prepare-data.js

@@ -19,15 +19,13 @@ export function preparePieData(args) {
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
     const prepareItem = (stackId, items) => {
-        var _a, _b, _c;
+        var _a;
         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 { center, borderWidth, borderColor, borderRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
         const data = {
             id: stackId,
             center: getCenter(boundsWidth, boundsHeight, center),
-            innerRadius: (_b = calculateNumericProperty({ value: seriesInnerRadius, base: radius })) !== null && _b !== void 0 ? _b : 0,
-            radius,
+            innerRadius: 0,
             segments: [],
             labels: [],
             htmlLabels: [],
@@ -43,7 +41,19 @@ export function preparePieData(args) {
                 size: series.states.hover.halo.size,
             },
         };
+        const { maxHeight: labelHeight } = getLabelsSize({
+            labels: ['Some Label'],
+            style: dataLabels.style,
+        });
+        let segmentMaxRadius = 0;
         const segments = items.map((item) => {
+            var _a;
+            let maxSegmentRadius = maxRadius;
+            if (dataLabels.enabled) {
+                maxSegmentRadius -= dataLabels.distance + dataLabels.connectorPadding + labelHeight;
+            }
+            const segmentRadius = (_a = calculateNumericProperty({ value: item.radius, base: maxSegmentRadius })) !== null && _a !== void 0 ? _a : maxSegmentRadius;
+            segmentMaxRadius = Math.max(segmentMaxRadius, segmentRadius);
             return {
                 value: item.value,
                 color: item.color,
@@ -52,19 +62,12 @@ export function preparePieData(args) {
                 hovered: false,
                 active: true,
                 pie: data,
+                radius: segmentRadius,
             };
         });
         data.segments = pieGenerator(segments);
-        if (dataLabels.enabled) {
-            const { style, connectorPadding, distance } = dataLabels;
-            const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
-            const minSegmentRadius = maxRadius - distance - connectorPadding - labelHeight;
-            if (data.radius > minSegmentRadius) {
-                data.radius = minSegmentRadius;
-                data.innerRadius =
-                    (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
-            }
-        }
+        data.innerRadius =
+            (_a = calculateNumericProperty({ value: seriesInnerRadius, base: segmentMaxRadius })) !== null && _a !== void 0 ? _a : 0;
         return data;
     };
     const prepareLabels = (prepareLabelsArgs) => {
@@ -84,20 +87,17 @@ export function preparePieData(args) {
         const { style, connectorPadding, distance } = dataLabels;
         const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
         const connectorStartPointGenerator = arc()
-            .innerRadius(data.radius)
-            .outerRadius(data.radius);
-        const connectorMidPointRadius = data.radius + distance / 2;
+            .innerRadius((d) => d.data.radius)
+            .outerRadius((d) => d.data.radius);
         const connectorMidPointGenerator = arc()
-            .innerRadius(connectorMidPointRadius)
-            .outerRadius(connectorMidPointRadius);
-        const connectorArcRadius = data.radius + distance;
+            .innerRadius((d) => d.data.radius + distance / 2)
+            .outerRadius((d) => d.data.radius + distance / 2);
         const connectorEndPointGenerator = arc()
-            .innerRadius(connectorArcRadius)
-            .outerRadius(connectorArcRadius);
-        const labelArcRadius = connectorArcRadius + connectorPadding;
+            .innerRadius((d) => d.data.radius + distance)
+            .outerRadius((d) => d.data.radius + distance);
         const labelArcGenerator = arc()
-            .innerRadius(labelArcRadius)
-            .outerRadius(labelArcRadius);
+            .innerRadius((d) => d.data.radius + distance + connectorPadding)
+            .outerRadius((d) => d.data.radius + distance + connectorPadding);
         series.forEach((d, index) => {
             const prevLabel = labels[labels.length - 1];
             const text = String(d.data.label || d.data.value);
@@ -179,8 +179,8 @@ export function preparePieData(args) {
                 }
                 if (shouldUseHtml) {
                     htmlLabels.push({
-                        x: boundsWidth / 2 + label.x,
-                        y: boundsHeight / 2 + label.y,
+                        x: data.center[0] + label.x,
+                        y: Math.max(0, data.center[1] + label.y),
                         content: label.text,
                         size: label.size,
                     });
@@ -207,19 +207,21 @@ export function preparePieData(args) {
             data,
             series: items,
         });
-        const allPreparedLabels = [...preparedLabels.labels, ...preparedLabels.htmlLabels];
-        const top = Math.min(data.center[1] - data.radius, ...allPreparedLabels.map((l) => l.y + data.center[1]));
-        const bottom = Math.max(data.center[1] + data.radius, ...allPreparedLabels.map((l) => data.center[1] + l.y + l.size.height));
+        const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
+        const top = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
+        const bottom = Math.max(data.center[1] + segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1] + l.size.height), ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
         const topAdjustment = Math.floor(top - data.halo.size);
         if (topAdjustment > 0) {
-            // should adjust top position and height
-            data.radius += topAdjustment / 2;
+            data.segments.forEach((s) => {
+                s.data.radius += topAdjustment / 2;
+            });
             data.center[1] -= topAdjustment / 2;
         }
         const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
         if (bottomAdjustment > 0) {
-            // should adjust position and radius
-            data.radius += bottomAdjustment / 2;
+            data.segments.forEach((s) => {
+                s.data.radius += bottomAdjustment / 2;
+            });
             data.center[1] += bottomAdjustment / 2;
         }
         const { labels, htmlLabels, connectors } = prepareLabels({