@gravity-ui/charts 1.47.0 → 1.48.1

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

@@ -1,22 +1,8 @@
 import { prepareAnnotation } from '../../series/prepare-annotation';
-import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../utils';
-import { getFormattedValue } from '../../utils/format';
+import { filterOverlappingLabels, preparePointDataLabels } from '../../utils';
 import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../utils';
-async function getHtmlLabel(point, series, xMax) {
-    var _a;
-    const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
-    const size = await getLabelsSize({ labels: [content], html: true });
-    const width = size.maxWidth;
-    return {
-        x: Math.min(xMax - size.maxWidth, Math.max(0, point.x - width / 2)),
-        y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
-        content,
-        size: { width, height: size.maxHeight },
-        style: series.dataLabels.style,
-    };
-}
 export const prepareLineData = async (args) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const { series, seriesOptions, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
@@ -58,46 +44,15 @@ export const prepareLineData = async (args) => {
         let htmlElements = [];
         let svgLabels = [];
         if (s.dataLabels.enabled && !isRangeSlider) {
-            if (s.dataLabels.html) {
-                const list = await Promise.all(points.reduce((result, p) => {
-                    if (p.y === null || p.x === null || isOutsideBounds(p.x, p.y)) {
-                        return result;
-                    }
-                    result.push(getHtmlLabel(p, s, xMax));
-                    return result;
-                }, []));
-                htmlElements.push(...list);
-            }
-            else {
-                const getTextSize = getTextSizeFn({ style: s.dataLabels.style });
-                for (let index = 0; index < points.length; index++) {
-                    const point = points[index];
-                    if (point.y !== null &&
-                        point.x !== null &&
-                        !isOutsideBounds(point.x, point.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;
-                        const y = Math.max(yAxisTop, point.y -
-                            s.dataLabels.padding -
-                            labelSize.height +
-                            labelSize.hangingOffset);
-                        const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
-                        const labelData = {
-                            text,
-                            x,
-                            y,
-                            style,
-                            size: labelSize,
-                            textAnchor: 'start',
-                            series: s,
-                            active: true,
-                        };
-                        svgLabels.push(labelData);
-                    }
-                }
-            }
+            const labelsData = await preparePointDataLabels({
+                series: s,
+                points,
+                xMax,
+                yAxisTop,
+                isOutsideBounds,
+            });
+            svgLabels = labelsData.svgLabels;
+            htmlElements = labelsData.htmlLabels;
         }
         if (!s.dataLabels.allowOverlap) {
             svgLabels = filterOverlappingLabels(svgLabels, otherLayers.map((l) => l.svgLabels).flat());
@@ -148,11 +103,11 @@ export const prepareLineData = async (args) => {
             id: s.id,
             htmlLabels: htmlElements,
             color: s.color,
-            lineWidth: (_f = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _f !== void 0 ? _f : s.lineWidth,
+            lineWidth: (_e = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _e !== void 0 ? _e : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
             linejoin: s.linejoin,
-            opacity: (_g = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _g !== void 0 ? _g : s.opacity,
+            opacity: (_f = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _f !== void 0 ? _f : s.opacity,
         };
         acc.push(result);
     }

package/dist/esm/core/shapes/scatter/prepare-data.d.ts

@@ -1,12 +1,15 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { PreparedSplit } from '../../layout/split-types';
 import type { ChartScale } from '../../scales/types';
 import type { PreparedScatterSeries } from '../../series/types';
-import type { PreparedScatterData } from './types';
+import type { PreparedScatterShapeData } from './types';
 export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];
     xAxis: PreparedXAxis;
     xScale: ChartScale;
     yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
+    split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
-}): PreparedScatterData[];
+    isRangeSlider?: boolean;
+}): Promise<PreparedScatterShapeData>;

package/dist/esm/core/shapes/scatter/prepare-data.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { getXValue, getYValue } from '../../shapes/utils';
-import { getDataCategoryValue } from '../../utils';
+import { filterOverlappingLabels, getDataCategoryValue, preparePointDataLabels } from '../../utils';
 function getFilteredLinearScatterData(data) {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 }
@@ -32,9 +32,12 @@ function getFilteredCategoryScatterData(args) {
         return xInRange && yInRange;
     });
 }
