@gravity-ui/chartkit 5.4.0 → 5.5.0

package/build/constants/widget-data.d.ts

@@ -6,6 +6,7 @@ export declare const SeriesType: {
     readonly Pie: "pie";
     readonly Scatter: "scatter";
     readonly Treemap: "treemap";
+    readonly Waterfall: "waterfall";
 };
 export declare enum DashStyle {
     Dash = "Dash",

package/build/constants/widget-data.js

@@ -6,6 +6,7 @@ export const SeriesType = {
     Pie: 'pie',
     Scatter: 'scatter',
     Treemap: 'treemap',
+    Waterfall: 'waterfall',
 };
 export var DashStyle;
 (function (DashStyle) {

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -3,7 +3,7 @@ import { dateTime } from '@gravity-ui/date-utils';
 import get from 'lodash/get';
 import { block } from '../../../../../utils/cn';
 import { formatNumber } from '../../../../shared';
-import { getDataCategoryValue } from '../../utils';
+import { getDataCategoryValue, getWaterfallPointSubtotal } from '../../utils';
 const b = block('d3-tooltip');
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
 const getRowData = (fieldName, axis, data) => {
@@ -30,7 +30,7 @@ const getXRowData = (xAxis, data) => getRowData('x', xAxis, data);
 const getYRowData = (yAxis, data) => getRowData('y', yAxis, data);
 const getMeasureValue = (data, xAxis, yAxis) => {
     var _a, _b;
-    if (data.every((item) => item.series.type === 'pie' || item.series.type === 'treemap')) {
+    if (data.every((item) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
         return null;
     }
     if (data.some((item) => item.series.type === 'bar-y')) {
@@ -58,6 +58,23 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                         React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("div", null, closest ? React.createElement("b", null, value) : React.createElement("span", null, value))));
                 }
+                case 'waterfall': {
+                    const isTotal = get(data, 'total', false);
+                    const subTotal = getWaterfallPointSubtotal(data, series);
+                    return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
+                        !isTotal && (React.createElement(React.Fragment, null,
+                            React.createElement("div", { key: id, className: b('content-row') },
+                                React.createElement("b", null, getXRowData(xAxis, data))),
+                            React.createElement("div", { className: b('content-row') },
+                                React.createElement("span", null,
+                                    series.name,
+                                    "\u00A0"),
+                                React.createElement("span", null, getYRowData(yAxis, data))))),
+                        React.createElement("div", { key: id, className: b('content-row') },
+                            isTotal ? 'Total' : 'Subtotal',
+                            ": ",
+                            subTotal)));
+                }
                 case 'bar-y': {
                     const value = (React.createElement(React.Fragment, null,
                         series.name,

package/build/plugins/d3/renderer/constants/defaults/series-options.d.ts

@@ -13,6 +13,12 @@ type DefaultBarYSeriesOptions = Partial<ChartKitWidgetSeriesOptions['bar-x']> &
         groupPadding: number;
     };
 };
-export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions;
+type DefaultWaterfallSeriesOptions = Partial<ChartKitWidgetSeriesOptions['waterfall']> & {
+    waterfall: {
+        barMaxWidth: number;
+        barPadding: number;
+    };
+};
+export type SeriesOptionsDefaults = Partial<ChartKitWidgetSeriesOptions> & DefaultBarXSeriesOptions & DefaultBarYSeriesOptions & DefaultWaterfallSeriesOptions;
 export declare const seriesOptionsDefaults: SeriesOptionsDefaults;
 export {};

package/build/plugins/d3/renderer/constants/defaults/series-options.js

@@ -89,4 +89,18 @@ export const seriesOptionsDefaults = {
             },
         },
     },
+    waterfall: {
+        barMaxWidth: 50,
+        barPadding: 0.1,
+        states: {
+            hover: {
+                enabled: true,
+                brightness: 0.3,
+            },
+            inactive: {
+                enabled: false,
+                opacity: 0.5,
+            },
+        },
+    },
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, } from '../../utils';
+import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;
@@ -24,9 +24,19 @@ const getAxisLabelMaxWidth = (args) => {
 };
 function getAxisMin(axis, series) {
     const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    const seriesWithVolume = ['bar-x', 'area'];
+    const seriesWithVolume = ['bar-x', 'area', 'waterfall'];
     if (typeof min === 'undefined' && (series === null || series === void 0 ? void 0 : series.some((s) => seriesWithVolume.includes(s.type)))) {
-        return 0;
+        return series.reduce((minValue, s) => {
+            switch (s.type) {
+                case 'waterfall': {
+                    const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
+                    return Math.min(minValue, minSubTotal);
+                }
+                default: {
+                    return minValue;
+                }
+            }
+        }, 0);
     }
     return min;
 }

package/build/plugins/d3/renderer/hooks/useSeries/prepare-waterfall.d.ts

@@ -0,0 +1,10 @@
+import type { ScaleOrdinal } from 'd3';
+import type { WaterfallSeries } from '../../../../../types';
+import type { PreparedLegend, PreparedSeries } from './types';
+type PrepareWaterfallSeriesArgs = {
+    colorScale: ScaleOrdinal<string, string>;
+    series: WaterfallSeries[];
+    legend: PreparedLegend;
+};
+export declare function prepareWaterfallSeries(args: PrepareWaterfallSeriesArgs): PreparedSeries[];
+export {};

package/build/plugins/d3/renderer/hooks/useSeries/prepare-waterfall.js

@@ -0,0 +1,36 @@
+import get from 'lodash/get';
+import { getRandomCKId } from '../../../../../utils';
+import { DEFAULT_PALETTE } from '../../constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { prepareLegendSymbol } from './utils';
+export function prepareWaterfallSeries(args) {
+    const { colorScale, series: seriesList, legend } = args;
+    const [, negativeColor, positiveColor] = DEFAULT_PALETTE;
+    return seriesList.map((series) => {
+        var _a, _b, _c;
+        const name = series.name || '';
+        const color = series.color || colorScale(name);
+        const prepared = {
+            type: series.type,
+            color,
+            positiveColor: positiveColor,
+            negativeColor: negativeColor,
+            name,
+            id: getRandomCKId(),
+            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),
+            },
+            cursor: get(series, 'cursor', null),
+        };
+        return prepared;
+    }, []);
+}

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.js

