@gravity-ui/charts 1.51.0 → 1.51.3

package/dist/esm/core/utils/get-closest-data.js

@@ -1,56 +1,34 @@
-import { bisector, sort } from 'd3-array';
-import { Delaunay } from 'd3-delaunay';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
-function getClosestYIndex(items, y) {
-    var _a, _b, _c, _d;
-    let closestYIndex = -1;
-    if (y < ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
-        closestYIndex = 0;
-    }
-    else if (y > ((_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
-        closestYIndex = items.length - 1;
-    }
-    else {
-        closestYIndex = items.findIndex((p) => y > p.y0 && y < p.y1);
-        if (closestYIndex === -1) {
-            const sortedY = sort(items.map((p, index) => ({ index, y: p.y1 + (p.y0 - p.y1) / 2 })), (p) => p.y);
-            const sortedYIndex = bisector((p) => p.y).center(sortedY, y);
-            closestYIndex = (_d = (_c = sortedY[sortedYIndex]) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : -1;
-        }
-    }
-    return closestYIndex;
-}
-function getClosestPointsByXValue(x, y, points) {
-    var _a;
-    const sorted = sort(points, (p) => p.x);
-    const closestXIndex = bisector((p) => p.x).center(sorted, x);
-    if (sorted.length === 0 || closestXIndex === -1) {
-        return [];
-    }
-    const closestX = Math.round(sorted[closestXIndex].x);
-    const filtered = points.filter((p) => Math.round(p.x) === closestX);
-    const groupedBySeries = Object.values(groupBy(filtered, (p) => get(p.series, 'id'))).map((items) => {
-        const sortedByY = sort(items, (p) => p.y0);
-        const index = getClosestYIndex(sortedByY, y);
-        return sortedByY[index === -1 ? 0 : index];
-    });
-    const closestPoints = sort(groupedBySeries, (p) => p.y0);
-    const pointsWithSourceX = closestPoints.filter((p) => p.sourceX !== undefined);
-    const uniqueSourceX = new Set(pointsWithSourceX.map((p) => p.sourceX));
-    if (pointsWithSourceX.length > 1 && uniqueSourceX.size > 1) {
-        const sortedBySourceX = sort(pointsWithSourceX, (p) => { var _a; return (_a = p.sourceX) !== null && _a !== void 0 ? _a : 0; });
-        const closestSourceXIdx = bisector((p) => { var _a; return (_a = p.sourceX) !== null && _a !== void 0 ? _a : 0; }).center(sortedBySourceX, x);
-        const closestSourceX = (_a = sortedBySourceX[closestSourceXIdx]) === null || _a === void 0 ? void 0 : _a.sourceX;
-        const candidates = closestPoints.filter((p) => p.sourceX === undefined || p.sourceX === closestSourceX);
-        const sortedCandidates = sort(candidates, (p) => p.y0);
-        const winnerIdx = getClosestYIndex(sortedCandidates, y);
-        const winner = sortedCandidates[winnerIdx === -1 ? 0 : winnerIdx];
-        return closestPoints.map((p) => (Object.assign(Object.assign({}, p), { closest: p === winner })));
-    }
-    const closestYIndex = getClosestYIndex(closestPoints, y);
-    return closestPoints.map((p, i) => (Object.assign(Object.assign({}, p), { closest: i === closestYIndex })));
-}
+import { getTooltipData as areaGetTooltipData } from '../shapes/area/get-tooltip-data';
+import { getTooltipData as barXGetTooltipData } from '../shapes/bar-x/get-tooltip-data';
+import { getTooltipData as barYGetTooltipData } from '../shapes/bar-y/get-tooltip-data';
+import { getTooltipData as funnelGetTooltipData } from '../shapes/funnel/get-tooltip-data';
+import { getTooltipData as heatmapGetTooltipData } from '../shapes/heatmap/get-tooltip-data';
+import { getTooltipData as lineGetTooltipData } from '../shapes/line/get-tooltip-data';
+import { getTooltipData as pieGetTooltipData } from '../shapes/pie/get-tooltip-data';
+import { getTooltipData as radarGetTooltipData } from '../shapes/radar/get-tooltip-data';
+import { getTooltipData as sankeyGetTooltipData } from '../shapes/sankey/get-tooltip-data';
+import { getTooltipData as scatterGetTooltipData } from '../shapes/scatter/get-tooltip-data';
+import { getTooltipData as treemapGetTooltipData } from '../shapes/treemap/get-tooltip-data';
+import { getTooltipData as waterfallGetTooltipData } from '../shapes/waterfall/get-tooltip-data';
+import { getTooltipData as xRangeGetTooltipData } from '../shapes/x-range/get-tooltip-data';
+import { getClosestPointsByXValue } from './tooltip-helpers';
+const tooltipFnByType = {
+    line: lineGetTooltipData,
+    area: areaGetTooltipData,
+    'bar-x': barXGetTooltipData,
+    'bar-y': barYGetTooltipData,
+    waterfall: waterfallGetTooltipData,
+    scatter: scatterGetTooltipData,
+    pie: pieGetTooltipData,
+    treemap: treemapGetTooltipData,
+    heatmap: heatmapGetTooltipData,
+    sankey: sankeyGetTooltipData,
+    radar: radarGetTooltipData,
+    funnel: funnelGetTooltipData,
+    'x-range': xRangeGetTooltipData,
+};
 function getSeriesType(shapeData) {
     return (get(shapeData, 'series.type') ||
         get(shapeData, 'point.series.type') ||
@@ -60,283 +38,26 @@ export function getClosestPoints(args) {
     const { position, shapesData, boundsHeight, boundsWidth } = args;
     const [pointerX, pointerY] = position;
     const result = [];
+    const xLookupPoints = [];
     const groups = groupBy(shapesData, getSeriesType);
-    const closestPointsByXValue = [];
-    Object.entries(groups).forEach(([seriesType, list]) => {
-        var _a, _b, _c, _d, _e;
-        switch (seriesType) {
-            case 'line': {
-                const linePoints = list.reduce((acc, d) => {
-                    acc.push(...d.points.reduce((accPoints, p) => {
-                        if (p.y !== null && p.x !== null && !p.hiddenInLine) {
-                            accPoints.push({
-                                data: p.data,
-                                series: p.series,
-                                x: p.x,
-                                y0: p.y,
-                                y1: p.y,
-                            });
-                        }
-                        return accPoints;
-                    }, []));
-                    return acc;
-                }, []);
-                closestPointsByXValue.push(...linePoints);
-                break;
-            }
-            case 'area': {
-                const areaPoints = list.reduce((acc, d) => {
-                    for (const p of d.points) {
-                        if (p.y === null || p.hiddenInLine) {
-                            continue;
-                        }
-                        acc.push({
-                            data: p.data,
-                            series: p.series,
-                            x: p.x,
-                            y0: p.y0,
-                            y1: p.y,
-                        });
-                    }
-                    return acc;
-                }, []);
-                closestPointsByXValue.push(...areaPoints);
-                break;
-            }
-            case 'bar-x': {
-                const barXList = list;
-                const barXGroups = groupBy(barXList, (d) => String(d.data.x));
-                const barXPoints = [];
-                Object.values(barXGroups).forEach((group) => {
-                    const groupCenterX = group.reduce((sum, d) => sum + d.x + d.width / 2, 0) / group.length;
-                    group.forEach((d) => {
-                        barXPoints.push({
-                            data: d.data,
-                            series: d.series,
-                            x: groupCenterX,
-                            y0: d.y,
-                            y1: d.y + d.height,
-                            sourceX: d.x + d.width / 2,
-                        });
-                    });
-                });
-                closestPointsByXValue.push(...barXPoints);
-                break;
-            }
-            case 'waterfall': {
-                const points = list.map((d) => ({
-                    data: d.data,
-                    series: d.series,
-                    x: d.x + d.width / 2,
-                    y0: d.y,
-                    y1: d.y + d.height,
-                    subTotal: d.subTotal,
-                }));
-                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
-                break;
-            }
-            case 'bar-y': {
-                const points = list;
-                const sorted = sort(points, (p) => p.y);
-                const closestYIndex = bisector((p) => p.y + p.height / 2).center(sorted, pointerY);
-                const closestYPoint = sorted[closestYIndex];
-                let selectedPoints = [];
-                let closestPointXValue = -1;
-                if (closestYPoint) {
-                    selectedPoints = points.filter((p) => p.data.y === closestYPoint.data.y);
-                    const closestPoints = sort(selectedPoints.filter((p) => p.y === closestYPoint.y), (p) => p.x);
-                    const lastPoint = closestPoints[closestPoints.length - 1];
-                    if (pointerX < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.x)) {
-                        closestPointXValue = closestPoints[0].x;
-                    }
-                    else if (lastPoint && pointerX > lastPoint.x + lastPoint.width) {
-                        closestPointXValue = lastPoint.x;
-                    }
-                    else {
-                        closestPointXValue = (_b = closestPoints.find((p) => pointerX > p.x && pointerX < p.x + p.width)) === null || _b === void 0 ? void 0 : _b.x;
-                    }
-                }
-                result.push(...selectedPoints.map((p) => ({
-                    data: p.data,
-                    series: p.series,
-                    closest: p.x === closestPointXValue && p.y === closestYPoint.y,
-                })));
-                break;
-            }
-            case 'scatter': {
-                const points = list;
-                const delaunayX = Delaunay.from(points, (d) => d.point.x, (d) => d.point.y);
-                const closestPoint = points[delaunayX.find(pointerX, pointerY)];
-                if (closestPoint) {
-                    result.push({
-                        data: closestPoint.point.data,
-                        series: closestPoint.point.series,
-                        closest: true,
-                    });
-                }
-                break;
-            }
-            case 'pie': {
-                const points = list.map((d) => d.segments).flat();
-                const closestPoint = points.find((p) => {
-                    const { center } = p.data.pie;
-                    const x = pointerX - center[0];
-                    const y = pointerY - center[1];
-                    let angle = Math.atan2(y, x) + 0.5 * Math.PI;
-                    angle = angle < 0 ? Math.PI * 2 + angle : angle;
-                    const polarRadius = getRadius({ center, pointer: [pointerX, pointerY] });
-                    return (angle >= p.startAngle && angle <= p.endAngle && polarRadius < p.data.radius);
-                });
-                if (closestPoint) {
-                    result.push({
-                        data: closestPoint.data.series.data,
-                        series: closestPoint.data.series,
-                        closest: true,
-                    });
-                }
-                break;
-            }
-            case 'treemap': {
-                const data = list;
-                const closestPoint = (_c = data[0]) === null || _c === void 0 ? void 0 : _c.leaves.find((l) => {
-                    return (pointerX >= l.x0 && pointerX <= l.x1 && pointerY >= l.y0 && pointerY <= l.y1);
-                });
-                if (closestPoint) {
-                    result.push({
-                        data: closestPoint.data,
-                        series: data[0].series,
-                        closest: true,
-                    });
-                }
-                break;
-            }
-            case 'heatmap': {
-                const data = list;
-                const closestPoint = (_d = data[0]) === null || _d === void 0 ? void 0 : _d.items.find((cell) => {
-                    return (pointerX >= cell.x &&
-                        pointerX <= cell.x + cell.width &&
-                        pointerY >= cell.y &&
-                        pointerY <= cell.y + cell.height);
-                });
-                if (closestPoint) {
-                    result.push({
-                        data: closestPoint.data,
-                        series: data[0].series,
-                        closest: true,
-                    });
-                }
-                break;
-            }
-            case 'sankey': {
-                const [data] = list;
-                const closestLink = data.links.find((d) => {
-                    var _a;
-                    return isInsidePath({
-                        path: (_a = d.path) !== null && _a !== void 0 ? _a : '',
-                        strokeWidth: d.strokeWidth,
-                        point: [pointerX, pointerY],
-                        width: boundsWidth,
-                        height: boundsHeight,
-                    });
-                });
-                if (closestLink) {
-                    result.push({
-                        data: closestLink.source,
-                        target: closestLink.target,
-                        series: data.series,
-                        closest: true,
-                    });
-                }
-                break;
-            }
-            case 'radar': {
-                const [radarData] = list;
-                const radius = getRadius({ center: radarData.center, pointer: [pointerX, pointerY] });
-                if (radius <= radarData.radius) {
-                    const radarShapes = radarData.shapes.filter((shape) => isInsidePath({
-                        path: shape.path,
-                        point: [pointerX, pointerY],
-                        width: boundsWidth,
-                        height: boundsHeight,
-                        strokeWidth: shape.borderWidth,
-                    }));
-                    const points = radarShapes.map((shape) => shape.points).flat();
-                    const delaunayX = Delaunay.from(points, (d) => d.position[0], (d) => d.position[1]);
-                    const closestPoint = points[delaunayX.find(pointerX, pointerY)];
-                    if (closestPoint) {
-                        radarData.shapes.forEach((shape) => {
-                            result.push({
-                                data: shape.points[closestPoint.index].data,
-                                series: shape.series,
-                                category: shape.series.categories[closestPoint.index],
-                                closest: shape.series === closestPoint.series,
-                            });
-                        });
-                    }
-                }
-                break;
-            }
-            case 'funnel': {
-                const data = list;
-                const closestPoint = (_e = data[0]) === null || _e === void 0 ? void 0 : _e.items.find((item) => {
-                    return (pointerX >= item.x &&
-                        pointerX <= item.x + item.width &&
-                        pointerY >= item.y &&
-                        pointerY <= item.y + item.height);
-                });
-                if (closestPoint) {
-                    result.push({
-                        data: closestPoint.data,
-                        series: closestPoint.series,
-                        closest: true,
-                    });
-                }
-                break;
-            }
-            case 'x-range': {
-                const data = list;
-                const pointsInXRange = data.filter((d) => pointerX >= d.x &&
-                    pointerX <= d.x + d.width &&
-                    pointerY >= d.y &&
-                    pointerY <= d.y + d.height);
-                if (pointsInXRange.length === 0) {
-                    break;
-                }
-                const closestByX = pointsInXRange.length === 1
-                    ? pointsInXRange[0]
-                    : sort(pointsInXRange, (d) => Math.abs(d.x + d.width / 2 - pointerX))[0];
-                result.push(...pointsInXRange.map((d) => ({
-                    data: d.data,
-                    series: d.series,
-                    closest: d === closestByX,
-                })));
-                break;
-            }
+    for (const [seriesType, list] of Object.entries(groups)) {
+        const fn = tooltipFnByType[seriesType];
+        if (!fn) {
+            continue;
+        }
+        const { chunks, xLookupPoints: seriesXLookupPoints } = fn({
+            data: list,
+            position,
+            boundsWidth,
+            boundsHeight,
+        });
+        result.push(...chunks);
+        if (seriesXLookupPoints) {
+            xLookupPoints.push(...seriesXLookupPoints);
         }
-    });
-    if (closestPointsByXValue.length) {
-        result.push(...getClosestPointsByXValue(pointerX, pointerY, closestPointsByXValue));
     }
-    return result;
-}
-function isInsidePath(args) {
-    const { path, point, width, height, strokeWidth } = args;
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d');
-    if (ctx) {
-        ctx.lineWidth = strokeWidth;
-        const path2D = new Path2D(path);
-        ctx.stroke(path2D);
-        return ctx.isPointInPath(path2D, ...point) || ctx.isPointInStroke(path2D, ...point);
+    if (xLookupPoints.length) {
+        result.push(...getClosestPointsByXValue(pointerX, pointerY, xLookupPoints));
     }
-    return null;
-}
-function getRadius(args) {
-    const { pointer, center } = args;
-    const x = pointer[0] - center[0];
-    const y = pointer[1] - center[1];
-    const polarRadius = Math.sqrt(x * x + y * y);
-    return polarRadius;
+    return result;
 }

package/dist/esm/core/utils/tooltip-helpers.d.ts

@@ -0,0 +1,43 @@
+import type { ChartSeries, ChartSeriesData, MeaningfulAny, TooltipDataChunk } from '../../types';
+export type ShapePoint = {
+    x: number;
+    y0: number;
+    y1: number;
+    data: ChartSeriesData;
+    series: ChartSeries;
+    subTotal?: number;
+    sourceX?: number;
+};
+export interface GetTooltipDataArgs<TShapeData = unknown> {
+    data: TShapeData[];
+    position: [number, number];
+    boundsWidth: number;
+    boundsHeight: number;
+}
+export interface GetTooltipDataResult {
+    chunks: TooltipDataChunk[];
+    xLookupPoints?: ShapePoint[];
+}
+export type GetTooltipDataFn = (args: GetTooltipDataArgs<MeaningfulAny>) => GetTooltipDataResult;
+export declare function getClosestYIndex(items: ShapePoint[], y: number): number;
+export declare function getClosestPointsByXValue(x: number, y: number, points: ShapePoint[]): {
+    closest: boolean;
+    x: number;
+    y0: number;
+    y1: number;
+    data: ChartSeriesData;
+    series: ChartSeries;
+    subTotal?: number;
+    sourceX?: number;
+}[];
+export declare function isInsidePath(args: {
+    path: string;
+    point: [number, number];
+    width: number;
+    height: number;
+    strokeWidth: number;
+}): boolean | null;
+export declare function getRadius(args: {
+    pointer: [number, number];
+    center: [number, number];
+}): number;

package/dist/esm/core/utils/tooltip-helpers.js

@@ -0,0 +1,72 @@
+import { bisector, sort } from 'd3-array';
+import get from 'lodash/get';
+import groupBy from 'lodash/groupBy';
+export function getClosestYIndex(items, y) {
+    var _a, _b, _c, _d;
+    let closestYIndex = -1;
+    if (y < ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
+        closestYIndex = 0;
+    }
+    else if (y > ((_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
+        closestYIndex = items.length - 1;
+    }
+    else {
+        closestYIndex = items.findIndex((p) => y > p.y0 && y < p.y1);
+        if (closestYIndex === -1) {
+            const sortedY = sort(items.map((p, index) => ({ index, y: p.y1 + (p.y0 - p.y1) / 2 })), (p) => p.y);
+            const sortedYIndex = bisector((p) => p.y).center(sortedY, y);
+            closestYIndex = (_d = (_c = sortedY[sortedYIndex]) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : -1;
+        }
+    }
+    return closestYIndex;
+}
+export function getClosestPointsByXValue(x, y, points) {
+    var _a;
+    const sorted = sort(points, (p) => p.x);
+    const closestXIndex = bisector((p) => p.x).center(sorted, x);
+    if (sorted.length === 0 || closestXIndex === -1) {
+        return [];
+    }
+    const closestX = Math.round(sorted[closestXIndex].x);
+    const filtered = points.filter((p) => Math.round(p.x) === closestX);
+    const groupedBySeries = Object.values(groupBy(filtered, (p) => get(p.series, 'id'))).map((items) => {
+        const sortedByY = sort(items, (p) => p.y0);
+        const index = getClosestYIndex(sortedByY, y);
+        return sortedByY[index === -1 ? 0 : index];
+    });
+    const closestPoints = sort(groupedBySeries, (p) => p.y0);
+    const pointsWithSourceX = closestPoints.filter((p) => p.sourceX !== undefined);
+    const uniqueSourceX = new Set(pointsWithSourceX.map((p) => p.sourceX));
+    if (pointsWithSourceX.length > 1 && uniqueSourceX.size > 1) {
+        const sortedBySourceX = sort(pointsWithSourceX, (p) => { var _a; return (_a = p.sourceX) !== null && _a !== void 0 ? _a : 0; });
+        const closestSourceXIdx = bisector((p) => { var _a; return (_a = p.sourceX) !== null && _a !== void 0 ? _a : 0; }).center(sortedBySourceX, x);
+        const closestSourceX = (_a = sortedBySourceX[closestSourceXIdx]) === null || _a === void 0 ? void 0 : _a.sourceX;
+        const candidates = closestPoints.filter((p) => p.sourceX === undefined || p.sourceX === closestSourceX);
+        const sortedCandidates = sort(candidates, (p) => p.y0);
+        const winnerIdx = getClosestYIndex(sortedCandidates, y);
+        const winner = sortedCandidates[winnerIdx === -1 ? 0 : winnerIdx];
+        return closestPoints.map((p) => (Object.assign(Object.assign({}, p), { closest: p === winner })));
+    }
+    const closestYIndex = getClosestYIndex(closestPoints, y);
+    return closestPoints.map((p, i) => (Object.assign(Object.assign({}, p), { closest: i === closestYIndex })));
+}
+export function isInsidePath(args) {
+    const { path, point, width, height, strokeWidth } = args;
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+        ctx.lineWidth = strokeWidth;
+        const path2D = new Path2D(path);
+        ctx.stroke(path2D);
+        return ctx.isPointInPath(path2D, ...point) || ctx.isPointInStroke(path2D, ...point);
+    }
+    return null;
+}
+export function getRadius(args) {
+    const { pointer, center } = args;
+    const x = pointer[0] - center[0];
+    const y = pointer[1] - center[1];
+    return Math.sqrt(x * x + y * y);
+}

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

@@ -5,7 +5,7 @@ import { HtmlLayer } from '../HtmlLayer';
 export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 const b = block('bar-y');
 export function BarYSeriesShapes(args) {
-    const { dispatcher, preparedData: { htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
+    const { dispatcher, preparedData: { htmlLabels: htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {

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

@@ -16,5 +16,5 @@ export const HeatmapSeriesShapes = (args) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

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

@@ -14,5 +14,5 @@ export const SankeySeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

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

@@ -14,5 +14,5 @@ export const TreemapSeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

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

@@ -19,7 +19,7 @@ export const WaterfallSeriesShapes = (args) => {
         return renderWaterfall({ plot: ref.current }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
     }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
-        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
             return { htmlElements: items };
         }

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/dist/esm/plugins/area/index.d.ts

@@ -0,0 +1,3 @@
+import type { SeriesPlugin } from '../../core/series/plugin';
+import type { AreaSeries } from '../../types';
+export declare const areaPlugin: SeriesPlugin<AreaSeries>;

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

@@ -0,0 +1,5 @@
+import { prepareArea } from './prepare';
+export const areaPlugin = {
+    type: 'area',
+    prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareArea({ series: series, seriesOptions, legend, colorScale }),
+};

package/dist/esm/{core/series/prepare-area.d.ts → plugins/area/prepare.d.ts}

@@ -1,10 +1,10 @@
 import type { ScaleOrdinal } from 'd3-scale';
+import type { PreparedAreaSeries, PreparedLegend } from '../../core/series/types';
 import type { AreaSeries, ChartSeriesOptions } from '../../types';
-import type { PreparedAreaSeries, PreparedLegend } from './types';
 export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
-    symbol: `${import("..").SymbolType}`;
+    symbol: `${import("../../core/constants").SymbolType}`;
     borderColor: string;
     borderWidth: number;
     radius: number;

package/dist/esm/{core/series/prepare-area.js → plugins/area/prepare.js}

@@ -1,9 +1,9 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_STYLE, seriesRangeSliderOptionsDefaults } from '../constants';
-import { getUniqId } from '../utils';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
-import { getSeriesStackId, prepareLegendSymbol } from './utils';
+import { DEFAULT_DATALABELS_STYLE, seriesRangeSliderOptionsDefaults } from '../../core/constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from '../../core/series/constants';
+import { getSeriesStackId, prepareLegendSymbol } from '../../core/series/utils';
+import { getUniqId } from '../../core/utils';
 export const DEFAULT_LINE_WIDTH = 1;
 export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: false });
 function prepareMarker(series, seriesOptions) {

package/dist/esm/plugins/bar-x/index.d.ts

@@ -0,0 +1,3 @@
+import type { SeriesPlugin } from '../../core/series/plugin';
+import type { BarXSeries } from '../../types';
+export declare const barXPlugin: SeriesPlugin<BarXSeries>;

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

@@ -0,0 +1,5 @@
+import { prepareBarXSeries } from './prepare';
+export const barXPlugin = {
+    type: 'bar-x',
+    prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareBarXSeries({ series: series, seriesOptions, legend, colorScale }),
+};

package/dist/{cjs/core/series/prepare-bar-x.d.ts → esm/plugins/bar-x/prepare.d.ts}

@@ -1,6 +1,6 @@
 import type { ScaleOrdinal } from 'd3-scale';
+import type { PreparedLegend, PreparedSeries } from '../../core/series/types';
 import type { BarXSeries, ChartSeriesOptions } from '../../types';
-import type { PreparedLegend, PreparedSeries } from './types';
 type PrepareBarXSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
     series: BarXSeries[];

package/dist/{cjs/core/series/prepare-bar-x.js → esm/plugins/bar-x/prepare.js}

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
-import { DEFAULT_DATALABELS_STYLE, seriesRangeSliderOptionsDefaults } from '../constants';
-import { getUniqId } from '../utils';
-import { DEFAULT_DATALABELS_PADDING } from './constants';
-import { getSeriesStackId, prepareLegendSymbol } from './utils';
+import { DEFAULT_DATALABELS_STYLE, seriesRangeSliderOptionsDefaults } from '../../core/constants';
+import { DEFAULT_DATALABELS_PADDING } from '../../core/series/constants';
+import { getSeriesStackId, prepareLegendSymbol } from '../../core/series/utils';
+import { getUniqId } from '../../core/utils';
 function prepareSeriesData(series) {
     var _a;
     const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';

package/dist/esm/plugins/bar-y/index.d.ts

@@ -0,0 +1,3 @@
+import type { SeriesPlugin } from '../../core/series/plugin';
+import type { BarYSeries } from '../../types';
+export declare const barYPlugin: SeriesPlugin<BarYSeries>;

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

@@ -0,0 +1,5 @@
+import { prepareBarYSeries } from './prepare';
+export const barYPlugin = {
+    type: 'bar-y',
+    prepareSeries: ({ series, seriesOptions, legend, colorScale }) => prepareBarYSeries({ series: series, seriesOptions, legend, colorScale }),
+};