@gravity-ui/charts 1.43.1 → 1.45.0

package/dist/cjs/core/types/chart/series.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { MeaningfulAny } from '../misc';
+import type { ChartAnnotationSeriesOptions } from './annotation';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
@@ -15,8 +16,9 @@ import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
-export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T> | HeatmapSeries<T> | FunnelSeries<T>;
-export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T> | HeatmapSeriesData<T> | FunnelSeriesData<T>;
+import type { XRangeSeries, XRangeSeriesData } from './x-range';
+export type ChartSeries<T = MeaningfulAny> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T> | SankeySeries<T> | RadarSeries<T> | HeatmapSeries<T> | FunnelSeries<T> | XRangeSeries<T>;
+export type ChartSeriesData<T = MeaningfulAny> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T> | SankeySeriesData<T> | RadarSeriesData<T> | HeatmapSeriesData<T> | FunnelSeriesData<T> | XRangeSeriesData<T>;
 export interface DataLabelRendererData<T = MeaningfulAny> {
     data: ChartSeriesData<T>;
 }
@@ -100,6 +102,8 @@ export interface ChartSeriesOptions {
             hover?: BasicHoverState;
             inactive?: BasicInactiveState;
         };
+        /** Default annotation settings for all bar-x data points */
+        annotation?: ChartAnnotationSeriesOptions;
     };
     'bar-y'?: {
         /**
@@ -211,6 +215,8 @@ export interface ChartSeriesOptions {
          * @default 'round' when dashStyle is not 'solid', 'unset' when dashStyle is not 'solid'
          */
         linejoin?: `${LineJoin}`;
+        /** Default annotation settings for all line data points */
+        annotation?: ChartAnnotationSeriesOptions;
     };
     area?: {
         /**
@@ -230,6 +236,8 @@ export interface ChartSeriesOptions {
         };
         /** Options for the point markers of line series */
         marker?: PointMarkerOptions;
+        /** Default annotation settings for all area data points */
+        annotation?: ChartAnnotationSeriesOptions;
     };
     treemap?: {
         /** Options for the series states that provide additional styling information to the series. */
@@ -291,6 +299,32 @@ export interface ChartSeriesOptions {
             hover?: BasicHoverState;
         };
     };
+    'x-range'?: {
+        /**
+         * The corner radius of the border surrounding each bar.
+         * @default 0
+         */
+        borderRadius?: number;
+        /**
+         * The width of the border surrounding each bar.
+         * @default 0
+         */
+        borderWidth?: number;
+        /**
+         * The color of the border surrounding each bar.
+         */
+        borderColor?: string;
+        /**
+         * The dash style of the border surrounding each bar.
+         * @default 'Solid'
+         */
+        borderDashStyle?: DashStyle;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
 }
 export type ChartSeriesRangeSliderOptions = {
     /**

package/dist/cjs/core/types/chart/tooltip.d.ts

@@ -15,6 +15,7 @@ import type { SankeySeries, SankeySeriesData } from './sankey';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
 import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
+import type { XRangeSeries, XRangeSeriesData } from './x-range';
 export interface TooltipDataChunkBarX<T = MeaningfulAny> {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -46,6 +47,7 @@ export interface TooltipDataChunkLine<T = MeaningfulAny> {
         id: string;
         name: string;
     };
+    closest?: boolean;
 }
 export interface TooltipDataChunkArea<T = MeaningfulAny> {
     data: AreaSeriesData<T>;
@@ -87,7 +89,11 @@ export interface TooltipDataChunkFunnel<T = MeaningfulAny> {
         name: string;
     };
 }
-export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T> | TooltipDataChunkRadar<T> | TooltipDataChunkHeatmap<T> | TooltipDataChunkFunnel<T>) & {
+export interface TooltipDataChunkXRange<T = MeaningfulAny> {
+    data: XRangeSeriesData<T>;
+    series: XRangeSeries<T>;
+}
+export type TooltipDataChunk<T = MeaningfulAny> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkSankey<T> | TooltipDataChunkWaterfall<T> | TooltipDataChunkRadar<T> | TooltipDataChunkHeatmap<T> | TooltipDataChunkFunnel<T> | TooltipDataChunkXRange<T>) & {
     closest?: boolean;
 };
 export interface ChartTooltipRendererArgs<T = MeaningfulAny> {

package/dist/cjs/core/types/chart/x-range.d.ts

@@ -0,0 +1,59 @@
+import type { DashStyle, SERIES_TYPE } from '../../constants';
+import type { MeaningfulAny } from '../misc';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
+export interface XRangeSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
+    /**
+     * The start value of the bar on the x-axis. Can be a numeric or timestamp value.
+     */
+    x0: number | string;
+    /**
+     * The end value of the bar on the x-axis. Can be a numeric or timestamp value.
+     */
+    x1: number | string;
+    /**
+     * The `y` value. Depending on the context it may represent:
+     * - a category value (for `category` y axis). If string, it is the category itself. If number, it is the index in `yAxis[0].categories`.
+     * - a numeric value (for `linear` y axis)
+     */
+    y?: string | number;
+    /** Individual color for the bar. Overrides the series color. */
+    color?: string;
+    /** Data label value. If not specified, the series name is used. */
+    label?: string | number;
+    /** Individual opacity for the bar. */
+    opacity?: number;
+}
+export interface XRangeSeries<T = MeaningfulAny> extends BaseSeries {
+    type: typeof SERIES_TYPE.XRange;
+    data: XRangeSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** Individual opacity for the entire series. */
+    opacity?: number | null;
+    /**
+     * The corner radius of the border surrounding each bar.
+     * @default 0
+     */
+    borderRadius?: number;
+    /**
+     * The width of the border surrounding each bar.
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * The color of the border surrounding each bar.
+     */
+    borderColor?: string;
+    /**
+     * The dash style of the border surrounding each bar.
+     * @default 'Solid'
+     */
+    borderDashStyle?: DashStyle;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: BaseSeriesLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+}

