@gravity-ui/charts 1.51.7 → 1.52.0

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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,
 };

package/dist/esm/plugins/funnel/prepare.js

@@ -1,6 +1,7 @@
 import { scaleOrdinal } from 'd3-scale';
 import get from 'lodash/get';
 import { DEFAULT_DATALABELS_STYLE } from '../../core/constants';
+import { DEFAULT_DATALABELS_PADDING } from '../../core/series/constants';
 import { prepareLegendSymbol } from '../../core/series/utils';
 import { getUniqId } from '../../core/utils';
 export function prepareFunnelSeries(args) {
@@ -16,7 +17,7 @@ export function prepareFunnelSeries(args) {
     // For rectangle: enable by default.
     const isConnectorsEnabled = (_d = (_c = series.connectors) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : (isTrapezoid ? userSpecifiedHeight : true);
     const preparedSeries = series.data.map((dataItem) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
         const id = getUniqId();
         const color = dataItem.color || colorScale(dataItem.name);
         const result = {
@@ -29,32 +30,36 @@ export function prepareFunnelSeries(args) {
                 html: get(series, 'dataLabels.html', false),
                 format: (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.format,
                 align: (_d = (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : 'center',
+                inside: (_f = (_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.inside) !== null && _f !== void 0 ? _f : false,
+                anchor: (_h = (_g = series.dataLabels) === null || _g === void 0 ? void 0 : _g.anchor) !== null && _h !== void 0 ? _h : 'plot',
+                reserveSpace: (_k = (_j = series.dataLabels) === null || _j === void 0 ? void 0 : _j.reserveSpace) !== null && _k !== void 0 ? _k : true,
+                padding: (_m = (_l = series.dataLabels) === null || _l === void 0 ? void 0 : _l.padding) !== null && _m !== void 0 ? _m : DEFAULT_DATALABELS_PADDING,
             },
             visible: true,
             name: dataItem.name,
             id,
             color,
             legend: {
-                enabled: (_h = (_f = (_e = dataItem.legend) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : (_g = series.legend) === null || _g === void 0 ? void 0 : _g.enabled) !== null && _h !== void 0 ? _h : legend.enabled,
-                symbol: ((_j = dataItem.legend) === null || _j === void 0 ? void 0 : _j.symbol)
+                enabled: (_r = (_p = (_o = dataItem.legend) === null || _o === void 0 ? void 0 : _o.enabled) !== null && _p !== void 0 ? _p : (_q = series.legend) === null || _q === void 0 ? void 0 : _q.enabled) !== null && _r !== void 0 ? _r : legend.enabled,
+                symbol: ((_s = dataItem.legend) === null || _s === void 0 ? void 0 : _s.symbol)
                     ? prepareLegendSymbol(dataItem)
                     : prepareLegendSymbol(series),
-                groupId: (_l = (_k = dataItem.legend) === null || _k === void 0 ? void 0 : _k.groupId) !== null && _l !== void 0 ? _l : getUniqId(),
-                itemText: (_o = (_m = dataItem.legend) === null || _m === void 0 ? void 0 : _m.itemText) !== null && _o !== void 0 ? _o : dataItem.name,
+                groupId: (_u = (_t = dataItem.legend) === null || _t === void 0 ? void 0 : _t.groupId) !== null && _u !== void 0 ? _u : getUniqId(),
+                itemText: (_w = (_v = dataItem.legend) === null || _v === void 0 ? void 0 : _v.itemText) !== null && _w !== void 0 ? _w : dataItem.name,
             },
             cursor: get(series, 'cursor', null),
             tooltip: series.tooltip,
             connectors: {
                 enabled: isConnectorsEnabled,
                 height: isConnectorsEnabled
-                    ? ((_q = (_p = series.connectors) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : (isTrapezoid ? 0 : '25%'))
+                    ? ((_y = (_x = series.connectors) === null || _x === void 0 ? void 0 : _x.height) !== null && _y !== void 0 ? _y : (isTrapezoid ? 0 : '25%'))
                     : 0,
-                lineDashStyle: (_s = (_r = series.connectors) === null || _r === void 0 ? void 0 : _r.lineDashStyle) !== null && _s !== void 0 ? _s : 'Dash',
-                lineOpacity: (_u = (_t = series.connectors) === null || _t === void 0 ? void 0 : _t.lineOpacity) !== null && _u !== void 0 ? _u : (isTrapezoid ? 0 : 1),
-                lineColor: (_w = (_v = series.connectors) === null || _v === void 0 ? void 0 : _v.lineColor) !== null && _w !== void 0 ? _w : 'var(--g-color-line-generic-active)',
-                areaColor: (_y = (_x = series.connectors) === null || _x === void 0 ? void 0 : _x.areaColor) !== null && _y !== void 0 ? _y : color,
-                areaOpacity: (_0 = (_z = series.connectors) === null || _z === void 0 ? void 0 : _z.areaOpacity) !== null && _0 !== void 0 ? _0 : (isTrapezoid ? 0 : 0.25),
-                lineWidth: (_2 = (_1 = series.connectors) === null || _1 === void 0 ? void 0 : _1.lineWidth) !== null && _2 !== void 0 ? _2 : 1,
+                lineDashStyle: (_0 = (_z = series.connectors) === null || _z === void 0 ? void 0 : _z.lineDashStyle) !== null && _0 !== void 0 ? _0 : 'Dash',
+                lineOpacity: (_2 = (_1 = series.connectors) === null || _1 === void 0 ? void 0 : _1.lineOpacity) !== null && _2 !== void 0 ? _2 : (isTrapezoid ? 0 : 1),
+                lineColor: (_4 = (_3 = series.connectors) === null || _3 === void 0 ? void 0 : _3.lineColor) !== null && _4 !== void 0 ? _4 : 'var(--g-color-line-generic-active)',
+                areaColor: (_6 = (_5 = series.connectors) === null || _5 === void 0 ? void 0 : _5.areaColor) !== null && _6 !== void 0 ? _6 : color,
+                areaOpacity: (_8 = (_7 = series.connectors) === null || _7 === void 0 ? void 0 : _7.areaOpacity) !== null && _8 !== void 0 ? _8 : (isTrapezoid ? 0 : 0.25),
+                lineWidth: (_10 = (_9 = series.connectors) === null || _9 === void 0 ? void 0 : _9.lineWidth) !== null && _10 !== void 0 ? _10 : 1,
             },
         };
         return result;

package/dist/esm/plugins/heatmap/index.js

@@ -1,4 +1,24 @@
+import { getTooltipData } from '../../core/shapes/heatmap/get-tooltip-data';
+import { prepareHeatmapData } from '../../core/shapes/heatmap/prepare-data';
+import { renderHeatmap } from '../../core/shapes/heatmap/renderer';
 import { prepareHeatmapSeries } from './prepare';
+async function prepareShapeData(args) {
+    const { series, xAxis, xScale, yAxis, yScale } = args;
+    if (!xAxis || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale[0])) {
+        return { renderData: [], tooltipItems: [] };
+    }
+    const data = await prepareHeatmapData({
+        series: series[0],
+        xAxis,
+        xScale,
+        yAxis: yAxis[0],
+        yScale: yScale[0],
+    });
+    return { renderData: [data], tooltipItems: [data] };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderHeatmap({ plot }, preparedData[0], seriesOptions, dispatcher);
+}
 export const heatmapPlugin = {
     type: 'heatmap',
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareHeatmapSeries({
@@ -7,4 +27,7 @@ export const heatmapPlugin = {
         legend,
         colorScale,
     }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

package/dist/esm/plugins/line/index.js

@@ -1,5 +1,33 @@
+import { getTooltipData } from '../../core/shapes/line/get-tooltip-data';
+import { prepareLineData } from '../../core/shapes/line/prepare-data';
+import { renderLine } from '../../core/shapes/line/renderer';
 import { prepareLineSeries } from './prepare';
+async function prepareShapeData(args) {
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
+    if (!xAxis || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale.length) || !split) {
+        return { renderData: [], tooltipItems: [] };
+    }
+    const data = await prepareLineData({
+        series: series,
+        seriesOptions,
+        xAxis,
+        xScale,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : [],
+        yScale,
+        split,
+        isOutsideBounds: isOutsideBounds !== null && isOutsideBounds !== void 0 ? isOutsideBounds : (() => false),
+        isRangeSlider,
+        otherLayers: otherLayers !== null && otherLayers !== void 0 ? otherLayers : [],
+    });
+    return { renderData: data, tooltipItems: data };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderLine({ plot }, preparedData, seriesOptions, dispatcher);
+}
 export const linePlugin = {
     type: 'line',
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareLineSeries({ series: series, seriesOptions, legend, colorScale }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

package/dist/esm/plugins/pie/index.js

@@ -1,5 +1,23 @@
+import { getTooltipData } from '../../core/shapes/pie/get-tooltip-data';
+import { preparePieData } from '../../core/shapes/pie/prepare-data';
+import { renderPie } from '../../core/shapes/pie/renderer';
 import { preparePieSeries } from './prepare';
+async function prepareShapeData({ series, boundsWidth, boundsHeight, }) {
+    const data = await preparePieData({
+        series: series,
+        boundsWidth,
+        boundsHeight,
+    });
+    return { renderData: data, tooltipItems: data };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderPie({ plot }, preparedData, seriesOptions, dispatcher);
+}
 export const piePlugin = {
     type: 'pie',
+    useClipPath: false,
     prepareSeries: ({ series, seriesOptions, legend, colors }) => preparePieSeries({ series: series, seriesOptions, legend, colors }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

package/dist/esm/plugins/radar/index.js

@@ -1,5 +1,23 @@
+import { getTooltipData } from '../../core/shapes/radar/get-tooltip-data';
+import { prepareRadarData } from '../../core/shapes/radar/prepare-data';
+import { renderRadar } from '../../core/shapes/radar/renderer';
 import { prepareRadarSeries } from './prepare';
+async function prepareShapeData({ series, boundsWidth, boundsHeight, }) {
+    const data = await prepareRadarData({
+        series: series,
+        boundsWidth,
+        boundsHeight,
+    });
+    return { renderData: data, tooltipItems: data };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderRadar({ plot }, preparedData, seriesOptions, dispatcher);
+}
 export const radarPlugin = {
     type: 'radar',
+    useClipPath: false,
     prepareSeries: ({ series, seriesOptions, legend, colors }) => prepareRadarSeries({ series: series, seriesOptions, legend, colors }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };