@gravity-ui/charts 1.51.7 → 1.52.0

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Dispatch } from 'd3-dispatch';
+import type { SeriesShapeData } from '../../core/shapes/types';
+interface Props {
+    preparedData: SeriesShapeData[];
+    dispatcher?: Dispatch<object>;
+    namespace: string;
+}
+export declare const HoverMarkerLayer: ({ preparedData, dispatcher, namespace }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { select } from 'd3-selection';
+import { renderHoverMarkers } from '../../core/shapes/marker';
+export const HoverMarkerLayer = ({ preparedData, dispatcher, namespace }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current)
+            return () => { };
+        const container = select(ref.current);
+        function handleHover(data) {
+            var _a;
+            const hoveredData = (_a = data === null || data === void 0 ? void 0 : data.map((d) => d.data)) !== null && _a !== void 0 ? _a : [];
+            const items = preparedData.flatMap((d) => d.getHoverMarkers(hoveredData));
+            renderHoverMarkers(container, items);
+        }
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(`hover-shape.${namespace}`, handleHover);
+        return () => {
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(`hover-shape.${namespace}`, null);
+        };
+    }, [preparedData, dispatcher, namespace]);
+    return React.createElement("g", { ref: ref });
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MarkerItem } from '../../core/shapes/types';
+interface Props {
+    markers: MarkerItem[];
+}
+export declare const MarkerLayer: ({ markers }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { select } from 'd3-selection';
+import { renderMarkers } from '../../core/shapes/marker';
+export const MarkerLayer = ({ markers }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            renderMarkers(select(ref.current), markers);
+        }
+    }, [markers]);
+    return React.createElement("g", { ref: ref });
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Dispatch } from 'd3-dispatch';
+import type { SeriesPlugin } from '../../core/series/plugin';
+import type { PreparedSeriesOptions } from '../../core/series/types';
+import type { SeriesShapeData } from '../../core/shapes/types';
+interface Props {
+    boundsHeight: number;
+    boundsWidth: number;
+    clipPathId?: string;
+    dispatcher?: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
+    namespace: string;
+    plugin: SeriesPlugin;
+    preparedData: SeriesShapeData[];
+    seriesOptions: PreparedSeriesOptions;
+}
+export declare const SeriesShapes: ({ boundsHeight, boundsWidth, clipPathId, dispatcher, htmlLayout, namespace, plugin, preparedData, seriesOptions, }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { block } from '../../utils';
+import { AnnotationLayer } from './AnnotationLayer';
+import { HoverMarkerLayer } from './HoverMarkerLayer';
+import { HtmlLayer } from './HtmlLayer';
+import { MarkerLayer } from './MarkerLayer';
+export const SeriesShapes = ({ boundsHeight, boundsWidth, clipPathId, dispatcher, htmlLayout, namespace, plugin, preparedData, seriesOptions, }) => {
+    const b = block(plugin.type);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current)
+            return () => { };
+        return ((_a = plugin.renderShapes({
+            plot: ref.current,
+            preparedData,
+            seriesOptions,
+            boundsWidth,
+            boundsHeight,
+            dispatcher,
+        })) !== null && _a !== void 0 ? _a : undefined);
+    }, [boundsHeight, boundsWidth, dispatcher, plugin, preparedData, seriesOptions]);
+    const markers = React.useMemo(() => preparedData.flatMap((d) => d.markers), [preparedData]);
+    const annotations = React.useMemo(() => preparedData.flatMap((d) => d.annotations), [preparedData]);
+    const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.flatMap((d) => d.htmlLabels) }), [preparedData]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { ref: ref, className: b(), clipPath: clipPathId ? `url(#${clipPathId})` : undefined }),
+        React.createElement(MarkerLayer, { markers: markers }),
+        React.createElement(HoverMarkerLayer, { preparedData: preparedData, dispatcher: dispatcher, namespace: namespace }),
+        React.createElement(AnnotationLayer, { annotations: annotations, boundsWidth: boundsWidth, boundsHeight: boundsHeight }),
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
+};

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

@@ -1,26 +1,14 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { SeriesType } from '../../core/constants';
 import type { PreparedSplit } from '../../core/layout/split-types';
 import type { ChartScale } from '../../core/scales/types';
 import type { PreparedSeries, PreparedSeriesOptions } from '../../core/series/types';