package/dist/cjs/core/types/chart/x-range.js

@@ -0,0 +1 @@
+export {};

package/dist/cjs/core/types/chart/zoom.d.ts

@@ -18,7 +18,7 @@ export interface ChartZoom {
      *
      * Supported zoom types by series type:
      * - `Area`, `Line`, `Scatter`: `x`, `y`, `xy`
-     * - `BarX`: `x`
+     * - `BarX`, `XRange`: `x`
      * - `BarY`: `y`
      *
      * Default zoom type by series type:

package/dist/cjs/core/types/index.d.ts

@@ -7,6 +7,7 @@ import type { ChartTitle } from './chart/title';
 import type { ChartTooltip } from './chart/tooltip';
 import type { MeaningfulAny } from './misc';
 export * from './misc';
+export * from './chart/annotation';
 export * from './chart/axis';
 export * from './chart/base';
 export * from './chart/chart';
@@ -30,6 +31,7 @@ export * from './chart/radar';
 export * from './chart/heatmap';
 export * from './chart/funnel';
 export * from './chart/brush';
+export * from './chart/x-range';
 export interface ChartData<T = MeaningfulAny> {
     /**
      * General options for the chart.

package/dist/cjs/core/types/index.js

@@ -1,4 +1,5 @@
 export * from './misc';
+export * from './chart/annotation';
 export * from './chart/axis';
 export * from './chart/base';
 export * from './chart/chart';
@@ -22,3 +23,4 @@ export * from './chart/radar';
 export * from './chart/heatmap';
 export * from './chart/funnel';
 export * from './chart/brush';
+export * from './chart/x-range';

package/dist/cjs/core/utils/axis/x-axis.js

@@ -12,7 +12,15 @@ function getTicksCount(args) {
     if (series) {
         const xDataSet = new Set();
         series === null || series === void 0 ? void 0 : series.forEach((item) => {
-            if (isSeriesWithNumericalXValues(item)) {
+            if (item.type === 'x-range') {
+                item.data.forEach((d) => {
+                    if (d.x0 !== null && d.x1 !== null) {
+                        xDataSet.add(d.x0);
+                        xDataSet.add(d.x1);
+                    }
+                });
+            }
+            else if (isSeriesWithNumericalXValues(item)) {
                 item.data.forEach((data) => {
                     xDataSet.add(data.x);
                 });

package/dist/cjs/core/utils/color.js

@@ -22,6 +22,12 @@ export function getDomainForContinuousColorScale(args) {
                 acc.push(...s.data.map((d) => Number(d.y)));
                 break;
             }
+            case 'x-range': {
+                // Use bar duration (x1 - x0) as the color domain value so that
+                // longer bars can be visually distinguished by color intensity.
+                acc.push(...s.data.map((d) => Math.abs(Number(d.x1) - Number(d.x0))));
+                break;
+            }
             default: {
                 throw Error(`The method for calculation a domain for a continuous color scale for the "${s.type}" series is not defined`);
             }

package/dist/cjs/core/utils/common.js

@@ -57,6 +57,16 @@ export const getDomainDataXBySeries = (series) => {
                 acc.push(...getDomainDataForStackedSeries(seriesList, 'y', 'x'));
                 break;
             }
+            case 'x-range': {
+                seriesList.forEach((s) => {
+                    s.data.forEach((d) => {
+                        if (!isNil(d.x0) && !isNil(d.x1)) {
+                            acc.push(d.x0, d.x1);
+                        }
+                    });
+                });
+                break;
+            }
             default: {
                 seriesList.filter(isSeriesWithNumericalXValues).forEach((s) => {
                     acc.push(...s.data.map((d) => d.x));

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

@@ -288,6 +288,25 @@ export function getClosestPoints(args) {
                 }
                 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;
+            }
         }
     });
     if (closestPointsByXValue.length) {

package/dist/cjs/core/utils/text.d.ts

@@ -1,5 +1,13 @@
 import type { Selection } from 'd3-selection';
 import type { BaseTextStyle, MeaningfulAny } from '../../types';
+/**
+ * Approximate ratio of descenders relative to the full font em height.
+ * Based on the Chromium hanging baseline algorithm where hanging offset ≈ ascent × 0.2.
+ * This means ascent ≈ 80% of em height, descenders ≈ 20%.
+ *
+ * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/text_metrics.cc;l=32
+ */
+export declare const DESCENDER_RATIO = 0.2;
 export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number, textWidth?: number): void;
 export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number, textWidth?: number): void;
 export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, MeaningfulAny, unknown>, maxWidth: ((datum: T) => number) | number, currentWidth?: (datum: T) => number): void;

