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

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

@@ -18,18 +18,17 @@ export function preparePieData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
     const maxRadius = Math.min(boundsWidth, boundsHeight) / 2;
     const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId);
-    return Array.from(groupedPieSeries).map(([stackId, items]) => {
-        var _a, _b, _c;
+    const prepareItem = (stackId, items) => {
+        var _a;
         const series = items[0];
-        const { center, borderWidth, borderColor, borderRadius, radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
-        const radius = (_a = calculateNumericProperty({ value: seriesRadius, base: maxRadius })) !== null && _a !== void 0 ? _a : maxRadius;
+        const { center, borderWidth, borderColor, borderRadius, innerRadius: seriesInnerRadius, dataLabels, } = series;
         const data = {
             id: stackId,
             center: getCenter(boundsWidth, boundsHeight, center),
-            innerRadius: (_b = calculateNumericProperty({ value: seriesInnerRadius, base: radius })) !== null && _b !== void 0 ? _b : 0,
-            radius,
+            innerRadius: 0,
             segments: [],
             labels: [],
+            htmlLabels: [],
             connectors: [],
             borderColor,
             borderWidth,
@@ -41,9 +40,20 @@ export function preparePieData(args) {
                 opacity: series.states.hover.halo.opacity,
                 size: series.states.hover.halo.size,
             },
-            htmlElements: [],
         };
+        const { maxHeight: labelHeight } = getLabelsSize({
+            labels: ['Some Label'],
+            style: dataLabels.style,
+        });
+        let segmentMaxRadius = 0;
         const segments = items.map((item) => {
+            var _a;
+            let maxSegmentRadius = maxRadius;
+            if (dataLabels.enabled) {
+                maxSegmentRadius -= dataLabels.distance + dataLabels.connectorPadding + labelHeight;
+            }
+            const segmentRadius = (_a = calculateNumericProperty({ value: item.radius, base: maxSegmentRadius })) !== null && _a !== void 0 ? _a : maxSegmentRadius;
+            segmentMaxRadius = Math.max(segmentMaxRadius, segmentRadius);
             return {
                 value: item.value,
                 color: item.color,
@@ -52,135 +62,175 @@ export function preparePieData(args) {
                 hovered: false,
                 active: true,
                 pie: data,
+                radius: segmentRadius,
             };
         });
         data.segments = pieGenerator(segments);
+        data.innerRadius =
+            (_a = calculateNumericProperty({ value: seriesInnerRadius, base: segmentMaxRadius })) !== null && _a !== void 0 ? _a : 0;
+        return data;
+    };
+    const prepareLabels = (prepareLabelsArgs) => {
+        const { data, series } = prepareLabelsArgs;
+        const { dataLabels } = series[0];
+        const labels = [];
+        const htmlLabels = [];
+        const connectors = [];
+        if (!dataLabels.enabled) {
+            return { labels, htmlLabels, connectors };
+        }
         let line = lineGenerator();
         const curveFactory = getCurveFactory(data);
         if (curveFactory) {
             line = line.curve(curveFactory);
         }
-        if (dataLabels.enabled) {
-            const { style, connectorPadding, distance } = dataLabels;
-            const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
-            const minSegmentRadius = maxRadius - connectorPadding - distance - labelHeight;
-            if (data.radius > minSegmentRadius) {
-                data.radius = minSegmentRadius;
-                data.innerRadius =
-                    (_c = calculateNumericProperty({ value: seriesInnerRadius, base: data.radius })) !== null && _c !== void 0 ? _c : 0;
-            }
-            const connectorStartPointGenerator = arc()
-                .innerRadius(data.radius)
-                .outerRadius(data.radius);
-            const connectorMidPointRadius = data.radius + distance / 2;
-            const connectorMidPointGenerator = arc()
-                .innerRadius(connectorMidPointRadius)
-                .outerRadius(connectorMidPointRadius);
-            const connectorArcRadius = data.radius + distance;
-            const connectorEndPointGenerator = arc()
-                .innerRadius(connectorArcRadius)
-                .outerRadius(connectorArcRadius);
-            const labelArcRadius = connectorArcRadius + connectorPadding;
-            const labelArcGenerator = arc()
-                .innerRadius(labelArcRadius)
-                .outerRadius(labelArcRadius);
-            const labels = [];
-            items.forEach((d, index) => {
-                const prevLabel = labels[labels.length - 1];
-                const text = String(d.data.label || d.data.value);
-                const shouldUseHtml = dataLabels.html;
-                const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
-                const labelWidth = labelSize.maxWidth;
-                const relatedSegment = data.segments[index];
-                const getLabelPosition = (angle) => {
-                    let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+        const { style, connectorPadding, distance } = dataLabels;
+        const { maxHeight: labelHeight } = getLabelsSize({ labels: ['Some Label'], style });
+        const connectorStartPointGenerator = arc()
+            .innerRadius((d) => d.data.radius)
+            .outerRadius((d) => d.data.radius);
+        const connectorMidPointGenerator = arc()
+            .innerRadius((d) => d.data.radius + distance / 2)
+            .outerRadius((d) => d.data.radius + distance / 2);
+        const connectorEndPointGenerator = arc()
+            .innerRadius((d) => d.data.radius + distance)
+            .outerRadius((d) => d.data.radius + distance);
+        const labelArcGenerator = arc()
+            .innerRadius((d) => d.data.radius + distance + connectorPadding)
+            .outerRadius((d) => d.data.radius + distance + connectorPadding);
+        series.forEach((d, index) => {
+            const prevLabel = labels[labels.length - 1];
+            const text = String(d.data.label || d.data.value);
+            const shouldUseHtml = dataLabels.html;
+            const labelSize = getLabelsSize({ labels: [text], style, html: shouldUseHtml });
+            const labelWidth = labelSize.maxWidth;
+            const relatedSegment = data.segments[index];
+            const getLabelPosition = (angle) => {
+                let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (shouldUseHtml) {
+                    x = x < 0 ? x - labelWidth : x;
+                    y = y - labelSize.maxHeight;
+                }
+                else {
                     y = y < 0 ? y - labelHeight : y;
-                    if (shouldUseHtml) {
-                        x = x < 0 ? x - labelWidth : x;
-                    }
-                    x = Math.max(-boundsWidth / 2, x);
-                    return [x, y];
-                };
-                const getConnectorPoints = (angle) => {
-                    const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
-                    const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
-                    if (dataLabels.connectorShape === 'straight-line') {
-                        return [connectorStartPoint, connectorEndPoint];
-                    }
-                    const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
-                    return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
-                };
-                const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
-                    (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
-                const [x, y] = getLabelPosition(midAngle);
-                const label = {
-                    text,
-                    x,
-                    y,
-                    style,
-                    size: { width: labelWidth, height: labelHeight },
-                    maxWidth: labelWidth,
-                    textAnchor: midAngle < Math.PI ? 'start' : 'end',
-                    series: { id: d.id },
-                    active: true,
-                    segment: relatedSegment.data,
-                    angle: midAngle,
-                };
-                let overlap = false;
-                if (prevLabel) {
-                    overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
-                    if (overlap) {
-                        let shouldAdjustAngle = true;
-                        const step = Math.PI / 180;
-                        while (shouldAdjustAngle) {
-                            const newAngle = label.angle + step;
-                            if (newAngle > FULL_CIRCLE &&
-                                newAngle % FULL_CIRCLE > labels[0].angle) {
+                }
+                x = Math.max(-boundsWidth / 2, x);
+                return [x, y];
+            };
+            const getConnectorPoints = (angle) => {
+                const connectorStartPoint = connectorStartPointGenerator.centroid(relatedSegment);
+                const connectorEndPoint = connectorEndPointGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
+                if (dataLabels.connectorShape === 'straight-line') {
+                    return [connectorStartPoint, connectorEndPoint];
+                }
+                const connectorMidPoint = connectorMidPointGenerator.centroid(relatedSegment);
+                return [connectorStartPoint, connectorMidPoint, connectorEndPoint];
+            };
+            const midAngle = Math.max((prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.angle) || 0, relatedSegment.startAngle +
+                (relatedSegment.endAngle - relatedSegment.startAngle) / 2);
+            const [x, y] = getLabelPosition(midAngle);
+            const label = {
+                text,
+                x,
+                y,
+                style,
+                size: { width: labelWidth, height: labelHeight },
+                maxWidth: labelWidth,
+                textAnchor: midAngle < Math.PI ? 'start' : 'end',
+                series: { id: d.id },
+                active: true,
+                segment: relatedSegment.data,
+                angle: midAngle,
+            };
+            let overlap = false;
+            if (prevLabel) {
+                overlap = isLabelsOverlapping(prevLabel, label, dataLabels.padding);
+                if (overlap) {
+                    let shouldAdjustAngle = true;
+                    const step = Math.PI / 180;
+                    while (shouldAdjustAngle) {
+                        const newAngle = label.angle + step;
+                        if (newAngle > FULL_CIRCLE && newAngle % FULL_CIRCLE > labels[0].angle) {
+                            shouldAdjustAngle = false;
+                        }
+                        else {
+                            label.angle = newAngle;
+                            const [newX, newY] = getLabelPosition(newAngle);
+                            label.x = newX;
+                            label.y = newY;
+                            if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
                                 shouldAdjustAngle = false;
-                            }
-                            else {
-                                label.angle = newAngle;
-                                const [newX, newY] = getLabelPosition(newAngle);
-                                label.x = newX;
-                                label.y = newY;
-                                if (!isLabelsOverlapping(prevLabel, label, dataLabels.padding)) {
-                                    shouldAdjustAngle = false;
-                                    overlap = false;
-                                }
+                                overlap = false;
                             }
                         }
                     }
                 }
-                if (dataLabels.allowOverlap || !overlap) {
-                    const left = getLeftPosition(label);
-                    if (Math.abs(left) > boundsWidth / 2) {
-                        label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
-                    }
-                    else {
-                        const right = left + label.size.width;
-                        if (right > boundsWidth / 2) {
-                            label.maxWidth = label.size.width - (right - boundsWidth / 2);
-                        }
-                    }
-                    if (shouldUseHtml) {
-                        data.htmlElements.push({
-                            x: boundsWidth / 2 + label.x,
-                            y: boundsHeight / 2 + label.y,
-                            content: label.text,
-                        });
-                    }
-                    else {
-                        labels.push(label);
+            }
+            if (dataLabels.allowOverlap || !overlap) {
+                const left = getLeftPosition(label);
+                if (Math.abs(left) > boundsWidth / 2) {
+                    label.maxWidth = label.size.width - (Math.abs(left) - boundsWidth / 2);
+                }
+                else {
+                    const right = left + label.size.width;
+                    if (right > boundsWidth / 2) {
+                        label.maxWidth = label.size.width - (right - boundsWidth / 2);
                     }
-                    const connector = {
-                        path: line(getConnectorPoints(midAngle)),
-                        color: relatedSegment.data.color,
-                    };
-                    data.connectors.push(connector);
                 }
+                if (shouldUseHtml) {
+                    htmlLabels.push({
+                        x: data.center[0] + label.x,
+                        y: Math.max(0, data.center[1] + label.y),
+                        content: label.text,
+                        size: label.size,
+                    });
+                }
+                else {
+                    labels.push(label);
+                }
+                const connector = {
+                    path: line(getConnectorPoints(midAngle)),
+                    color: relatedSegment.data.color,
+                };
+                connectors.push(connector);
+            }
+        });
+        return {
+            labels,
+            htmlLabels,
+            connectors,
+        };
+    };
+    return Array.from(groupedPieSeries).map(([stackId, items]) => {
+        const data = prepareItem(stackId, items);
+        const preparedLabels = prepareLabels({
+            data,
+            series: items,
+        });
+        const segmentMaxRadius = Math.max(...data.segments.map((s) => s.data.radius));
+        const top = Math.min(data.center[1] - segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1]), ...preparedLabels.htmlLabels.map((l) => l.y));
+        const bottom = Math.max(data.center[1] + segmentMaxRadius, ...preparedLabels.labels.map((l) => l.y + data.center[1] + l.size.height), ...preparedLabels.htmlLabels.map((l) => l.y + l.size.height));
+        const topAdjustment = Math.floor(top - data.halo.size);
+        if (topAdjustment > 0) {
+            data.segments.forEach((s) => {
+                s.data.radius += topAdjustment / 2;
+            });
+            data.center[1] -= topAdjustment / 2;
+        }
+        const bottomAdjustment = Math.floor(boundsHeight - bottom - data.halo.size);
+        if (bottomAdjustment > 0) {
+            data.segments.forEach((s) => {
+                s.data.radius += bottomAdjustment / 2;
             });
-            data.labels = labels;
+            data.center[1] += bottomAdjustment / 2;
         }
+        const { labels, htmlLabels, connectors } = prepareLabels({
+            data,
+            series: items,
+        });
+        data.labels = labels;
+        data.htmlLabels = htmlLabels;
+        data.connectors = connectors;
         return data;
     });
 }

package/dist/cjs/hooks/useShapes/pie/types.d.ts

@@ -9,6 +9,7 @@ export type SegmentData = {
     hovered: boolean;
     active: boolean;
     pie: PreparedPieData;
+    radius: number;
 };
 export type PieLabelData = LabelData & {
     segment: SegmentData;
@@ -25,7 +26,6 @@ export type PreparedPieData = {
     labels: PieLabelData[];
     connectors: PieConnectorData[];
     center: [number, number];
-    radius: number;
     innerRadius: number;
     borderRadius: number;
     borderWidth: number;
@@ -37,5 +37,5 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlElements: HtmlItem[];
+    htmlLabels: HtmlItem[];
 };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedSankeyData } from './types';
+type ShapeProps = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedSankeyData;
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare const SankeySeriesShape: (props: ShapeProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { select } from 'd3';
+import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
+const b = block('sankey');
+export const SankeySeriesShape = (props) => {
+    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const hoveredDataRef = React.useRef(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        // nodes
+        svgElement
+            .append('g')
+            .selectAll()
+            .data(preparedData.nodes)
+            .join('rect')
+            .attr('x', (d) => d.x0)
+            .attr('y', (d) => d.y0)
+            .attr('height', (d) => d.y1 - d.y0)
+            .attr('width', (d) => d.x1 - d.x0)
+            .attr('fill', (d) => d.color);
+        // links
+        svgElement
+            .append('g')
+            .attr('fill', 'none')
+            .selectAll()
+            .data(preparedData.links)
+            .join('g')
+            .append('path')
+            .attr('stroke-opacity', (d) => d.opacity)
+            .attr('d', (d) => d.path)
+            .attr('stroke', (d) => d.color)
+            .attr('stroke-width', (d) => d.strokeWidth);
+        // dataLabels
+        svgElement
+            .append('g')
+            .selectAll()
+            .data(preparedData.labels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('dy', '0.35em')
+            .attr('text-anchor', (d) => d.textAnchor)
+            .attr('fill', (d) => { var _a; return (_a = d.style.fontColor) !== null && _a !== void 0 ? _a : null; });
+        const eventName = `hover-shape.sankey`;
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher.on(eventName, handleShapeHover);
+        return () => {
+            dispatcher.on(eventName, null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+};

package/dist/cjs/hooks/useShapes/sankey/prepare-data.d.ts

@@ -0,0 +1,7 @@
+import type { PreparedSankeySeries } from '../../useSeries/types';
+import type { PreparedSankeyData } from './types';
+export declare function prepareSankeyData(args: {
+    series: PreparedSankeySeries;
+    width: number;
+    height: number;
+}): PreparedSankeyData;

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

@@ -0,0 +1,72 @@
+import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
+export function prepareSankeyData(args) {
+    const { series, width, height } = args;
+    const htmlElements = [];
+    const sankeyGenerator = sankey()
+        .nodeId((d) => d.name)
+        .nodeSort((d) => d.index)
+        .nodeWidth(15)
+        .nodePadding(10)
+        .extent([
+        [1, 5],
+        [width - 1, height - 5],
+    ]);
+    const { nodes, links } = sankeyGenerator({
+        nodes: series.data,
+        links: series.data.reduce((acc, item) => {
+            item.links.forEach((l) => {
+                const target = series.data.find((d) => d.name === l.name);
+                if (target) {
+                    acc.push({
+                        source: item,
+                        target,
+                        value: l.value,
+                    });
+                }
+            });
+            return acc;
+        }, []),
+    });
+    const sankeyNodes = nodes.map((node) => {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+            x0: (_a = node.x0) !== null && _a !== void 0 ? _a : 0,
+            x1: (_b = node.x1) !== null && _b !== void 0 ? _b : 0,
+            y0: (_c = node.y0) !== null && _c !== void 0 ? _c : 0,
+            y1: (_d = node.y1) !== null && _d !== void 0 ? _d : 0,
+            color: (_e = node.color) !== null && _e !== void 0 ? _e : '',
+            data: series.data[(_f = node.index) !== null && _f !== void 0 ? _f : 0],
+        };
+    });
+    const sankeyLinks = links.map((d) => {
+        var _a, _b;
+        return {
+            opacity: 0.75,
+            color: (_a = d.source.color) !== null && _a !== void 0 ? _a : '',
+            path: sankeyLinkHorizontal()(d),
+            strokeWidth: Math.max(1, (_b = d.width) !== null && _b !== void 0 ? _b : 0),
+            source: d.source,
+            target: d.target,
+            value: d.value,
+        };
+    });
+    const dataLabels = [];
+    if (series.dataLabels.enabled) {
+        const labels = nodes.map((d) => {
+            var _a, _b, _c, _d;
+            const x0 = (_a = d.x0) !== null && _a !== void 0 ? _a : 0;
+            const x1 = (_b = d.x1) !== null && _b !== void 0 ? _b : 0;
+            const y0 = (_c = d.y0) !== null && _c !== void 0 ? _c : 0;
+            const y1 = (_d = d.y1) !== null && _d !== void 0 ? _d : 0;
+            return {
+                text: d.name,
+                x: x0 < width / 2 ? x1 + 6 : x0 - 6,
+                y: (y1 + y0) / 2,
+                textAnchor: x0 < width / 2 ? 'start' : 'end',
+                style: series.dataLabels.style,
+            };
+        });
+        dataLabels.push(...labels);
+    }
+    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlElements, labels: dataLabels };
+}

package/dist/cjs/hooks/useShapes/sankey/types.d.ts

@@ -0,0 +1,33 @@
+import type { BaseTextStyle, HtmlItem, SankeySeriesData } from '../../../types';
+import type { PreparedSankeySeries } from '../../useSeries/types';
+export type SankeyDataLabel = {
+    text: string;
+    x: number;
+    y: number;
+    textAnchor: 'start' | 'end';
+    style: BaseTextStyle;
+};
+export type SankeyNode = {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+    color: string;
+    data: SankeySeriesData;
+};
+export type SankeyLink = {
+    opacity: number;
+    color: string;
+    path: string | null;
+    strokeWidth: number;
+    source: SankeySeriesData;
+    target: SankeySeriesData;
+    value: number;
+};
+export type PreparedSankeyData = {
+    series: PreparedSankeySeries;
+    htmlElements: HtmlItem[];
+    nodes: SankeyNode[];
+    links: SankeyLink[];
+    labels: SankeyDataLabel[];
+};

package/dist/cjs/hooks/useShapes/sankey/types.js

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

package/dist/cjs/hooks/useShapes/styles.css

@@ -12,12 +12,12 @@
   alignment-baseline: before-edge;
 }
 
-.gcharts-d3-bar-x__label {
+.gcharts-bar-x__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
 }
 
-.gcharts-d3-bar-y__label {
+.gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
   alignment-baseline: after-edge;

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

@@ -33,6 +33,7 @@ function getLabels(args) {
                     content: text,
                     x,
                     y,
+                    size: { width, height: lineHeight },
                 }
                 : {
                     text,

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

@@ -1,5 +1,4 @@
 import type { BaseType } from 'd3';
-import type { DashStyle } from '../../constants';
 import type { BasicInactiveState } from '../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
@@ -26,4 +25,10 @@ export declare function setActiveState<T extends {
     state: BasicInactiveState | undefined;
     active: boolean;
 }): T;
-export declare function getLineDashArray(dashStyle: DashStyle, strokeWidth?: number): string;
+export declare function getRectPath(args: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius?: number | number[];
+}): import("d3-path").Path;

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

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { path, select } from 'd3';
 import get from 'lodash/get';
 import { getDataCategoryValue } from '../../utils';
 export function getXValue(args) {
@@ -36,20 +36,25 @@ export function setActiveState(args) {
     }
     return datum;
 }
-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');
+export function getRectPath(args) {
+    const { x, y, width, height, borderRadius = 0 } = args;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const p = path();
+    let startAngle = -Math.PI / 2;
+    const angle = Math.PI / 2;
+    p.moveTo(x + borderRadiusTopLeft, y);
+    p.lineTo(x + width - borderRadiusTopRight, y);
+    p.arc(x + width - borderRadiusTopRight, y + borderRadiusTopRight, borderRadiusTopRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + width, y + height - borderRadiusBottomRight);
+    p.arc(x + width - borderRadiusBottomRight, y + height - borderRadiusBottomRight, borderRadiusBottomRight, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x + borderRadiusBottomLeft, y + height);
+    p.arc(x + borderRadiusBottomLeft, y + height - borderRadiusBottomLeft, borderRadiusBottomLeft, startAngle, startAngle + angle);
+    startAngle += angle;
+    p.lineTo(x, y + borderRadiusTopLeft);
+    p.arc(x + borderRadiusTopLeft, y + borderRadiusTopLeft, borderRadiusTopLeft, startAngle, startAngle + angle);
+    p.closePath();
+    return p;
 }