@gravity-ui/charts 1.45.0 → 1.46.1

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

@@ -1,12 +1,7 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { line } from 'd3-shape';
-import get from 'lodash/get';
+import { renderRadar } from '../../../core/shapes/radar/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
-import { setActiveState } from '../utils';
 const b = block('radar');
 export function RadarSeriesShapes(args) {
     const { dispatcher, series: preparedData, seriesOptions, htmlLayout } = args;
@@ -15,121 +10,7 @@ export function RadarSeriesShapes(args) {
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const areaSelector = `.${b('area')}`;
-        const radarSelection = svgElement
-            .selectAll('radar')
-            .data(preparedData)
-            .join('g')
-            .attr('id', (radarData) => radarData.id)
-            .attr('class', b('item'))
-            .attr('cursor', (radarData) => radarData.cursor);
-        // render axes
-        radarSelection
-            .selectAll(`.${b('axis')}`)
-            .data((radarData) => radarData.axes)
-            .join('line')
-            .attr('class', b('axis'))
-            .attr('x1', (d) => d.radar.center[0])
-            .attr('y1', (d) => d.radar.center[1])
-            .attr('x2', (d) => d.point[0])
-            .attr('y2', (d) => d.point[1])
-            .attr('stroke', (d) => d.strokeColor)
-            .attr('stroke-width', (d) => d.strokeWidth);
-        // render grid lines
-        radarSelection
-            .selectAll(`.${b('grid')}`)
-            .data((radarData) => radarData.grid)
-            .join('path')
-            .attr('class', b('grid'))
-            .attr('d', (d) => `${line()(d.path)} Z`)
-            .attr('fill', 'none')
-            .attr('stroke', (d) => d.strokeColor)
-            .attr('stroke-width', (d) => d.strokeWidth);
-        // render radar area
-        const shapesSelection = radarSelection
-            .selectAll(areaSelector)
-            .data((radarData) => radarData.shapes)
-            .join('g')
-            .attr('class', b('area'));
-        shapesSelection
-            .append('path')
-            .attr('d', (d) => d.path)
-            .attr('fill', (d) => d.color)
-            .attr('fill-opacity', (d) => d.fillOpacity)
-            .attr('stroke', (d) => d.borderColor)
-            .attr('stroke-width', (d) => d.borderWidth);
-        // render markers
-        const markerSelection = shapesSelection
-            .selectAll('marker')
-            .data((radarData) => radarData.points)
-            .join('g')
-            .call(renderMarker);
-        // Render labels
-        radarSelection
-            .selectAll('text')
-            .data((radarData) => radarData.labels)
-            .join('text')
-            .html((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('text-anchor', (d) => d.textAnchor)
-            .style('font-size', (d) => d.style.fontSize)
-            .style('font-weight', (d) => d.style.fontWeight || null)
-            .style('fill', (d) => d.style.fontColor || null);
-        // Handle hover events
-        const eventName = `hover-shape.radar`;
-        const hoverOptions = get(seriesOptions, 'radar.states.hover');
-        const inactiveOptions = get(seriesOptions, 'radar.states.inactive');
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
-            const closest = data === null || data === void 0 ? void 0 : data.find((d) => d.closest);
-            const selectedSeries = closest === null || closest === void 0 ? void 0 : closest.series;
-            const selectedSeriesData = closest === null || closest === void 0 ? void 0 : closest.data;
-            const selectedSeriesId = selectedSeries === null || selectedSeries === void 0 ? void 0 : selectedSeries.id;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            shapesSelection.datum((d, i, elements) => {
-                var _a;
-                const hovered = Boolean(hoverEnabled && ((_a = d.series) === null || _a === void 0 ? void 0 : _a.id) === selectedSeriesId);
-                if (d.hovered !== hovered) {
-                    d.hovered = hovered;
-                    select(elements[i]).attr('fill', () => {
-                        var _a;
-                        const initialColor = d.color;
-                        if (d.hovered) {
-                            return (((_a = color(initialColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
-                        }
-                        return initialColor;
-                    });
-                    if (hovered) {
-                        select(elements[i]).raise();
-                    }
-                }
-                setActiveState({
-                    element: elements[i],
-                    state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
-                    datum: d,
-                });
-                markerSelection.datum((markerData, index, markers) => {
-                    const hoveredState = Boolean(hoverEnabled && markerData.data === selectedSeriesData);
-                    if (markerData.hovered !== hoveredState) {
-                        markerData.hovered = hoveredState;
-                        const elementSelection = select(markers[index]);
-                        elementSelection.attr('visibility', getMarkerVisibility(markerData));
-                        selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
-                        selectMarkerSymbol(elementSelection).call(setMarker, hoveredState ? 'hover' : 'normal');
-                    }
-                    return markerData;
-                });
-                return d;
-            });
-        });
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
-        };
+        return renderRadar({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();
     return (React.createElement(React.Fragment, null,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedSankeyData } from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedSankeyData } from '../../../core/shapes/sankey/types';
 type ShapeProps = {
     htmlLayout: HTMLElement | null;
     preparedData: PreparedSankeyData;

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

@@ -1,65 +1,16 @@
 import React from 'react';
-import { select } from 'd3-selection';
+import { renderSankey } from '../../../core/shapes/sankey/renderer';
 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')
-            .html((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 === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
-        };
+        return renderSankey({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedScatterData } from './types';
-export { prepareScatterData } from './prepare-data';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedScatterData } from '../../../core/shapes/scatter/types';
+export { prepareScatterData } from '../../../core/shapes/scatter/prepare-data';
 type ScatterSeriesShapeProps = {
     htmlLayout: HTMLElement | null;
     preparedData: PreparedScatterData[];

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

@@ -1,72 +1,17 @@
 import React from 'react';
-import { select } from 'd3-selection';
-import get from 'lodash/get';
+import { renderScatter } from '../../../core/shapes/scatter/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
-import { setActiveState, shapeKey } from '../utils';
-export { prepareScatterData } from './prepare-data';
+export { prepareScatterData } from '../../../core/shapes/scatter/prepare-data';
 const b = block('scatter');
 export function ScatterSeriesShape(props) {
     const { clipPathId, 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);
-        const hoverOptions = get(seriesOptions, 'scatter.states.hover');
-        const inactiveOptions = get(seriesOptions, 'scatter.states.inactive');
-        svgElement.selectAll('*').remove();
-        const selection = svgElement
-            .selectAll('path')
-            .data(preparedData, shapeKey)
-            .join('g')
-            .call(renderMarker)
-            .attr('opacity', (d) => d.point.opacity)
-            .attr('cursor', (d) => d.point.series.cursor);
-        const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-        const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-        function handleShapeHover(data) {
-            var _a;
-            hoveredDataRef.current = data;
-            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'scatter');
-            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
-            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
-            selection.datum((d, index, list) => {
-                const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
-                if (d.hovered !== hovered) {
-                    d.hovered = hovered;
-                    elementSelection.attr('z-index', hovered ? 999 : null);
-                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
-                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
-                }
-                if (hovered) {
-                    elementSelection.raise();
-                }
-                if (d.point.series.marker.states.normal.enabled) {
-                    const isActive = Boolean(!inactiveEnabled ||
-                        !selectedSeriesId ||
-                        selectedSeriesId === d.point.series.id);
-                    setActiveState({
-                        element: list[index],
-                        state: inactiveOptions,
-                        active: isActive,
-                        datum: d,
-                    });
-                }
-                return d;
-            });
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', null);
-        };
+        return renderScatter({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: clipPathId ? `url(#${clipPathId})` : undefined }),

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedTreemapData } from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedTreemapData } from '../../../core/shapes/treemap/types';
 type ShapeProps = {
     htmlLayout: HTMLElement | null;
     preparedData: PreparedTreemapData;

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

@@ -1,102 +1,16 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import get from 'lodash/get';
+import { renderTreemap } from '../../../core/shapes/treemap/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 const b = block('treemap');
 export const TreemapSeriesShape = (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();
-        const { labelData, leaves, series } = preparedData;
-        const leaf = svgElement
-            .selectAll('g')
-            .data(leaves)
-            .join('g')
-            .attr('transform', (d) => `translate(${d.x0},${d.y0})`)
-            .attr('cursor', series.cursor);
-        const rectSelection = leaf
-            .append('rect')
-            .attr('id', (d) => d.id || d.name)
-            .attr('fill', (d) => {
-            var _a;
-            if (d.data.color) {
-                return d.data.color;
-            }
-            const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === d.depth);
-            return (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || series.color;
-        })
-            .attr('width', (d) => d.x1 - d.x0)
-            .attr('height', (d) => d.y1 - d.y0);
-        const labelSelection = svgElement
-            .selectAll('tspan')
-            .data(labelData)
-            .join('text')
-            .html((d) => d.text)
-            .attr('class', b('label'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .style('font-size', () => series.dataLabels.style.fontSize)
-            .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
-            .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; });
-        const eventName = `hover-shape.treemap`;
-        const hoverOptions = get(seriesOptions, 'treemap.states.hover');
-        const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
-        function handleShapeHover(data) {
-            var _a;
-            hoveredDataRef.current = data;
-            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
-            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
-            const hoveredData = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.data;
-            rectSelection.datum((d, index, list) => {
-                const currentRect = select(list[index]);
-                const hovered = Boolean(hoverEnabled && hoveredData === d.data);
-                const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
-                currentRect
-                    .attr('fill', (currentD) => {
-                    var _a, _b;
-                    const levelOptions = (_a = series.levels) === null || _a === void 0 ? void 0 : _a.find((l) => l.index === currentD.depth);
-                    const initialColor = (levelOptions === null || levelOptions === void 0 ? void 0 : levelOptions.color) || d.data.color || series.color;
-                    if (hovered) {
-                        return (((_b = color(initialColor)) === null || _b === void 0 ? void 0 : _b.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) || initialColor);
-                    }
-                    return initialColor;
-                })
-                    .attr('opacity', () => {
-                    if (inactive) {
-                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                    }
-                    return null;
-                });
-                return d;
-            });
-            labelSelection.datum((d, index, list) => {
-                const currentLabel = select(list[index]);
-                const hovered = Boolean(hoverEnabled && hoveredData === d.nodeData);
-                const inactive = Boolean(inactiveEnabled && hoveredData && !hovered);
-                currentLabel.attr('opacity', () => {
-                    if (inactive) {
-                        return (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                    }
-                    return null;
-                });
-                return d;
-            });
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
-        };
+        return renderTreemap({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),

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

@@ -1,56 +1,6 @@
-import type { BaseType } from 'd3-selection';
-import type { ChartScale } from '../../core/scales/types';
-import type { BasicInactiveState } from '../../types';
-import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
+import type { PreparedYAxis } from '../useAxis/types';
 import type { ZoomState } from '../useZoom/types';
-export declare function getXValue(args: {
-    point: {
-        x?: number | string | null;
-    };
-    points?: {
-        x?: number | string | null;
-    }[];
-    xAxis: PreparedXAxis;
-    xScale: ChartScale;
-}): number | null;
-export declare function getYValue(args: {
-    point: {
-        y?: number | string | null;
-    };
-    points?: {
-        y?: number | string | null;
-    }[];
-    yAxis: PreparedYAxis;
-    yScale: ChartScale;
-}): number | null;
-export declare function shapeKey(d: unknown): string | -1;
-export declare function setActiveState<T extends {
-    active?: boolean;
-}>(args: {
-    element: BaseType;
-    datum: T;
-    state: BasicInactiveState | undefined;
-    active: boolean;
-}): T;
-export declare function getRectPath(args: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    borderRadius?: number | number[];
-}): import("d3-path").Path;
-export declare function getRectBorderPath(args: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    borderWidth: number;
-    borderRadius?: number | number[];
-}): string;
-export declare function getClipPathIdByBounds(args: {
-    clipPathId: string;
-    bounds?: 'horizontal';
-}): string;
+export * from '../../core/shapes/utils';
 export declare function getSeriesClipPathId(args: {
     clipPathId: string;
     yAxis: PreparedYAxis[];

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

@@ -1,141 +1,4 @@
-import { path } from 'd3-path';
-import { select } from 'd3-selection';
-import get from 'lodash/get';
-import { getDataCategoryValue } from '../../core/utils';
-const ONE_POINT_DOMAIN_DATA_CAPACITY = 3;
-export function getXValue(args) {
-    const { point, points, xAxis, xScale } = args;
-    if (xAxis.type === 'category') {
-        const xBandScale = xScale;
-        const categories = get(xAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'x', categories, data: point });
-        return (xBandScale(dataCategory) || 0) + xBandScale.step() / 2;
-    }
-    let xLinearScale = xScale;
-    const [xMinDomain, xMaxDomain] = xLinearScale.domain();
-    if (Number(xMinDomain) === Number(xMaxDomain) &&
-        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
-        const x1 = Number(points[0].x);
-        const xTarget = Number(points[1].x);
-        const x3 = Number(points[2].x);
-        if (!Number.isNaN(x1) && !Number.isNaN(xTarget) && !Number.isNaN(x3)) {
-            const xMin = Math.min(x1, xTarget, x3);
-            const xMax = Math.max(x1, xTarget, x3);
-            xLinearScale = xLinearScale
-                .copy()
-                .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
-        }
-    }
-    return point.x === null ? null : xLinearScale(point.x);
-}
-export function getYValue(args) {
-    const { point, points, yAxis, yScale } = args;
-    if (yAxis.type === 'category') {
-        const yBandScale = yScale;
-        const categories = get(yAxis, 'categories', []);
-        const dataCategory = getDataCategoryValue({ axisDirection: 'y', categories, data: point });
-        return (yBandScale(dataCategory) || 0) + yBandScale.step() / 2;
-    }
-    let yLinearScale = yScale;
-    const [yMinDomain, yMaxDomain] = yLinearScale.domain();
-    if (Number(yMinDomain) === Number(yMaxDomain) &&
-        (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
-        const y1 = Number(points[0].y);
-        const yTarget = Number(points[1].y);
-        const y2 = Number(points[2].y);
-        if (!Number.isNaN(y1) && !Number.isNaN(yTarget) && !Number.isNaN(y2)) {
-            const yMin = Math.min(y1, yTarget, y2);
-            const yMax = Math.max(y1, yTarget, y2);
-            yLinearScale = yLinearScale
-                .copy()
-                .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
-        }
-    }
-    return point.y === null ? null : yLinearScale(point.y);
-}
-export function shapeKey(d) {
-    return d.id || -1;
-}
-export function setActiveState(args) {
-    const { element, datum, state, active } = args;
-    const elementSelection = select(element);
-    if (datum.active !== active) {
-        datum.active = active;
-        const opacity = datum.active ? null : state === null || state === void 0 ? void 0 : state.opacity;
-        elementSelection.attr('opacity', opacity || null);
-    }
-    return datum;
-}
-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;
-}
-export function getRectBorderPath(args) {
-    const { x, y, width, height, borderWidth, borderRadius = 0 } = args;
-    if (!borderWidth) {
-        return '';
-    }
-    const halfWidth = borderWidth / 2;
-    const expandedWidth = width + borderWidth;
-    const expandedHeight = height + borderWidth;
-    const innerWidth = width - borderWidth;
-    const innerHeight = height - borderWidth;
-    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 adjustOuterRadius = (radius) => (radius ? radius + halfWidth : 0);
-    const outerBorderRadius = [
-        adjustOuterRadius(borderRadiusTopLeft),
-        adjustOuterRadius(borderRadiusTopRight),
-        adjustOuterRadius(borderRadiusBottomRight),
-        adjustOuterRadius(borderRadiusBottomLeft),
-    ];
-    const outerPath = getRectPath({
-        x: x - halfWidth,
-        y: y - halfWidth,
-        width: expandedWidth,
-        height: expandedHeight,
-        borderRadius: outerBorderRadius,
-    }).toString();
-    if (innerWidth <= 0 || innerHeight <= 0) {
-        return outerPath;
-    }
-    const innerBorderRadius = [
-        Math.max(borderRadiusTopLeft - halfWidth, 0),
-        Math.max(borderRadiusTopRight - halfWidth, 0),
-        Math.max(borderRadiusBottomRight - halfWidth, 0),
-        Math.max(borderRadiusBottomLeft - halfWidth, 0),
-    ];
-    const innerPath = getRectPath({
-        x: x + halfWidth,
-        y: y + halfWidth,
-        width: innerWidth,
-        height: innerHeight,
-        borderRadius: innerBorderRadius,
-    }).toString();
-    return `${outerPath} ${innerPath}`;
-}
-export function getClipPathIdByBounds(args) {
-    const { bounds, clipPathId } = args;
-    return bounds ? `${clipPathId}-${bounds}` : clipPathId;
-}
+export * from '../../core/shapes/utils';
 export function getSeriesClipPathId(args) {
     const { clipPathId, yAxis, zoomState } = args;
     const hasMinOrMax = yAxis.some((axis) => {
@@ -143,7 +6,7 @@ export function getSeriesClipPathId(args) {
     });
     const hasZoom = zoomState && Object.keys(zoomState).length > 0;
     if (!hasZoom && !hasMinOrMax) {
-        return getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' });
+        return `${clipPathId}-horizontal`;
     }
-    return getClipPathIdByBounds({ clipPathId });
+    return clipPathId;
 }

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { PreparedSeriesOptions } from '../../useSeries/types';
-import type { PreparedWaterfallData } from './types';
-export { prepareWaterfallData } from './prepare-data';
-export * from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedWaterfallData } from '../../../core/shapes/waterfall/types';
+export { prepareWaterfallData } from '../../../core/shapes/waterfall/prepare-data';
+export * from '../../../core/shapes/waterfall/types';
 type Args = {
     clipPathId: string;
     htmlLayout: HTMLElement | null;