@@ -6,6 +6,7 @@ import { prepareLineSeries } from './prepare-line';
 import { preparePieSeries } from './prepare-pie';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
+import { prepareWaterfallSeries } from './prepare-waterfall';
 export function prepareSeries(args) {
     const { type, series, seriesOptions, legend, colorScale } = args;
     switch (type) {
@@ -48,6 +49,13 @@ export function prepareSeries(args) {
                 colorScale,
             });
         }
+        case 'waterfall': {
+            return prepareWaterfallSeries({
+                series: series,
+                legend,
+                colorScale,
+            });
+        }
         default: {
             throw new ChartKitError({
                 message: `Series type "${type}" does not support data preparation for series that do not support the presence of axes`,

package/build/plugins/d3/renderer/hooks/useSeries/types.d.ts

@@ -1,5 +1,5 @@
 import { DashStyle, LayoutAlgorithm, LineCap, SymbolType } from '../../../../../constants';
-import { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartKitWidgetLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData } from '../../../../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartKitWidgetLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, WaterfallSeries, WaterfallSeriesData } from '../../../../../types';
 import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
@@ -208,7 +208,19 @@ export type PreparedTreemapSeries = {
     };
     layoutAlgorithm: `${LayoutAlgorithm}`;
 } & BasePreparedSeries & Omit<TreemapSeries, keyof BasePreparedSeries>;
-export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries;
+export type PreparedWaterfallSeries = {
+    type: WaterfallSeries['type'];
+    data: WaterfallSeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        allowOverlap: boolean;
+        padding: number;
+    };
+    positiveColor: string;
+    negativeColor: string;
+} & BasePreparedSeries;
+export type PreparedSeries = PreparedScatterSeries | PreparedBarXSeries | PreparedBarYSeries | PreparedPieSeries | PreparedLineSeries | PreparedAreaSeries | PreparedTreemapSeries | PreparedWaterfallSeries;
 export type PreparedSeriesOptions = SeriesOptionsDefaults;
 export type StackedSeries = BarXSeries | AreaSeries | BarYSeries;
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/index.d.ts

@@ -11,8 +11,9 @@ import type { PreparedPieData } from './pie/types';
 import type { PreparedScatterData } from './scatter/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
+import { PreparedWaterfallData } from './waterfall';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -12,6 +12,7 @@ import { preparePieData } from './pie/prepare-data';
 import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
+import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
 import './styles.css';
 export const useShapes = (args) => {
     const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, } = args;
@@ -52,6 +53,21 @@ export const useShapes = (args) => {
                     }
                     break;
                 }