-export function prepareScatterData(args) {
-    const { series, xAxis, xScale, yAxis, yScale, isOutsideBounds } = args;
-    return series.reduce((acc, s) => {
+export async function prepareScatterData(args) {
+    var _a;
+    const { series, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider } = args;
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax;
+    const markers = series.reduce((acc, s) => {
         const yAxisIndex = get(s, 'yAxis', 0);
         const seriesYAxis = yAxis[yAxisIndex];
         const seriesYScale = yScale[yAxisIndex];
@@ -74,4 +77,40 @@ export function prepareScatterData(args) {
         });
         return acc;
     }, []);
+    const allSvgLabels = [];
+    const allHtmlLabels = [];
+    if (!isRangeSlider) {
+        for (const s of series) {
+            if (!s.dataLabels.enabled) {
+                continue;
+            }
+            const yAxisIndex = get(s, 'yAxis', 0);
+            const seriesYAxis = yAxis[yAxisIndex];
+            const seriesYScale = yScale[yAxisIndex];
+            if (!seriesYScale) {
+                continue;
+            }
+            const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            const seriesPoints = markers
+                .filter((m) => m.point.series.id === s.id && !m.clipped)
+                .map((m) => m.point);
+            const { svgLabels, htmlLabels } = await preparePointDataLabels({
+                series: s,
+                points: seriesPoints,
+                xMax,
+                yAxisTop,
+                isOutsideBounds,
+                anchorYOffset: s.marker.states.normal.radius,
+            });
+            if (s.dataLabels.allowOverlap) {
+                allSvgLabels.push(...svgLabels);
+                allHtmlLabels.push(...htmlLabels);
+            }
+            else {
+                allSvgLabels.push(...filterOverlappingLabels(svgLabels, allSvgLabels));
+                allHtmlLabels.push(...filterOverlappingLabels(htmlLabels, allHtmlLabels));
+            }
+        }
+    }
+    return { markers, svgLabels: allSvgLabels, htmlLabels: allHtmlLabels };
 }

package/dist/esm/core/shapes/scatter/renderer.d.ts

@@ -1,6 +1,6 @@
 import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../series/types';
-import type { PreparedScatterData } from './types';
+import type { PreparedScatterShapeData } from './types';
 export declare function renderScatter(elements: {
     plot: SVGGElement;
-}, preparedData: PreparedScatterData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;
+}, preparedData: PreparedScatterShapeData, seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

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

@@ -1,7 +1,10 @@
 import { select } from 'd3-selection';
 import get from 'lodash/get';
+import { block } from '../../../utils';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../../shapes/marker';
 import { setActiveState, shapeKey } from '../../shapes/utils';
+import { renderDataLabels } from '../data-labels';
+const b = block('scatter');
 export function renderScatter(elements, preparedData, seriesOptions, dispatcher) {
     const svgElement = select(elements.plot);
     const hoverOptions = get(seriesOptions, 'scatter.states.hover');
@@ -9,11 +12,16 @@ export function renderScatter(elements, preparedData, seriesOptions, dispatcher)
     svgElement.selectAll('*').remove();
     const selection = svgElement
         .selectAll('path')
-        .data(preparedData, shapeKey)
+        .data(preparedData.markers, shapeKey)
         .join('g')
         .call(renderMarker)
         .attr('opacity', (d) => d.point.opacity)
         .attr('cursor', (d) => d.point.series.cursor);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.svgLabels,
+        className: b('label'),
+    });
     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) {

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

@@ -1,4 +1,4 @@
-import type { HtmlItem, ScatterSeriesData } from '../../../types';
+import type { HtmlItem, LabelData, ScatterSeriesData } from '../../../types';
 import type { PreparedScatterSeries } from '../../series/types';
 type PointData = {
     x: number;
@@ -16,4 +16,9 @@ export type MarkerData = {
     clipped: boolean;
 };
 export type PreparedScatterData = MarkerData;
+export type PreparedScatterShapeData = {
+    markers: PreparedScatterData[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+};
 export {};

package/dist/esm/core/types/chart/axis.d.ts

@@ -317,6 +317,7 @@ export interface AxisPlotShape extends AxisPlot {
         plotHeight: number;
     }) => string;
 }
+export type PlotBandAlign = 'start' | 'end';
 export interface AxisPlotBand extends AxisPlot {
     /**
      * The start position of the plot band in axis units.
@@ -336,6 +337,25 @@ export interface AxisPlotBand extends AxisPlot {
      * If the value is `Infinity` or `null`, it will be treated as the end of the axis.
      */
     to: number | string | null;
+    /**
+     * Anchor side on the perpendicular axis when `size` is set.
+     *
+     * - `'start'` — the band sticks to the main axis line (bottom for an X axis,
+     *   left for a left Y axis, right for a right Y axis).
+     * - `'end'` — the band sticks to the opposite side of the plot area.
+     *
+     * Has no effect without `size`.
+     * @default 'start'
+     */
+    align?: PlotBandAlign;
+    /**
+     * Perpendicular extent of the band.
+     *
+     * Accepts a pixel number (`40`), a pixel string (`"40px"`), or a percentage of
+     * the perpendicular plot extent (`"25%"`). When omitted, the band spans the
+     * full perpendicular extent of the plot area (default behavior).
+     */
+    size?: number | string;
 }
 export interface AxisCrosshair extends Pick<AxisPlotLine, 'color' | 'dashStyle' | 'opacity' | 'layerPlacement' | 'width'> {
     /**

package/dist/esm/core/types/chart/scatter.d.ts

@@ -23,6 +23,8 @@ export interface ScatterSeriesData<T = MeaningfulAny> extends BaseSeriesData<T>
      * @deprecated use `x` or `y` instead
      */
     category?: string;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
     /** Individual radius for the point. */
     radius?: number;
     /** Individual opacity for the point. */

package/dist/esm/core/utils/data-labels.d.ts

@@ -0,0 +1,46 @@
+import type { HtmlItem, LabelData } from '../../types';
+import type { BaseTextStyle, ValueFormat } from '../types/chart/base';
+type PointLabelSeries = {
+    id: string;
+    dataLabels: {
+        style: BaseTextStyle;
+        html: boolean;
+        padding: number;
+        format?: ValueFormat;
+    };
+};
+type LabelPoint = {
+    x: number | null;
+    y: number | null;
+    data: {
+        label?: string | number | null;
+        y?: string | number | null;
+    };
+};
+/**
+ * Shared "above-point" dataLabels algorithm used by line, area, and scatter series.
+ *
+ * For each visible point it:
+ * 1. Formats the value via getFormattedValue
+ * 2. Measures the label size (HTML → getLabelsSize, SVG → getTextSizeFn)
+ * 3. Positions the label centered above the point, clamped to chart bounds
+ *
+ * `anchorYOffset` shifts the vertical anchor from the point center upward by the given
+ * number of pixels (e.g. marker radius for scatter), so padding is measured from the
+ * marker edge rather than its center. The top-boundary clamp also respects this offset
+ * so the label never drops below the anchor.
+ *
+ * Overlap filtering is intentionally left to the caller.
+ */
+export declare function preparePointDataLabels<S extends PointLabelSeries, P extends LabelPoint>({ series, points, xMax, yAxisTop, isOutsideBounds, anchorYOffset, }: {
+    series: S;
+    points: P[];
+    xMax: number;
+    yAxisTop: number;
+    isOutsideBounds: (x: number, y: number) => boolean;
+    anchorYOffset?: number;
+}): Promise<{
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+}>;
+export {};

package/dist/esm/core/utils/data-labels.js

@@ -0,0 +1,64 @@
+import { getFormattedValue } from './format';
+import { getLabelsSize, getTextSizeFn } from './text';
+/**
+ * Shared "above-point" dataLabels algorithm used by line, area, and scatter series.
+ *
+ * For each visible point it:
+ * 1. Formats the value via getFormattedValue
+ * 2. Measures the label size (HTML → getLabelsSize, SVG → getTextSizeFn)
+ * 3. Positions the label centered above the point, clamped to chart bounds
+ *
+ * `anchorYOffset` shifts the vertical anchor from the point center upward by the given
+ * number of pixels (e.g. marker radius for scatter), so padding is measured from the
+ * marker edge rather than its center. The top-boundary clamp also respects this offset
+ * so the label never drops below the anchor.
+ *
+ * Overlap filtering is intentionally left to the caller.
+ */
+export async function preparePointDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, anchorYOffset = 0, }) {
+    var _a;
+    const svgLabels = [];
+    const htmlLabels = [];
+    const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
+    for (let i = 0; i < points.length; i++) {
+        const point = points[i];
+        if (point.y === null || point.x === null || isOutsideBounds(point.x, point.y)) {
+            continue;
+        }
+        const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
+        const anchorY = point.y - anchorYOffset;
+        if (series.dataLabels.html) {
+            const size = await getLabelsSize({
+                labels: [text],
+                style: series.dataLabels.style,
+                html: true,
+            });
+            const width = size.maxWidth;
+            const height = size.maxHeight;
+            htmlLabels.push({
+                x: Math.min(xMax - width, Math.max(0, point.x - width / 2)),
+                y: Math.max(yAxisTop, anchorY - series.dataLabels.padding - height),
+                content: text,
+                size: { width, height },
+                style: series.dataLabels.style,
+            });
+        }
+        else {
+            const labelSize = await getTextSize(text);
+            svgLabels.push({
+                text,
+                x: Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2)),
+                y: Math.max(yAxisTop, anchorY -
+                    series.dataLabels.padding -
+                    labelSize.height +
+                    labelSize.hangingOffset),
+                style: series.dataLabels.style,
+                size: labelSize,
+                textAnchor: 'start',
+                series,
+                active: true,
+            });
+        }
+    }
+    return { svgLabels, htmlLabels };
+}

