@gravity-ui/charts 1.23.0 → 1.24.1

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -3,7 +3,6 @@ import get from 'lodash/get';
 import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
-const DEFAULT_LABEL_PADDING = 7;
 export async function prepareBarYData(args) {
     var _a;
     const { boundsHeight, boundsWidth, series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
@@ -145,7 +144,7 @@ export async function prepareBarYData(args) {
                 });
                 const x = dataLabels.inside
                     ? prepared.x + prepared.width / 2 - width / 2
-                    : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
+                    : prepared.x + prepared.width + dataLabels.padding;
                 const constrainedPosition = getHtmlLabelConstraintedPosition({
                     boundsHeight,
                     boundsWidth,
@@ -170,7 +169,7 @@ export async function prepareBarYData(args) {
                 const { width, height } = await getTextSize(content);
                 const x = dataLabels.inside
                     ? prepared.x + prepared.width / 2 - width / 2
-                    : prepared.x + prepared.width + DEFAULT_LABEL_PADDING;
+                    : prepared.x + prepared.width + dataLabels.padding;
                 const constrainedPosition = getSvgLabelConstraintedPosition({
                     boundsHeight,
                     boundsWidth,

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedFunnelData } from './types';
+export { prepareFunnelData } from './prepare-data';
+export * from './types';
+type Args = {
+    dispatcher?: Dispatch<object>;
+    preparedData: PreparedFunnelData;
+    seriesOptions: PreparedSeriesOptions;
+    htmlLayout: HTMLElement | null;
+};
+export declare const FunnelSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { color, select } from 'd3';
+import { block, getLineDashArray } from '../../../utils';
+export { prepareFunnelData } from './prepare-data';
+export * from './types';
+const b = block('funnel');
+export const FunnelSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions } = args;
+    const hoveredDataRef = React.useRef(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a, _b;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = (_b = (_a = seriesOptions.funnel) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.hover;
+        svgElement.selectAll('*').remove();
+        // funnel levels
+        const cellsSelection = svgElement
+            .selectAll('rect')
+            .data(preparedData.items)
+            .join('rect')
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('height', (d) => d.height)
+            .attr('width', (d) => d.width)
+            .attr('fill', (d) => d.color)
+            .attr('stroke', (d) => d.borderColor)
+            .attr('stroke-width', (d) => d.borderWidth);
+        // connectors
+        const connectorAreaClassName = b('connector-area');
+        svgElement
+            .selectAll(`.${connectorAreaClassName}`)
+            .data(preparedData.connectors)
+            .join('path')
+            .attr('d', (d) => d.areaPath.toString())
+            .attr('class', connectorAreaClassName)
+            .attr('fill', (d) => d.areaColor)
+            .attr('opacity', (d) => d.areaOpacity);
+        const connectorLineClassName = b('connector-line');
+        const connectorLines = svgElement
+            .selectAll(`.${connectorLineClassName}`)
+            .data(preparedData.connectors)
+            .join('g')
+            .attr('class', connectorLineClassName)
+            .attr('stroke', (d) => d.lineColor)
+            .attr('stroke-width', (d) => d.lineWidth)
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
+            .attr('fill', 'none')
+            .attr('opacity', (d) => d.lineOpacity);
+        connectorLines.append('path').attr('d', (d) => d.linePath[0].toString());
+        connectorLines.append('path').attr('d', (d) => d.linePath[1].toString());
+        // dataLabels
+        svgElement
+            .selectAll('text')
+            .data(preparedData.svgLabels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
+        function handleShapeHover(data) {
+            hoveredDataRef.current = data;
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            if (hoverEnabled) {
+                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
+                    acc.add(d.data);
+                    return acc;
+                }, new Set());
+                cellsSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = d.color;
+                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data)) {
+                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
+                            fillColor);
+                    }
+                    return fillColor;
+                });
+            }
+        }
+        if (hoveredDataRef.current !== null) {
+            handleShapeHover(hoveredDataRef.current);
+        }
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.funnel', handleShapeHover);
+        return () => {
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.funnel', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b() })));
+};

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

@@ -0,0 +1,9 @@
+import type { PreparedFunnelSeries } from '../../useSeries/types';
+import type { PreparedFunnelData } from './types';
+type Args = {
+    series: PreparedFunnelSeries[];
+    boundsWidth: number;
+    boundsHeight: number;
+};
+export declare function prepareFunnelData(args: Args): Promise<PreparedFunnelData>;
+export {};

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