+                case 'waterfall': {
+                    if (xScale && yScale) {
+                        const preparedData = prepareWaterfallData({
+                            series: chartSeries,
+                            seriesOptions,
+                            xAxis,
+                            xScale,
+                            yAxis,
+                            yScale,
+                        });
+                        acc.push(React.createElement(WaterfallSeriesShapes, { key: "waterfall", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
+                        shapesData.push(...preparedData);
+                    }
+                    break;
+                }
                 case 'line': {
                     if (xScale && yScale) {
                         const preparedData = prepareLineData({

package/build/plugins/d3/renderer/hooks/useShapes/styles.css

@@ -29,4 +29,8 @@
   alignment-baseline: text-before-edge;
   user-select: none;
   pointer-events: none;
+}
+
+.chartkit-d3-waterfall__connector {
+  stroke: var(--g-color-line-generic-active);
 }

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dispatch } from 'd3';
+import type { PreparedSeriesOptions } from '../../useSeries/types';
+import type { PreparedWaterfallData } from './types';
+export { prepareWaterfallData } from './prepare-data';
+export * from './types';
+type Args = {
+    dispatcher: Dispatch<object>;
+    preparedData: PreparedWaterfallData[];
+    seriesOptions: PreparedSeriesOptions;
+};
+export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/index.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { color, line as lineGenerator, select } from 'd3';
+import get from 'lodash/get';
+import { DashStyle } from '../../../../../../constants';
+import { block } from '../../../../../../utils/cn';
+import { filterOverlappingLabels, getWaterfallPointColor } from '../../../utils';
+import { getLineDashArray } from '../utils';
+export { prepareWaterfallData } from './prepare-data';
+export * from './types';
+const b = block('d3-waterfall');
+export const WaterfallSeriesShapes = (args) => {
+    const { dispatcher, preparedData, seriesOptions } = args;
+    const ref = React.useRef(null);
+    const connectorSelector = `.${b('connector')}`;
+    React.useEffect(() => {
+        var _a;
+        if (!ref.current) {
+            return () => { };
+        }
+        const svgElement = select(ref.current);
+        const hoverOptions = get(seriesOptions, 'waterfall.states.hover');
+        const inactiveOptions = get(seriesOptions, 'waterfall.states.inactive');
+        svgElement.selectAll('*').remove();
+        const rectSelection = svgElement
+            .selectAll('allRects')
+            .data(preparedData)
+            .join('rect')
+            .attr('class', b('segment'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('height', (d) => d.height)
+            .attr('width', (d) => d.width)
+            .attr('fill', (d) => getWaterfallPointColor(d.data, d.series))
+            .attr('opacity', (d) => d.opacity)
+            .attr('cursor', (d) => d.series.cursor);
+        let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
+        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+            dataLabels = filterOverlappingLabels(dataLabels);
+        }
+        const labelSelection = svgElement
+            .selectAll('text')
+            .data(dataLabels)
+            .join('text')
+            .text((d) => d.text)
+            .attr('class', b('label'))
+            .attr('x', (d) => d.x)
+            .attr('y', (d) => d.y)
+            .attr('text-anchor', (d) => d.textAnchor)
+            .style('font-size', (d) => d.style.fontSize)
+            .style('font-weight', (d) => d.style.fontWeight || null)
+            .style('fill', (d) => d.style.fontColor || null);
+        // Add the connector line between bars
+        svgElement
+            .selectAll(connectorSelector)
+            .data(preparedData)
+            .join('path')
+            .attr('class', b('connector'))
+            .attr('d', (d, index) => {
+            const line = lineGenerator();
+            const prev = preparedData[index - 1];
+            if (!prev) {
+                return null;
+            }
+            const points = [];
+            if (Number(prev.data.y) > 0) {
+                points.push([prev.x, prev.y]);
+            }
+            else {
+                points.push([prev.x, prev.y + prev.height]);
+            }
+            if (Number(d.data.y) > 0 && !d.data.total) {
+                points.push([d.x + d.width, d.y + d.height]);
+            }
+            else {
+                points.push([d.x + d.width, d.y]);
+            }
+            return line(points);
+        })
+            .attr('stroke-width', 1)
+            .attr('stroke-dasharray', () => getLineDashArray(DashStyle.Dash, 1));
+        dispatcher.on('hover-shape.waterfall', (data) => {
+            const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
+            const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
+            if (!data) {
+                if (hoverEnabled) {
+                    rectSelection.attr('fill', (d) => getWaterfallPointColor(d.data, d.series));
+                }
+                if (inactiveEnabled) {
+                    rectSelection.attr('opacity', null);
+                    labelSelection.attr('opacity', null);
+                }
+                return;
+            }
+            if (hoverEnabled) {
+                const hoveredValues = data.map((d) => d.data.x);
+                rectSelection.attr('fill', (d) => {
+                    var _a;
+                    const fillColor = getWaterfallPointColor(d.data, d.series);
+                    if (hoveredValues.includes(d.data.x)) {
+                        const brightness = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.brightness;
+                        return ((_a = color(fillColor)) === null || _a === void 0 ? void 0 : _a.brighter(brightness).toString()) || fillColor;
+                    }
+                    return fillColor;
+                });
+            }
+            if (inactiveEnabled) {
+                const hoveredSeries = data.map((d) => d.series.id);
+                rectSelection.attr('opacity', (d) => {
+                    return hoveredSeries.includes(d.series.id)
+                        ? null
+                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                });
+                labelSelection.attr('opacity', (d) => {
+                    return hoveredSeries.includes(d.series.id)
+                        ? null
+                        : (inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.opacity) || null;
+                });
+            }
+        });
+        return () => {
+            dispatcher.on('hover-shape.waterfall', null);
+        };
+    }, [dispatcher, preparedData, seriesOptions]);
+    return React.createElement("g", { ref: ref, className: b() });
+};

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/prepare-data.d.ts

@@ -0,0 +1,12 @@
+import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedSeriesOptions, PreparedWaterfallSeries } from '../../useSeries/types';
+import type { PreparedWaterfallData } from './types';
+export declare const prepareWaterfallData: (args: {
+    series: PreparedWaterfallSeries[];
+    seriesOptions: PreparedSeriesOptions;
+    xAxis: PreparedAxis;
+    xScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale;
+}) => PreparedWaterfallData[];

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/prepare-data.js

@@ -0,0 +1,132 @@
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+import { getLabelsSize } from '../../../utils';
+import { MIN_BAR_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getXValue, getYValue } from '../utils';
+function getLabelData(d, plotHeight) {
+    if (!d.series.dataLabels.enabled) {
+        return undefined;
+    }
+    const text = String(d.data.label || d.subTotal);
+    const style = d.series.dataLabels.style;
+    const { maxHeight: height, maxWidth: width } = getLabelsSize({ labels: [text], style });
+    let y;
+    if (Number(d.data.y) > 0 || d.data.total) {
+        y = Math.max(height, d.y - d.series.dataLabels.padding);
+    }
+    else {
+        y = Math.min(plotHeight - d.series.dataLabels.padding, d.y + d.height + d.series.dataLabels.padding + height);
+    }
+    return {
+        text,
+        x: d.x + d.width / 2,
+        y,
+        style,
+        size: { width, height },
+        textAnchor: 'middle',
+        series: d.series,
+    };
+}
+function getBandWidth(args) {
+    const { series, xAxis, xScale } = args;
+    if (xAxis.type === 'category') {
+        const xBandScale = xScale;
+        return xBandScale.bandwidth();
+    }
+    const xLinearScale = xScale;
+    const xValues = series.reduce((acc, s) => {
+        s.data.forEach((dataItem) => acc.push(Number(dataItem.x)));
+        return acc;
+    }, []);
+    let bandWidth = Infinity;
+    xValues.sort().forEach((xValue, index) => {
+        if (index > 0 && xValue !== xValues[index - 1]) {
+            const dist = xLinearScale(xValue) - xLinearScale(xValues[index - 1]);
+            if (dist < bandWidth) {
+                bandWidth = dist;
+            }
+        }
+    });
+    return bandWidth;
+}
+export const prepareWaterfallData = (args) => {
+    const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale, } = args;
+    const yLinearScale = yScale;
+    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
+    const barMaxWidth = get(seriesOptions, 'waterfall.barMaxWidth');
+    const barPadding = get(seriesOptions, 'waterfall.barPadding');
+    const flattenData = series.reduce((acc, s) => {
+        acc.push(...s.data.map((d) => ({ data: d, series: s })));
+        return acc;
+    }, []);
+    const data = sortBy(flattenData, (d) => d.data.x);
+    const bandWidth = getBandWidth({
+        series,
+        xAxis,
+        xScale,
+    });
+    const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
+    const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(bandWidth - rectGap, barMaxWidth));
+    const yZero = getYValue({
+        point: { y: 0 },
+        yScale,
+        yAxis,
+    });
+    let totalValue = 0;
+    const result = [];
+    data.forEach((item, _index) => {
+        if (typeof item.data.y !== 'number' && !item.data.total) {
+            return;
+        }
+        if (!item.data.total) {
+            totalValue += Number(item.data.y);
+        }
+        const prevPoint = result[result.length - 1];
+        const xCenter = getXValue({ point: item.data, xAxis, xScale });
+        const x = xCenter - rectWidth / 2;
+        const yValue = Number(item.data.total ? totalValue : item.data.y);
+        const height = yZero -
+            getYValue({
+                point: { y: Math.abs(yValue) },
+                yScale,
+                yAxis,
+            });
+        let y;
+        if (!prevPoint || item.data.total) {
+            y = getYValue({
+                point: {
+                    y: yValue > 0 ? yValue : 0,
+                },
+                yScale,
+                yAxis,
+            });
+        }
+        else if (Number(prevPoint.data.y) < 0) {
+            if (Number(item.data.y) > 0) {
+                y = prevPoint.y + prevPoint.height - height;
+            }
+            else {
+                y = prevPoint.y + prevPoint.height;
+            }
+        }
+        else if (Number(item.data.y) < 0) {
+            y = prevPoint.y;
+        }
+        else {
+            y = prevPoint.y - height;
+        }
+        const preparedData = {
+            x,
+            y,
+            width: rectWidth,
+            height,
+            opacity: get(item.data, 'opacity', null),
+            data: item.data,
+            series: item.series,
+            subTotal: totalValue,
+        };
+        preparedData.label = getLabelData(preparedData, plotHeight);
+        result.push(preparedData);
+    });
+    return result;
+};

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/types.d.ts

@@ -0,0 +1,14 @@
+import { WaterfallSeriesData } from '../../../../../../types';
+import { LabelData } from '../../../types';
+import { PreparedWaterfallSeries } from '../../useSeries/types';
+export type PreparedWaterfallData = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number | null;
+    series: PreparedWaterfallSeries;
+    data: WaterfallSeriesData;
+    label?: LabelData;
+    subTotal: number;
+};

package/build/plugins/d3/renderer/hooks/useShapes/waterfall/types.js

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

package/build/plugins/d3/renderer/utils/get-closest-data.js

@@ -45,7 +45,18 @@ export function getClosestPoints(args) {
                     y0: d.y,
                     y1: d.y + d.height,
                 }));
