@gravity-ui/charts 1.43.1 → 1.45.0

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

@@ -6,15 +6,17 @@ import get from 'lodash/get';
 import { filterOverlappingLabels } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
+import { renderAnnotations } from '../annotation';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('area');
 export const AreaSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const { boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId, } = args;
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
     const hoverMarkersRef = React.useRef(null);
+    const annotationsRef = React.useRef(null);
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
@@ -83,6 +85,15 @@ export const AreaSeriesShapes = (args) => {
             .data(markers)
             .join('g')
             .call(renderMarker);
+        if (annotationsRef.current) {
+            const anchors = preparedData.flatMap((d) => d.annotations);
+            renderAnnotations({
+                anchors,
+                container: select(annotationsRef.current),
+                plotHeight: boundsHeight,
+                plotWidth: 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) {
@@ -189,7 +200,14 @@ export const AreaSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', null);
         };
-    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    }, [
+        allowOverlapDataLabels,
+        boundsHeight,
+        boundsWidth,
+        dispatcher,
+        preparedData,
+        seriesOptions,
+    ]);
     const htmlLayerData = React.useMemo(() => {
         const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
@@ -201,5 +219,6 @@ export const AreaSeriesShapes = (args) => {
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
         React.createElement("g", { ref: hoverMarkersRef }),
+        React.createElement("g", { ref: annotationsRef }),
         React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/area/prepare-data.d.ts

@@ -1,10 +1,11 @@
 import type { PreparedSplit } from '../../../core/layout/split-types';
 import type { ChartScale } from '../../../core/scales/types';
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { PreparedAreaSeries, PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedAreaData } from './types';
 export declare const prepareAreaData: (args: {
     series: PreparedAreaSeries[];
+    seriesOptions?: PreparedSeriesOptions;
     xAxis: PreparedXAxis;
     xScale: ChartScale;
     yAxis: PreparedYAxis[];

package/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -1,6 +1,7 @@
-import { group, min } from 'd3-array';
+import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
+import { prepareAnnotation } from '../../../core/series/prepare-annotation';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 import { getXValue, getYValue } from '../utils';
@@ -27,7 +28,7 @@ function getXValues(series, xAxis, xScale) {
             return acc;
         }, []);
     }
-    return Array.from(xValues);
+    return sort(Array.from(xValues), (d) => d[1]);
 }
 async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
     var _a;
@@ -76,8 +77,8 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBoun
     return { svgLabels, htmlLabels };
 }
 export const prepareAreaData = async (args) => {
-    var _a, _b, _c, _d;
-    const { series, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider } = args;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const result = [];
@@ -165,15 +166,25 @@ export const prepareAreaData = async (args) => {
                         : d.x);
                     return m.set(key, d);
                 }, new Map());
-                const points = xValues.reduce((pointsAcc, [x, xValue], index) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h;
-                    const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
+                const annotationOpts = (_d = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.area) === null || _d === void 0 ? void 0 : _d.annotation;
+                const points = [];
+                for (let xIdx = 0; xIdx < xValues.length; xIdx++) {
+                    const [x, xValue] = xValues[xIdx];
+                    const rawData = seriesData.get(x);
+                    const d = rawData !== null && rawData !== void 0 ? rawData : {
                         x,
                         y: 0,
                     };
-                    let yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
-                    if (s.nullMode === 'connect' && yDataValue === null) {
-                        return pointsAcc;
+                    let yDataValue = (_e = d.y) !== null && _e !== void 0 ? _e : null;
+                    const pointAnnotation = d.annotation && !isRangeSlider
+                        ? await prepareAnnotation({
+                            annotation: d.annotation,
+                            optionsLabel: annotationOpts === null || annotationOpts === void 0 ? void 0 : annotationOpts.label,
+                            optionsPopup: annotationOpts === null || annotationOpts === void 0 ? void 0 : annotationOpts.popup,
+                        })
+                        : undefined;
+                    if (s.nullMode === 'connect' && (yDataValue === null || !rawData)) {
+                        continue;
                     }
                     if (yDataValue && isPercentStacking) {
                         yDataValue = Number(yDataValue) * ratio[x];
@@ -187,21 +198,23 @@ export const prepareAreaData = async (args) => {
                     });
                     if (typeof yDataValue === 'number' && yValue !== null) {
                         yValue = round(yValue, 2);
-                        const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
-                        const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
+                        const prevPoint = seriesData.get((_f = xValues[xIdx - 1]) === null || _f === void 0 ? void 0 : _f[0]);
+                        const nextPoint = seriesData.get((_g = xValues[xIdx + 1]) === null || _g === void 0 ? void 0 : _g[0]);
                         const currentPointStackHeight = Math.abs(yMin - yValue);
                         if (yDataValue >= 0) {
                             const positiveStackHeights = positiveStackValues.get(x);
-                            let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
-                            let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
+                            let prevSectionStackHeight = (_h = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _h !== void 0 ? _h : 0;
+                            let nextSectionStackHeight = (_j = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _j !== void 0 ? _j : 0;
                             const point = {
                                 y0: yAxisTop + yMin - prevSectionStackHeight,
                                 x: xValue,
                                 y: yAxisTop + yValue - prevSectionStackHeight,
+                                color: (_l = (_k = d.marker) === null || _k === void 0 ? void 0 : _k.color) !== null && _l !== void 0 ? _l : d.color,
                                 data: d,
                                 series: s,
+                                annotation: pointAnnotation,
                             };
-                            pointsAcc.push(point);
+                            points.push(point);
                             if (prevSectionStackHeight !== nextSectionStackHeight) {
                                 const point2 = {
                                     y0: yAxisTop + yMin - nextSectionStackHeight,
@@ -210,7 +223,7 @@ export const prepareAreaData = async (args) => {
                                     data: d,
                                     series: s,
                                 };
-                                pointsAcc.push(point2);
+                                points.push(point2);
                                 if (isPercentStacking) {
                                     const newYValue = yAxisTop +
                                         yValue -
@@ -219,11 +232,11 @@ export const prepareAreaData = async (args) => {
                                     point2.y = newYValue;
                                 }
                             }
-                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null || s.nullMode === 'zero') {
                                 prevSectionStackHeight =
                                     prevSectionStackHeight + currentPointStackHeight;
                             }
-                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null || s.nullMode === 'zero') {
                                 nextSectionStackHeight =
                                     nextSectionStackHeight + currentPointStackHeight;
                             }
@@ -234,9 +247,9 @@ export const prepareAreaData = async (args) => {
                         }
                         else {
                             const negativeStackHeights = negativeStackValues.get(x);
-                            let prevSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _g !== void 0 ? _g : 0;
-                            let nextSectionStackHeight = (_h = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _h !== void 0 ? _h : 0;
-                            pointsAcc.push({
+                            let prevSectionStackHeight = (_m = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _m !== void 0 ? _m : 0;
+                            let nextSectionStackHeight = (_o = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _o !== void 0 ? _o : 0;
+                            points.push({
                                 y0: yAxisTop + yMin + prevSectionStackHeight,
                                 x: xValue,
                                 y: yAxisTop + yValue + prevSectionStackHeight,
@@ -244,7 +257,7 @@ export const prepareAreaData = async (args) => {
                                 series: s,
                             });
                             if (prevSectionStackHeight !== nextSectionStackHeight) {
-                                pointsAcc.push({
+                                points.push({
                                     y0: yAxisTop + yMin + nextSectionStackHeight,
                                     x: xValue,
                                     y: yAxisTop + yValue + nextSectionStackHeight,
@@ -267,7 +280,7 @@ export const prepareAreaData = async (args) => {
                         }
                     }
                     else {
-                        pointsAcc.push({
+                        points.push({
                             y0: yAxisTop + yMin,
                             x: xValue,
                             y: null,
@@ -275,8 +288,7 @@ export const prepareAreaData = async (args) => {
                             series: s,
                         });
                     }
-                    return pointsAcc;
-                }, []);
+                }
                 let markers = [];
                 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) {
@@ -297,7 +309,14 @@ export const prepareAreaData = async (args) => {
                         return markersAcc;
                     }, []);
                 }
+                const annotations = points.reduce((result, p) => {
+                    if (p.annotation && p.y !== null) {
+                        result.push({ annotation: p.annotation, x: p.x, y: p.y });
+                    }
+                    return result;
+                }, []);
                 seriesStackData.push({
+                    annotations,
                     points,
                     markers,
                     svgLabels: [],
@@ -314,7 +333,7 @@ export const prepareAreaData = async (args) => {
             for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
                 const item = seriesStackData[itemIndex];
                 const currentYAxis = yAxis[item.series.yAxis];
-                const itemYAxisTop = ((_d = split.plots[currentYAxis.plotIndex]) === null || _d === void 0 ? void 0 : _d.top) || 0;
+                const itemYAxisTop = ((_p = split.plots[currentYAxis.plotIndex]) === null || _p === void 0 ? void 0 : _p.top) || 0;
                 if (item.series.dataLabels.enabled && !isRangeSlider) {
                     const labelsData = await prepareDataLabels({
                         series: item.series,

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

@@ -1,11 +1,14 @@
+import type { PreparedAnnotation } from '../../../core/series/types';
 import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
 import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { AnnotationAnchor } from '../annotation';
 export type PointData = {
     y0: number;
     x: number;
     y: number | null;
     data: AreaSeriesData;
     series: PreparedAreaSeries;
+    annotation?: PreparedAnnotation;
     color?: string;
 };
 export type MarkerPointData = PointData & {
@@ -18,6 +21,7 @@ export type MarkerData = {
     clipped: boolean;
 };
 export type PreparedAreaData = {
+    annotations: AnnotationAnchor[];
     id: string;
     points: PointData[];
     markers: MarkerData[];

package/dist/cjs/hooks/useShapes/bar-x/index.d.ts

@@ -5,6 +5,8 @@ import type { PreparedBarXData } from './types';
 export { prepareBarXData } from './prepare-data';
 export * from './types';
 type Args = {
+    boundsHeight: number;
+    boundsWidth: number;
     clipPathId: string;
     htmlLayout: HTMLElement | null;
     preparedData: PreparedBarXData[];

package/dist/cjs/hooks/useShapes/bar-x/index.js

@@ -5,14 +5,16 @@ import get from 'lodash/get';
 import { filterOverlappingLabels } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
+import { renderAnnotations } from '../annotation';
 import { getRectPath } from '../utils';
 export { prepareBarXData } from './prepare-data';
 export * from './types';
 const b = block('bar-x');
 export const BarXSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const { boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId, } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
+    const annotationsRef = React.useRef(null);
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
@@ -65,6 +67,24 @@ export const BarXSeriesShapes = (args) => {
             .style('font-size', (d) => d.style.fontSize)
             .style('font-weight', (d) => d.style.fontWeight || null)
             .style('fill', (d) => d.style.fontColor || null);
+        if (annotationsRef.current) {
+            const anchors = [];
+            for (const d of preparedData) {
+                if (d.annotation) {
+                    anchors.push({
+                        annotation: d.annotation,
+                        x: d.x + d.width / 2,
+                        y: d.y,
+                    });
+                }
+            }
+            renderAnnotations({
+                anchors,
+                container: select(annotationsRef.current),
+                plotHeight: boundsHeight,
+                plotWidth: boundsWidth,
+            });
+        }
         function handleShapeHover(data) {
             hoveredDataRef.current = data;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
@@ -112,7 +132,14 @@ export const BarXSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-x', null);
         };
-    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    }, [
+        allowOverlapDataLabels,
+        boundsHeight,
+        boundsWidth,
+        dispatcher,
+        preparedData,
+        seriesOptions,
+    ]);
     const htmlLayerData = React.useMemo(() => {
         const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
@@ -122,5 +149,6 @@ export const BarXSeriesShapes = (args) => {
     }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
+        React.createElement("g", { ref: annotationsRef }),
         React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -1,5 +1,6 @@
 import { ascending, descending, max, min, reverse, sort } from 'd3-array';
 import get from 'lodash/get';
+import { prepareAnnotation } from '../../../core/series/prepare-annotation';
 import { getDataCategoryValue, getLabelsSize } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../constants';
@@ -35,7 +36,7 @@ async function getLabelData(d, xMax) {
     };
 }
 export const prepareBarXData = async (args) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories) !== null && _a !== void 0 ? _a : [];
@@ -110,8 +111,8 @@ export const prepareBarXData = async (args) => {
             const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
             for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
                 const yValues = stacks[groupItemIndex];
-                let positiveStackHeight = 0;
-                let negativeStackHeight = 0;
+                let positiveStackSum = 0;
+                let negativeStackSum = 0;
                 const stackItems = [];
                 let sortedData = yValues;
                 if (sortKey) {
@@ -144,7 +145,6 @@ export const prepareBarXData = async (args) => {
                     }
                     const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                     const yDataValue = ((_d = yValue.data.y) !== null && _d !== void 0 ? _d : 0);
-                    const y = seriesYScale(yDataValue);
                     let base = 0;
                     if (seriesYAxis.type === 'logarithmic') {
                         const domainData = seriesYScale.domain();
@@ -155,7 +155,22 @@ export const prepareBarXData = async (args) => {
                         base = seriesYScale(0);
                     }
                     const isLastStackItem = yValueIndex === sortedData.length - 1;
-                    const height = Math.abs(base - y);
+                    let height;
+                    let barPositionY;
+                    if (yDataValue > 0) {
+                        const newSum = positiveStackSum + yDataValue;
+                        const topPixel = seriesYScale(newSum);
+                        const bottomPixel = positiveStackSum === 0 ? base : seriesYScale(positiveStackSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + topPixel;
+                    }
+                    else {
+                        const newSum = negativeStackSum + yDataValue;
+                        const bottomPixel = negativeStackSum === 0 ? base : seriesYScale(negativeStackSum);
+                        const topPixel = seriesYScale(newSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + bottomPixel;
+                    }
                     let shapeHeight = height - (stackItems.length ? stackGap : 0);
                     if (shapeHeight < 0) {
                         shapeHeight = height;
@@ -164,10 +179,15 @@ export const prepareBarXData = async (args) => {
                         continue;
                     }
                     const barData = {
+                        annotation: yValue.data.annotation && !isRangeSlider
+                            ? await prepareAnnotation({
+                                annotation: yValue.data.annotation,
+                                optionsLabel: (_g = (_f = seriesOptions['bar-x']) === null || _f === void 0 ? void 0 : _f.annotation) === null || _g === void 0 ? void 0 : _g.label,
+                                optionsPopup: (_j = (_h = seriesOptions['bar-x']) === null || _h === void 0 ? void 0 : _h.annotation) === null || _j === void 0 ? void 0 : _j.popup,
+                            })
+                            : undefined,
                         x,
-                        y: yDataValue > 0
-                            ? yAxisTop + y - positiveStackHeight
-                            : yAxisTop + base + negativeStackHeight,
+                        y: barPositionY,
                         width: rectWidth,
                         height: shapeHeight,
                         _height: height,
@@ -180,14 +200,15 @@ export const prepareBarXData = async (args) => {
                     };
                     stackItems.push(barData);
                     if (yDataValue > 0) {
-                        positiveStackHeight += height;
+                        positiveStackSum += yDataValue;
                     }
                     else {
-                        negativeStackHeight += height;
+                        negativeStackSum += yDataValue;
                     }
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
+                    const positiveStackHeight = stackItems.reduce((sum, item) => sum + item._height, 0);
                     const ratio = plotHeight / positiveStackHeight;
                     stackItems.forEach((item) => {
                         item.height = item._height * ratio;
@@ -207,7 +228,7 @@ export const prepareBarXData = async (args) => {
             barData.x >= xMax ||
             barData.y + barData.height <= 0 ||
             barData.y >= plotHeight;
-        const isZeroValue = ((_f = barData.data.y) !== null && _f !== void 0 ? _f : 0) === 0;
+        const isZeroValue = ((_k = barData.data.y) !== null && _k !== void 0 ? _k : 0) === 0;
         if (barData.series.dataLabels.enabled &&
             !isRangeSlider &&
             (!isBarOutsideBounds || isZeroValue)) {

package/dist/cjs/hooks/useShapes/bar-x/types.d.ts

@@ -1,6 +1,8 @@
+import type { PreparedAnnotation } from '../../../core/series/types';
 import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
 import type { PreparedBarXSeries } from '../../useSeries/types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
+    annotation?: PreparedAnnotation;
     x: number;
     y: number;
     width: number;

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

@@ -19,8 +19,9 @@ import type { PreparedScatterData } from './scatter/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
+import type { PreparedXRangeData } from './x-range';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
 export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
 type Args = {
     boundsWidth: number;

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

@@ -22,6 +22,7 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
+import { XRangeSeriesShapes, prepareXRangeData } from './x-range';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
     return false;
@@ -61,7 +62,7 @@ export async function getShapes(args) {
                         split,
                         isRangeSlider,
                     });
-                    shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, boundsHeight: boundsHeight, boundsWidth: boundsWidth, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
                     layers.push(...preparedData);
                 }
@@ -103,6 +104,7 @@ export async function getShapes(args) {
                 if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                     const preparedData = await prepareLineData({
                         series: chartSeries,
+                        seriesOptions,
                         xAxis,
                         xScale,
                         yAxis,
@@ -117,7 +119,7 @@ export async function getShapes(args) {
                         yAxis,
                         zoomState,
                     });
-                    shapes[index] = (React.createElement(LineSeriesShapes, { key: groupId, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
+                    shapes[index] = (React.createElement(LineSeriesShapes, { key: groupId, boundsHeight: boundsHeight, boundsWidth: boundsWidth, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
                     layers.push(...preparedData);
                 }
@@ -127,6 +129,7 @@ export async function getShapes(args) {
                 if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                     const preparedData = await prepareAreaData({
                         series: chartSeries,
+                        seriesOptions,
                         xAxis,
                         xScale,
                         yAxis,
@@ -135,7 +138,7 @@ export async function getShapes(args) {
                         isOutsideBounds,
                         isRangeSlider,
                     });
-                    shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, boundsHeight: boundsHeight, boundsWidth: boundsWidth, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
                     layers.push(...preparedData);
                 }
@@ -224,6 +227,22 @@ export async function getShapes(args) {
                 shapesData.splice(index, 0, preparedData);
                 break;
             }
+            case SERIES_TYPE.XRange: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareXRangeData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        boundsWidth,
+                        isRangeSlider,
+                    });
+                    shapes[index] = (React.createElement(XRangeSeriesShapes, { key: SERIES_TYPE.XRange, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
             default: {
                 throw new ChartError({
                     message: `The display method is not defined for a series with type "${seriesType}"`,

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

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

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

@@ -6,16 +6,19 @@ import get from 'lodash/get';
 import { getLineDashArray } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
+import { renderAnnotations } from '../annotation';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('line');
 export const LineSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const { boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId, } = args;
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
     const hoverMarkersRef = React.useRef(null);
+    const annotationsRef = React.useRef(null);
     React.useEffect(() => {
+        var _a, _b;
         if (!plotRef.current || !markersRef.current) {
             return () => { };
         }
@@ -64,13 +67,22 @@ export const LineSeriesShapes = (args) => {
             .data(markers)
             .join('g')
             .call(renderMarker);
+        if (annotationsRef.current) {
+            const anchors = preparedData.flatMap((d) => d.annotations);
+            renderAnnotations({
+                anchors,
+                container: select(annotationsRef.current),
+                plotHeight: boundsHeight,
+                plotWidth: 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) {
             hoveredDataRef.current = 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; });
+            const closestChunk = selected.find((d) => d.closest);
             lineSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
                 const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
@@ -106,7 +118,7 @@ export const LineSeriesShapes = (args) => {
             });
             markerSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
+                const hovered = Boolean(hoverEnabled && d.point.data === (closestChunk === null || closestChunk === void 0 ? void 0 : closestChunk.data));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
@@ -129,7 +141,7 @@ export const LineSeriesShapes = (args) => {
             hoverMarkersSvgElement.selectAll('*').remove();
             if (hoverEnabled && selected.length > 0) {
                 const hoverOnlyMarkers = [];
-                for (const chunk of selected) {
+                for (const chunk of selected.filter((c) => c.closest)) {
                     const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
                     if (!seriesData) {
                         continue;
@@ -165,11 +177,12 @@ export const LineSeriesShapes = (args) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', handleShapeHover);
+        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);
         return () => {
-            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
         const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         return { htmlElements: items };
@@ -178,5 +191,6 @@ export const LineSeriesShapes = (args) => {
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
         React.createElement("g", { ref: hoverMarkersRef }),
+        React.createElement("g", { ref: annotationsRef }),
         React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };