@gravity-ui/charts 0.7.0 → 0.8.0

package/dist/cjs/types/chart/sankey.d.ts

@@ -0,0 +1,22 @@
+import type { SeriesType } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+export interface SankeySeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
+    name: string;
+    color?: string;
+    links: {
+        name: string;
+        value: number;
+    }[];
+}
+export interface SankeySeries<T = MeaningfulAny> extends BaseSeries {
+    type: typeof SeriesType.Sankey;
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    data: SankeySeriesData<T>[];
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+}

package/dist/cjs/types/chart/sankey.js

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/chart/series.d.ts

@@ -8,11 +8,12 @@ import type { Halo } from './halo';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PointMarkerOptions } from './marker';
 import type { PieSeries, PieSeriesData } from './pie';
+import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
-export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T>;
-export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T>;
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T>;
 export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
 }
@@ -72,6 +73,11 @@ export interface ChartSeriesOptions {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "y"
@@ -108,6 +114,11 @@ export interface ChartSeriesOptions {
          * @default 0.2
          */
         groupPadding?: number;
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
         dataSorting?: {
             /** Determines what data value should be used to sort by.
              * Possible values are undefined to disable, "name" to sort by series name or "x"

package/dist/cjs/types/chart/tooltip.d.ts

@@ -5,6 +5,7 @@ import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
+import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
@@ -52,11 +53,16 @@ export interface TooltipDataChunkTreemap<T = MeaningfulAny> {
     data: TreemapSeriesData<T>;
     series: TreemapSeries<T>;
 }
+export interface TooltipDataChunkSankey<T = MeaningfulAny> {
+    data: SankeySeriesData<T>;
+    target?: SankeySeriesData<T>;
+    series: SankeySeries<T>;
+}
 export interface TooltipDataChunkWaterfall<T = MeaningfulAny> {
     data: WaterfallSeriesData<T>;
     series: WaterfallSeries<T>;
 }
-export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
+export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T>) & {
     closest?: boolean;
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {

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

@@ -25,6 +25,7 @@ export * from './chart/tooltip';
 export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';
+export * from './chart/sankey';
 export interface ChartData<T = MeaningfulAny> {
     /**
      * General options for the chart.

package/dist/cjs/types/index.js

@@ -17,3 +17,4 @@ export * from './chart/tooltip';
 export * from './chart/halo';
 export * from './chart/treemap';
 export * from './chart/waterfall';
+export * from './chart/sankey';

package/dist/cjs/utils/chart/get-closest-data.d.ts

@@ -3,6 +3,8 @@ import type { ChartSeries, ChartSeriesData, TooltipDataChunk } from '../../types
 type GetClosestPointsArgs = {
     position: [number, number];
     shapesData: ShapeData[];
+    boundsHeight: number;
+    boundsWidth: number;
 };
 export type ShapePoint = {
     x: number;

package/dist/cjs/utils/chart/get-closest-data.js

@@ -35,7 +35,7 @@ function getSeriesType(shapeData) {
     return get(shapeData, 'series.type') || get(shapeData, 'point.series.type');
 }
 export function getClosestPoints(args) {
-    const { position, shapesData } = args;
+    const { position, shapesData, boundsHeight, boundsWidth } = args;
     const [pointerX, pointerY] = position;
     const result = [];
     const groups = groupBy(shapesData, getSeriesType);
@@ -135,13 +135,13 @@ export function getClosestPoints(args) {
             case 'pie': {
                 const points = list.map((d) => d.segments).flat();
                 const closestPoint = points.find((p) => {
-                    const { center, radius } = p.data.pie;
+                    const { center } = p.data.pie;
                     const x = pointerX - center[0];
                     const y = pointerY - center[1];
                     let angle = Math.atan2(y, x) + 0.5 * Math.PI;
                     angle = angle < 0 ? Math.PI * 2 + angle : angle;
                     const polarRadius = Math.sqrt(x * x + y * y);
-                    return angle >= p.startAngle && angle <= p.endAngle && polarRadius < radius;
+                    return (angle >= p.startAngle && angle <= p.endAngle && polarRadius < p.data.radius);
                 });
                 if (closestPoint) {
                     result.push({
@@ -166,7 +166,43 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'sankey': {
+                const [data] = list;
+                const closestLink = data.links.find((d) => {
+                    var _a;
+                    return isInsidePath({
+                        path: (_a = d.path) !== null && _a !== void 0 ? _a : '',
+                        strokeWidth: d.strokeWidth,
+                        point: [pointerX, pointerY],
+                        width: boundsWidth,
+                        height: boundsHeight,
+                    });
+                });
+                if (closestLink) {
+                    result.push({
+                        data: closestLink.source,
+                        target: closestLink.target,
+                        series: data.series,
+                        closest: true,
+                    });
+                }
+                break;
+            }
         }
     });
     return result;
 }
+function isInsidePath(args) {
+    const { path, point, width, height, strokeWidth } = args;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.lineWidth = strokeWidth;
+        const path2D = new Path2D(path);
+        ctx.stroke(path2D);
+        return ctx.isPointInPath(path2D, ...point) || ctx.isPointInStroke(path2D, ...point);
+    }
+    return null;
+}

package/dist/cjs/utils/chart/index.js

@@ -15,7 +15,7 @@ export * from './legend';
 export * from './symbol';
 export * from './series';
 export * from './color';
-const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
+const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
     'bar-x',
     'area',

package/dist/cjs/utils/chart/series/index.d.ts

@@ -1 +1,2 @@
+export * from './line';
 export * from './waterfall';

package/dist/cjs/utils/chart/series/index.js

@@ -1 +1,2 @@
+export * from './line';
 export * from './waterfall';

package/dist/cjs/utils/chart/series/line.d.ts

@@ -0,0 +1,2 @@
+import type { DashStyle } from 'src/constants';
+export declare function getLineDashArray(dashStyle: DashStyle, strokeWidth?: number): string;

package/dist/cjs/utils/chart/series/line.js

@@ -0,0 +1,17 @@
+export function getLineDashArray(dashStyle, strokeWidth = 2) {
+    const value = dashStyle.toLowerCase();
+    const arrayValue = value
+        .replace('shortdashdotdot', '3,1,1,1,1,1,')
+        .replace('shortdashdot', '3,1,1,1')
+        .replace('shortdot', '1,1,')
+        .replace('shortdash', '3,1,')
+        .replace('longdash', '8,3,')
+        .replace(/dot/g, '1,3,')
+        .replace('dash', '4,3,')
+        .replace(/,$/, '')
+        .split(',')
+        .map((part) => {
+        return `${parseInt(part, 10) * strokeWidth}`;
+    });
+    return arrayValue.join(',').replace(/NaN/g, 'none');
+}

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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 {};