-import type { PreparedAreaData } from '../../core/shapes/area/types';
-import type { PreparedBarXData } from '../../core/shapes/bar-x/types';
-import type { PreparedBarYData } from '../../core/shapes/bar-y/types';
-import type { PreparedFunnelData } from '../../core/shapes/funnel/types';
-import type { PreparedHeatmapData } from '../../core/shapes/heatmap/types';
-import type { PreparedLineData } from '../../core/shapes/line/types';
-import type { PreparedPieData } from '../../core/shapes/pie/types';
-import type { PreparedRadarData } from '../../core/shapes/radar/types';
-import type { PreparedSankeyData } from '../../core/shapes/sankey/types';
-import type { PreparedScatterData } from '../../core/shapes/scatter/types';
-import type { PreparedWaterfallData } from '../../core/shapes/waterfall/types';
-import type { PreparedXRangeData } from '../../core/shapes/x-range/types';
+import type { TooltipItemData } from '../../core/shapes/types';
 import type { ZoomState } from '../../core/zoom/types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
-export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
+export type { TooltipItemData };
+export type ClipPathBySeriesType = Partial<Record<string, boolean>>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
@@ -41,11 +29,10 @@ type Args = {
 };
 export declare function getShapes(args: Args): Promise<{
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
 }>;
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
     shapesReady: boolean;
 };
-export {};

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

@@ -1,35 +1,21 @@
 import React from 'react';
 import { group } from 'd3-array';
-import { SERIES_TYPE } from '../../core/constants';
-import { prepareAreaData } from '../../core/shapes/area/prepare-data';
-import { prepareLineData } from '../../core/shapes/line/prepare-data';
-import { preparePieData } from '../../core/shapes/pie/prepare-data';
-import { prepareRadarData } from '../../core/shapes/radar/prepare-data';
-import { prepareSankeyData } from '../../core/shapes/sankey/prepare-data';
-import { prepareTreemapData } from '../../core/shapes/treemap/prepare-data';
+import { getSeriesPlugin } from '../../core/series/seriesRegistry';
+import { getSeriesClipPathId } from '../../core/shapes/utils';
 import { getOnlyVisibleSeries } from '../../core/utils';
-import { ChartError } from '../../libs';
-import { AreaSeriesShapes } from './area';
-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 { PieSeriesShapes } from './pie';
-import { RadarSeriesShapes } from './radar';
-import { SankeySeriesShape } from './sankey';
-import { ScatterSeriesShape, prepareScatterData } from './scatter';
-import { TreemapSeriesShape } from './treemap';
-import { getSeriesClipPathId } from './utils';
-import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
-import { XRangeSeriesShapes, prepareXRangeData } from './x-range';
+import { SeriesShapes } from './SeriesShapes';
 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;
