@gravity-ui/charts 1.51.7 → 1.52.0

package/dist/cjs/core/shapes/funnel/prepare-data.js

@@ -1,5 +1,5 @@
 import { path } from 'd3-path';
-import { calculateNumericProperty, getFormattedValue, getLabelsSize, getTextSizeFn, } from '../../utils';
+import { calculateNumericProperty, getFormattedValue, getLabelsSize, getTextSizeFn, isPointDataLabelEnabled, } from '../../utils';
 function getLineConnectorPaths(args) {
     const { points } = args;
     const leftPath = path();
@@ -19,7 +19,7 @@ function getAreaConnectorPath(args) {
     return p;
 }
 export async function prepareFunnelData(args) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const { series, boundsWidth, boundsHeight } = args;
     const items = [];
     const svgLabels = [];
@@ -33,75 +33,59 @@ export async function prepareFunnelData(args) {
     })) !== null && _b !== void 0 ? _b : 0;
     const itemHeight = (boundsHeight - connectorHeight * (series.length - 1)) / series.length;
     const getTextSize = getTextSizeFn({ style: series[0].dataLabels.style });
-    const getSegmentY = (index) => {
-        return index * (itemHeight + connectorHeight);
-    };
-    let segmentLeftOffset = 0;
-    let segmentRightOffset = 0;
+    const getSegmentY = (index) => index * (itemHeight + connectorHeight);
+    // measure labels and accumulate max outside-label widths per side.
+    let rawLeftOffset = 0;
+    let rawRightOffset = 0;
+    const labelInfos = [];
     for (let index = 0; index < series.length; index++) {
         const s = series[index];
-        if (s.dataLabels.enabled) {
-            const d = s.data;
-            const labelContent = (_c = d.label) !== null && _c !== void 0 ? _c : getFormattedValue({ value: d.value, format: s.dataLabels.format });
-            const { width, height, hangingOffset } = s.dataLabels.html
-                ? await getLabelsSize({
-                    labels: [labelContent],
-                    style: s.dataLabels.style,
-                    html: true,
-                }).then((size) => ({
-                    width: size.maxWidth,
-                    height: size.maxHeight,
-                    hangingOffset: 0,
-                }))
-                : await getTextSize(labelContent);
-            let x;
-            switch (s.dataLabels.align) {
-                case 'left': {
-                    x = 0;
-                    segmentLeftOffset = Math.max(segmentLeftOffset, width);
-                    break;
-                }
-                case 'right': {
-                    x = boundsWidth - width;
-                    segmentRightOffset = Math.max(segmentRightOffset, width);
-                    break;
-                }
-                case 'center': {
-                    x = boundsWidth / 2 - width / 2;
-                    break;
-                }
-            }
-            const y = getSegmentY(index) + itemHeight / 2 - height / 2 + hangingOffset;
-            if (s.dataLabels.html) {
-                htmlLabels.push({
-                    x,
-                    y,
-                    content: labelContent,
-                    size: { width, height },
-                    style: s.dataLabels.style,
-                });
+        if (!isPointDataLabelEnabled({ data: s.data, series: s })) {
+            labelInfos.push(null);
+            continue;
+        }
+        const d = s.data;
+        const labelContent = (_c = d.label) !== null && _c !== void 0 ? _c : getFormattedValue({ value: d.value, format: s.dataLabels.format });
+        const { width, height, hangingOffset } = s.dataLabels.html
+            ? await getLabelsSize({
+                labels: [labelContent],
+                style: s.dataLabels.style,
+                html: true,
+            }).then((size) => ({
+                width: size.maxWidth,
+                height: size.maxHeight,
+                hangingOffset: 0,
+            }))
+            : await getTextSize(labelContent);
+        labelInfos.push({ text: labelContent, width, height, hangingOffset, series: s });
+        const { inside, align, padding } = s.dataLabels;
+        if (!inside) {
+            // Minimum offset so this label stays within the plot boundary.
+            // Accounts for the fact that narrower segments are already indented from the edge.
+            const ratio = s.data.value / maxValue;
+            const minOffset = (2 * (width + padding) - boundsWidth * (1 - ratio)) / (1 + ratio);
+            if (align === 'left') {
+                rawLeftOffset = Math.max(rawLeftOffset, minOffset);
             }
-            else {
-                svgLabels.push({
-                    x,
-                    y,
-                    text: labelContent,
-                    style: s.dataLabels.style,
-                    size: { width, height, hangingOffset },
-                    textAnchor: 'start',
-                    series: s,
-                });
+            else if (align === 'right') {
+                rawRightOffset = Math.max(rawRightOffset, minOffset);
             }
         }
     }
+    // reserveSpace=true → inset only the labelled side so labels don't overlap segments.
+    // reserveSpace=false → no inset; labels overlap segments.
+    const { reserveSpace } = series[0].dataLabels;
+    const segmentLeftOffset = reserveSpace ? rawLeftOffset : 0;
+    const segmentRightOffset = reserveSpace ? rawRightOffset : 0;
+    // compute shapes and label positions in a single pass.
+    // centerX is constant across all segments — hoist it out of the loop.
     const segmentMaxWidth = boundsWidth - segmentLeftOffset - segmentRightOffset;
-    const isTrapezoid = ((_d = series[0]) === null || _d === void 0 ? void 0 : _d.shape) === 'trapezoid';
+    const isTrapezoid = series[0].shape === 'trapezoid';
+    const centerX = segmentLeftOffset + segmentMaxWidth / 2;
     const getItemWidth = (index) => (segmentMaxWidth * series[index].data.value) / maxValue;
     for (let index = 0; index < series.length; index++) {
         const s = series[index];
-        const d = s.data;
         const itemWidth = getItemWidth(index);
-        const centerX = segmentLeftOffset + segmentMaxWidth / 2;
         const segmentY = getSegmentY(index);
         const isLastSegment = index === series.length - 1;
         const bottomWidth = isTrapezoid && !isLastSegment ? getItemWidth(index + 1) : itemWidth;
@@ -111,7 +95,7 @@ export async function prepareFunnelData(args) {
             [centerX + bottomWidth / 2, segmentY + itemHeight],
             [centerX - bottomWidth / 2, segmentY + itemHeight],
         ];
-        const funnelSegment = {
+        const item = {
             x: centerX - itemWidth / 2,
             y: segmentY,
             width: itemWidth,
@@ -119,22 +103,22 @@ export async function prepareFunnelData(args) {
             points,
             color: s.color,
             series: s,
-            data: d,
+            data: s.data,
             borderColor: '',
             borderWidth: 0,
             cursor: s.cursor,
         };
-        items.push(funnelSegment);
+        items.push(item);
         const prevSeries = series[index - 1];
         const prevItem = items[index - 1];
-        if (prevSeries && prevItem && ((_e = prevSeries.connectors) === null || _e === void 0 ? void 0 : _e.enabled)) {
+        if (prevSeries && prevItem && ((_d = prevSeries.connectors) === null || _d === void 0 ? void 0 : _d.enabled)) {
             // Use the actual bottom corners of the previous segment (points[3]/[2]) so that
             // trapezoid segments (whose bottom edge differs from the top edge) are handled correctly.
             const connectorPoints = [
                 prevItem.points[3],
                 prevItem.points[2],
-                funnelSegment.points[1],
-                funnelSegment.points[0],
+                item.points[1],
+                item.points[0],
             ];
             connectors.push({
                 linePath: getLineConnectorPaths({ points: connectorPoints }),
@@ -147,13 +131,82 @@ export async function prepareFunnelData(args) {
                 dashStyle: prevSeries.connectors.lineDashStyle,
             });
         }
+        const info = labelInfos[index];
+        if (!info)
+            continue;
+        const { text, width, height, hangingOffset } = info;
+        const { anchor, inside, padding } = s.dataLabels;
+        const y = segmentY + itemHeight / 2 - height / 2 + hangingOffset;
+        let x;
+        if (inside) {
+            switch (s.dataLabels.align) {
+                case 'left':
+                    x = item.x + padding;
+                    break;
+                case 'right':
+                    x = item.x + item.width - width - padding;
+                    break;
+                default:
+                    x = item.x + item.width / 2 - width / 2;
+                    break;
+            }
+        }
+        else {
+            switch (s.dataLabels.align) {
+                case 'left': {
+                    const edge = 0;
+                    if (anchor === 'plot') {
+                        x = edge;
+                    }
+                    else {
+                        x = Math.max(edge, item.x - width - padding);
+                    }
+                    break;
+                }
+                case 'right': {
+                    const edge = boundsWidth - width;
+                    if (anchor === 'plot') {
+                        x = edge;
+                    }
+                    else {
+                        x = Math.min(edge, item.x + item.width + padding);
+                    }
+                    break;
+                }
+                default:
+                    x = boundsWidth / 2 - width / 2;
+                    break;
+            }
+        }
+        if (s.dataLabels.html) {
+            htmlLabels.push({
+                x,
+                y,
+                content: text,
+                size: { width, height },
+                style: s.dataLabels.style,
+            });
+        }
+        else {
+            svgLabels.push({
+                x,
+                y,
+                text,
+                style: s.dataLabels.style,
+                size: { width, height, hangingOffset },
+                textAnchor: 'start',
+                series: s,
+            });
+        }
     }
-    const data = {
+    return {
         type: 'funnel',
         items,
         svgLabels,
         htmlLabels,
         connectors,
+        markers: [],
+        getHoverMarkers: () => [],
+        annotations: [],
     };
-    return data;
 }

package/dist/cjs/core/shapes/heatmap/prepare-data.js

@@ -1,4 +1,4 @@
-import { getDomainDataXBySeries, getDomainDataYBySeries, getFormattedValue, getLabelsSize, getTextSizeFn, getTextWithElipsis, isBandScale, } from '../../utils';
+import { getDomainDataXBySeries, getDomainDataYBySeries, getFormattedValue, getLabelsSize, getTextSizeFn, getTextWithElipsis, isBandScale, isPointDataLabelEnabled, shouldPrepareSeriesDataLabels, } from '../../utils';
 import { getBandSize } from '../../utils/band-size';
 export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale, }) {
     var _a, _b, _c, _d, _e;
@@ -44,10 +44,13 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
     }, []);
     const svgDataLabels = [];
     const htmlDataLabels = [];
-    if (series.dataLabels.enabled) {
+    if (shouldPrepareSeriesDataLabels(series)) {
         if (series.dataLabels.html) {
             for (let i = 0; i < heatmapItems.length; i++) {
                 const item = heatmapItems[i];
+                if (!isPointDataLabelEnabled({ data: item.data, series })) {
+                    continue;
+                }
                 const labelContent = (_c = item.data.label) !== null && _c !== void 0 ? _c : getFormattedValue({ value: item.data.value, format: series.dataLabels.format });
                 if (labelContent) {
                     const dataLabelsStyle = Object.assign(Object.assign({}, series.dataLabels.style), { maxWidth: `${item.width}px`, maxHeight: `${item.height}px`, overflow: 'hidden' });
@@ -71,6 +74,9 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
             const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
             for (let i = 0; i < heatmapItems.length; i++) {
                 const item = heatmapItems[i];
+                if (!isPointDataLabelEnabled({ data: item.data, series })) {
+                    continue;
+                }
                 const labelContent = (_e = item.data.label) !== null && _e !== void 0 ? _e : getFormattedValue({ value: item.data.value, format: series.dataLabels.format });
                 if (labelContent) {
                     const size = await getTextSize(labelContent);
@@ -97,6 +103,9 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
         htmlLabels: htmlDataLabels,
         items: heatmapItems,
         labels: svgDataLabels,
+        markers: [],
+        getHoverMarkers: () => [],
+        annotations: [],
     };
     return preparedData;
 }

package/dist/cjs/core/shapes/line/prepare-data.js

@@ -1,5 +1,6 @@
 import { prepareAnnotation } from '../../series/prepare-annotation';
 import { filterOverlappingLabels, preparePointDataLabels } from '../../utils';
+import { buildHoverMarkerGetter } from '../marker';
 import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../utils';
 export const prepareLineData = async (args) => {
     var _a, _b, _c, _d, _e, _f;
@@ -58,44 +59,53 @@ export const prepareLineData = async (args) => {
             svgLabels = filterOverlappingLabels(svgLabels, otherLayers.map((l) => l.svgLabels).flat());
             htmlElements = filterOverlappingLabels(htmlElements, otherLayers.map((l) => l.htmlLabels).flat());
         }
-        let markers = [];
+        markHiddenPointsOutOfYRange({
+            points,
+            yScale: seriesYScale,
+            yAxisTop,
+            axisMin: seriesYAxis.min,
+            axisMax: seriesYAxis.max,
+            getDataY: (p) => p.data.y,
+        });
+        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((result, p) => {
-                var _a, _b, _c, _d;
-                if (p.y === null || p.x === null) {
+        const markers = s.marker.states.normal.enabled || hasPerPointNormalMarkers
+            ? points.reduce((result, p) => {
+                var _a, _b, _c, _d, _e;
+                if (p.y === null || p.x === null || p.hiddenInLine) {
                     return result;
                 }
                 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) {
                     result.push({
-                        point: p,
+                        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 result;
-            }, []);
-        }
+            }, [])
+            : [];
         const annotations = points.reduce((result, p) => {
             if (p.annotation && p.x !== null && p.y !== null) {
                 result.push({ annotation: p.annotation, x: p.x, y: p.y });
             }
             return result;
         }, []);
-        markHiddenPointsOutOfYRange({
-            points,
-            yScale: seriesYScale,
-            yAxisTop,
-            axisMin: seriesYAxis.min,
-            axisMax: seriesYAxis.max,
-            getDataY: (p) => p.data.y,
-        });
         const result = {
             annotations,
             points,
             markers,
+            getHoverMarkers: buildHoverMarkerGetter(points, s),
             svgLabels: svgLabels,
             series: s,
             hovered: false,

package/dist/cjs/core/shapes/line/renderer.d.ts

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

package/dist/cjs/core/shapes/line/renderer.js

@@ -4,17 +4,12 @@ import { line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { getLineDashArray } from '../../utils';
-import { renderAnnotations } from '../annotation';
 import { renderDataLabels } from '../data-labels';
-import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('line');
 export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
     const plotSvgElement = select(elements.plot);
-    const markersSvgElement = select(elements.markers);
-    const hoverMarkersSvgElement = select(elements.hoverMarkers);
-    const annotationsSvgElement = select(elements.annotations);
     const hoverOptions = get(seriesOptions, 'line.states.hover');
     const inactiveOptions = get(seriesOptions, 'line.states.inactive');
     const line = lineGenerator()
@@ -22,7 +17,6 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
         .x((d) => d.x)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
-    markersSvgElement.selectAll('*').remove();
     const lineSelection = plotSvgElement
         .selectAll('path')
         .data(preparedData)
@@ -44,23 +38,10 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
         data: dataLabels,
         className: b('label'),
     });
-    const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
-    const markerSelection = markersSvgElement
-        .selectAll('marker')
-        .data(markers)
-        .join('g')
-        .call(renderMarker);
-    renderAnnotations({
-        anchors: preparedData.flatMap((d) => d.annotations),
-        container: annotationsSvgElement,
-        plotHeight: elements.boundsHeight,
-        plotWidth: elements.boundsWidth,
-    });
     const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
     const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
     function handleShapeHover(data) {
         const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
-        const selectedDataItems = selected.map((d) => d.data);
         const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
         lineSelection.datum((d, index, list) => {
             const elementSelection = select(list[index]);
@@ -96,62 +77,6 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
                 datum: d,
             });
         });
-        markerSelection.datum((d, index, list) => {
-            const elementSelection = select(list[index]);
-            const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
-            if (d.hovered !== hovered) {
-                d.hovered = hovered;
-                elementSelection.attr('visibility', getMarkerVisibility(d));
-                selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility);
-                selectMarkerSymbol(elementSelection).call(setMarker, hovered ? 'hover' : 'normal');
-            }
-            if (d.point.series.marker.states.normal.enabled) {
-                const isActive = Boolean(!inactiveEnabled ||
-                    !selectedSeriesIds.length ||
-                    selectedSeriesIds.includes(d.point.series.id));
-                setActiveState({
-                    element: list[index],
-                    state: inactiveOptions,
-                    active: isActive,
-                    datum: d,
-                });
-            }
-            return d;
-        });
-        hoverMarkersSvgElement.selectAll('*').remove();
-        if (hoverEnabled && selected.length > 0) {
-            const hoverOnlyMarkers = [];
-            for (const chunk of selected) {
-                const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
-                if (!seriesData) {
-                    continue;
-                }
-                const { series } = seriesData;
-                if (series.marker.states.normal.enabled || !series.marker.states.hover.enabled) {
-                    continue;
-                }
-                const point = seriesData.points.find((p) => p.data === chunk.data);
-                if (!point || point.x === null || point.y === null) {
-                    continue;
-                }
-                hoverOnlyMarkers.push({
-                    point: point,
-                    active: true,
-                    hovered: true,
-                    clipped: false,
-                });
-            }
-            if (hoverOnlyMarkers.length > 0) {
-                hoverMarkersSvgElement
-                    .selectAll('g')
-                    .data(hoverOnlyMarkers)
-                    .join('g')
-                    .call(renderMarker)
-                    .each((_d, i, nodes) => {
-                    selectMarkerSymbol(select(nodes[i])).call(setMarker, 'hover');
-                });
-            }
-        }
     }
     const eventName = `hover-shape.line-${(_b = (_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'unknown'}`;
     dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);

package/dist/cjs/core/shapes/line/types.d.ts

@@ -1,7 +1,7 @@
 import type { LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
-import type { SeriesShapeData } from '../types';
+import type { MarkerItem, SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -15,17 +15,11 @@ export type MarkerPointData = PointData & {
     y: number;
     x: number;
 };
-export type MarkerData = {
-    point: MarkerPointData;
-    active: boolean;
-    hovered: boolean;
-    clipped: boolean;
-};
 export type PreparedLineData = {
     annotations: AnnotationAnchor[];
     id: string;
     points: PointData[];
-    markers: MarkerData[];
+    markers: MarkerItem[];
     series: PreparedLineSeries;
     hovered: boolean;
     active: boolean;

package/dist/cjs/core/shapes/marker.d.ts

@@ -1,5 +1,6 @@
 import type { BaseType, Selection } from 'd3-selection';
 import { SymbolType } from '../constants';
+import type { MarkerItem } from './types';
 export interface BaseMarkerData {
     point: {
         x: number;
@@ -43,3 +44,32 @@ export declare function setMarker<T extends BaseType, D extends BaseMarkerData>(
 export declare function getMarkerSymbol(type: `${SymbolType}` | undefined, radius: number): string | null;
 export declare function selectMarkerHalo<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
 export declare function selectMarkerSymbol<T>(parentSelection: Selection<BaseType, T, null, undefined>): Selection<BaseType, T, null, undefined>;
+export declare function renderMarkers(container: Selection<SVGGElement, unknown, null, undefined>, markers: MarkerItem[]): void;
+export declare function renderHoverMarkers(container: Selection<SVGGElement, unknown, null, undefined>, hoverMarkers: MarkerItem[]): void;
+interface HoverMarkerPoint {
+    data: unknown;
+    x: number | null;
+    y: number | null;
+    hiddenInLine?: boolean;
+    color?: string;
+}
+interface HoverMarkerSeries {
+    id: string;
+    color: string;
+    marker: {
+        states: {
+            normal: {
+                enabled: boolean;
+                symbol: `${SymbolType}`;
+            };
+            hover: {
+                enabled: boolean;
+                radius: number;
+                borderColor: string;
+                borderWidth: number;
+            };
+        };
+    };
+}
+export declare function buildHoverMarkerGetter(points: HoverMarkerPoint[], series: HoverMarkerSeries): (hoveredData: unknown[]) => MarkerItem[];
+export {};

package/dist/cjs/core/shapes/marker.js

@@ -80,3 +80,71 @@ export function selectMarkerHalo(parentSelection) {
 export function selectMarkerSymbol(parentSelection) {
     return parentSelection.select(`.${symbolClassName}`);
 }
+export function renderMarkers(container, markers) {
+    container.selectAll('*').remove();
+    const selection = container
+        .selectAll('g')
+        .data(markers)
+        .join('g')
+        .attr('class', b('wrapper'))
+        .attr('transform', (d) => `translate(${d.cx},${d.cy})`);
+    selection
+        .append('path')
+        .attr('class', b('symbol'))
+        .attr('d', (d) => d.clipped ? null : getMarkerSymbol(d.symbolType, d.radius + d.strokeWidth))
+        .attr('fill', (d) => d.fill)
+        .attr('stroke', (d) => d.stroke)
+        .attr('stroke-width', (d) => d.strokeWidth);
+}
+export function renderHoverMarkers(container, hoverMarkers) {
+    container.selectAll('*').remove();
+    if (hoverMarkers.length === 0)
+        return;
+    container
+        .selectAll('g')
+        .data(hoverMarkers)
+        .join('g')
+        .attr('class', b('wrapper'))
+        .attr('transform', (d) => `translate(${d.cx},${d.cy})`)
+        .append('path')
+        .attr('class', b('symbol'))
+        .attr('d', (d) => getMarkerSymbol(d.symbolType, d.radius + d.strokeWidth))
+        .attr('fill', (d) => d.fill)
+        .attr('stroke', (d) => d.stroke)
+        .attr('stroke-width', (d) => d.strokeWidth);
+}
+export function buildHoverMarkerGetter(points, series) {
+    const { normal: normalState, hover: hoverState } = series.marker.states;
+    if (normalState.enabled || !hoverState.enabled)
+        return () => [];
+    const pointByData = new Map();
+    for (const p of points) {
+        if (p.x !== null && p.y !== null && !p.hiddenInLine) {
+            pointByData.set(p.data, p);
+        }
+    }
+    return (hoveredData) => {
+        var _a;
+        const items = [];
+        for (const rawData of hoveredData) {
+            const point = pointByData.get(rawData);
+            if (!point || point.x === null || point.y === null)
+                continue;
+            items.push({
+                cx: point.x,
+                cy: point.y,
+                radius: hoverState.radius,
+                symbolType: normalState.symbol,
+                fill: (_a = point.color) !== null && _a !== void 0 ? _a : series.color,
+                stroke: hoverState.borderColor,
+                strokeWidth: hoverState.borderWidth,
+                opacity: 1,
+                active: true,
+                clipped: false,
+                series: { id: series.id },
+                data: rawData,
+            });
+        }
+        return items;
+    };
+}