@gravity-ui/charts 0.7.0 → 0.8.0

package/README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
+# Gravity Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/)
 
 > [!WARNING]
 > The library may have major changes in minor releases while it is on version `0.*.*`.

package/dist/cjs/components/Axis/AxisY.d.ts

@@ -7,6 +7,7 @@ type Props = {
     width: number;
     height: number;
     split: PreparedSplit;
+    plotRef?: React.MutableRefObject<SVGGElement | null>;
 };
 export declare const AxisY: (props: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Axis/AxisY.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { axisLeft, axisRight, line, select } from 'd3';
-import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
+import { block, calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getLineDashArray, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../../utils';
 import './styles.css';
 const b = block('d3-axis');
 function transformLabel(args) {
@@ -79,7 +79,7 @@ function getTitlePosition(args) {
     return { x, y };
 }
 export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split } = props;
+    const { axes, width, height: totalHeight, scale, split, plotRef } = props;
     const height = getAxisHeight({ split, boundsHeight: totalHeight });
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -88,26 +88,34 @@ export const AxisY = (props) => {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
+        const getAxisPosition = (axis) => {
+            var _a;
+            const top = ((_a = split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            if (axis.position === 'left') {
+                return `translate(0, ${top}px)`;
+            }
+            return `translate(${width}px, 0)`;
+        };
+        const plotLines = axes.reduce((acc, axis) => {
+            if (axis.plotLines.length) {
+                acc.push(...axis.plotLines.map((plotLine) => {
+                    return Object.assign(Object.assign({}, plotLine), { transform: getAxisPosition(axis) });
+                }));
+            }
+            return acc;
+        }, []);
         const axisSelection = svgElement
             .selectAll('axis')
             .data(axes)
             .join('g')
             .attr('class', b())
-            .style('transform', (d) => {
-            var _a;
-            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (d.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        });
+            .style('transform', (d) => getAxisPosition(d));
         axisSelection.each((d, index, node) => {
             const seriesScale = scale[index];
             const axisItem = select(node[index]);
+            const axisScale = seriesScale;
             const yAxisGenerator = getAxisGenerator({
-                axisGenerator: d.position === 'left'
-                    ? axisLeft(seriesScale)
-                    : axisRight(seriesScale),
+                axisGenerator: d.position === 'left' ? axisLeft(axisScale) : axisRight(axisScale),
                 preparedAxis: d,
                 height,
                 width,
@@ -148,6 +156,40 @@ export const AxisY = (props) => {
                 })
                     .remove();
             }
+            if (plotRef && d.plotLines.length > 0) {
+                const plotLineClassName = b('plotLine');
+                const plotLineContainer = select(plotRef.current);
+                plotLineContainer.selectAll(`.${plotLineClassName}`).remove();
+                const plotLinesSelection = plotLineContainer
+                    .selectAll(`.${plotLineClassName}`)
+                    .data(plotLines)
+                    .join('g')
+                    .attr('class', plotLineClassName)
+                    .style('transform', (plotLine) => plotLine.transform);
+                plotLinesSelection
+                    .append('path')
+                    .attr('d', (plotLine) => {
+                    const plotLineValue = Number(axisScale(plotLine.value));
+                    const points = [
+                        [0, plotLineValue],
+                        [width, plotLineValue],
+                    ];
+                    return line()(points);
+                })
+                    .attr('stroke', (plotLine) => plotLine.color)
+                    .attr('stroke-width', (plotLine) => plotLine.width)
+                    .attr('stroke-dasharray', (plotLine) => getLineDashArray(plotLine.dashStyle, plotLine.width))
+                    .attr('opacity', (plotLine) => plotLine.opacity);
+                plotLinesSelection.each((plotLineData, i, nodes) => {
+                    const plotLineSelection = select(nodes[i]);
+                    if (plotLineData.layerPlacement === 'before') {
+                        plotLineSelection.lower();
+                    }
+                    else {
+                        plotLineSelection.raise();
+                    }
+                });
+            }
             return axisItem;
         });
         axisSelection

package/dist/cjs/components/ChartInner/index.js

@@ -15,6 +15,7 @@ export const ChartInner = (props) => {
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
     const htmlLayerRef = React.useRef(null);
+    const plotRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getD3Dispatcher(), []);
     const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher, htmlLayout: htmlLayerRef.current }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
@@ -63,9 +64,9 @@ export const ChartInner = (props) => {
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
             })),
-            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
+            React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
                 xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length) && (React.createElement(React.Fragment, null,
-                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit }),
+                    React.createElement(AxisY, { axes: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale, split: preparedSplit, plotRef: plotRef }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale, split: preparedSplit })))),
                 shapes),