+function resolveClipPathId(args) {
+    var _a, _b;
+    const { plugin, clipPathId, clipPathBySeriesType, yAxis, zoomState } = args;
+    if (plugin.type === 'line') {
+        return getSeriesClipPathId({ clipPathId, yAxis, zoomState });
+    }
+    const useClip = (_b = (_a = clipPathBySeriesType === null || clipPathBySeriesType === void 0 ? void 0 : clipPathBySeriesType[plugin.type]) !== null && _a !== void 0 ? _a : plugin.useClipPath) !== null && _b !== void 0 ? _b : true;
+    return useClip ? clipPathId : undefined;
 }
 export async function getShapes(args) {
     const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
@@ -45,212 +31,36 @@ export async function getShapes(args) {
     const layers = [];
     const groupedSeriesItems = Array.from(groupedSeries);
     for (let index = groupedSeriesItems.length - 1; index >= 0; index--) {
-        const item = groupedSeriesItems[index];
-        const [groupId, chartSeries] = item;
+        const [groupKey, chartSeries] = groupedSeriesItems[index];
         const seriesType = chartSeries[0].type;
-        switch (seriesType) {
-            case SERIES_TYPE.BarX: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const preparedData = await prepareBarXData({
-                        series: chartSeries,
-                        seriesOptions,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        boundsHeight,
-                        split,
-                        isRangeSlider,
-                    });
-                    shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, boundsHeight: boundsHeight, boundsWidth: boundsWidth, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                    shapesData.splice(index, 0, ...preparedData);
-                    layers.push(...preparedData);
-                }
-                break;
-            }
-            case SERIES_TYPE.BarY: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const preparedData = await prepareBarYData({
-                        boundsHeight,
-                        boundsWidth,
-                        series: chartSeries,
-                        seriesOptions,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                    });
-                    shapes[index] = (React.createElement(BarYSeriesShapes, { key: SERIES_TYPE.BarY, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                    shapesData.splice(index, 0, ...preparedData.shapes);
-                }
-                break;
-            }
-            case SERIES_TYPE.Waterfall: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const preparedData = await prepareWaterfallData({
-                        series: chartSeries,
-                        seriesOptions,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                    });
-                    shapes[index] = (React.createElement(WaterfallSeriesShapes, { key: SERIES_TYPE.Waterfall, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                    shapesData.splice(index, 0, ...preparedData);
-                }
-                break;
-            }
-            case SERIES_TYPE.Line: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const preparedData = await prepareLineData({
-                        series: chartSeries,
-                        seriesOptions,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        split,
-                        isOutsideBounds,
-                        isRangeSlider,
-                        otherLayers: layers,
-                    });
-                    const resultClipPathId = getSeriesClipPathId({
-                        clipPathId,
-                        yAxis,
-                        zoomState,
-                    });
-                    shapes[index] = (React.createElement(LineSeriesShapes, { key: groupId, boundsHeight: boundsHeight, boundsWidth: boundsWidth, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
-                    shapesData.splice(index, 0, ...preparedData);
-                    layers.push(...preparedData);
-                }
-                break;
-            }
-            case SERIES_TYPE.Area: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const preparedData = await prepareAreaData({
-                        series: chartSeries,
-                        seriesOptions,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        split,
-                        isOutsideBounds,
-                        isRangeSlider,
-                    });
-                    shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, boundsHeight: boundsHeight, boundsWidth: boundsWidth, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                    shapesData.splice(index, 0, ...preparedData);
-                    layers.push(...preparedData);
-                }
-                break;
-            }
-            case SERIES_TYPE.Scatter: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const scatterShapeData = await prepareScatterData({
-                        series: chartSeries,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        split,
-                        isOutsideBounds,
-                        isRangeSlider,
-                    });
-                    shapes[index] = (React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
-                            ? clipPathId
-                            : undefined, dispatcher: dispatcher, preparedData: scatterShapeData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.splice(index, 0, ...scatterShapeData.markers);
-                }
-                break;
-            }
-            case SERIES_TYPE.Pie: {
-                const preparedData = await preparePieData({
-                    series: chartSeries,
-                    boundsWidth,
-                    boundsHeight,
-                });
-                shapes[index] = (React.createElement(PieSeriesShapes, { key: SERIES_TYPE.Pie, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                shapesData.splice(index, 0, ...preparedData);
-                break;
-            }
-            case SERIES_TYPE.Treemap: {
-                const preparedData = await prepareTreemapData({
-                    // We should have exactly one series with "treemap" type
-                    // Otherwise data validation should emit an error
-                    series: chartSeries[0],
-                    width: boundsWidth,
-                    height: boundsHeight,
-                });
-                shapes[index] = (React.createElement(TreemapSeriesShape, { key: SERIES_TYPE.Treemap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                shapesData.splice(index, 0, preparedData);
-                break;
-            }
-            case SERIES_TYPE.Sankey: {
-                const preparedData = prepareSankeyData({
-                    series: chartSeries[0],
-                    width: boundsWidth,
-                    height: boundsHeight,
-                });
-                shapes[index] = (React.createElement(SankeySeriesShape, { key: SERIES_TYPE.Sankey, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                shapesData.splice(index, 0, preparedData);
-                break;
-            }
-            case SERIES_TYPE.Radar: {
-                const preparedData = await prepareRadarData({
-                    series: chartSeries,
-                    boundsWidth,
-                    boundsHeight,
-                });
-                shapes[index] = (React.createElement(RadarSeriesShapes, { key: SERIES_TYPE.Radar, dispatcher: dispatcher, series: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                shapesData.splice(index, 0, ...preparedData);
-                break;
-            }
-            case SERIES_TYPE.Heatmap: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale[0])) {
-                    const preparedData = await prepareHeatmapData({
-                        series: chartSeries[0],
-                        xAxis,
-                        xScale,
-                        yAxis: yAxis[0],
-                        yScale: yScale[0],
-                    });
-                    shapes[index] = (React.createElement(HeatmapSeriesShapes, { key: SERIES_TYPE.Heatmap, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.splice(index, 0, preparedData);
-                }
-                break;
-            }
-            case SERIES_TYPE.Funnel: {
-                const preparedData = await prepareFunnelData({
-                    series: chartSeries,
-                    boundsWidth,
-                    boundsHeight,
-                });
-                shapes[index] = (React.createElement(FunnelSeriesShapes, { key: SERIES_TYPE.Funnel, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                shapesData.splice(index, 0, preparedData);
-                break;
-            }
-            case SERIES_TYPE.XRange: {
-                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const preparedData = await prepareXRangeData({
-                        series: chartSeries,
-                        xAxis,
-                        xScale,
-                        yAxis,
-                        yScale,
-                        boundsWidth,
-                        isRangeSlider,
-                    });
-                    shapes[index] = (React.createElement(XRangeSeriesShapes, { key: SERIES_TYPE.XRange, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout, clipPathId: clipPathId }));
-                    shapesData.splice(index, 0, ...preparedData);
-                }
-                break;
-            }
-            default: {
-                throw new ChartError({
-                    message: `The display method is not defined for a series with type "${seriesType}"`,
-                });
-            }
+        const plugin = getSeriesPlugin(seriesType);
+        const { renderData, tooltipItems } = await plugin.prepareShapeData({
+            series: chartSeries,
+            boundsWidth,
+            boundsHeight,
+            seriesOptions,
+            xAxis,
+            yAxis,
+            xScale,
+            yScale,
+            split,
+            isOutsideBounds,
+            isRangeSlider,
+            otherLayers: layers,
+        });
+        if (renderData.length === 0) {
+            continue;
         }
+        const resolvedClipPathId = resolveClipPathId({
+            plugin,
+            clipPathId,
+            clipPathBySeriesType,
+            yAxis,
+            zoomState,
+        });
+        shapes[index] = (React.createElement(SeriesShapes, { key: groupKey, plugin: plugin, preparedData: renderData, boundsWidth: boundsWidth, boundsHeight: boundsHeight, clipPathId: resolvedClipPathId, seriesOptions: seriesOptions, dispatcher: dispatcher, htmlLayout: htmlLayout, namespace: `hover-markers-${groupKey}` }));
+        shapesData.splice(index, 0, ...tooltipItems);
+        layers.push(...renderData);
     }
     return { shapes, shapesData };
 }

package/dist/cjs/index.d.ts

@@ -1,4 +1,3 @@
-import './plugins';
 export { CustomShapeRenderer } from './utils';
 export { getFormattedValue } from './core/utils';
 export { getDefaultTooltipHeaderFormat } from './core/utils/tooltip';

package/dist/cjs/index.js

@@ -1,4 +1,3 @@
-import './plugins';
 export { CustomShapeRenderer } from './utils';
 export { getFormattedValue } from './core/utils';
 export { getDefaultTooltipHeaderFormat } from './core/utils/tooltip';

package/dist/cjs/plugins/area/index.js

@@ -1,5 +1,47 @@
+import { getTooltipData } from '../../core/shapes/area/get-tooltip-data';
+import { prepareAreaData } from '../../core/shapes/area/prepare-data';
+import { renderArea } from '../../core/shapes/area/renderer';
+import { filterOverlappingLabels } from '../../core/utils';
 import { prepareArea } from './prepare';
+async function prepareShapeData(args) {
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider, } = args;
+    if (!xAxis || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale.length) || !split) {
+        return { renderData: [], tooltipItems: [] };
+    }
+    const data = await prepareAreaData({
+        series: series,
+        seriesOptions,
+        xAxis,
+        xScale,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : [],
+        yScale,
+        split,
+        isOutsideBounds: isOutsideBounds !== null && isOutsideBounds !== void 0 ? isOutsideBounds : (() => false),
+        isRangeSlider,
+    });
+    const allowOverlap = data.some((d) => d.series.dataLabels.allowOverlap);
+    if (!allowOverlap) {
+        const filtered = filterOverlappingLabels(data.flatMap((d) => d.htmlLabels));
+        const [first, ...rest] = data;
+        if (first) {
+            const filteredData = [
+                Object.assign(Object.assign({}, first), { htmlLabels: filtered }),
+                ...rest.map((d) => (Object.assign(Object.assign({}, d), { htmlLabels: [] }))),
+            ];
+            return { renderData: filteredData, tooltipItems: filteredData };
+        }
+    }
+    return { renderData: data, tooltipItems: data };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    const data = preparedData;
+    const allowOverlap = data.some((d) => d.series.dataLabels.allowOverlap);
+    return renderArea({ plot }, data, seriesOptions, allowOverlap, dispatcher);
+}
 export const areaPlugin = {
     type: 'area',
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareArea({ series: series, seriesOptions, legend, colorScale }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

package/dist/cjs/plugins/bar-x/index.js

@@ -1,5 +1,47 @@
+import { getTooltipData } from '../../core/shapes/bar-x/get-tooltip-data';
+import { prepareBarXData } from '../../core/shapes/bar-x/prepare-data';
+import { renderBarX } from '../../core/shapes/bar-x/renderer';
+import { filterOverlappingLabels } from '../../core/utils';
 import { prepareBarXSeries } from './prepare';
+async function prepareShapeData(args) {
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight, split, isRangeSlider, } = args;
+    if (!xAxis || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale.length) || !split) {
+        return { renderData: [], tooltipItems: [] };
+    }
+    const data = await prepareBarXData({
+        series: series,
+        seriesOptions,
+        xAxis,
+        xScale,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : [],
+        yScale,
+        boundsHeight,
+        split,
+        isRangeSlider,
+    });
+    const allowOverlap = data.some((d) => d.series.dataLabels.allowOverlap);
+    if (!allowOverlap) {
+        const filtered = filterOverlappingLabels(data.flatMap((d) => d.htmlLabels));
+        const [first, ...rest] = data;
+        if (first) {
+            const filteredData = [
+                Object.assign(Object.assign({}, first), { htmlLabels: filtered }),
+                ...rest.map((d) => (Object.assign(Object.assign({}, d), { htmlLabels: [] }))),
+            ];
+            return { renderData: filteredData, tooltipItems: filteredData };
+        }
+    }
+    return { renderData: data, tooltipItems: data };
+}
+function renderShapes({ plot, preparedData, seriesOptions, boundsWidth, boundsHeight, dispatcher, }) {
+    const data = preparedData;
+    const allowOverlap = data.some((d) => d.series.dataLabels.allowOverlap);
+    return renderBarX({ plot, boundsWidth, boundsHeight }, data, seriesOptions, allowOverlap, dispatcher);
+}
 export const barXPlugin = {
     type: 'bar-x',
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareBarXSeries({ series: series, seriesOptions, legend, colorScale }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

package/dist/cjs/plugins/bar-y/index.js

@@ -1,5 +1,31 @@
+import { getTooltipData } from '../../core/shapes/bar-y/get-tooltip-data';
+import { prepareBarYData } from '../../core/shapes/bar-y/prepare-data';
+import { renderBarY } from '../../core/shapes/bar-y/renderer';
 import { prepareBarYSeries } from './prepare';
+async function prepareShapeData(args) {
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight, boundsWidth } = args;
+    if (!xAxis || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+        return { renderData: [], tooltipItems: [] };
+    }
+    const data = await prepareBarYData({
+        boundsHeight,
+        boundsWidth,
+        series: series,
+        seriesOptions,
+        xAxis,
+        xScale,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : [],
+        yScale,
+    });
+    return { renderData: [data], tooltipItems: data.shapes };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderBarY({ plot }, preparedData[0], seriesOptions, dispatcher);
+}
 export const barYPlugin = {
     type: 'bar-y',
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareBarYSeries({ series: series, seriesOptions, legend, colorScale }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

package/dist/cjs/plugins/funnel/index.js

@@ -1,5 +1,23 @@
+import { getTooltipData } from '../../core/shapes/funnel/get-tooltip-data';
+import { prepareFunnelData } from '../../core/shapes/funnel/prepare-data';
+import { renderFunnel } from '../../core/shapes/funnel/renderer';
 import { prepareFunnelSeries } from './prepare';
+async function prepareShapeData({ series, boundsWidth, boundsHeight, }) {
+    const data = await prepareFunnelData({
+        series: series,
+        boundsWidth,
+        boundsHeight,
+    });
+    return { renderData: [data], tooltipItems: [data] };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderFunnel({ plot }, preparedData[0], seriesOptions, dispatcher);
+}
 export const funnelPlugin = {
     type: 'funnel',
+    useClipPath: false,
     prepareSeries: ({ series, seriesOptions, legend, colors }) => prepareFunnelSeries({ series: series, seriesOptions, legend, colors }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };