@gravity-ui/charts 0.6.0 → 0.6.1-beta.2

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.*.*`.
@@ -6,7 +6,7 @@
 ## Install
 
 ```shell
-npm install --save-dev @gravity-ui/uikit @gravity-ui/charts
+npm install @gravity-ui/uikit @gravity-ui/charts
 ```
 
 ## Development

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/ChartInner/useChartInnerProps.d.ts

@@ -29,10 +29,10 @@ export declare function useChartInnerProps(props: Props): {
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
-    title: (import("../../types").ChartTitle & {
+    title: (import("../..").ChartTitle & {
         height: number;
     }) | undefined;
-    tooltip: import("../../types").ChartTooltip<any> & {
+    tooltip: import("../..").ChartTooltip<any> & {
         enabled: boolean;
     };
     xAxis: import("../../hooks").PreparedAxis;

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/ChartTooltipContent.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ChartTooltip, ChartXAxis, ChartYAxis, TooltipDataChunk } from '../../types';
-export type ChartTooltipContentProps = {
+export interface ChartTooltipContentProps {
     hovered?: TooltipDataChunk[];
     xAxis?: ChartXAxis;
     yAxis?: ChartYAxis;
     renderer?: ChartTooltip['renderer'];
-};
+}
 export declare const ChartTooltipContent: (props: ChartTooltipContentProps) => React.JSX.Element | null;

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/components/Tooltip/index.js

@@ -4,7 +4,7 @@ import { useTooltip } from '../../hooks';
 import { block } from '../../utils';
 import { ChartTooltipContent } from './ChartTooltipContent';
 import './styles.css';
-const b = block('d3-tooltip');
+const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
     const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
@@ -21,7 +21,7 @@ export const Tooltip = (props) => {
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b({ pinned: tooltipPinned }), contentClassName: b('popup-content'), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }], onOutsideClick: tooltipPinned ? handleOutsideClick : undefined },
         React.createElement("div", { className: b('content') },
             React.createElement(ChartTooltipContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis, renderer: tooltip.renderer })))) : null;
 };

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

@@ -1,28 +1,30 @@
-.gcharts-d3-tooltip[class] {
+.gcharts-tooltip[class] {
   --g-popup-border-width: 0;
   pointer-events: none;
 }
-.gcharts-d3-tooltip[class] > div {
+.gcharts-tooltip[class] > div {
   animation-duration: unset;
   animation-timing-function: unset;
   animation-fill-mode: unset;
 }
-.gcharts-d3-tooltip[class].gcharts-d3-tooltip_pinned {
+.gcharts-tooltip[class].gcharts-tooltip_pinned {
   pointer-events: inherit;
 }
-.gcharts-d3-tooltip__content {
-  padding: 10px 14px;
+.gcharts-tooltip__popup-content {
+  box-shadow: none;
+}
+.gcharts-tooltip__content {
+  padding: 8px 14px;
   text-wrap: nowrap;
-  border: 1px solid var(--g-color-line-generic);
-  border-radius: 3px;
+  border-radius: 4px;
   background-color: var(--g-color-infographics-tooltip-bg);
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
 }
-.gcharts-d3-tooltip__content-row {
+.gcharts-tooltip__content-row {
   display: flex;
   align-items: center;
 }
-.gcharts-d3-tooltip__color {
+.gcharts-tooltip__color {
   display: inline-block;
   width: 16px;
   height: 8px;

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

@@ -1,18 +1,19 @@
 import React from 'react';
 import type { ChartData } from '../types';
 export * from './Tooltip/ChartTooltipContent';
-export type ChartRef = {
+export interface ChartRef {
     reflow: () => void;
-};
-type ChartDimentions = {
+}
+export interface ChartDimentions {
     height: number;
     width: number;
-};
-export type ChartProps = {
+}
+export type ChartOnResize = (args: {
+    dimensions?: ChartDimentions;
+}) => void;
+export interface ChartProps {
     data: ChartData;
     lang?: string;
-    onResize?: (args: {
-        dimensions?: ChartDimentions;
-    }) => void;
-};
+    onResize?: ChartOnResize;
+}
 export declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<ChartRef>>;

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-area.d.ts

@@ -5,9 +5,9 @@ export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
+    radius: number;
     borderColor: string;
     borderWidth: number;
-    radius: number;
 };
 type PrepareAreaSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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-line.d.ts

@@ -8,9 +8,9 @@ export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: `${import("../../constants").SymbolType}`;
+    radius: number;
     borderColor: string;
     borderWidth: number;
-    radius: number;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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;
+    });
+}