@gravity-ui/charts 1.0.1 → 1.2.0

package/dist/cjs/hooks/useSeries/prepare-waterfall.js

@@ -4,35 +4,47 @@ import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function prepareWaterfallSeries(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colorScale, series: seriesList, legend } = args;
     const [, negativeColor, positiveColor] = DEFAULT_PALETTE;
-    return seriesList.map((series) => {
-        var _a, _b, _c, _d;
-        const name = series.name || '';
-        const color = series.color || colorScale(name);
-        const prepared = {
-            type: series.type,
-            color,
-            positiveColor: positiveColor,
-            negativeColor: negativeColor,
-            name,
-            id: getUniqId(),
-            visible: get(series, 'visible', true),
-            legend: {
-                enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
-            },
-            data: series.data,
-            dataLabels: {
-                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
-                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
-                allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
-                padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
-                html: get(series, 'dataLabels.html', false),
-                format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
-            },
-            cursor: get(series, 'cursor', null),
-        };
-        return prepared;
+    const series = seriesList[0];
+    const common = {
+        id: '',
+        color: seriesList[0].color || colorScale(seriesList[0].name),
+        type: series.type,
+        name: series.name,
+        visible: get(series, 'visible', true),
+        legend: {
+            enabled: get(series, 'legend.enabled', legend.enabled),
+            symbol: prepareLegendSymbol(series),
+        },
+        dataLabels: {
+            enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || true,
+            style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
+            allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
+            padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+            html: get(series, 'dataLabels.html', false),
+            format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
+        },
+        cursor: get(series, 'cursor', null),
+        data: [],
+    };
+    const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
+    const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });
+    const totals = Object.assign(Object.assign({}, common), { name: (_o = (_m = (_l = series.legend) === null || _l === void 0 ? void 0 : _l.itemText) === null || _m === void 0 ? void 0 : _m.totals) !== null && _o !== void 0 ? _o : series.name, id: getUniqId(), data: [] });
+    series.data.forEach((d, index) => {
+        var _a;
+        const value = (_a = d === null || d === void 0 ? void 0 : d.y) !== null && _a !== void 0 ? _a : 0;
+        const dataItem = Object.assign(Object.assign({}, d), { index });
+        if (d === null || d === void 0 ? void 0 : d.total) {
+            totals.data.push(dataItem);
+        }
+        else if (value > 0) {
+            positive.data.push(dataItem);
+        }
+        else if (value < 0) {
+            negative.data.push(dataItem);
+        }
     }, []);
+    return [positive, negative, totals];
 }

package/dist/cjs/hooks/useSeries/types.d.ts

@@ -243,9 +243,12 @@ export type PreparedTreemapSeries = {
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
+export type PreparedWaterfallSeriesData = WaterfallSeriesData & {
+    index: number;
+};
 export type PreparedWaterfallSeries = {
     type: WaterfallSeries['type'];
-    data: WaterfallSeriesData[];
+    data: PreparedWaterfallSeriesData[];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;
@@ -254,8 +257,6 @@ export type PreparedWaterfallSeries = {
         html: boolean;
         format?: ValueFormat;
     };
-    positiveColor: string;
-    negativeColor: string;
 } & BasePreparedSeries;
 export type PreparedSankeySeries = {
     type: SankeySeries['type'];

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

@@ -17,6 +17,7 @@ export const HtmlLayer = (props) => {
         return null;
     }
     return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
-        return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: { position: 'absolute', left: item.x, top: item.y } }));
+        const style = Object.assign(Object.assign({}, item.style), { position: 'absolute', left: item.x, top: item.y });
+        return (React.createElement("div", { key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
     })));
 };

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

@@ -111,6 +111,7 @@ export const prepareAreaData = (args) => {
                             y: l.y,
                             content: l.text,
                             size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
+                            style,
                         };
                     });
                     htmlElements.push(...htmlLabels);

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