package/dist/esm/core/utils/index.d.ts

@@ -15,3 +15,4 @@ export * from '../layout/chart-dimensions';
 export * from './common';
 export * from './misc';
 export * from './dispatcher';
+export * from './data-labels';

package/dist/esm/core/utils/index.js

@@ -15,3 +15,4 @@ export * from '../layout/chart-dimensions';
 export * from './common';
 export * from './misc';
 export * from './dispatcher';
+export * from './data-labels';

package/dist/esm/core/utils/ticks/datetime.js

@@ -21,6 +21,10 @@ const tickIntervals = [
     [utcMonth, 3, 3 * MONTH],
     [utcYear, 1, YEAR],
 ];
+// utcDay.every(2) resets its day counter at the start of each month (field = getUTCDate() - 1),
+// so in a 31-day month the last tick lands on day 31 and the next tick is day 1 of the following
+// month — only 1 day apart. Filtering by absolute Unix day number avoids the monthly reset.
+const utcEvery2Days = utcDay.filter((d) => Math.floor(d.getTime() / DAY) % 2 === 0);
 function getDateTimeTickInterval(start, stop, count) {
     const target = Math.abs(stop - start) / count;
     const i = bisector(([, , step]) => step).right(tickIntervals, target);
@@ -31,6 +35,9 @@ function getDateTimeTickInterval(start, stop, count) {
         return utcMillisecond.every(Math.max(tickStep(start, stop, count), 1));
     }
     const [t, step] = tickIntervals[target / tickIntervals[i - 1][2] < tickIntervals[i][2] / target ? i - 1 : i];
+    if (t === utcDay && step === 2) {
+        return utcEvery2Days;
+    }
     return t.every(step);
 }
 /**

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

@@ -146,18 +146,20 @@ export async function getShapes(args) {
             }
             case SERIES_TYPE.Scatter: {
                 if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
-                    const preparedData = prepareScatterData({
+                    const scatterShapeData = await prepareScatterData({
                         series: chartSeries,
                         xAxis,
                         xScale,
                         yAxis,
                         yScale,
+                        split,
                         isOutsideBounds,
+                        isRangeSlider,
                     });
                     shapes[index] = (React.createElement(ScatterSeriesShape, { key: SERIES_TYPE.Scatter, clipPathId: shouldUseClipPathId(SERIES_TYPE.Scatter, clipPathBySeriesType)
                             ? clipPathId
-                            : undefined, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
-                    shapesData.splice(index, 0, ...preparedData);
+                            : undefined, dispatcher: dispatcher, preparedData: scatterShapeData, seriesOptions: seriesOptions, htmlLayout: htmlLayout }));
+                    shapesData.splice(index, 0, ...scatterShapeData.markers);
                 }
                 break;
             }

package/dist/esm/hooks/useShapes/scatter/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../../core/series/types';
-import type { PreparedScatterData } from '../../../core/shapes/scatter/types';
+import type { PreparedScatterShapeData } from '../../../core/shapes/scatter/types';
 export { prepareScatterData } from '../../../core/shapes/scatter/prepare-data';
 type ScatterSeriesShapeProps = {
     htmlLayout: HTMLElement | null;
-    preparedData: PreparedScatterData[];
+    preparedData: PreparedScatterShapeData;
     seriesOptions: PreparedSeriesOptions;
     clipPathId?: string;
     dispatcher?: Dispatch<object>;

package/dist/esm/hooks/useShapes/scatter/index.js

@@ -13,7 +13,10 @@ export function ScatterSeriesShape(props) {
         }
         return renderScatter({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        return { htmlElements: preparedData.htmlLabels };
+    }, [preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: clipPathId ? `url(#${clipPathId})` : undefined }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 }

package/dist/esm/hooks/useShapes/styles.css

@@ -1,8 +1,15 @@
 .gcharts-line__label,
 .gcharts-area__label,
 .gcharts-radar__label,
+.gcharts-bar-x__label,
+.gcharts-bar-y__label,
 .gcharts-heatmap__label,
-.gcharts-funnel__label {
+.gcharts-funnel__label,
+.gcharts-treemap__label,
+.gcharts-pie__label,
+.gcharts-scatter__label {
+  user-select: none;
+  pointer-events: none;
   dominant-baseline: hanging;
 }
 
@@ -13,30 +20,6 @@
 .gcharts-pie__segment {
   stroke: var(--g-color-base-background);
 }
-.gcharts-pie__label {
-  font-size: 11px;
-  font-weight: bold;
-  fill: var(--g-color-text-complementary);
-  dominant-baseline: hanging;
-}
-
-.gcharts-bar-x__label {
-  user-select: none;
-  fill: var(--g-color-text-complementary);
-}
-
-.gcharts-bar-y__label {
-  user-select: none;
-  fill: var(--g-color-text-complementary);
-  dominant-baseline: hanging;
-}
-
-.gcharts-treemap__label {
-  user-select: none;
-  pointer-events: none;
-  fill: var(--g-color-text-complementary);
-  dominant-baseline: hanging;
-}
 
 .gcharts-waterfall__connector {
   stroke: var(--g-color-line-generic-active);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.47.0",
+  "version": "1.48.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -146,6 +146,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
+  "overrides": {
+    "dompurify": "^3.4.0"
+  },
   "peerDependencies": {
     "@gravity-ui/uikit": "^7.0.0",
     "react": ">=17.0.0",