@@ -0,0 +1,120 @@
+import { path } from 'd3';
+import { calculateNumericProperty, getFormattedValue, getTextSizeFn } from '../../../utils';
+function getLineConnectorPaths(args) {
+    const { points } = args;
+    const leftPath = path();
+    leftPath.moveTo(...points[0]);
+    leftPath.lineTo(...points[3]);
+    const rightPath = path();
+    rightPath.moveTo(...points[1]);
+    rightPath.lineTo(...points[2]);
+    return [leftPath, rightPath];
+}
+function getAreaConnectorPath(args) {
+    const { points } = args;
+    const p = path();
+    p.moveTo(...points[points.length - 1]);
+    points.forEach((point) => p.lineTo(...point));
+    p.closePath();
+    return p;
+}
+export async function prepareFunnelData(args) {
+    var _a, _b, _c, _d;
+    const { series, boundsWidth, boundsHeight } = args;
+    const items = [];
+    const svgLabels = [];
+    const connectors = [];
+    const maxValue = Math.max(...series.map((s) => s.data.value));
+    const itemBandSpace = boundsHeight / series.length;
+    const connectorHeight = (_b = calculateNumericProperty({
+        value: (_a = series[0].connectors) === null || _a === void 0 ? void 0 : _a.height,
+        base: itemBandSpace,
+    })) !== null && _b !== void 0 ? _b : 0;
+    const itemHeight = (boundsHeight - connectorHeight * (series.length - 1)) / series.length;
+    const getTextSize = getTextSizeFn({ style: series[0].dataLabels.style });
+    const getSegmentY = (index) => {
+        return index * (itemHeight + connectorHeight);
+    };
+    let segmentLeftOffset = 0;
+    let segmentRightOffset = 0;
+    for (let index = 0; index < series.length; index++) {
+        const s = series[index];
+        if (s.dataLabels.enabled) {
+            const d = s.data;
+            const labelContent = (_c = d.label) !== null && _c !== void 0 ? _c : getFormattedValue({ value: d.value, format: s.dataLabels.format });
+            const labelSize = await getTextSize(labelContent);
+            let x;
+            switch (s.dataLabels.align) {
+                case 'left': {
+                    x = 0;
+                    segmentLeftOffset = Math.max(segmentLeftOffset, labelSize.width);
+                    break;
+                }
+                case 'right': {
+                    x = boundsWidth - labelSize.width;
+                    segmentRightOffset = Math.max(segmentRightOffset, labelSize.width);
+                    break;
+                }
+                case 'center': {
+                    x = boundsWidth / 2 - labelSize.width / 2;
+                    break;
+                }
+            }
+            svgLabels.push({
+                x,
+                y: getSegmentY(index) + itemHeight / 2 - labelSize.height / 2,
+                text: labelContent,
+                style: s.dataLabels.style,
+                size: labelSize,
+                textAnchor: 'start',
+                series: s,
+            });
+        }
+    }
+    const segmentMaxWidth = boundsWidth - segmentLeftOffset - segmentRightOffset;
+    for (let index = 0; index < series.length; index++) {
+        const s = series[index];
+        const d = s.data;
+        const itemWidth = (segmentMaxWidth * d.value) / maxValue;
+        const funnelSegment = {
+            x: segmentLeftOffset + segmentMaxWidth / 2 - itemWidth / 2,
+            y: getSegmentY(index),
+            width: itemWidth,
+            height: itemHeight,
+            color: s.color,
+            series: s,
+            data: d,
+            borderColor: '',
+            borderWidth: 0,
+            cursor: s.cursor,
+        };
+        items.push(funnelSegment);
+        const prevSeries = series[index - 1];
+        const prevItem = items[index - 1];
+        if (prevSeries && prevItem && ((_d = prevSeries.connectors) === null || _d === void 0 ? void 0 : _d.enabled)) {
+            const connectorPoints = [
+                [prevItem.x, prevItem.y + prevItem.height],
+                [prevItem.x + prevItem.width, prevItem.y + prevItem.height],
+                [funnelSegment.x + funnelSegment.width, funnelSegment.y],
+                [funnelSegment.x, funnelSegment.y],
+            ];
+            connectors.push({
+                linePath: getLineConnectorPaths({ points: connectorPoints }),
+                areaPath: getAreaConnectorPath({ points: connectorPoints }),
+                lineWidth: prevSeries.connectors.lineWidth,
+                lineColor: prevSeries.connectors.lineColor,
+                lineOpacity: prevSeries.connectors.lineOpacity,
+                areaColor: prevSeries.connectors.areaColor,
+                areaOpacity: prevSeries.connectors.areaOpacity,
+                dashStyle: prevSeries.connectors.lineDashStyle,
+            });
+        }
+    }
+    const data = {
+        type: 'funnel',
+        items,
+        svgLabels,
+        connectors,
+    };
+    return data;
+}

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