@@ -139,6 +139,7 @@ export const prepareBarXData = (args) => {
                         y: label.y,
                         content: label.text,
                         size: label.size,
+                        style: label.style,
                     });
                 }
                 else {

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

@@ -71,6 +71,7 @@ function setLabel(prepared) {
             y: y - height / 2,
             content,
             size: { width, height },
+            style: dataLabels.style,
         });
     }
     else {

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

@@ -35,6 +35,7 @@ function getHtmlLabel(point, series, xMax) {
         y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
         content,
         size: { width: size.maxWidth, height: size.maxHeight },
+        style: series.dataLabels.style,
     };
 }
 export const prepareLineData = (args) => {

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

@@ -75,7 +75,7 @@ export function PieSeriesShapes(args) {
             .selectAll('text')
             .data((pieData) => pieData.labels)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

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

@@ -184,6 +184,7 @@ export function preparePieData(args) {
                         y: Math.max(0, data.center[1] + label.y),
                         content: label.text,
                         size: label.size,
+                        style: label.style,
                     });
                 }
                 else {

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

@@ -146,6 +146,7 @@ export function prepareRadarData(args) {
                     y: label.y,
                     content: label.text,
                     size: label.size,
+                    style: label.style,
                 }));
             }
         }

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

@@ -38,7 +38,7 @@ export const TreemapSeriesShape = (props) => {
             .selectAll('tspan')
             .data(labelData)
             .join('text')
-            .text((d) => d.text)
+            .html((d) => d.text)
             .attr('class', b('label'))
             .attr('x', (d) => d.x)
             .attr('y', (d) => d.y)

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

@@ -94,10 +94,11 @@ export function prepareTreemapData(args) {
     let labelData = [];
     const htmlElements = [];
     if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
-        const { html } = series.dataLabels;
+        const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
-            htmlElements.push(...labels);
+            const htmlItems = labels.map((l) => (Object.assign({ style: dataLabelsStyle }, l)));
+            htmlElements.push(...htmlItems);
         }
         else {
             labelData = labels;

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

@@ -5,10 +5,12 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getXValue, getYValue } from '../utils';
 function getLabelData(d, plotHeight) {
+    var _a, _b;
     if (!d.series.dataLabels.enabled) {
         return undefined;
     }
-    const text = getFormattedValue(Object.assign({ value: d.data.label || d.subTotal }, d.series.dataLabels));
+    const labelValue = (_b = (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y) !== null && _b !== void 0 ? _b : d.subTotal;
+    const text = getFormattedValue(Object.assign({ value: labelValue }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
     const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
     let y;
@@ -60,7 +62,7 @@ export const prepareWaterfallData = (args) => {
         acc.push(...s.data.map((d) => ({ data: d, series: s })));
         return acc;
     }, []);
-    const data = sortBy(flattenData, (d) => d.data.x);
+    const data = sortBy(flattenData, (d) => d.data.index);
     const bandWidth = getBandWidth({
         series,
         xAxis,

package/dist/cjs/i18n/keysets/en.json

@@ -11,6 +11,8 @@
     "label_invalid-series-property": "It seems you are trying to use inappropriate value for \"{{key}}\", or defined it incorrectly. Available values: [{{values}}].",
     "label_invalid-treemap-redundant-value": "It seems you are trying to set \"value\" for container node. Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
     "label_invalid-treemap-missing-value": "It seems you are trying to use node without \"value\". Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
-    "label_invalid-y-axis-index": "It seems you are trying to use inappropriate index for Y axis: \"{{index}}\""
+    "label_invalid-y-axis-index": "It seems you are trying to use inappropriate index for Y axis: \"{{index}}\"",
+    "label_invalid-axis-plot-band-option": "It seems you are trying to use inappropriate type for \"{{axis}}\" axis plot band option: \"{{option}}\"",
+    "label_axis-plot-band-options-not-equal": "It seems you are trying to use different type for \"{{axis}}\" axis plot band options"
   }
 }

package/dist/cjs/i18n/keysets/ru.json

@@ -11,6 +11,8 @@
     "label_invalid-series-property": "Похоже, что вы пытаетесь использовать недопустимое значение для \"{{key}}\", или указали его неверно. Доступные значения: [{{values}}].",
     "label_invalid-treemap-redundant-value": "Похоже, что вы пытаетесь установить значение \"value\" для узла, используемого в качестве контейнера. Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
     "label_invalid-treemap-missing-value": "Похоже, что вы пытаетесь использовать узел без значения \"value\". Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
-    "label_invalid-y-axis-index": "Похоже, что вы пытаетесь использовать некорректный индекс для оси Y: \"{{index}}\""
+    "label_invalid-y-axis-index": "Похоже, что вы пытаетесь использовать некорректный индекс для оси Y: \"{{index}}\"",
+    "label_invalid-axis-plot-band-option": "Похоже, что вы пытаетесь использовать некорректный тип для параметра полосы: \"{{option}}\" для оси \"{{axis}}\"",
+    "label_axis-plot-band-options-not-equal": "Похоже, что вы пытаетесь использовать разные типы для для параметра полосы для оси \"{{axis}}\""
   }
 }

package/dist/cjs/libs/chart-error/index.d.ts

@@ -7,6 +7,7 @@ export declare const CHART_ERROR_CODE: {
     NO_DATA: string;
     INVALID_DATA: string;
     UNKNOWN: string;
+    INVALID_OPTION_TYPE: string;
 };
 export declare class ChartError extends Error {
     readonly code: number | string;

package/dist/cjs/libs/chart-error/index.js

@@ -2,6 +2,7 @@ export const CHART_ERROR_CODE = {
     NO_DATA: 'ERR.CK.NO_DATA',
     INVALID_DATA: 'ERR.CK.INVALID_DATA',
     UNKNOWN: 'ERR.CK.UNKNOWN_ERROR',
+    INVALID_OPTION_TYPE: 'ERR.CK.INVALID_OPTION_TYPE',
 };
 export class ChartError extends Error {
     constructor({ originalError, message, code = CHART_ERROR_CODE.UNKNOWN } = {}) {

package/dist/cjs/types/chart/axis.d.ts

@@ -75,10 +75,27 @@ export interface ChartAxis {
     maxPadding?: number;
     /** An array of lines stretching across the plot area, marking a specific value */
     plotLines?: AxisPlotLine[];
+    /** An array of colored bands stretching across the plot area marking an interval on the axis. */
+    plotBands?: AxisPlotBand[];
+    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    visible?: boolean;
 }
 export interface ChartXAxis extends ChartAxis {
 }
-export interface AxisPlotLine {
+export type PlotLayerPlacement = 'before' | 'after';
+export interface AxisPlot {
+    /** Place the line behind or above the chart. */
+    layerPlacement?: PlotLayerPlacement;
+    /** The color of the plot line (hex, rgba). */
+    color?: string;
+    /**
+     * Individual opacity for the line.
+     *
+     * @default 1
+     * */
+    opacity?: number;
+}
+export interface AxisPlotLine extends AxisPlot {
     /** The position of the line in axis units. */
     value?: number;
     /** The color of the plot line (hex, rgba). */
@@ -90,14 +107,22 @@ export interface AxisPlotLine {
     width?: number;
     /** Option for line stroke style. */
     dashStyle?: `${DashStyle}`;
+}
+export interface AxisPlotBand extends AxisPlot {
     /**
-     * Individual opacity for the line.
+     * The start position of the plot band in axis units.
      *
-     * @default 1
-     * */
-    opacity?: number;
-    /** Place the line behind or above the chart. */
-    layerPlacement?: 'before' | 'after';
+     * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
+     * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     */
+    from: number | string;
+    /**
+     * The end position of the plot band in axis units.
+     *
+     * Can be a number, a string (e.g., a category), or a timestamp if representing a date.
+     * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     */
+    to: number | string;
 }
 export interface ChartYAxis extends ChartAxis {
     /** Axis location.

package/dist/cjs/types/chart/waterfall.d.ts

@@ -36,5 +36,14 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
     /** Individual series legend options. Has higher priority than legend options in widget data. */
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
+        /** The legend item text for positive, negative values and totals. */
+        itemText?: {
+            /** The legend item text for positive values. */
+            positive?: string;
+            /** The legend item text for negative values. */
+            negative?: string;
+            /** The legend item text for totals. */
+            totals?: string;
+        };
     };
 }

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

@@ -22,6 +22,7 @@ export interface HtmlItem {
         width: number;
         height: number;
     };
+    style?: BaseTextStyle;
 }
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];

package/dist/cjs/utils/chart/axis-generators/bottom.d.ts

@@ -19,6 +19,7 @@ type AxisBottomArgs = {
         size: number;
         color?: string;
     };
+    leftmostLimit?: number;
 };
 export declare function axisBottom(args: AxisBottomArgs): (selection: Selection<SVGGElement, unknown, null, undefined>) => void;
 export {};

package/dist/cjs/utils/chart/axis-generators/bottom.js

@@ -16,7 +16,7 @@ function addDomain(selection, options) {
     }
 }
 export function axisBottom(args) {
-    const { scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
+    const { leftmostLimit = 0, scale, ticks: { labelFormat = (value) => String(value), labelsPaddings = 0, labelsMargin = 0, labelsMaxWidth = Infinity, labelsStyle, labelsLineHeight, items: tickItems, count: ticksCount, maxTickCount, rotation = 0, tickColor, }, domain, } = args;
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getXAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
@@ -103,6 +103,21 @@ export function axisBottom(args) {
                 .remove();
             // add an ellipsis to the labels that go beyond the boundaries of the chart
             labels.each(function (_d, i, nodes) {
+                if (i === 0) {
+                    const currentElement = this;
+                    const text = select(currentElement);
+                    const currentElementPosition = currentElement.getBoundingClientRect();
+                    const nextElement = nodes[i + 1];
+                    const nextElementPosition = nextElement === null || nextElement === void 0 ? void 0 : nextElement.getBoundingClientRect();
+                    if (currentElementPosition.left < leftmostLimit) {
+                        const remainSpace = nextElementPosition.left -
+                            currentElementPosition.right +
+                            x -
+                            labelsMargin;
+                        text.attr('text-anchor', 'start');
+                        setEllipsisForOverflowText(text, remainSpace);
+                    }
+                }
                 if (i === nodes.length - 1) {
                     const currentElement = this;
                     const prevElement = nodes[i - 1];

package/dist/cjs/utils/chart/axis.d.ts

@@ -1,6 +1,7 @@
 import type { AxisDomain, AxisScale, ScaleBand } from 'd3';
-import type { PreparedAxis, PreparedSplit } from '../../hooks';
+import type { PreparedAxis, PreparedAxisPlotBand, PreparedSplit } from '../../hooks';
 import type { TextRow } from './text';
+import type { AxisDirection } from './types';
 export declare function getTicksCount({ axis, range }: {
     axis: PreparedAxis;
     range: number;
@@ -29,3 +30,13 @@ export declare function getAxisTitleRows(args: {
     axis: PreparedAxis;
     textMaxWidth: number;
 }): TextRow[];
+interface GetBandsPositionArgs {
+    band: PreparedAxisPlotBand;
+    axisScale: AxisScale<AxisDomain>;
+    axis: AxisDirection;
+}
+export declare function getBandsPosition(args: GetBandsPositionArgs): {
+    from: number;
+    to: number;
+};
+export {};

package/dist/cjs/utils/chart/axis.js

@@ -1,3 +1,4 @@
+import clamp from 'lodash/clamp';
 import { wrapText } from './text';
 export function getTicksCount({ axis, range }) {
     let ticksCount;
@@ -69,3 +70,37 @@ export function getAxisTitleRows(args) {
         return acc;
     }, []);
 }
+export function getBandsPosition(args) {
+    var _a, _b, _c;
+    const { band, axisScale } = args;
+    const scalePosTo = axisScale(band.to);
+    const scalePosFrom = axisScale(band.from);
+    const isX = args.axis === 'x';
+    if (scalePosTo !== undefined && scalePosFrom !== undefined) {
+        return {
+            from: Math.max(scalePosFrom, 0),
+            to: Math.max(scalePosTo, 0),
+        };
+    }
+    if (typeof band.from !== 'number' || typeof band.to !== 'number') {
+        throw new Error('Filed to create plot band');
+    }
+    const category = axisScale.domain();
+    const bandwidth = (_b = (_a = axisScale.bandwidth) === null || _a === void 0 ? void 0 : _a.call(axisScale)) !== null && _b !== void 0 ? _b : 1;
+    const halfBandwidth = bandwidth / 2;
+    const calcPosition = (value) => {
+        var _a, _b;
+        if (value >= category.length) {
+            return ((_a = axisScale(category[category.length - 1])) !== null && _a !== void 0 ? _a : 0) + halfBandwidth * (isX ? 1 : -1);
+        }
+        return (((_b = axisScale(category[clamp(Math.floor(value), 0, category.length - 1)])) !== null && _b !== void 0 ? _b : 0) +
+            bandwidth * (value - Math.floor(Math.abs(value))) * (isX ? 1 : -1));
+    };
+    const to = calcPosition(band.to);
+    const from = calcPosition(band.from);
+    const maxPos = ((_c = axisScale(category[isX ? category.length - 1 : 0])) !== null && _c !== void 0 ? _c : 0) + halfBandwidth;
+    return {
+        from: clamp(from, -halfBandwidth, maxPos),
+        to: clamp(to, -halfBandwidth, maxPos),
+    };
+}

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

@@ -1,30 +1,40 @@
 import { Delaunay, bisector, sort } from 'd3';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
-function getClosestPointsByXValue(x, y, points) {
+function getClosestYIndex(items, y) {
     var _a, _b, _c, _d;
-    const sorted = sort(points, (p) => p.x);
-    const closestXIndex = bisector((p) => p.x).center(sorted, x);
-    if (closestXIndex === -1) {
-        return [];
-    }
-    const closestX = sorted[closestXIndex].x;
-    const closestPoints = sort(points.filter((p) => p.x === closestX), (p) => p.y0);
     let closestYIndex = -1;
-    if (y < ((_a = closestPoints[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
+    if (y < ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.y0)) {
         closestYIndex = 0;
     }
-    else if (y > ((_b = closestPoints[closestPoints.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
-        closestYIndex = closestPoints.length - 1;
+    else if (y > ((_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.y1)) {
+        closestYIndex = items.length - 1;
     }
     else {
-        closestYIndex = closestPoints.findIndex((p) => y > p.y0 && y < p.y1);
+        closestYIndex = items.findIndex((p) => y > p.y0 && y < p.y1);
         if (closestYIndex === -1) {
-            const sortedY = sort(closestPoints.map((p, index) => ({ index, y: p.y1 + (p.y0 - p.y1) / 2 })), (p) => p.y);
+            const sortedY = sort(items.map((p, index) => ({ index, y: p.y1 + (p.y0 - p.y1) / 2 })), (p) => p.y);
             const sortedYIndex = bisector((p) => p.y).center(sortedY, y);
             closestYIndex = (_d = (_c = sortedY[sortedYIndex]) === null || _c === void 0 ? void 0 : _c.index) !== null && _d !== void 0 ? _d : -1;
         }
     }
+    return closestYIndex;
+}
+function getClosestPointsByXValue(x, y, points) {
+    const sorted = sort(points, (p) => p.x);
+    const closestXIndex = bisector((p) => p.x).center(sorted, x);
+    if (closestXIndex === -1) {
+        return [];
+    }
+    const closestX = sorted[closestXIndex].x;
+    const filtered = points.filter((p) => p.x === closestX);
+    const groupedBySeries = Object.values(groupBy(filtered, (p) => get(p.series, 'id'))).map((items) => {
+        const sortedByY = sort(items, (p) => p.y0);
+        const index = getClosestYIndex(sortedByY, y);
+        return sortedByY[index === -1 ? 0 : index];
+    });
+    const closestPoints = sort(groupedBySeries, (p) => p.y0);
+    const closestYIndex = getClosestYIndex(closestPoints, y);
     return closestPoints.map((p, i) => ({
         data: p.data,
         series: p.series,

package/dist/cjs/utils/chart/index.d.ts

@@ -1,6 +1,7 @@
 import type { AxisDomain } from 'd3';
 import type { PreparedAxis } from '../../hooks';
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
+import type { AxisDirection } from './types';
 export * from './math';
 export * from './text';
 export * from './time';
@@ -12,7 +13,6 @@ export * from './series';
 export * from './color';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
-export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartSeries['type'];
     data: unknown;
@@ -76,3 +76,4 @@ export declare const getDataCategoryValue: (args: {
     data: ChartSeriesData;
 }) => string;
 export declare function getClosestPointsRange(axis: PreparedAxis, points: AxisDomain[]): number | undefined;
+export { AxisDirection };

package/dist/cjs/utils/chart/index.js

@@ -2,6 +2,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import { group, select } from 'd3';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
+import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
 import { formatNumber, getNumberUnitRate } from '../../libs/format-number';
@@ -100,11 +101,10 @@ export const getDomainDataYBySeries = (series) => {
             }
             case 'waterfall': {
                 let yValue = 0;
-                seriesList.forEach((s) => {
-                    s.data.forEach((d) => {
-                        yValue += Number(d.y) || 0;
-                        acc.push(yValue);
-                    });
+                const points = seriesList.map((s) => s.data).flat();
+                sortBy(points, (p) => p.index).forEach((d) => {
+                    yValue += Number(d.y) || 0;
+                    acc.push(yValue);
                 });
                 break;
             }

package/dist/cjs/utils/chart/series/waterfall.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedWaterfallSeries } from '../../../hooks';
+import type { PreparedWaterfallSeries, PreparedWaterfallSeriesData } from '../../../hooks';
 import type { WaterfallSeriesData } from '../../../types';
 export declare function getWaterfallPointColor(point: WaterfallSeriesData, series: PreparedWaterfallSeries): string;
-export declare function getWaterfallPointSubtotal(point: WaterfallSeriesData, series: PreparedWaterfallSeries): number | null;
+export declare function getWaterfallPointSubtotal(point: PreparedWaterfallSeriesData, series: PreparedWaterfallSeries): number | null;

package/dist/cjs/utils/chart/series/waterfall.js

@@ -2,13 +2,7 @@ export function getWaterfallPointColor(point, series) {
     if (point.color) {
         return point.color;
     }
-    if (point.total) {
-        return series.color;
-    }
-    if (Number(point.y) > 0) {
-        return series.positiveColor;
-    }
-    return series.negativeColor;
+    return series.color;
 }
 export function getWaterfallPointSubtotal(point, series) {
     const pointIndex = series.data.indexOf(point);

package/dist/cjs/utils/chart/types.d.ts

@@ -0,0 +1 @@
+export type AxisDirection = 'x' | 'y';

package/dist/cjs/utils/chart/types.js

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

package/dist/cjs/utils/chart-ui/pie-center-text.d.ts

@@ -1,5 +1,6 @@
 export declare function pieCenterText(text: string, options?: {
     padding?: number;
+    color?: string;
 }): ((args: {
     series: {
         innerRadius: number;

package/dist/cjs/utils/chart-ui/pie-center-text.js

@@ -7,6 +7,7 @@ export function pieCenterText(text, options) {
         return undefined;
     }
     const padding = get(options, 'padding', 12);
+    const color = get(options, 'color', 'currentColor');
     return function (args) {
         let fontSize = MAX_FONT_SIZE;
         const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
@@ -17,7 +18,8 @@ export function pieCenterText(text, options) {
             .text(text)
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
-            .style('font-size', `${fontSize}px`);
+            .style('font-size', `${fontSize}px`)
+            .style('fill', color);
         return container.node();
     };
 }