@gravity-ui/charts 1.51.7 → 1.52.0

package/dist/esm/core/shapes/area/renderer.js

@@ -4,16 +4,11 @@ import { area as areaGenerator, line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } 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('area');
 export function renderArea(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
     const plotSvgElement = select(elements.plot);
-    const markersSvgElement = select(elements.markers);
-    const hoverMarkersSvgElement = select(elements.hoverMarkers);
-    const annotationsSvgElement = select(elements.annotations);
     const hoverOptions = get(seriesOptions, 'area.states.hover');
     const inactiveOptions = get(seriesOptions, 'area.states.inactive');
     const line = lineGenerator()
@@ -21,7 +16,6 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
         .defined((d) => d.y !== null && !d.hiddenInLine)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
-    markersSvgElement.selectAll('*').remove();
     const shapeSelection = plotSvgElement
         .selectAll('shape')
         .data(preparedData)
@@ -59,23 +53,10 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
         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 === 'area')) || [];
-        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; });
         shapeSelection.datum((d, index, list) => {
             var _a;
@@ -111,62 +92,6 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
                 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.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');
-                });
-            }
-        }
     }
     dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', handleShapeHover);
     return () => {

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

@@ -1,6 +1,6 @@
 import type { AreaSeriesData, LabelData } from '../../../types';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
-import type { SeriesShapeData } from '../types';
+import type { MarkerItem, SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -14,17 +14,11 @@ export type PointData = {
 export type MarkerPointData = PointData & {
     y: number;
 };
-export type MarkerData = {
-    point: MarkerPointData;
-    active: boolean;
-    hovered: boolean;
-    clipped: boolean;
-};
 export type PreparedAreaData = {
     annotations: AnnotationAnchor[];
     id: string;
     points: PointData[];
-    markers: MarkerData[];
+    markers: MarkerItem[];
     color: string;
     opacity: number;
     width: number;

package/dist/esm/core/shapes/bar-x/prepare-data.js

@@ -3,15 +3,12 @@ import get from 'lodash/get';
 import { prepareAnnotation } from '../../series/prepare-annotation';
 import { getSeriesStackId } from '../../series/utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../shapes/bar-constants';
-import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../utils';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn, isPointDataLabelEnabled, } from '../../utils';
 import { getBandSize } from '../../utils/band-size';
 import { getFormattedValue } from '../../utils/format';
 const isSeriesDataValid = (d) => d.y !== null;
 async function getLabelData(d, xMax) {
     var _a;
-    if (!d.series.dataLabels.enabled) {
-        return {};
-    }
     const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     if (d.series.dataLabels.html) {
@@ -209,6 +206,7 @@ export const prepareBarXData = async (args) => {
                                 optionsPopup: (_j = (_h = seriesOptions['bar-x']) === null || _h === void 0 ? void 0 : _h.annotation) === null || _j === void 0 ? void 0 : _j.popup,
                             })
                             : undefined,
+                        annotations: [],
                         x,
                         y: barPositionY,
                         width: rectWidth,
@@ -220,6 +218,8 @@ export const prepareBarXData = async (args) => {
                         htmlLabels: [],
                         svgLabels: [],
                         isLastStackItem,
+                        markers: [],
+                        getHoverMarkers: () => [],
                     };
                     stackItems.push(barData);
                     if (yDataValue > 0) {
@@ -243,6 +243,17 @@ export const prepareBarXData = async (args) => {
             }
         }
     }
+    for (const barData of result) {
+        if (barData.annotation) {
+            barData.annotations = [
+                {
+                    annotation: barData.annotation,
+                    x: barData.x + barData.width / 2,
+                    y: barData.y,
+                },
+            ];
+        }
+    }
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     for (let i = 0; i < result.length; i++) {
@@ -252,9 +263,9 @@ export const prepareBarXData = async (args) => {
             barData.y + barData.height <= 0 ||
             barData.y >= plotHeight;
         const isZeroValue = ((_k = barData.data.y) !== null && _k !== void 0 ? _k : 0) === 0;
-        if (barData.series.dataLabels.enabled &&
-            !isRangeSlider &&
-            (!isBarOutsideBounds || isZeroValue)) {
+        if (!isRangeSlider &&
+            (!isBarOutsideBounds || isZeroValue) &&
+            isPointDataLabelEnabled({ data: barData.data, series: barData.series })) {
             const { svgLabel, htmlLabel } = await getLabelData(barData, xMax);
             if (svgLabel) {
                 barData.svgLabels.push(svgLabel);

package/dist/esm/core/shapes/bar-x/renderer.d.ts

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

package/dist/esm/core/shapes/bar-x/renderer.js

@@ -3,13 +3,11 @@ import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } from '../../utils';
-import { renderAnnotations } from '../annotation';
 import { renderDataLabels } from '../data-labels';
 import { getRectPath } from '../utils';
 const b = block('bar-x');
 export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
     const svgElement = select(elements.plot);
-    const annotationsSvgElement = select(elements.annotations);
     const hoverOptions = get(seriesOptions, 'bar-x.states.hover');
     const inactiveOptions = get(seriesOptions, 'bar-x.states.inactive');
     svgElement.selectAll('*').remove();
@@ -43,22 +41,6 @@ export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDa
         data: dataLabels,
         className: b('label'),
     });
-    const annotationAnchors = [];
-    for (const d of preparedData) {
-        if (d.annotation) {
-            annotationAnchors.push({
-                annotation: d.annotation,
-                x: d.x + d.width / 2,
-                y: d.y,
-            });
-        }
-    }
-    renderAnnotations({
-        anchors: annotationAnchors,
-        container: annotationsSvgElement,
-        plotHeight: elements.boundsHeight,
-        plotWidth: elements.boundsWidth,
-    });
     function handleShapeHover(data) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;

package/dist/esm/core/shapes/bar-x/types.d.ts

@@ -1,8 +1,9 @@
 import type { LabelData, TooltipDataChunkBarX } from '../../../types';
-import type { PreparedAnnotation, PreparedBarXSeries } from '../../series/types';
+import type { AnnotationAnchor, PreparedAnnotation, PreparedBarXSeries } from '../../series/types';
 import type { SeriesShapeData } from '../types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     annotation?: PreparedAnnotation;
+    annotations: AnnotationAnchor[];
     x: number;
     y: number;
     width: number;

package/dist/esm/core/shapes/bar-y/get-tooltip-data.js

@@ -1,15 +1,17 @@
 import { bisector, sort } from 'd3-array';
+import { isPointTooltipEnabled } from '../../utils/tooltip-helpers';
 export function getTooltipData(args) {
     var _a, _b;
     const { data, position } = args;
     const [pointerX, pointerY] = position;
-    const sorted = sort(data, (p) => p.y);
+    const visibleData = data.filter((p) => isPointTooltipEnabled({ data: p.data, series: p.series }));
+    const sorted = sort(visibleData, (p) => p.y);
     const closestYIndex = bisector((p) => p.y + p.height / 2).center(sorted, pointerY);
     const closestYPoint = sorted[closestYIndex];
     if (!closestYPoint) {
         return { chunks: [] };
     }
-    const selectedPoints = data.filter((p) => p.data.y === closestYPoint.data.y);
+    const selectedPoints = visibleData.filter((p) => p.data.y === closestYPoint.data.y);
     const closestPoints = sort(selectedPoints.filter((p) => p.y === closestYPoint.y), (p) => p.x);
     let closestPointXValue;
     const lastPoint = closestPoints[closestPoints.length - 1];

package/dist/esm/core/shapes/bar-y/prepare-data.js

@@ -1,6 +1,6 @@
 import { ascending, descending, sort } from 'd3-array';
 import get from 'lodash/get';
-import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, } from '../../utils';
+import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, isPointDataLabelEnabled, } from '../../utils';
 import { getBarYLayout, groupBarYDataByYValue } from '../../utils/bar-y';
 import { getFormattedValue } from '../../utils/format';
 export async function prepareBarYData(args) {
@@ -14,6 +14,9 @@ export async function prepareBarYData(args) {
             shapes: [],
             labels: [],
             htmlLabels: [],
+            markers: [],
+            getHoverMarkers: () => [],
+            annotations: [],
         };
     }
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
@@ -139,7 +142,7 @@ export async function prepareBarYData(args) {
     for (let i = 0; i < result.length; i++) {
         const prepared = result[i];
         const dataLabels = prepared.series.dataLabels;
-        if (dataLabels.enabled) {
+        if (isPointDataLabelEnabled({ data: prepared.data, series: prepared.series })) {
             const data = prepared.data;
             const content = getFormattedValue(Object.assign({ value: (_a = data.label) !== null && _a !== void 0 ? _a : data.x }, dataLabels));
             const y = prepared.y + prepared.height / 2;
@@ -209,5 +212,8 @@ export async function prepareBarYData(args) {
         shapes: result,
         labels,
         htmlLabels,
+        markers: [],
+        getHoverMarkers: () => [],
+        annotations: [],
     };
 }

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