@@ -0,0 +1,32 @@
+import type { Path } from 'd3';
+import type { DashStyle } from 'src/constants';
+import type { FunnelSeriesData, LabelData } from '../../../types';
+import type { PreparedFunnelSeries } from '../../useSeries/types';
+export type FunnelItemData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    series: PreparedFunnelSeries;
+    data: FunnelSeriesData;
+    borderColor: string;
+    borderWidth: number;
+    cursor: string | null;
+};
+export type FunnelConnectorData = {
+    linePath: Path[];
+    areaPath: Path;
+    lineWidth: number;
+    lineColor: string;
+    lineOpacity: number;
+    areaColor: string;
+    areaOpacity: number;
+    dashStyle: DashStyle;
+};
+export type PreparedFunnelData = {
+    type: 'funnel';
+    items: FunnelItemData[];
+    connectors: FunnelConnectorData[];
+    svgLabels: LabelData[];
+};

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

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

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

@@ -5,9 +5,9 @@ import type { PreparedHeatmapData } from './types';
 export { prepareHeatmapData } from './prepare-data';
 export * from './types';
 type Args = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedHeatmapData;
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare const HeatmapSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -63,9 +63,9 @@ export const HeatmapSeriesShapes = (args) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.heatmap', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.heatmap', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.heatmap', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.heatmap', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

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

@@ -1,11 +1,11 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../../hooks/useAxis/types';
 import type { ChartScale } from '../../../hooks/useAxisScales';
-import type { PreparedAxis } from '../../../hooks/useChartOptions/types';
 import type { PreparedHeatmapSeries } from '../../useSeries/types';
 import type { PreparedHeatmapData } from './types';
 type PrepareHeatmapDataArgs = {
     series: PreparedHeatmapSeries;
-    xAxis: PreparedAxis;
-    yAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
+    yAxis: PreparedYAxis;
     xScale: ChartScale;
     yScale: ChartScale;
 };

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedSeries, PreparedSeriesOptions, PreparedSplit } from '../';
+import type { SeriesType } from '../../constants';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
+import type { PreparedSplit } from '../useSplit/types';
 import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
 import type { PreparedBarYData } from './bar-y/types';
+import type { PreparedFunnelData } from './funnel';
 import type { PreparedHeatmapData } from './heatmap';
 import type { PreparedLineData } from './line/types';
 import type { PreparedPieData } from './pie/types';
@@ -16,21 +19,23 @@ export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData;
+export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
-    dispatcher: Dispatch<object>;
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
     series: PreparedSeries[];
     seriesOptions: PreparedSeriesOptions;
-    xAxis: PreparedAxis | null;
-    yAxis: PreparedAxis[];
+    split: PreparedSplit;
+    xAxis: PreparedXAxis | null;
+    yAxis: PreparedYAxis[];
+    clipPathBySeriesType?: ClipPathBySeriesType;
+    dispatcher?: Dispatch<object>;
+    isOutsideBounds?: (x: number, y: number) => boolean;
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
-    split: PreparedSplit;
-    htmlLayout: HTMLElement | null;
-    clipPathId: string;
-    isOutsideBounds: (x: number, y: number) => boolean;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { group } from 'd3';
+import { SERIES_TYPE } from '../../constants';
 import { ChartError } from '../../libs';
 import { getOnlyVisibleSeries } from '../../utils';
 import { AreaSeriesShapes } from './area';
 import { prepareAreaData } from './area/prepare-data';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
 import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { FunnelSeriesShapes, prepareFunnelData } from './funnel';
 import { HeatmapSeriesShapes, prepareHeatmapData } from './heatmap';
 import { LineSeriesShapes } from './line';
 import { prepareLineData } from './line/prepare-data';
@@ -20,8 +22,15 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
+function IS_OUTSIDE_BOUNDS() {
+    return false;
+}
+function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
+    var _a;
+    return (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[seriesType]) !== null && _a !== void 0 ? _a : true;
+}
 export const useShapes = (args) => {
-    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, split, htmlLayout, clipPathId, isOutsideBounds, } = args;
+    const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, } = args;
     const [shapesElemens, setShapesElements] = React.useState([]);
     const [shapesElemensData, setShapesElemensData] = React.useState([]);
     const countedRef = React.useRef(0);