-                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
+                break;
+            }
+            case 'waterfall': {
+                const points = list.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    x: d.x + d.width / 2,
+                    y0: d.y,
+                    y1: d.y + d.height,
+                }));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;
             }
             case 'area': {
@@ -59,12 +70,12 @@ export function getClosestPoints(args) {
                     })));
                     return acc;
                 }, []);
-                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;
             }
             case 'line': {
                 const points = list.reduce((acc, d) => {
-                    Array.prototype.push.apply(acc, d.points.map((p) => ({
+                    acc.push(...d.points.map((p) => ({
                         data: p.data,
                         series: p.series,
                         x: p.x,
@@ -73,7 +84,7 @@ export function getClosestPoints(args) {
                     })));
                     return acc;
                 }, []);
-                Array.prototype.push.apply(result, getClosestPointsByXValue(pointerX, pointerY, points));
+                result.push(...getClosestPointsByXValue(pointerX, pointerY, points));
                 break;
             }
             case 'bar-y': {
@@ -96,7 +107,7 @@ export function getClosestPoints(args) {
                         closestXIndex = closestPoints.findIndex((p) => pointerX > p.x && pointerX < p.x + p.width);
                     }
                 }
-                Array.prototype.push.apply(result, closestPoints.map((p, i) => ({
+                result.push(...closestPoints.map((p, i) => ({
                     data: p.data,
                     series: p.series,
                     closest: i === closestXIndex,

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -7,6 +7,7 @@ export * from './time';
 export * from './axis';
 export * from './labels';
 export * from './symbol';
+export * from './series';
 export type AxisDirection = 'x' | 'y';
 type UnknownSeries = {
     type: ChartKitWidgetSeries['type'];

package/build/plugins/d3/renderer/utils/index.js

@@ -13,6 +13,7 @@ export * from './time';
 export * from './axis';
 export * from './labels';
 export * from './symbol';
+export * from './series';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap'];
 /**
  * Checks whether the series should be drawn with axes.
@@ -70,6 +71,16 @@ export const getDomainDataYBySeries = (series) => {
                 });
                 break;
             }
+            case 'waterfall': {
+                let yValue = 0;
+                seriesList.forEach((s) => {
+                    s.data.forEach((d) => {
+                        yValue += Number(d.y) || 0;
+                        acc.push(yValue);
+                    });
+                });
+                break;
+            }
             default: {
                 seriesList.filter(isSeriesWithNumericalYValues).forEach((s) => {
                     acc.push(...s.data.map((d) => d.y));

package/build/plugins/d3/renderer/utils/series/index.d.ts

@@ -0,0 +1 @@
+export * from './waterfall';

package/build/plugins/d3/renderer/utils/series/index.js

@@ -0,0 +1 @@
+export * from './waterfall';

package/build/plugins/d3/renderer/utils/series/waterfall.d.ts

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

package/build/plugins/d3/renderer/utils/series/waterfall.js

@@ -0,0 +1,25 @@
+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;
+}
+export function getWaterfallPointSubtotal(point, series) {
+    const pointIndex = series.data.indexOf(point);
+    if (pointIndex === -1) {
+        return null;
+    }
+    return series.data.reduce((sum, d, index) => {
+        if (index <= pointIndex) {
+            const value = d.total ? 0 : Number(d.y);
+            return sum + value;
+        }
+        return sum;
+    }, 0);
+}

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -363,6 +363,11 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                         mouseOut: () => void;
                         click: (event: any) => void;
                     };
+                    point: {
+                        events: {
+                            click: () => false;
+                        };
+                    };
                     marker: {
                         states: {
                             hover: {

package/build/plugins/highcharts/renderer/helpers/config/config.d.ts

@@ -526,6 +526,11 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
                 mouseOut: () => void;
                 click: (event: any) => void;
             };
+            point: {
+                events: {
+                    click: () => false;
+                };
+            };
             marker: {
                 states: {
                     hover: {

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -1264,6 +1264,14 @@ export function prepareConfig(data, options, isMobile, holidays) {
                         }
                     },
                 },
+                point: {
+                    events: {
+                        click: function () {
+                            // Prevent slicing of pie segment after clicking it
+                            return false;
+                        },
+                    },
+                },
                 marker: options.splitTooltip
                     ? {
                         states: {

package/build/plugins/highcharts/renderer/helpers/config/options.js

@@ -57,7 +57,7 @@ const first = {
 };
 const second = {
     allowPointSelect: true,
-    slicedOffset: 0,
+    slicedOffset: 20,
     cursor: 'pointer',
     showInLegend: true,
 };

package/build/plugins/highcharts/renderer/helpers/graph.d.ts

@@ -357,6 +357,11 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
                     mouseOut: () => void;
                     click: (event: any) => void;
                 };
+                point: {
+                    events: {
+                        click: () => false;
+                    };
+                };
                 marker: {
                     states: {
                         hover: {

package/build/types/widget-data/index.d.ts

@@ -19,6 +19,7 @@ export * from './title';
 export * from './tooltip';
 export * from './halo';
 export * from './treemap';
+export * from './waterfall';
 export type ChartKitWidgetData<T = any> = {
     chart?: ChartKitWidgetChart;
     legend?: ChartKitWidgetLegend;

package/build/types/widget-data/index.js

@@ -13,3 +13,4 @@ export * from './title';
 export * from './tooltip';
 export * from './halo';
 export * from './treemap';
+export * from './waterfall';

package/build/types/widget-data/series.d.ts

@@ -9,8 +9,9 @@ import type { PointMarkerOptions } from './marker';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
-export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T>;
-export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T>;
+import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T> | BarYSeries<T> | LineSeries<T> | AreaSeries<T> | TreemapSeries<T> | WaterfallSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T> | BarYSeriesData<T> | LineSeriesData<T> | AreaSeriesData<T> | TreemapSeriesData<T> | WaterfallSeriesData<T>;
 export type DataLabelRendererData<T = any> = {
     data: ChartKitWidgetSeriesData<T>;
 };
@@ -202,5 +203,23 @@ export type ChartKitWidgetSeriesOptions = {
             inactive?: BasicInactiveState;
         };
     };
+    waterfall?: {
+        /** The maximum allowed pixel width for a column.
+         * This prevents the columns from becoming too wide when there is a small number of points in the chart.
+         *
+         * @default 50
+         */
+        barMaxWidth?: number;
+        /** Padding between each column or bar, in x axis units.
+         *
+         * @default 0.1
+         * */
+        barPadding?: number;
+        /** Options for the series states that provide additional styling information to the series. */
+        states?: {
+            hover?: BasicHoverState;
+            inactive?: BasicInactiveState;
+        };
+    };
 };
 export {};

package/build/types/widget-data/tooltip.d.ts

@@ -6,6 +6,7 @@ import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
 import type { TreemapSeries, TreemapSeriesData } from './treemap';
+import type { WaterfallSeries, WaterfallSeriesData } from './waterfall';
 export type TooltipDataChunkBarX<T = any> = {
     data: BarXSeriesData<T>;
     series: BarXSeries<T>;
@@ -50,7 +51,11 @@ export type TooltipDataChunkTreemap<T = any> = {
     data: TreemapSeriesData<T>;
     series: TreemapSeries<T>;
 };
-export type TooltipDataChunk<T = any> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T>) & {
+export type TooltipDataChunkWaterfall<T = any> = {
+    data: WaterfallSeriesData<T>;
+    series: WaterfallSeries<T>;
+};
+export type TooltipDataChunk<T = any> = (TooltipDataChunkBarX<T> | TooltipDataChunkBarY<T> | TooltipDataChunkPie<T> | TooltipDataChunkScatter<T> | TooltipDataChunkLine<T> | TooltipDataChunkArea<T> | TooltipDataChunkTreemap<T> | TooltipDataChunkWaterfall<T>) & {
     closest?: boolean;
 };
 export type ChartKitWidgetTooltip<T = any> = {

package/build/types/widget-data/waterfall.d.ts

@@ -0,0 +1,39 @@
+import { SeriesType } from '../../constants';
+import type { BaseSeries, BaseSeriesData } from './base';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
+export type WaterfallSeriesData<T = any> = BaseSeriesData<T> & {
+    /**
+     * The `x` value. Depending on the context , it may represents:
+     * - numeric value (for `linear` x axis)
+     * - timestamp value (for `datetime` x axis)
+     * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
+     */
+    x?: string | number;
+    /**
+     * The `y` value. Depending on the context , it may represents:
+     * - numeric value (for `linear` y axis)
+     */
+    y?: number;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
+    /** Individual opacity for the point. */
+    opacity?: number;
+    /** When this property is true, the point display the total sum across the entire series. */
+    total?: boolean;
+};
+export type WaterfallSeries<T = any> = BaseSeries & {
+    type: typeof SeriesType.Waterfall;
+    data: WaterfallSeriesData<T>[];
+    /** The name of the series (used in legend, tooltip etc). */
+    name: string;
+    /** The main color of the series (hex, rgba). */
+    color?: string;
+    /** The color used for positive values. If it is not specified, the general color of the series is used. */
+    positiveColor?: string;
+    /** The color used for negative values. If it is not specified, the general color of the series is used. */
+    negativeColor?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data. */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
+};

package/build/types/widget-data/waterfall.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",