package/dist/cjs/components/ChartInner/useChartInnerHandlers.js

@@ -24,6 +24,8 @@ export function useChartInnerHandlers(props) {
         const closest = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY]);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
@@ -65,6 +67,8 @@ export function useChartInnerHandlers(props) {
         const items = getClosestPoints({
             position: [x, y],
             shapesData,
+            boundsHeight,
+            boundsWidth,
         });
         const selected = items === null || items === void 0 ? void 0 : items.find((item) => item.closest);
         if (!selected) {

package/dist/cjs/components/Legend/index.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { line as lineGenerator, scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
-import { getLineDashArray } from '../../hooks/useShapes/utils';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineDashArray, getSymbol, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('d3-legend');

package/dist/cjs/components/PlotTitle/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { block } from '../../utils';
 import './styles.css';
-const b = block('d3-plot-title');
+const b = block('plot-title');
 export const PlotTitle = (props) => {
     const { title } = props;
     if (!title) {

package/dist/cjs/components/PlotTitle/styles.css

@@ -1,4 +1,4 @@
-.chartkit-d3-plot-title {
+.gcharts-plot-title {
   font-size: var(--g-text-subheader-3-font-size);
   font-weight: var(--g-text-subheader-font-weight);
   fill: var(--g-color-text-secondary);

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -3,7 +3,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
 import { formatNumber } from '../../libs';
 import { block, getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, data, axis) => {
     switch (axis === null || axis === void 0 ? void 0 : axis.type) {
@@ -29,7 +29,7 @@ const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
 const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
 const getMeasureValue = (data, xAxis, yAxis) => {
     var _a, _b;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
@@ -41,7 +41,9 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
     const measureValue = getMeasureValue(hovered, xAxis, yAxis);
     return (React.createElement(React.Fragment, null,
         measureValue && React.createElement("div", null, measureValue),
-        hovered.map(({ data, series, closest }, i) => {
+        hovered.map((seriesItem, i) => {
+            var _a;
+            const { data, series, closest } = seriesItem;
             const id = `${get(series, 'id')}_${i}`;
             const color = get(series, 'color');
             switch (series.type) {
@@ -93,6 +95,20 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                             "\u00A0"),
                         React.createElement("span", null, seriesData.value)));
                 }
+                case 'sankey': {
+                    const { target, data: source } = seriesItem;
+                    const value = (_a = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _a === void 0 ? void 0 : _a.value;
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
+                        React.createElement("div", { style: { display: 'flex', gap: 8, verticalAlign: 'center' } },
+                            source.name,
+                            " ",
+                            React.createElement("span", null, "\u2192"),
+                            " ", target === null || target === void 0 ? void 0 :
+                            target.name,
+                            ": ",
+                            value)));
+                }
                 default: {
                     return null;
                 }

package/dist/cjs/constants/index.d.ts

@@ -9,6 +9,7 @@ export declare const SeriesType: {
     readonly Scatter: "scatter";
     readonly Treemap: "treemap";
     readonly Waterfall: "waterfall";
+    readonly Sankey: "sankey";
 };
 export declare enum DashStyle {
     Dash = "Dash",

package/dist/cjs/constants/index.js

@@ -9,6 +9,7 @@ export const SeriesType = {
     Scatter: 'scatter',
     Treemap: 'treemap',
     Waterfall: 'waterfall',
+    Sankey: 'sankey',
 };
 export var DashStyle;
 (function (DashStyle) {

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

@@ -1,4 +1,5 @@
-import type { BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
+import type { DashStyle } from 'src/constants';
+import type { AxisPlotLine, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisTitleAlignment, ChartAxisType, ChartData, ChartMargin } from '../../types';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;
@@ -10,6 +11,14 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
 export type PreparedChart = {
     margin: ChartMargin;
 };
+export type PreparedAxisPlotLine = {
+    value: number;
+    color: string;
+    width: number;
+    dashStyle: DashStyle;
+    opacity: number;
+    layerPlacement: AxisPlotLine['layerPlacement'];
+};
 export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
@@ -32,6 +41,7 @@ export type PreparedAxis = Omit<ChartAxis, 'type' | 'labels'> & {
     };
     position: 'left' | 'right' | 'top' | 'bottom';
     plotIndex: number;
+    plotLines: PreparedAxisPlotLine[];
 };
 export type PreparedTitle = ChartData['title'] & {
     height: number;

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

@@ -102,6 +102,7 @@ export const getPreparedXAxis = ({ xAxis, series, width, }) => {
         },
         position: 'bottom',
         plotIndex: 0,
+        plotLines: [],
     };
     const { height, rotation } = getLabelSettings({
         axis: preparedXAxis,

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/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/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)