@gravity-ui/chartkit 5.3.3 → 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/Chart.js

@@ -1,17 +1,21 @@
 import React from 'react';
+import { pointer } from 'd3';
+import throttle from 'lodash/throttle';
 import { block } from '../../../../utils/cn';
 import { getD3Dispatcher } from '../d3-dispatcher';
-import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes, useTooltip, } from '../hooks';
+import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes } from '../hooks';
 import { getWidthOccupiedByYAxis } from '../hooks/useChartDimensions/utils';
 import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
 import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
+import { getClosestPoints } from '../utils/get-closest-data';
 import { AxisX } from './AxisX';
 import { AxisY } from './AxisY';
 import { Legend } from './Legend';
 import { Title } from './Title';
-import { Tooltip, TooltipTriggerArea } from './Tooltip';
+import { Tooltip } from './Tooltip';
 import './styles.css';
 const b = block('d3');
+const THROTTLE_DELAY = 50;
 export const Chart = (props) => {
     var _a, _b;
     const { width, height, data } = props;
@@ -48,7 +52,6 @@ export const Chart = (props) => {
         xAxis,
         yAxis,
     });
-    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
     const { shapes, shapesData } = useShapes({
         boundsWidth,
         boundsHeight,
@@ -59,7 +62,6 @@ export const Chart = (props) => {
         xScale,
         yAxis,
         yScale,
-        svgContainer: svgRef.current,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     React.useEffect(() => {
@@ -72,16 +74,34 @@ export const Chart = (props) => {
     }, [dispatcher, clickHandler]);
     const boundsOffsetTop = chart.margin.top;
     const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({ preparedAxis: yAxis });
+    const handleMouseMove = (event) => {
+        const [pointerX, pointerY] = pointer(event, svgRef.current);
+        const x = pointerX - boundsOffsetLeft;
+        const y = pointerY - boundsOffsetTop;
+        if (x < 0 || x > boundsWidth || y < 0 || y > boundsHeight) {
+            dispatcher.call('hover-shape', {}, undefined);
+            return;
+        }
+        const closest = getClosestPoints({
+            position: [x, y],
+            shapesData,
+        });
+        dispatcher.call('hover-shape', event.target, closest, [pointerX, pointerY]);
+    };
+    const throttledHandleMouseMove = throttle(handleMouseMove, THROTTLE_DELAY);
+    const handleMouseLeave = () => {
+        throttledHandleMouseMove.cancel();
+        dispatcher.call('hover-shape', {}, undefined);
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height },
+        React.createElement("svg", { ref: svgRef, className: b(), width: width, height: height, onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave },
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})` },
                 xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),
-                shapes,
-                (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) && Boolean(shapesData.length) && (React.createElement(TooltipTriggerArea, { boundsWidth: boundsWidth, boundsHeight: boundsHeight, dispatcher: dispatcher, shapesData: shapesData, svgContainer: svgRef.current }))),
+                shapes),
             preparedLegend.enabled && (React.createElement(Legend, { chartSeries: preparedSeries, boundsWidth: boundsWidth, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick }))),
-        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], hovered: hovered, pointerPosition: pointerPosition })));
+        React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: tooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0] })));
 };

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

@@ -1,8 +1,10 @@
 import React from 'react';
 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) => {
     switch (axis.type) {
@@ -26,47 +28,75 @@ const getRowData = (fieldName, axis, data) => {
 };
 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) => ['pie', 'treemap', 'waterfall'].includes(item.series.type))) {
+        return null;
+    }
+    if (data.some((item) => item.series.type === 'bar-y')) {
+        return getYRowData(yAxis, (_a = data[0]) === null || _a === void 0 ? void 0 : _a.data);
+    }
+    return getXRowData(xAxis, (_b = data[0]) === null || _b === void 0 ? void 0 : _b.data);
+};
 export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
-    return (React.createElement(React.Fragment, null, hovered.map(({ data, series }, i) => {
-        const id = get(series, 'id', i);
-        switch (series.type) {
-            case 'scatter':
-            case 'line':
-            case 'area':
-            case 'bar-x': {
-                const xRow = getXRowData(xAxis, data);
-                const yRow = getYRowData(yAxis, data);
-                return (React.createElement("div", { key: id },
-                    React.createElement("div", null, xRow),
-                    React.createElement("div", null,
-                        React.createElement("span", null,
-                            React.createElement("b", null, series.name),
+    const measureValue = getMeasureValue(hovered, xAxis, yAxis);
+    return (React.createElement(React.Fragment, null,
+        measureValue && React.createElement("div", null, measureValue),
+        hovered.map(({ data, series, closest }, i) => {
+            const id = `${get(series, 'id')}_${i}`;
+            const color = get(series, 'color');
+            switch (series.type) {
+                case 'scatter':
+                case 'line':
+                case 'area':
+                case 'bar-x': {
+                    const value = (React.createElement(React.Fragment, null,
+                        series.name,
+                        ": ",
+                        getYRowData(yAxis, data)));
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        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',
                             ": ",
-                            yRow))));
-            }
-            case 'bar-y': {
-                const xRow = getXRowData(xAxis, data);
-                const yRow = getYRowData(yAxis, data);
-                return (React.createElement("div", { key: id },
-                    React.createElement("div", null, yRow),
-                    React.createElement("div", null,
+                            subTotal)));
+                }
+                case 'bar-y': {
+                    const value = (React.createElement(React.Fragment, null,
+                        series.name,
+                        ": ",
+                        getXRowData(xAxis, data)));
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        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 'pie':
+                case 'treemap': {
+                    const seriesData = data;
+                    return (React.createElement("div", { key: id, className: b('content-row') },
+                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
                         React.createElement("span", null,
-                            React.createElement("b", null, series.name),
-                            ": ",
-                            xRow))));
-            }
-            case 'pie':
-            case 'treemap': {
-                const pieSeriesData = data;
-                return (React.createElement("div", { key: id },
-                    React.createElement("span", null,
-                        pieSeriesData.name || pieSeriesData.id,
-                        "\u00A0"),
-                    React.createElement("span", null, pieSeriesData.value)));
+                            seriesData.name || seriesData.id,
+                            "\u00A0"),
+                        React.createElement("span", null, seriesData.value)));
+                }
+                default: {
+                    return null;
+                }
             }
-            default: {
-                return null;
-            }
-        }
-    })));
+        })));
 };

package/build/plugins/d3/renderer/components/Tooltip/index.d.ts

@@ -1,15 +1,12 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { TooltipDataChunk } from '../../../../../types/widget-data';
-import type { PointerPosition, PreparedAxis, PreparedTooltip } from '../../hooks';
-export * from './TooltipTriggerArea';
+import type { PreparedAxis, PreparedTooltip } from '../../hooks';
 type TooltipProps = {
     dispatcher: Dispatch<object>;
     tooltip: PreparedTooltip;
     svgContainer: SVGSVGElement | null;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis;
-    hovered?: TooltipDataChunk[];
-    pointerPosition?: PointerPosition;
 };
 export declare const Tooltip: (props: TooltipProps) => React.JSX.Element | null;
+export {};

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

@@ -2,11 +2,12 @@ import React from 'react';
 import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import isNil from 'lodash/isNil';
 import { block } from '../../../../../utils/cn';
+import { useTooltip } from '../../hooks';
 import { DefaultContent } from './DefaultContent';
-export * from './TooltipTriggerArea';
 const b = block('d3-tooltip');
 export const Tooltip = (props) => {
-    const { tooltip, xAxis, yAxis, hovered, svgContainer, pointerPosition } = props;
+    const { tooltip, xAxis, yAxis, svgContainer, dispatcher } = props;
+    const { hovered, pointerPosition } = useTooltip({ dispatcher, tooltip });
     const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
     const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
     const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
@@ -22,6 +23,6 @@ export const Tooltip = (props) => {
     React.useEffect(() => {
         window.dispatchEvent(new CustomEvent('scroll'));
     }, [left, top]);
-    return hovered ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
+    return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
         React.createElement("div", { className: b('content') }, content))) : null;
 };

package/build/plugins/d3/renderer/components/styles.css

@@ -97,4 +97,18 @@
   border-radius: 3px;
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
   text-wrap: nowrap;
+}
+
+.chartkit-d3-tooltip__content-row {
+  display: flex;
+  align-items: center;
+}
+
+.chartkit-d3-tooltip__color {
+  height: 8px;
+  width: 16px;
+  display: inline-block;
+  margin-right: 8px;
+  border-radius: 2px;
+  background-color: #dddddd;
 }

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/area/index.js

@@ -73,14 +73,13 @@ export const AreaSeriesShapes = (args) => {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         dispatcher.on('hover-shape.area', (data) => {
-            var _a;
-            const selected = data === null || data === void 0 ? void 0 : data.find((d) => d.series.type === 'area');
-            const selectedDataItem = selected === null || selected === void 0 ? void 0 : selected.data;
-            const selectedSeriesId = (_a = selected === null || selected === void 0 ? void 0 : selected.series) === null || _a === void 0 ? void 0 : _a.id;
+            const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'area')) || [];
+            const selectedDataItems = selected.map((d) => d.data);
+            const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
             shapeSelection.datum((d, index, list) => {
                 var _a;
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.id === selectedSeriesId);
+                const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     let strokeColor = d.color || '';
@@ -95,7 +94,9 @@ export const AreaSeriesShapes = (args) => {
                 return setActiveState({
                     element: list[index],
                     state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.id),
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.id)),
                     datum: d,
                 });
             });
@@ -103,13 +104,15 @@ export const AreaSeriesShapes = (args) => {
                 return setActiveState({
                     element: list[index],
                     state: inactiveOptions,
-                    active: Boolean(!inactiveEnabled || !selectedSeriesId || selectedSeriesId === d.series.id),
+                    active: Boolean(!inactiveEnabled ||
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.series.id)),
                     datum: d,
                 });
             });
             markerSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.point.data === selectedDataItem);
+                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
@@ -118,8 +121,8 @@ export const AreaSeriesShapes = (args) => {
                 }
                 if (d.point.series.marker.states.normal.enabled) {
                     const isActive = Boolean(!inactiveEnabled ||
-                        !selectedSeriesId ||
-                        selectedSeriesId === d.point.series.id);
+                        !selectedSeriesIds.length ||
+                        selectedSeriesIds.includes(d.point.series.id));
                     setActiveState({
                         element: list[index],
                         state: inactiveOptions,

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;
@@ -21,7 +22,6 @@ type Args = {
     seriesOptions: PreparedSeriesOptions;
     xAxis: PreparedAxis;
     yAxis: PreparedAxis[];
-    svgContainer: SVGSVGElement | null;
     xScale?: ChartScale;
     yScale?: ChartScale;
 };

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

@@ -12,9 +12,10 @@ 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, svgContainer, } = args;
+    const { boundsWidth, boundsHeight, dispatcher, series, seriesOptions, xAxis, xScale, yAxis, yScale, } = args;
     const shapesComponents = React.useMemo(() => {
         const visibleSeries = getOnlyVisibleSeries(series);
         const groupedSeries = group(visibleSeries, (item) => item.type);
@@ -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({
@@ -89,7 +105,8 @@ export const useShapes = (args) => {
                             yAxis: yAxis[0],
                             yScale,
                         });
-                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                        acc.push(React.createElement(ScatterSeriesShape, { key: "scatter", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                        shapesData.push(...preparedData);
                     }
                     break;
                 }
@@ -99,7 +116,8 @@ export const useShapes = (args) => {
                         boundsWidth,
                         boundsHeight,
                     });
-                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                    acc.push(React.createElement(PieSeriesShapes, { key: "pie", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                    shapesData.push(...preparedData);
                     break;
                 }
                 case 'treemap': {
@@ -110,7 +128,8 @@ export const useShapes = (args) => {
                         width: boundsWidth,
                         height: boundsHeight,
                     });
-                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, svgContainer: svgContainer }));
+                    acc.push(React.createElement(TreemapSeriesShape, { key: "treemap", dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions }));
+                    shapesData.push(preparedData);
                 }
             }
             return acc;
@@ -126,7 +145,6 @@ export const useShapes = (args) => {
         xScale,
         yAxis,
         yScale,
-        svgContainer,
     ]);
     return { shapes: shapesComponents.shapes, shapesData: shapesComponents.shapesData };
 };