@gravity-ui/charts 1.51.8 → 1.52.0

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

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

@@ -1,5 +1,23 @@
+import { getTooltipData } from '../../core/shapes/sankey/get-tooltip-data';
+import { prepareSankeyData } from '../../core/shapes/sankey/prepare-data';
+import { renderSankey } from '../../core/shapes/sankey/renderer';
 import { prepareSankeySeries } from './prepare';
+function prepareShapeData({ series, boundsWidth, boundsHeight, }) {
+    const data = prepareSankeyData({
+        series: series[0],
+        width: boundsWidth,
+        height: boundsHeight,
+    });
+    return { renderData: [data], tooltipItems: [data] };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderSankey({ plot }, preparedData[0], seriesOptions, dispatcher);
+}
 export const sankeyPlugin = {
     type: 'sankey',
+    useClipPath: false,
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareSankeySeries({ series: series, seriesOptions, legend, colorScale }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

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

@@ -1,4 +1,27 @@
+import { getTooltipData } from '../../core/shapes/scatter/get-tooltip-data';
+import { prepareScatterData } from '../../core/shapes/scatter/prepare-data';
+import { renderScatter } from '../../core/shapes/scatter/renderer';
 import { prepareScatterSeries } from './prepare';
+async function prepareShapeData(args) {
+    const { series, 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 prepareScatterData({
+        series: series,
+        xAxis,
+        xScale,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : [],
+        yScale,
+        split,
+        isOutsideBounds: isOutsideBounds !== null && isOutsideBounds !== void 0 ? isOutsideBounds : (() => false),
+        isRangeSlider,
+    });
+    return { renderData: [data], tooltipItems: data.scatterData };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderScatter({ plot }, preparedData[0], seriesOptions, dispatcher);
+}
 export const scatterPlugin = {
     type: 'scatter',
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareScatterSeries({
@@ -7,4 +30,7 @@ export const scatterPlugin = {
         legend,
         colorScale,
     }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

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

@@ -1,5 +1,23 @@
+import { getTooltipData } from '../../core/shapes/treemap/get-tooltip-data';
+import { prepareTreemapData } from '../../core/shapes/treemap/prepare-data';
+import { renderTreemap } from '../../core/shapes/treemap/renderer';
 import { prepareTreemap } from './prepare';
+async function prepareShapeData({ series, boundsWidth, boundsHeight, }) {
+    const data = await prepareTreemapData({
+        series: series[0],
+        width: boundsWidth,
+        height: boundsHeight,
+    });
+    return { renderData: [data], tooltipItems: [data] };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderTreemap({ plot }, preparedData[0], seriesOptions, dispatcher);
+}
 export const treemapPlugin = {
     type: 'treemap',
+    useClipPath: false,
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareTreemap({ series: series, seriesOptions, legend, colorScale }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

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

@@ -1,5 +1,44 @@
+import { getTooltipData } from '../../core/shapes/waterfall/get-tooltip-data';
+import { prepareWaterfallData } from '../../core/shapes/waterfall/prepare-data';
+import { renderWaterfall } from '../../core/shapes/waterfall/renderer';
+import { filterOverlappingLabels } from '../../core/utils';
 import { prepareWaterfallSeries } from './prepare';
+async function prepareShapeData(args) {
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale } = args;
+    if (!xAxis || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+        return { renderData: [], tooltipItems: [] };
+    }
+    const data = await prepareWaterfallData({
+        series: series,
+        seriesOptions,
+        xAxis,
+        xScale,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : [],
+        yScale,
+    });
+    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 renderWaterfall({ plot }, data, seriesOptions, allowOverlap, dispatcher);
+}
 export const waterfallPlugin = {
     type: 'waterfall',
     prepareSeries: ({ series, legend, colorScale, colors }) => prepareWaterfallSeries({ series: series, legend, colorScale, colors }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

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

@@ -1,5 +1,30 @@
+import { getTooltipData } from '../../core/shapes/x-range/get-tooltip-data';
+import { prepareXRangeData } from '../../core/shapes/x-range/prepare-data';
+import { renderXRange } from '../../core/shapes/x-range/renderer';
 import { prepareXRangeSeries } from './prepare';
+async function prepareShapeData(args) {
+    const { series, xAxis, xScale, yAxis, yScale, boundsWidth, isRangeSlider } = args;
+    if (!xAxis || !xScale || !(yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+        return { renderData: [], tooltipItems: [] };
+    }
+    const data = await prepareXRangeData({
+        series: series,
+        xAxis,
+        xScale,
+        yAxis: yAxis !== null && yAxis !== void 0 ? yAxis : [],
+        yScale,
+        boundsWidth,
+        isRangeSlider,
+    });
+    return { renderData: data, tooltipItems: data };
+}
+function renderShapes({ plot, preparedData, seriesOptions, dispatcher }) {
+    return renderXRange({ plot }, preparedData, seriesOptions, dispatcher);
+}
 export const xRangePlugin = {
     type: 'x-range',
     prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareXRangeSeries({ series: series, seriesOptions, legend, colorScale }),
+    prepareShapeData,
+    renderShapes,
+    getTooltipData: getTooltipData,
 };

package/dist/esm/components/ChartInner/useChartInnerHandlers.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
 import type { ChartScale } from '../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
+import type { TooltipItemData } from '../../core/shapes/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../hooks';
 import type { useChartInnerState } from './useChartInnerState';
 type ChartInnerState = ReturnType<typeof useChartInnerState>;
 type Props = {
@@ -10,7 +11,7 @@ type Props = {
     boundsOffsetTop: number;
     boundsWidth: number;
     dispatcher: Dispatch<object>;
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
     svgContainer: SVGSVGElement | null;
     togglePinTooltip: ChartInnerState['togglePinTooltip'];
     tooltipPinned: boolean;

package/dist/esm/components/ChartInner/useChartInnerHandlers.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { pointer } from 'd3-selection';
-import get from 'lodash/get';
 import throttle from 'lodash/throttle';
 import { EventType } from '../../core/utils';
 import { getClosestPoints } from '../../core/utils/get-closest-data';
@@ -21,10 +20,9 @@ export function useChartInnerHandlers(props) {
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
             return;
         }
-        const shapesDataWithTooltipEnabled = shapesData.filter((d) => get(d, 'series.tooltip.enabled', true));
         const closest = getClosestPoints({
             position: [x, y],
-            shapesData: shapesDataWithTooltipEnabled,
+            shapesData,
             boundsHeight,
             boundsWidth,
         });

package/dist/esm/components/ChartInner/useChartInnerProps.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
-import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
+import type { TooltipItemData } from '../../core/shapes/types';
+import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ZoomState } from '../../hooks';
 import type { PreparedChart, PreparedTitle } from '../../hooks/types';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
@@ -22,7 +23,7 @@ export declare function useChartInnerProps(props: Props): {
     boundsWidth: number;
     xAxis: PreparedXAxis | null;
     yAxis: PreparedYAxis[];
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
     shapesReady: boolean;
     handleLegendItemClick: OnLegendItemClick;
     preparedTitle: PreparedTitle | undefined;

package/dist/esm/components/ChartInner/useDefaultState.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
 import type { ChartScale } from '../../core/scales/types';
-import type { PreparedXAxis, PreparedYAxis, ShapeData } from '../../hooks';
+import type { TooltipItemData } from '../../core/shapes/types';
+import type { PreparedXAxis, PreparedYAxis } from '../../hooks';
 type Props = {
     boundsHeight: number;
     boundsOffsetLeft: number;
@@ -14,7 +15,7 @@ type Props = {
         };
     };
     dispatcher: Dispatch<object>;
-    shapesData: ShapeData[];
+    shapesData: TooltipItemData[];
     shapesReady: boolean;
     svgRef: React.RefObject<SVGSVGElement | null>;
     xAxis: PreparedXAxis | null;

package/dist/esm/core/series/plugin.d.ts

@@ -1,6 +1,12 @@
+import type { Dispatch } from 'd3-dispatch';
 import type { ScaleOrdinal } from 'd3-scale';
-import type { ChartSeries, ChartSeriesOptions } from '../../types';
-import type { PreparedLegend, PreparedSeries } from './types';
+import type { ChartSeries, ChartSeriesOptions, ShapeDataWithLabels } from '../../types';
+import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
+import type { PreparedSplit } from '../layout/split-types';
+import type { ChartScale } from '../scales/types';
+import type { SeriesShapeData, TooltipItemData } from '../shapes/types';
+import type { GetTooltipDataFn } from '../utils/tooltip-helpers';
+import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from './types';
 export interface PrepareSeriesArgs {
     series: ChartSeries[];
     seriesOptions?: ChartSeriesOptions;
@@ -8,7 +14,46 @@ export interface PrepareSeriesArgs {
     colorScale: ScaleOrdinal<string, string>;
     colors: string[];
 }
+export interface PrepareShapeDataArgs {
+    series: PreparedSeries[];
+    boundsWidth: number;
+    boundsHeight: number;
+    seriesOptions: PreparedSeriesOptions;
+    xAxis?: PreparedXAxis | null;
+    yAxis?: PreparedYAxis[];
+    xScale?: ChartScale;
+    yScale?: (ChartScale | undefined)[];
+    split?: PreparedSplit;
+    isOutsideBounds?: (x: number, y: number) => boolean;
+    isRangeSlider?: boolean;
+    otherLayers?: ShapeDataWithLabels[];
+}
+export interface PrepareShapeDataResult {
+    renderData: SeriesShapeData[];
+    tooltipItems: TooltipItemData[];
+}
+export interface RenderShapesArgs {
+    plot: SVGGElement;
+    preparedData: SeriesShapeData[];
+    seriesOptions: PreparedSeriesOptions;
+    boundsWidth: number;
+    boundsHeight: number;
+    dispatcher?: Dispatch<object>;
+}
 export interface SeriesPlugin<T extends ChartSeries = ChartSeries> {
+    /** Unique series type identifier (e.g. `'line'`, `'bar-x'`). Used for plugin lookup and CSS class generation. */
     type: T['type'];
+    /**
+     * Whether the shape `<g>` element should be clipped to the chart bounds.
+     * Defaults to `true`. Set to `false` for series that render outside the plot area (e.g. pie, radar, treemap).
+     */
+    useClipPath?: boolean;
+    /** Transforms raw chart series config into prepared series objects used throughout the render pipeline. */
     prepareSeries(args: PrepareSeriesArgs): PreparedSeries[] | Promise<PreparedSeries[]>;
+    /** Computes shape data (geometry, labels, markers) from prepared series. Called once per render cycle. */
+    prepareShapeData(args: PrepareShapeDataArgs): PrepareShapeDataResult | Promise<PrepareShapeDataResult>;
+    /** Renders shapes into the provided SVG `<g>` element using D3. May return a cleanup function. */
+    renderShapes(args: RenderShapesArgs): (() => void) | void;
+    /** Returns tooltip data for a given pointer position and prepared series. */
+    getTooltipData: GetTooltipDataFn;
 }

package/dist/esm/core/series/types.d.ts

@@ -369,6 +369,10 @@ export type PreparedFunnelSeries = {
         html: boolean;
         format?: ValueFormat;
         align: Required<Required<FunnelSeries>['dataLabels']>['align'];
+        inside: boolean;
+        reserveSpace: boolean;
+        padding: number;
+        anchor: Required<Required<FunnelSeries>['dataLabels']>['anchor'];
     };
     connectors: Required<FunnelSeries['connectors']>;
 } & BasePreparedSeries;

package/dist/esm/core/shapes/area/prepare-data.js

@@ -2,8 +2,9 @@ import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { prepareAnnotation } from '../../series/prepare-annotation';
+import { buildHoverMarkerGetter } from '../../shapes/marker';
 import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../../shapes/utils';
-import { getDataCategoryValue, preparePointDataLabels } from '../../utils';
+import { getDataCategoryValue, preparePointDataLabels, shouldPrepareSeriesDataLabels, } from '../../utils';
 function getXValues(series, xAxis, xScale) {
     const categories = xAxis.categories || [];
     const xValues = series.reduce((acc, s) => {
@@ -242,41 +243,50 @@ export const prepareAreaData = async (args) => {
                         });
                     }
                 }
-                let markers = [];
+                markHiddenPointsOutOfYRange({
+                    points,
+                    yScale: seriesYScale,
+                    yAxisTop,
+                });
+                const normalState = s.marker.states.normal;
                 const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
-                if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
-                    markers = points.reduce((markersAcc, p) => {
-                        var _a, _b, _c, _d;
-                        if (p.y === null) {
-                            return markersAcc;
+                const markers = s.marker.states.normal.enabled || hasPerPointNormalMarkers
+                    ? points.reduce((acc, p) => {
+                        var _a, _b, _c, _d, _e;
+                        if (p.y === null || p.hiddenInLine) {
+                            return acc;
                         }
                         const pointNormalEnabled = (_d = (_c = (_b = (_a = p.data.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : false;
                         if (s.marker.states.normal.enabled || pointNormalEnabled) {
-                            markersAcc.push({
-                                point: p,
+                            acc.push({
+                                cx: p.x,
+                                cy: p.y,
+                                radius: normalState.radius,
+                                symbolType: normalState.symbol,
+                                fill: (_e = p.color) !== null && _e !== void 0 ? _e : s.color,
+                                stroke: normalState.borderColor,
+                                strokeWidth: normalState.borderWidth,
+                                opacity: 1,
                                 active: true,
-                                hovered: false,
                                 clipped: isOutsideBounds(p.x, p.y),
+                                series: { id: s.id },
+                                data: p.data,
                             });
                         }
-                        return markersAcc;
-                    }, []);
-                }
+                        return acc;
+                    }, [])
+                    : [];
                 const annotations = points.reduce((result, p) => {
                     if (p.annotation && p.y !== null) {
                         result.push({ annotation: p.annotation, x: p.x, y: p.y });
                     }
                     return result;
                 }, []);
-                markHiddenPointsOutOfYRange({
-                    points,
-                    yScale: seriesYScale,
-                    yAxisTop,
-                });
                 seriesStackData.push({
                     annotations,
                     points,
                     markers,
+                    getHoverMarkers: buildHoverMarkerGetter(points, s),
                     svgLabels: [],
                     color: s.color,
                     opacity: s.opacity,
@@ -292,7 +302,7 @@ export const prepareAreaData = async (args) => {
                 const item = seriesStackData[itemIndex];
                 const currentYAxis = yAxis[item.series.yAxis];
                 const itemYAxisTop = ((_p = split.plots[currentYAxis.plotIndex]) === null || _p === void 0 ? void 0 : _p.top) || 0;
-                if (item.series.dataLabels.enabled && !isRangeSlider) {
+                if (!isRangeSlider && shouldPrepareSeriesDataLabels(item.series)) {
                     const labelsData = await preparePointDataLabels({
                         series: item.series,
                         points: item.points,

package/dist/esm/core/shapes/area/renderer.d.ts

@@ -3,9 +3,4 @@ import type { PreparedSeriesOptions } from '../../series/types';
 import type { PreparedAreaData } from './types';
 export declare function renderArea(elements: {
     plot: SVGGElement;
-    markers: SVGGElement;
-    hoverMarkers: SVGGElement;
-    annotations: SVGGElement;
-    boundsWidth: number;
-    boundsHeight: number;
 }, preparedData: PreparedAreaData[], seriesOptions: PreparedSeriesOptions, allowOverlapDataLabels: boolean, dispatcher?: Dispatch<object>): () => void;