package/dist/cjs/core/utils/text.js

@@ -1,6 +1,14 @@
 import { select } from 'd3-selection';
 import { block } from '../../utils/cn';
 const b = block('chart');
+/**
+ * Approximate ratio of descenders relative to the full font em height.
+ * Based on the Chromium hanging baseline algorithm where hanging offset ≈ ascent × 0.2.
+ * This means ascent ≈ 80% of em height, descenders ≈ 20%.
+ *
+ * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/text_metrics.cc;l=32
+ */
+export const DESCENDER_RATIO = 0.2;
 export function handleOverflowingText(tSpan, maxWidth, textWidth) {
     var _a, _b, _c;
     if (!tSpan) {
@@ -210,7 +218,7 @@ export function getTextSizeFn({ style }) {
         return {
             width: textMetric.width,
             height: textMetric.fontBoundingBoxDescent + textMetric.fontBoundingBoxAscent,
-            hangingOffset: textMetric.fontBoundingBoxAscent * 0.2,
+            hangingOffset: textMetric.fontBoundingBoxAscent * DESCENDER_RATIO,
         };
     };
 }

package/dist/cjs/core/validation/index.js

@@ -265,6 +265,18 @@ function validateStacking({ series }) {
         });
     }
 }
+function validateStackingAreaNullMode({ series }) {
+    const availableStackingValues = ['normal', 'percent'];
+    const invalid = series.find((s) => s.type === 'area' &&
+        availableStackingValues.includes(s.stacking) &&
+        s.nullMode === 'connect');
+    if (invalid) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_stacking-area-connect-null-mode'),
+        });
+    }
+}
 function validateTreemapSeries({ series }) {
     const parentIds = {};
     series.data.forEach((d) => {
@@ -379,6 +391,7 @@ export function validateData(data) {
     }
     validateAxes({ xAxis: data.xAxis, yAxis: data.yAxis });
     validateTooltip({ tooltip: data.tooltip });
+    validateStackingAreaNullMode({ series: data.series.data });
     if (data.series.data.some((s) => isEmpty(s.data))) {
         throw new ChartError({
             code: CHART_ERROR_CODE.INVALID_DATA,

package/dist/cjs/core/zoom/zoom.js

@@ -69,13 +69,30 @@ export function getZoomedSeriesData(args) {
             prevPointInRange = currentPointInRange;
             if (zoomState.x) {
                 const [xMin, xMax] = zoomState.x;
-                const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
-                inXRange = isValueInRange({
-                    axis: xAxis,
-                    value: x,
-                    min: xMin,
-                    max: xMax,
-                });
+                if ('x0' in point && 'x1' in point) {
+                    const isStartInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x0,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    const isEndInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x1,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    inXRange = isStartInRange || isEndInRange;
+                }
+                else {
+                    const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
+                    inXRange = isValueInRange({
+                        axis: xAxis,
+                        value: x,
+                        min: xMin,
+                        max: xMax,
+                    });
+                }
             }
             if (zoomState.y) {
                 const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'

package/dist/cjs/hooks/useShapes/annotation/index.d.ts

@@ -0,0 +1,14 @@
+import type { Selection } from 'd3-selection';
+import type { PreparedAnnotation } from '../../../core/series/types';
+type AnnotationAnchor = {
+    annotation: PreparedAnnotation;
+    x: number;
+    y: number;
+};
+export { type AnnotationAnchor };
+export declare function renderAnnotations(args: {
+    anchors: AnnotationAnchor[];
+    container: Selection<SVGGElement, unknown, null, undefined>;
+    plotHeight: number;
+    plotWidth: number;
+}): void;

package/dist/cjs/hooks/useShapes/annotation/index.js

@@ -0,0 +1,200 @@
+import { select } from 'd3-selection';
+import { DESCENDER_RATIO } from '../../../core/utils/text';
+import { block } from '../../../utils';
+const b = block('annotation');
+const ARROW_WIDTH = 18;
+const ARROW_HEIGHT = 9;
+// Base arrow path pointing downward (for "top" placement).
+// Elliptical arc matching gravity-ui/uikit Popup arrow geometry.
+// uikit builds the arrow from two 28×30 circles ($arrow-circle-width/height) with
+// a 5px inset box-shadow ($arrow-border), clipped in 9×9 wrappers.
+// The visible curve follows the inner edge of the ring:
+// rx = circle_width/2 - (arrow_border - border_width) = 14 - 4 = 10
+// ry = circle_height/2 - (arrow_border - border_width) = 15 - 4 = 11
+const ARROW_RX = 10;
+const ARROW_RY = 11;
+const ARROW_PATH = (() => {
+    const hw = ARROW_WIDTH / 2;
+    const h = ARROW_HEIGHT;
+    return `M ${-hw},0 A ${ARROW_RX} ${ARROW_RY} 0 0 1 0,${h} A ${ARROW_RX} ${ARROW_RY} 0 0 1 ${hw},0 Z`;
+})();
+function getArrowRotation(placement) {
+    switch (placement) {
+        case 'top':
+            return 0;
+        case 'bottom':
+            return 180;
+        case 'right':
+            return 90;
+        case 'left':
+        default:
+            return -90;
+    }
+}
+function clampX(x, width, plotWidth) {
+    return Math.max(0, Math.min(x, plotWidth - width));
+}
+function clampY(y, height, plotHeight) {
+    return Math.max(0, Math.min(y, plotHeight - height));
+}
+function calculateLayout(args) {
+    const { anchorX, anchorY, popupWidth, popupHeight, offset, plotWidth, plotHeight } = args;
+    // Minimum distance from popup edge to arrow center (arrow half-width + border radius clearance)
+    const arrowEdgePadding = ARROW_WIDTH / 2;
+    // Check if anchor falls within popup's horizontal span (for top/bottom placement)
+    function isAnchorInPopupX(popupX) {
+        return (anchorX >= popupX + arrowEdgePadding &&
+            anchorX <= popupX + popupWidth - arrowEdgePadding);
+    }
+    // Check if anchor falls within popup's vertical span (for right/left placement)
+    function isAnchorInPopupY(popupY) {
+        return (anchorY >= popupY + arrowEdgePadding &&
+            anchorY <= popupY + popupHeight - arrowEdgePadding);
+    }
+    // Try top
+    const topY = anchorY - offset - ARROW_HEIGHT - popupHeight;
+    if (topY >= 0) {
+        const popupX = clampX(anchorX - popupWidth / 2, popupWidth, plotWidth);
+        if (isAnchorInPopupX(popupX)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX,
+                popupY: topY,
+                placement: 'top',
+                showArrow: true,
+            };
+        }
+    }
+    // Try bottom
+    const bottomY = anchorY + offset + ARROW_HEIGHT;
+    if (bottomY + popupHeight <= plotHeight) {
+        const popupX = clampX(anchorX - popupWidth / 2, popupWidth, plotWidth);
+        if (isAnchorInPopupX(popupX)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX,
+                popupY: bottomY,
+                placement: 'bottom',
+                showArrow: true,
+            };
+        }
+    }
+    // Try right
+    const rightX = anchorX + offset + ARROW_HEIGHT;
+    if (rightX + popupWidth <= plotWidth) {
+        const popupY = clampY(anchorY - popupHeight / 2, popupHeight, plotHeight);
+        if (isAnchorInPopupY(popupY)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX: rightX,
+                popupY,
+                placement: 'right',
+                showArrow: true,
+            };
+        }
+    }
+    // Try left
+    const leftX = anchorX - offset - ARROW_HEIGHT - popupWidth;
+    if (leftX >= 0) {
+        const popupY = clampY(anchorY - popupHeight / 2, popupHeight, plotHeight);
+        if (isAnchorInPopupY(popupY)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX: leftX,
+                popupY,
+                placement: 'left',
+                showArrow: true,
+            };
+        }
+    }
+    // Fallback: no arrow, popup near anchor (prefer above, then below)
+    const popupX = clampX(anchorX - popupWidth / 2, popupWidth, plotWidth);
+    const fallbackTopY = anchorY - offset - popupHeight;
+    const popupY = fallbackTopY >= 0 ? fallbackTopY : Math.min(plotHeight - popupHeight, anchorY + offset);
+    return {
+        arrowX: anchorX,
+        arrowY: anchorY,
+        popupX,
+        popupY,
+        placement: 'top',
+        showArrow: false,
+    };
+}
+function getArrowTranslate(layout, popupWidth, popupHeight) {
+    const { arrowX, arrowY, popupX, popupY, placement } = layout;
+    // Overlap by 0.5px to avoid subpixel gap between arrow and popup rect
+    const overlap = 0.5;
+    switch (placement) {
+        case 'top':
+            return `translate(${arrowX}, ${popupY + popupHeight - overlap})`;
+        case 'bottom':
+            return `translate(${arrowX}, ${popupY + overlap})`;
+        case 'right':
+            return `translate(${popupX + overlap}, ${arrowY})`;
+        case 'left':
+        default:
+            return `translate(${popupX + popupWidth - overlap}, ${arrowY})`;
+    }
+}
+export function renderAnnotations(args) {
+    const { container, anchors, plotWidth, plotHeight } = args;
+    container.selectAll(`.${b()}`).remove();
+    if (!anchors.length) {
+        return;
+    }
+    const groups = container
+        .selectAll(`.${b()}`)
+        .data(anchors)
+        .join('g')
+        .attr('class', b());
+    groups.each(function (d) {
+        const g = select(this);
+        const { annotation, x: anchorX, y: anchorY } = d;
+        const { label, popup } = annotation;
+        const [paddingV, paddingH] = popup.padding;
+        const popupWidth = label.size.width + paddingH * 2;
+        const popupHeight = label.size.height + paddingV * 2;
+        const layout = calculateLayout({
+            anchorX,
+            anchorY,
+            popupWidth,
+            popupHeight,
+            offset: popup.offset,
+            plotWidth,
+            plotHeight,
+        });
+        // Popup background
+        g.append('rect')
+            .attr('class', b('popup'))
+            .attr('x', layout.popupX)
+            .attr('y', layout.popupY)
+            .attr('width', popupWidth)
+            .attr('height', popupHeight)
+            .attr('rx', popup.borderRadius)
+            .attr('ry', popup.borderRadius)
+            .attr('fill', popup.backgroundColor);
+        // Arrow
+        if (layout.showArrow) {
+            const arrowTranslate = getArrowTranslate(layout, popupWidth, popupHeight);
+            const arrowRotation = getArrowRotation(layout.placement);
+            g.append('path')
+                .attr('class', b('arrow'))
+                .attr('d', ARROW_PATH)
+                .attr('fill', popup.backgroundColor)
+                .attr('transform', `${arrowTranslate} rotate(${arrowRotation})`);
+        }
+        // Text
+        g.append('text')
+            .attr('class', b('text'))
+            .text(label.text)
+            .attr('x', layout.popupX + paddingH)
+            .attr('y', layout.popupY + paddingV + label.size.height * (1 - DESCENDER_RATIO))
+            .style('font-size', label.style.fontSize)
+            .style('font-weight', label.style.fontWeight || '')
+            .style('fill', label.style.fontColor || '');
+    });
+}

package/dist/cjs/hooks/useShapes/area/index.d.ts

@@ -3,6 +3,8 @@ import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedAreaData } from './types';
 type Args = {
+    boundsHeight: number;
+    boundsWidth: number;
     clipPathId: string;
     htmlLayout: HTMLElement | null;
     preparedData: PreparedAreaData[];