@gravity-ui/chartkit 5.4.0 → 5.6.0

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

@@ -31,6 +31,7 @@ export function prepareBarXSeries(args) {
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
             },
             cursor: get(series, 'cursor', null),
+            yAxis: get(series, 'yAxis', 0),
         };
     }, []);
 }

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

@@ -5,10 +5,10 @@ import merge from 'lodash/merge';
 import { legendDefaults } from '../../constants';
 import { getHorisontalSvgTextHeight } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';
-import { getWidthOccupiedByYAxis } from '../useChartDimensions/utils';
+import { getYAxisWidth } from '../useChartDimensions/utils';
 export const getPreparedLegend = (args) => {
     const { legend, series } = args;
-    const enabled = typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1;
+    const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);
@@ -90,7 +90,7 @@ export const getLegendComponents = (args) => {
     preparedLegend.height = legendHeight;
     const top = chartHeight - chartMargin.bottom - preparedLegend.height;
     const offset = {
-        left: chartMargin.left + getWidthOccupiedByYAxis({ preparedAxis: preparedYAxis }),
+        left: chartMargin.left + getYAxisWidth(preparedYAxis[0]),
         top,
     };
     return { legendConfig: { offset, pagination }, legendItems: items };

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

@@ -8,9 +8,9 @@ export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;
 export declare const DEFAULT_MARKER: {
     enabled: boolean;
     symbol: "circle" | "diamond" | "square" | "triangle" | "triangle-down";
-    radius: number;
     borderColor: string;
     borderWidth: number;
+    radius: number;
 };
 type PrepareLineSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;

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

@@ -74,6 +74,7 @@ export function prepareLineSeries(args) {
             linecap: prepareLinecap(dashStyle, series, seriesOptions),
             opacity: get(series, 'opacity', null),
             cursor: get(series, 'cursor', null),
+            yAxis: get(series, 'yAxis', 0),
         };
         return prepared;
     }, []);

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

@@ -40,6 +40,7 @@ export function prepareScatterSeries(args) {
             data: s.data,
             marker: prepareMarker(s, seriesOptions, index),
             cursor: get(s, 'cursor', null),
+            yAxis: get(s, 'yAxis', 0),
         };
         return prepared;
     }, []);

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';
@@ -76,6 +76,7 @@ export type PreparedScatterSeries = {
             };
         };
     };
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedBarXSeries = {
     type: BarXSeries['type'];
@@ -89,6 +90,7 @@ export type PreparedBarXSeries = {
         allowOverlap: boolean;
         padding: number;
     };
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedBarYSeries = {
     type: BarYSeries['type'];
@@ -164,6 +166,7 @@ export type PreparedLineSeries = {
     dashStyle: DashStyle;
     linecap: LineCap;
     opacity: number | null;
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedAreaSeries = {
     type: AreaSeries['type'];
@@ -196,6 +199,7 @@ export type PreparedAreaSeries = {
             };
         };
     };
+    yAxis: number;
 } & BasePreparedSeries;
 export type PreparedTreemapSeries = {
     type: TreemapSeries['type'];
@@ -208,7 +212,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/area/prepare-data.d.ts

@@ -7,5 +7,6 @@ export declare const prepareAreaData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
+    boundsHeight: number;
 }) => PreparedAreaData[];

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