@@ -38,7 +47,7 @@ export const useShapes = (args) => {
             Array.from(groupedSeries).map(async (item) => {
                 const [seriesType, chartSeries] = item;
                 switch (seriesType) {
-                    case 'bar-x': {
+                    case SERIES_TYPE.BarX: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareBarXData({
                                 series: chartSeries,
@@ -48,13 +57,14 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                                 boundsHeight,
+                                split,
                             });
-                            shapes.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'bar-y': {
+                    case SERIES_TYPE.BarY: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareBarYData({
                                 boundsHeight,
@@ -66,12 +76,12 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(BarYSeriesShapes, { key: "bar-y", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData.shapes);
                         }
                         break;
                     }
-                    case 'waterfall': {
+                    case SERIES_TYPE.Waterfall: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareWaterfallData({
                                 series: chartSeries,
@@ -81,12 +91,12 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                             });
-                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'line': {
+                    case SERIES_TYPE.Line: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareLineData({
                                 series: chartSeries,
@@ -97,12 +107,12 @@ export const useShapes = (args) => {
                                 split,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(LineSeriesShapes, { key: "line", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'area': {
+                    case SERIES_TYPE.Area: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareAreaData({
                                 series: chartSeries,
@@ -111,14 +121,15 @@ export const useShapes = (args) => {
                                 yAxis,
                                 yScale,
                                 boundsHeight,
+                                split,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                            shapes.push(React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'scatter': {
+                    case SERIES_TYPE.Scatter: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = prepareScatterData({
                                 series: chartSeries,
@@ -128,22 +139,24 @@ export const useShapes = (args) => {
                                 yScale,
                                 isOutsideBounds,
                             });
-                            shapes.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapes.push(React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
+                                    ? clipPathId
+                                    : undefined, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                             shapesData.push(...preparedData);
                         }
                         break;
                     }
-                    case 'pie': {
+                    case SERIES_TYPE.Pie: {
                         const preparedData = await preparePieData({
                             series: chartSeries,
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                         break;
                     }
-                    case 'treemap': {
+                    case SERIES_TYPE.Treemap: {
                         const preparedData = await prepareTreemapData({
                             // We should have exactly one series with "treemap" type
                             // Otherwise data validation should emit an error
@@ -151,31 +164,31 @@ export const useShapes = (args) => {
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(preparedData);
                         break;
                     }
-                    case 'sankey': {
+                    case SERIES_TYPE.Sankey: {
                         const preparedData = prepareSankeyData({
                             series: chartSeries[0],
                             width: boundsWidth,
                             height: boundsHeight,
                         });
-                        shapes.push(React.createElement(SankeySeriesShape, { key: "sankey", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(preparedData);
                         break;
                     }
-                    case 'radar': {
+                    case SERIES_TYPE.Radar: {
                         const preparedData = await prepareRadarData({
                             series: chartSeries,
                             boundsWidth,
                             boundsHeight,
                         });
-                        shapes.push(React.createElement(RadarSeriesShapes, { key: "radar", dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapes.push(React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                         shapesData.push(...preparedData);
                         break;
                     }
-                    case 'heatmap': {
+                    case SERIES_TYPE.Heatmap: {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale[0])) {
                             const preparedData = await prepareHeatmapData({
                                 series: chartSeries[0],
@@ -184,11 +197,21 @@ export const useShapes = (args) => {
                                 yAxis: yAxis[0],
                                 yScale: yScale[0],
                             });
-                            shapes.push(React.createElement(HeatmapSeriesShapes, { key: "heatmap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                            shapes.push(React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
                             shapesData.push(preparedData);
                         }
                         break;
                     }
+                    case 'funnel': {
+                        const preparedData = await prepareFunnelData({
+                            series: chartSeries,
+                            boundsWidth,
+                            boundsHeight,
+                        });
+                        shapes.push(React.createElement(FunnelSeriesShapes, { key: "funnel", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                        shapesData.push(preparedData);
+                        break;
+                    }
                     default: {
                         throw new ChartError({
                             message: `The display method is not defined for a series with type "${seriesType}"`,
@@ -204,8 +227,11 @@ export const useShapes = (args) => {
     }, [
         boundsHeight,
         boundsWidth,
+        clipPathId,
+        clipPathBySeriesType,
         dispatcher,
         htmlLayout,
+        isOutsideBounds,
         series,
         seriesOptions,
         split,
@@ -213,8 +239,6 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
-        clipPathId,
-        isOutsideBounds,
     ]);
     return { shapes: shapesElemens, shapesData: shapesElemensData };
 };

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

@@ -3,11 +3,11 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedLineData } from './types';
 type Args = {
-    dispatcher: Dispatch<object>;
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedLineData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-    clipPathId: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare const LineSeriesShapes: (args: Args) => React.JSX.Element;
 export {};

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

@@ -129,9 +129,9 @@ export const LineSeriesShapes = (args) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.line', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.line', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,