@gravity-ui/charts 1.44.0 → 1.46.0

package/dist/esm/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/esm/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/esm/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 : [];
@@ -178,6 +179,13 @@ 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: barPositionY,
                         width: rectWidth,
@@ -220,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/esm/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/esm/hooks/useShapes/index.js

@@ -62,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);
                 }
@@ -104,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,
@@ -118,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);
                 }
@@ -128,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,
@@ -136,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);
                 }

package/dist/esm/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/esm/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,6 +67,15 @@ 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) {
@@ -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 })));
 };

package/dist/esm/hooks/useShapes/line/prepare-data.d.ts

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

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -1,3 +1,4 @@
+import { prepareAnnotation } from '../../../core/series/prepare-annotation';
 import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 import { getXValue, getYValue } from '../utils';
@@ -15,8 +16,8 @@ async function getHtmlLabel(point, series, xMax) {
     };
 }
 export const prepareLineData = async (args) => {
-    var _a, _b, _c, _d;
-    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { series, seriesOptions, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const acc = [];
@@ -29,21 +30,31 @@ export const prepareLineData = async (args) => {
         if (!seriesYScale) {
             continue;
         }
-        const points = s.data.map((d) => {
+        const annotationOpts = (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.line) === null || _b === void 0 ? void 0 : _b.annotation;
+        const points = [];
+        for (let j = 0; j < s.data.length; j++) {
+            const d = s.data[j];
             const yValue = getYValue({
                 point: d,
                 points: s.data,
                 yAxis: seriesYAxis,
                 yScale: seriesYScale,
             });
-            return {
+            points.push({
                 x: getXValue({ point: d, points: s.data, xAxis, xScale }),
                 y: yValue === null ? null : yAxisTop + yValue,
-                active: true,
+                color: (_d = (_c = d.marker) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : d.color,
                 data: d,
                 series: s,
-            };
-        });
+                annotation: 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,
+            });
+        }
         let htmlElements = [];
         let svgLabels = [];
         if (s.dataLabels.enabled && !isRangeSlider) {
@@ -64,7 +75,7 @@ export const prepareLineData = async (args) => {
                     if (point.y !== null &&
                         point.x !== null &&
                         !isOutsideBounds(point.x, point.y)) {
-                        const labelValue = (_b = point.data.label) !== null && _b !== void 0 ? _b : point.data.y;
+                        const labelValue = (_e = point.data.label) !== null && _e !== void 0 ? _e : point.data.y;
                         const text = getFormattedValue(Object.assign({ value: labelValue }, s.dataLabels));
                         const labelSize = await getTextSize(text);
                         const style = s.dataLabels.style;
@@ -112,7 +123,14 @@ export const prepareLineData = async (args) => {
                 return result;
             }, []);
         }
+        const annotations = points.reduce((result, p) => {
+            if (p.annotation && p.x !== null && p.y !== null) {
+                result.push({ annotation: p.annotation, x: p.x, y: p.y });
+            }
+            return result;
+        }, []);
         const result = {
+            annotations,
             points,
             markers,
             svgLabels: svgLabels,
@@ -122,11 +140,11 @@ export const prepareLineData = async (args) => {
             id: s.id,
             htmlLabels: htmlElements,
             color: s.color,
-            lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
+            lineWidth: (_f = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _f !== void 0 ? _f : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
             linejoin: s.linejoin,
-            opacity: (_d = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _d !== void 0 ? _d : s.opacity,
+            opacity: (_g = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _g !== void 0 ? _g : s.opacity,
         };
         acc.push(result);
     }

package/dist/esm/hooks/useShapes/line/types.d.ts

@@ -1,11 +1,14 @@
 import type { DashStyle, LineCap, LineJoin } from '../../../core/constants';
+import type { PreparedAnnotation } from '../../../core/series/types';
 import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { PreparedLineSeries } from '../../useSeries/types';
+import type { AnnotationAnchor } from '../annotation';
 export type PointData = {
     x: number | null;
     y: number | null;
     data: LineSeriesData;
     series: PreparedLineSeries;
+    annotation?: PreparedAnnotation;
     color?: string;
 };
 export type MarkerPointData = PointData & {
@@ -19,6 +22,7 @@ export type MarkerData = {
     clipped: boolean;
 };
 export type PreparedLineData = {
+    annotations: AnnotationAnchor[];
     id: string;
     points: PointData[];
     markers: MarkerData[];

package/dist/esm/types/chart-ui.d.ts

@@ -24,6 +24,8 @@ export interface HtmlItem {
         height: number;
     };
     style?: BaseTextStyle & React.CSSProperties;
+    /** Coordinate space for positioning: 'plot' uses the plot area origin, 'chart' uses the full chart origin. Defaults to 'plot'. */
+    scope?: 'plot' | 'chart';
 }
 export interface ShapeDataWithLabels {
     svgLabels: LabelData[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -96,7 +96,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.4.0",
+    "@gravity-ui/uikit": "^7.18.0",
     "@playwright/experimental-ct-react": "^1.56.1",
     "@playwright/test": "^1.56.1",
     "@storybook/addon-a11y": "^10.2.16",