@@ -49,13 +49,9 @@ function getXValues(series, xAxis, xScale) {
     return sort(Array.from(xValues), ([_x, xValue]) => xValue);
 }
 export const prepareAreaData = (args) => {
-    const { series, xAxis, xScale, yScale } = args;
-    const yLinearScale = yScale;
-    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
-    const yAxis = args.yAxis[0];
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
-    const [yMin, _yMax] = yScale.range();
     return Array.from(group(series, (s) => s.stackId)).reduce((result, [_stackId, seriesStack]) => {
         const xValues = getXValues(seriesStack, xAxis, xScale);
         const accumulatedYValues = new Map();
@@ -63,6 +59,10 @@ export const prepareAreaData = (args) => {
             accumulatedYValues.set(key, 0);
         });
         const seriesStackData = seriesStack.reduce((acc, s) => {
+            const yAxisIndex = s.yAxis;
+            const seriesYAxis = yAxis[yAxisIndex];
+            const seriesYScale = yScale[yAxisIndex];
+            const [yMin, _yMax] = seriesYScale.range();
             const seriesData = s.data.reduce((m, d) => {
                 return m.set(String(d.x), d);
             }, new Map());
@@ -74,7 +74,8 @@ export const prepareAreaData = (args) => {
                         // FIXME: think about how to break the series into separate areas(null Y values)
                         y: 0,
                     };
-                const yValue = getYValue({ point: d, yAxis, yScale }) - accumulatedYValue;
+                const yValue = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }) -
+                    accumulatedYValue;
                 accumulatedYValues.set(x, yMin - yValue);
                 pointsAcc.push({
                     y0: yMin - accumulatedYValue,

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

@@ -8,5 +8,6 @@ export declare const prepareBarXData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
+    boundsHeight: number;
 }) => PreparedBarXData[];

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

@@ -24,9 +24,7 @@ function getLabelData(d) {
     };
 }
 export const prepareBarXData = (args) => {
-    const { series, seriesOptions, xAxis, xScale, yScale } = args;
-    const yLinearScale = yScale;
-    const plotHeight = yLinearScale(yLinearScale.domain()[0]);
+    const { series, seriesOptions, xAxis, xScale, yScale, boundsHeight: plotHeight } = args;
     const categories = get(xAxis, 'categories', []);
     const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
     const barPadding = get(seriesOptions, 'bar-x.barPadding');
@@ -100,6 +98,8 @@ export const prepareBarXData = (args) => {
                 ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
                 : yValues;
             sortedData.forEach((yValue) => {
+                const yAxisIndex = yValue.series.yAxis;
+                const seriesYScale = yScale[yAxisIndex];
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;
@@ -110,7 +110,7 @@ export const prepareBarXData = (args) => {
                     xCenter = xLinearScale(Number(xValue));
                 }
                 const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
-                const y = yLinearScale(yValue.data.y);
+                const y = seriesYScale(yValue.data.y);
                 const height = plotHeight - y;
                 const barData = {
                     x,

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

@@ -8,5 +8,5 @@ export declare const prepareBarYData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
 }) => PreparedBarYData[];

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

@@ -48,7 +48,7 @@ function getBandWidth(series, yAxis, yScale) {
     return bandWidth;
 }
 export const prepareBarYData = (args) => {
-    const { series, seriesOptions, yAxis, xScale, yScale } = args;
+    const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const xLinearScale = xScale;
     const plotWidth = xLinearScale(xLinearScale.domain()[1]);
     const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');

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;
@@ -22,7 +23,7 @@ type Args = {
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
     xScale?: ChartScale;
-    yScale?: ChartScale;
+    yScale?: ChartScale[];
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

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;
@@ -31,6 +32,7 @@ export const useShapes = (args) => {
                             xScale,
                             yAxis,
                             yScale,
+                            boundsHeight,
                         });
                         acc.push(React.createElement(BarXSeriesShapes, { key: "bar-x", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
                         shapesData.push(...preparedData);
@@ -52,6 +54,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({
@@ -74,6 +91,7 @@ export const useShapes = (args) => {
                             xScale,
                             yAxis,
                             yScale,
+                            boundsHeight,
                         });
                         acc.push(React.createElement(AreaSeriesShapes, { key: "area", dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData }));
                         shapesData.push(...preparedData);
@@ -86,7 +104,7 @@ export const useShapes = (args) => {
                             series: chartSeries,
                             xAxis,
                             xScale,
-                            yAxis: yAxis[0],
+                            yAxis,
                             yScale,
                         });
                         acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));

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

@@ -7,5 +7,5 @@ export declare const prepareLineData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale;
+    yScale: ChartScale[];
 }) => PreparedLineData[];

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

@@ -32,9 +32,10 @@ export const prepareLineData = (args) => {
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
     return series.reduce((acc, s) => {
+        const seriesYScale = yScale[s.yAxis];
         const points = s.data.map((d) => ({
             x: getXValue({ point: d, xAxis, xScale }),
-            y: getYValue({ point: d, yAxis, yScale }),
+            y: getYValue({ point: d, yAxis, yScale: seriesYScale }),
             active: true,
             data: d,
             series: s,

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

@@ -6,6 +6,6 @@ export declare const prepareScatterData: (args: {
     series: PreparedScatterSeries[];
     xAxis: PreparedAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis;
-    yScale: ChartScale;
+    yAxis: PreparedAxis[];
+    yScale: ChartScale[];
 }) => PreparedScatterData[];

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

@@ -6,7 +6,10 @@ const getFilteredLinearScatterData = (data) => {
 export const prepareScatterData = (args) => {
     const { series, xAxis, xScale, yAxis, yScale } = args;
     return series.reduce((acc, s) => {
-        const filteredData = xAxis.type === 'category' || yAxis.type === 'category'
+        const yAxisIndex = get(s, 'yAxis', 0);
+        const seriesYAxis = yAxis[yAxisIndex];
+        const seriesYScale = yScale[yAxisIndex];
+        const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
             ? s.data
             : getFilteredLinearScatterData(s.data);
         filteredData.forEach((d) => {
@@ -15,7 +18,7 @@ export const prepareScatterData = (args) => {
                     data: d,
                     series: s,
                     x: getXValue({ point: d, xAxis, xScale }),
-                    y: getYValue({ point: d, yAxis, yScale }),
+                    y: getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale }),
                     opacity: get(d, 'opacity', null),
                 },
                 hovered: false,

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[];