@gravity-ui/charts 1.46.0 → 1.46.1

package/dist/esm/hooks/useShapes/area/index.js

@@ -1,18 +1,11 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { area as areaGenerator, line as lineGenerator } from 'd3-shape';
-import get from 'lodash/get';
+import { renderArea } from '../../../core/shapes/area/renderer';
 import { filterOverlappingLabels } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { renderAnnotations } from '../annotation';
-import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
-import { setActiveState } from '../utils';
 const b = block('area');
 export const AreaSeriesShapes = (args) => {
     const { boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId, } = args;
-    const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
     const hoverMarkersRef = React.useRef(null);
@@ -21,185 +14,20 @@ export const AreaSeriesShapes = (args) => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
     React.useEffect(() => {
-        if (!plotRef.current || !markersRef.current) {
+        if (!plotRef.current ||
+            !markersRef.current ||
+            !hoverMarkersRef.current ||
+            !annotationsRef.current) {
             return () => { };
         }
-        const plotSvgElement = select(plotRef.current);
-        const markersSvgElement = select(markersRef.current);
-        const hoverMarkersSvgElement = select(hoverMarkersRef.current);
-        const hoverOptions = get(seriesOptions, 'area.states.hover');
-        const inactiveOptions = get(seriesOptions, 'area.states.inactive');
-        const line = lineGenerator()
-            .x((d) => d.x)
-            .defined((d) => d.y !== null)
-            .y((d) => d.y);
-        plotSvgElement.selectAll('*').remove();
-        markersSvgElement.selectAll('*').remove();
-        const shapeSelection = plotSvgElement
-            .selectAll('shape')
-            .data(preparedData)
-            .join('g')
-            .attr('class', b('series'))
-            .attr('cursor', (d) => d.series.cursor);
-        shapeSelection
-            .append('path')
-            .attr('class', b('line'))
-            .attr('d', (d) => line(d.points))
-            .attr('fill', 'none')
-            .attr('stroke', (d) => d.color)
-            .attr('stroke-width', (d) => d.width)
-            .attr('stroke-linejoin', 'round')
-            .attr('stroke-linecap', 'round');
-        const area = areaGenerator()
-            .defined((d) => d.y !== null)
-            .x((d) => d.x)
-            .y0((d) => d.y0)
-            .y1((d) => d.y);
-        shapeSelection
-            .append('path')
-            .attr('class', b('region'))
-            .attr('d', (d) => area(d.points))
-            .attr('fill', (d) => d.color)
-            .attr('opacity', (d) => d.opacity);
-        let dataLabels = preparedData.reduce((acc, d) => {
-            return acc.concat(d.svgLabels);
-        }, []);
-        if (!allowOverlapDataLabels) {
-            dataLabels = filterOverlappingLabels(dataLabels);
-        }
-        const labelsSelection = plotSvgElement
-            .selectAll('text')
-            .data(dataLabels)
-            .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);
-        const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
-        const markerSelection = markersSvgElement
-            .selectAll('marker')
-            .data(markers)
-            .join('g')
-            .call(renderMarker);
-        if (annotationsRef.current) {
-            const anchors = preparedData.flatMap((d) => d.annotations);
-            renderAnnotations({
-                anchors,
-                container: select(annotationsRef.current),
-                plotHeight: boundsHeight,
-                plotWidth: boundsWidth,
-            });
-        }
-        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) {
-            hoveredDataRef.current = data;
-            const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'area')) || [];
-            const selectedDataItems = selected.map((d) => d.data);
-            const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
-            shapeSelection.datum((d, index, list) => {
-                var _a;
-                const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
-                if (d.hovered !== hovered) {
-                    d.hovered = hovered;
-                    let strokeColor = d.color || '';
-                    if (d.hovered) {
-                        strokeColor =
-                            ((_a = color(strokeColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
-                                strokeColor;
-                    }
-                    elementSelection.selectAll(`.${b('line')}`).attr('stroke', strokeColor);
-                    elementSelection.selectAll(`.${b('region')}`).attr('fill', strokeColor);
-                }
-                return setActiveState({
-                    element: list[index],
-                    state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.id)),
-                    datum: d,
-                });
-            });
-            labelsSelection.datum((d, index, list) => {
-                return setActiveState({
-                    element: list[index],
-                    state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.series.id)),
-                    datum: d,
-                });
-            });
-            markerSelection.datum((d, index, list) => {
-                const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
-                if (d.hovered !== hovered) {
-                    d.hovered = hovered;
-                    elementSelection.attr('visibility', getMarkerVisibility(d));
-                    selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
-                    selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
-                }
-                if (d.point.series.marker.states.normal.enabled) {
-                    const isActive = Boolean(!inactiveEnabled ||
-                        !selectedSeriesIds.length ||
-                        selectedSeriesIds.includes(d.point.series.id));
-                    setActiveState({
-                        element: list[index],
-                        state: inactiveOptions,
-                        active: isActive,
-                        datum: d,
-                    });
-                }
-                return d;
-            });
-            hoverMarkersSvgElement.selectAll('*').remove();
-            if (hoverEnabled && selected.length > 0) {
-                const hoverOnlyMarkers = [];
-                for (const chunk of selected) {
-                    const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
-                    if (!seriesData) {
-                        continue;
-                    }
-                    const { series } = seriesData;
-                    if (series.marker.states.normal.enabled ||
-                        !series.marker.states.hover.enabled) {
-                        continue;
-                    }
-                    const point = seriesData.points.find((p) => p.data === chunk.data);
-                    if (!point || point.y === null) {
-                        continue;
-                    }
-                    hoverOnlyMarkers.push({
-                        point: point,
-                        active: true,
-                        hovered: true,
-                        clipped: false,
-                    });
-                }
-                if (hoverOnlyMarkers.length > 0) {
-                    hoverMarkersSvgElement
-                        .selectAll('g')
-                        .data(hoverOnlyMarkers)
-                        .join('g')
-                        .call(renderMarker)
-                        .each((_d, i, nodes) => {
-                        selectMarkerSymbol(select(nodes[i])).call(setMarker, 'hover');
-                    });
-                }
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', null);
-        };
+        return renderArea({
+            plot: plotRef.current,
+            markers: markersRef.current,
+            hoverMarkers: hoverMarkersRef.current,
+            annotations: annotationsRef.current,
+            boundsWidth,
+            boundsHeight,
+        }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
     }, [
         allowOverlapDataLabels,
         boundsHeight,

package/dist/esm/hooks/useShapes/bar-x/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 { PreparedBarXData } from './types';
-export { prepareBarXData } from './prepare-data';
-export * from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedBarXData } from '../../../core/shapes/bar-x/types';
+export { prepareBarXData } from '../../../core/shapes/bar-x/prepare-data';
+export * from '../../../core/shapes/bar-x/types';
 type Args = {
     boundsHeight: number;
     boundsWidth: number;

package/dist/esm/hooks/useShapes/bar-x/index.js

@@ -1,137 +1,28 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import get from 'lodash/get';
+import { renderBarX } from '../../../core/shapes/bar-x/renderer';
 import { filterOverlappingLabels } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { renderAnnotations } from '../annotation';
-import { getRectPath } from '../utils';
-export { prepareBarXData } from './prepare-data';
-export * from './types';
+export { prepareBarXData } from '../../../core/shapes/bar-x/prepare-data';
+export * from '../../../core/shapes/bar-x/types';
 const b = block('bar-x');
 export const BarXSeriesShapes = (args) => {
     const { boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId, } = args;
-    const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     const annotationsRef = React.useRef(null);
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
     React.useEffect(() => {
-        if (!ref.current) {
+        if (!ref.current || !annotationsRef.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        const hoverOptions = get(seriesOptions, 'bar-x.states.hover');
-        const inactiveOptions = get(seriesOptions, 'bar-x.states.inactive');
-        svgElement.selectAll('*').remove();
-        const rectSelection = svgElement
-            .selectAll('allRects')
-            .data(preparedData)
-            .join('path')
-            .attr('d', (d) => {
-            const borderRadius = d.isLastStackItem
-                ? Math.min(d.height, d.width / 2, d.series.borderRadius)
-                : 0;
-            const p = getRectPath({
-                x: d.x,
-                y: d.y,
-                width: d.width,
-                height: d.height,
-                borderRadius: [borderRadius, borderRadius, 0, 0],
-            });
-            return p.toString();
-        })
-            .attr('class', b('segment'))
-            .attr('x', (d) => d.x)
-            .attr('y', (d) => d.y)
-            .attr('height', (d) => d.height)
-            .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.data.color || d.series.color)
-            .attr('opacity', (d) => d.opacity)
-            .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.map((d) => d.svgLabels).flat();
-        if (!allowOverlapDataLabels) {
-            dataLabels = filterOverlappingLabels(dataLabels);
-        }
-        const labelSelection = svgElement
-            .selectAll('text')
-            .data(dataLabels)
-            .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);
-        if (annotationsRef.current) {
-            const anchors = [];
-            for (const d of preparedData) {
-                if (d.annotation) {
-                    anchors.push({
-                        annotation: d.annotation,
-                        x: d.x + d.width / 2,
-                        y: d.y,
-                    });
-                }
-            }
-            renderAnnotations({
-                anchors,
-                container: select(annotationsRef.current),
-                plotHeight: boundsHeight,
-                plotWidth: boundsWidth,
-            });
-        }
-        function handleShapeHover(data) {
-            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;
-            if (!data) {
-                if (hoverEnabled) {
-                    rectSelection.attr('fill', (d) => d.data.color || d.series.color);
-                }
-                if (inactiveEnabled) {
-                    rectSelection.attr('opacity', null);
-                    labelSelection.attr('opacity', null);
-                }
-                return;
-            }
-            if (hoverEnabled) {
-                const hoveredValues = data.map((d) => d.data.x);
-                rectSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.data.color || d.series.color;
-                    if (hoveredValues.includes(d.data.x)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-            if (inactiveEnabled) {
-                const hoveredSeries = data.map((d) => d.series.id);
-                rectSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-                labelSelection.attr('opacity', (d) => {
-                    return hoveredSeries.includes(d.series.id)
-                        ? null
-                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
-                });
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-x', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-x', null);
-        };
+        return renderBarX({
+            plot: ref.current,
+            annotations: annotationsRef.current,
+            boundsWidth,
+            boundsHeight,
+        }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
     }, [
         allowOverlapDataLabels,
         boundsHeight,

package/dist/esm/hooks/useShapes/bar-y/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 { BarYShapesArgs } from './types';
-export { prepareBarYData } from './prepare-data';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { BarYShapesArgs } from '../../../core/shapes/bar-y/types';
+export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 type Args = {
     clipPathId: string;
     htmlLayout: HTMLElement | null;

package/dist/esm/hooks/useShapes/bar-y/index.js

@@ -1,97 +1,18 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import get from 'lodash/get';
+import { renderBarY } from '../../../core/shapes/bar-y/renderer';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
-import { getAdjustedRectBorderPath, getAdjustedRectPath } from './utils';
-export { prepareBarYData } from './prepare-data';
+export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 const b = block('bar-y');
 export function BarYSeriesShapes(args) {
-    const { dispatcher, preparedData: { shapes: preparedData, labels: dataLabels, htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
-    const hoveredDataRef = React.useRef(null);
+    const { dispatcher, preparedData: { htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const segmentSelection = svgElement
-            .selectAll(`path.${b('segment')}`)
-            .data(preparedData)
-            .join('path')
-            .attr('d', (d) => getAdjustedRectPath(d))
-            .attr('class', b('segment'))
-            .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('opacity', (d) => d.data.opacity || null)
-            .attr('cursor', (d) => d.series.cursor);
-        const borderSelection = svgElement
-            .selectAll(`path.${b('segment-border')}`)
-            .data(preparedData.filter((d) => d.borderWidth > 0))
-            .join('path')
-            .attr('d', (d) => getAdjustedRectBorderPath(d))
-            .attr('class', b('segment-border'))
-            .attr('fill', (d) => d.borderColor)
-            .attr('fill-rule', 'evenodd')
-            .attr('opacity', (d) => d.data.opacity || null)
-            .attr('pointer-events', 'none');
-        const labelSelection = svgElement
-            .selectAll('text')
-            .data(dataLabels)
-            .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);
-        const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
-        const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
-        function handleShapeHover(data) {
-            hoveredDataRef.current = data;
-            if (hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled) {
-                const hovered = data === null || data === void 0 ? void 0 : data.reduce((acc, d) => {
-                    acc.add(d.data.y);
-                    return acc;
-                }, new Set());
-                segmentSelection.attr('fill', (d) => {
-                    var _a;
-                    const fillColor = d.color;
-                    if (hovered === null || hovered === void 0 ? void 0 : hovered.has(d.data.y)) {
-                        return (((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(hoverOptions.brightness).toString()) ||
-                            fillColor);
-                    }
-                    return fillColor;
-                });
-            }
-            if (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled) {
-                const hoveredSeries = data === null || data === void 0 ? void 0 : data.map((d) => d.series.id);
-                const newOpacity = (d) => {
-                    if ((hoveredSeries === null || hoveredSeries === void 0 ? void 0 : hoveredSeries.length) && !hoveredSeries.includes(d.series.id)) {
-                        return inactiveOptions.opacity || null;
-                    }
-                    return null;
-                };
-                segmentSelection.attr('opacity', newOpacity);
-                borderSelection.attr('opacity', newOpacity);
-                labelSelection.attr('opacity', newOpacity);
-            }
-        }
-        if (hoveredDataRef.current !== null) {
-            handleShapeHover(hoveredDataRef.current);
-        }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-y', handleShapeHover);
-        return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-y', null);
-        };
-    }, [dataLabels, dispatcher, preparedData, seriesOptions]);
+        return renderBarY({ plot: ref.current }, args.preparedData, seriesOptions, dispatcher);
+    }, [args.preparedData, dispatcher, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: { htmlElements }, htmlLayout: htmlLayout })));

package/dist/esm/hooks/useShapes/funnel/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 { PreparedFunnelData } from './types';
-export { prepareFunnelData } from './prepare-data';
-export * from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedFunnelData } from '../../../core/shapes/funnel/types';
+export { prepareFunnelData } from '../../../core/shapes/funnel/prepare-data';
+export * from '../../../core/shapes/funnel/types';
 type Args = {
     dispatcher?: Dispatch<object>;
     preparedData: PreparedFunnelData;

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

@@ -1,96 +1,17 @@
 import React from 'react';
-import { color } from 'd3-color';
-import { select } from 'd3-selection';
-import { getLineDashArray } from '../../../core/utils';
+import { renderFunnel } from '../../../core/shapes/funnel/renderer';
 import { block } from '../../../utils';
-export { prepareFunnelData } from './prepare-data';
-export * from './types';
+export { prepareFunnelData } from '../../../core/shapes/funnel/prepare-data';
+export * from '../../../core/shapes/funnel/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')
-            .html((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);
-        };
+        return renderFunnel({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() })));

package/dist/esm/hooks/useShapes/heatmap/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 { PreparedHeatmapData } from './types';
-export { prepareHeatmapData } from './prepare-data';
-export * from './types';
+import type { PreparedSeriesOptions } from '../../../core/series/types';
+import type { PreparedHeatmapData } from '../../../core/shapes/heatmap/types';
+export { prepareHeatmapData } from '../../../core/shapes/heatmap/prepare-data';
+export * from '../../../core/shapes/heatmap/types';
 type Args = {
     htmlLayout: HTMLElement | null;
     preparedData: PreparedHeatmapData;