@gravity-ui/charts 1.22.0 → 1.24.0

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

@@ -1,32 +1,6 @@
-import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getLabelsSize, getTextSizeFn } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
 import { getXValue, getYValue } from '../utils';
-async function getLabelData(point, series, xMax) {
-    const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, series.dataLabels));
-    const style = series.dataLabels.style;
-    const size = await getLabelsSize({ labels: [text], style });
-    const labelData = {
-        text,
-        x: point.x,
-        y: point.y - series.dataLabels.padding,
-        style,
-        size: { width: size.maxWidth, height: size.maxHeight },
-        textAnchor: 'middle',
-        series: series,
-        active: true,
-    };
-    const left = getLeftPosition(labelData);
-    if (left < 0) {
-        labelData.x = labelData.x + Math.abs(left);
-    }
-    else {
-        const right = left + labelData.size.width;
-        if (right > xMax) {
-            labelData.x = labelData.x - xMax - right;
-        }
-    }
-    return labelData;
-}
 async function getHtmlLabel(point, series, xMax) {
     const content = String(point.data.label || point.data.y);
     const size = await getLabelsSize({ labels: [content], html: true });
@@ -53,33 +27,73 @@ export const prepareLineData = async (args) => {
         if (!seriesYScale) {
             continue;
         }
-        const points = s.data.map((d) => ({
-            x: getXValue({ point: d, points: s.data, xAxis, xScale }),
-            y: yAxisTop +
-                getYValue({ point: d, points: s.data, yAxis: seriesYAxis, yScale: seriesYScale }),
-            active: true,
-            data: d,
-            series: s,
-        }));
+        const points = s.data.map((d) => {
+            const yValue = getYValue({
+                point: d,
+                points: s.data,
+                yAxis: seriesYAxis,
+                yScale: seriesYScale,
+            });
+            return {
+                x: getXValue({ point: d, points: s.data, xAxis, xScale }),
+                y: yValue === null ? null : yAxisTop + yValue,
+                active: true,
+                data: d,
+                series: s,
+            };
+        });
         const htmlElements = [];
-        let labels = [];
+        const labels = [];
         if (s.dataLabels.enabled) {
             if (s.dataLabels.html) {
-                const list = await Promise.all(points.map((p) => getHtmlLabel(p, s, xMax)));
+                const list = await Promise.all(points.reduce((result, p) => {
+                    if (p.y === null) {
+                        return result;
+                    }
+                    result.push(getHtmlLabel(p, s, xMax));
+                    return result;
+                }, []));
                 htmlElements.push(...list);
             }
             else {
-                labels = await Promise.all(points.map((p) => getLabelData(p, s, xMax)));
+                const getTextSize = getTextSizeFn({ style: s.dataLabels.style });
+                for (let index = 0; index < points.length; index++) {
+                    const point = points[index];
+                    if (point.y !== null && point.x !== null) {
+                        const text = getFormattedValue(Object.assign({ value: point.data.label || point.data.y }, s.dataLabels));
+                        const labelSize = await getTextSize(text);
+                        const style = s.dataLabels.style;
+                        const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
+                        const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
+                        const labelData = {
+                            text,
+                            x,
+                            y,
+                            style,
+                            size: labelSize,
+                            textAnchor: 'start',
+                            series: s,
+                            active: true,
+                        };
+                        labels.push(labelData);
+                    }
+                }
             }
         }
         let markers = [];
         if (s.marker.states.normal.enabled || s.marker.states.hover.enabled) {
-            markers = points.map((p) => ({
-                point: p,
-                active: true,
-                hovered: false,
-                clipped: isOutsideBounds(p.x, p.y),
-            }));
+            markers = points.reduce((result, p) => {
+                if (p.y === null || p.x === null) {
+                    return result;
+                }
+                result.push({
+                    point: p,
+                    active: true,
+                    hovered: false,
+                    clipped: isOutsideBounds(p.x, p.y),
+                });
+                return result;
+            }, []);
         }
         const result = {
             points,

package/dist/esm/hooks/useShapes/line/types.d.ts

@@ -2,14 +2,18 @@ import type { DashStyle, LineCap } from '../../../constants';
 import type { HtmlItem, LabelData, LineSeriesData } from '../../../types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
-    x: number;
-    y: number;
+    x: number | null;
+    y: number | null;
     data: LineSeriesData;
     series: PreparedLineSeries;
     color?: string;
 };
+export type MarkerPointData = PointData & {
+    y: number;
+    x: number;
+};
 export type MarkerData = {
-    point: PointData;
+    point: MarkerPointData;
     active: boolean;
     hovered: boolean;
     clipped: boolean;

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

@@ -3,10 +3,10 @@ import type { Dispatch, PieArcDatum } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedPieData, SegmentData } from './types';
 type PreparePieSeriesArgs = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedPieData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare function getHaloVisibility(d: PieArcDatum<SegmentData>): "" | "hidden";
 export declare function PieSeriesShapes(args: PreparePieSeriesArgs): React.JSX.Element;

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

@@ -112,7 +112,7 @@ export function PieSeriesShapes(args) {
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
             var _a, _b;
             const selectedSeriesId = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.id;
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
@@ -162,7 +162,7 @@ export function PieSeriesShapes(args) {
             });
         });
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();

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

@@ -55,15 +55,18 @@ export function preparePieData(args) {
             },
         };
         const labelMaxHeight = (_a = max(Object.values(labels).map((l) => { var _a, _b; return (_b = (_a = l.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0; }))) !== null && _a !== void 0 ? _a : 0;
-        const segments = items.map((item) => {
+        const segments = items.reduce((acc, item) => {
             var _a;
+            if (item.value === null) {
+                return acc;
+            }
             let maxSegmentRadius = maxRadius;
             if (dataLabels.enabled) {
                 maxSegmentRadius -=
                     dataLabels.distance + dataLabels.connectorPadding + labelMaxHeight;
             }
             const segmentRadius = (_a = calculateNumericProperty({ value: item.radius, base: maxSegmentRadius })) !== null && _a !== void 0 ? _a : maxSegmentRadius;
-            return {
+            acc.push({
                 value: item.value,
                 color: item.color,
                 opacity: item.opacity,
@@ -72,8 +75,9 @@ export function preparePieData(args) {
                 active: true,
                 pie: data,
                 radius: segmentRadius,
-            };
-        });
+            });
+            return acc;
+        }, []);
         data.segments = pieGenerator(segments);
         return data;
     };

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedRadarData } from './types';
 type PrepareRadarSeriesArgs = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     series: PreparedRadarData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare function RadarSeriesShapes(args: PrepareRadarSeriesArgs): React.JSX.Element;
 export {};

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

@@ -81,7 +81,7 @@ export function RadarSeriesShapes(args) {
         const eventName = `hover-shape.radar`;
         const hoverOptions = get(seriesOptions, 'radar.states.hover');
         const inactiveOptions = get(seriesOptions, 'radar.states.inactive');
-        dispatcher.on(eventName, (data) => {
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (data) => {
             const closest = data === null || data === void 0 ? void 0 : data.find((d) => d.closest);
             const selectedSeries = closest === null || closest === void 0 ? void 0 : closest.series;
             const selectedSeriesData = closest === null || closest === void 0 ? void 0 : closest.data;
@@ -126,7 +126,7 @@ export function RadarSeriesShapes(args) {
             });
         });
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     const htmlElements = preparedData.map((d) => d.htmlLabels).flat();

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedSankeyData } from './types';
 type ShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedSankeyData;
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare const SankeySeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

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

@@ -56,9 +56,9 @@ export const SankeySeriesShape = (props) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on(eventName, handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

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

@@ -4,9 +4,10 @@ import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export { prepareScatterData } from './prepare-data';
 type ScatterSeriesShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedScatterData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    clipPathId?: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare function ScatterSeriesShape(props: ScatterSeriesShapeProps): React.JSX.Element;

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

@@ -8,7 +8,7 @@ import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('scatter');
 export function ScatterSeriesShape(props) {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = props;
+    const { clipPathId, dispatcher, preparedData, seriesOptions, htmlLayout } = props;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -63,12 +63,12 @@ export function ScatterSeriesShape(props) {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.scatter', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.scatter', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.scatter', null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: ref, className: b(), clipPath: clipPathId ? `url(#${clipPathId})` : undefined }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 }

package/dist/esm/hooks/useShapes/scatter/prepare-data.d.ts

@@ -1,12 +1,12 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { ChartScale } from '../../useAxisScales';
-import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedScatterSeries } from '../../useSeries/types';
 import type { PreparedScatterData } from './types';
 export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
 }): PreparedScatterData[];

package/dist/esm/hooks/useShapes/scatter/prepare-data.js

@@ -54,7 +54,7 @@ export function prepareScatterData(args) {
             var _a;
             const x = getXValue({ point: d, xAxis, xScale });
             const y = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
-            if (typeof x === 'undefined' || typeof y === 'undefined') {
+            if (typeof x === 'undefined' || typeof y === 'undefined' || x === null || y === null) {
                 return;
             }
             acc.push({

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

@@ -1,3 +1,7 @@
+.gcharts-line__label {
+  dominant-baseline: text-before-edge;
+}
+
 .gcharts-scatter__point {
   stroke-width: 1px;
 }
@@ -40,4 +44,8 @@
 
 .gcharts-heatmap__label {
   dominant-baseline: text-before-edge;
+}
+
+.gcharts-funnel__label {
+  dominant-baseline: text-before-edge;
 }

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

@@ -3,10 +3,10 @@ import type { Dispatch } from 'd3';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedTreemapData } from './types';
 type ShapeProps = {
-    dispatcher: Dispatch<object>;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedTreemapData;
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
+    dispatcher?: Dispatch<object>;
 };
 export declare const TreemapSeriesShape: (props: ShapeProps) => React.JSX.Element;
 export {};

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

@@ -92,9 +92,9 @@ export const TreemapSeriesShape = (props) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on(eventName, handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, handleShapeHover);
         return () => {
-            dispatcher.on(eventName, null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, null);
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

package/dist/esm/hooks/useShapes/utils.d.ts

@@ -1,27 +1,27 @@
 import type { BaseType } from 'd3';
 import type { BasicInactiveState } from '../../types';
+import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis } from '../useChartOptions/types';
 export declare function getXValue(args: {
     point: {
-        x?: number | string;
+        x?: number | string | null;
     };
     points?: {
-        x?: number | string;
+        x?: number | string | null;
     }[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-}): number;
+}): number | null;
 export declare function getYValue(args: {
     point: {
-        y?: number | string;
+        y?: number | string | null;
     };
     points?: {
-        y?: number | string;
+        y?: number | string | null;
     }[];
-    yAxis: PreparedAxis;
+    yAxis: PreparedYAxis;
     yScale: ChartScale;
-}): number;
+}): number | null;
 export declare function shapeKey(d: unknown): string | -1;
 export declare function setActiveState<T extends {
     active?: boolean;
@@ -38,3 +38,11 @@ export declare function getRectPath(args: {
     height: number;
     borderRadius?: number | number[];
 }): import("d3-path").Path;
+export declare function getRectBorderPath(args: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderWidth: number;
+    borderRadius?: number | number[];
+}): string;

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

@@ -14,16 +14,18 @@ export function getXValue(args) {
     const [xMinDomain, xMaxDomain] = xLinearScale.domain();
     if (Number(xMinDomain) === Number(xMaxDomain) &&
         (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
-        const x1 = points[0].x;
-        const xTarget = points[1].x;
-        const x3 = points[2].x;
-        const xMin = Math.min(x1, xTarget, x3);
-        const xMax = Math.max(x1, xTarget, x3);
-        xLinearScale = xLinearScale
-            .copy()
-            .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
+        const x1 = Number(points[0].x);
+        const xTarget = Number(points[1].x);
+        const x3 = Number(points[2].x);
+        if (!Number.isNaN(x1) && !Number.isNaN(xTarget) && !Number.isNaN(x3)) {
+            const xMin = Math.min(x1, xTarget, x3);
+            const xMax = Math.max(x1, xTarget, x3);
+            xLinearScale = xLinearScale
+                .copy()
+                .domain([xMin + (xTarget - xMin) / 2, xMax - (xMax - xTarget) / 2]);
+        }
     }
-    return xLinearScale(point.x);
+    return point.x === null ? null : xLinearScale(point.x);
 }
 export function getYValue(args) {
     const { point, points, yAxis, yScale } = args;
@@ -37,16 +39,18 @@ export function getYValue(args) {
     const [yMinDomain, yMaxDomain] = yLinearScale.domain();
     if (Number(yMinDomain) === Number(yMaxDomain) &&
         (points === null || points === void 0 ? void 0 : points.length) === ONE_POINT_DOMAIN_DATA_CAPACITY) {
-        const y1 = points[0].y;
-        const yTarget = points[1].y;
-        const y2 = points[2].y;
-        const yMin = Math.min(y1, yTarget, y2);
-        const yMax = Math.max(y1, yTarget, y2);
-        yLinearScale = yLinearScale
-            .copy()
-            .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
+        const y1 = Number(points[0].y);
+        const yTarget = Number(points[1].y);
+        const y2 = Number(points[2].y);
+        if (!Number.isNaN(y1) && !Number.isNaN(yTarget) && !Number.isNaN(y2)) {
+            const yMin = Math.min(y1, yTarget, y2);
+            const yMax = Math.max(y1, yTarget, y2);
+            yLinearScale = yLinearScale
+                .copy()
+                .domain([yMin + (yTarget - yMin) / 2, yMax - (yMax - yTarget) / 2]);
+        }
     }
-    return yLinearScale(point.y);
+    return point.y === null ? null : yLinearScale(point.y);
 }
 export function shapeKey(d) {
     return d.id || -1;
@@ -83,3 +87,47 @@ export function getRectPath(args) {
     p.closePath();
     return p;
 }
+export function getRectBorderPath(args) {
+    const { x, y, width, height, borderWidth, borderRadius = 0 } = args;
+    if (!borderWidth) {
+        return '';
+    }
+    const halfWidth = borderWidth / 2;
+    const expandedWidth = width + borderWidth;
+    const expandedHeight = height + borderWidth;
+    const innerWidth = width - borderWidth;
+    const innerHeight = height - borderWidth;
+    const borderRadiuses = typeof borderRadius === 'number' ? new Array(4).fill(borderRadius) : borderRadius;
+    const [borderRadiusTopLeft = 0, borderRadiusTopRight = 0, borderRadiusBottomRight = 0, borderRadiusBottomLeft = 0,] = borderRadiuses !== null && borderRadiuses !== void 0 ? borderRadiuses : [];
+    const adjustOuterRadius = (radius) => (radius ? radius + halfWidth : 0);
+    const outerBorderRadius = [
+        adjustOuterRadius(borderRadiusTopLeft),
+        adjustOuterRadius(borderRadiusTopRight),
+        adjustOuterRadius(borderRadiusBottomRight),
+        adjustOuterRadius(borderRadiusBottomLeft),
+    ];
+    const outerPath = getRectPath({
+        x: x - halfWidth,
+        y: y - halfWidth,
+        width: expandedWidth,
+        height: expandedHeight,
+        borderRadius: outerBorderRadius,
+    }).toString();
+    if (innerWidth <= 0 || innerHeight <= 0) {
+        return outerPath;
+    }
+    const innerBorderRadius = [
+        Math.max(borderRadiusTopLeft - halfWidth, 0),
+        Math.max(borderRadiusTopRight - halfWidth, 0),
+        Math.max(borderRadiusBottomRight - halfWidth, 0),
+        Math.max(borderRadiusBottomLeft - halfWidth, 0),
+    ];
+    const innerPath = getRectPath({
+        x: x + halfWidth,
+        y: y + halfWidth,
+        width: innerWidth,
+        height: innerHeight,
+        borderRadius: innerBorderRadius,
+    }).toString();
+    return `${outerPath} ${innerPath}`;
+}

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

@@ -5,10 +5,10 @@ import type { PreparedWaterfallData } from './types';
 export { prepareWaterfallData } from './prepare-data';
 export * from './types';
 type Args = {
-    dispatcher: Dispatch<object>;
+    clipPathId: string;
+    htmlLayout: HTMLElement | null;
     preparedData: PreparedWaterfallData[];
     seriesOptions: PreparedSeriesOptions;
-    htmlLayout: HTMLElement | null;
-    clipPathId: string;
+    dispatcher?: Dispatch<object>;
 };
 export declare const WaterfallSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -121,9 +121,9 @@ export const WaterfallSeriesShapes = (args) => {
         if (hoveredDataRef.current !== null) {
             handleShapeHover(hoveredDataRef.current);
         }
-        dispatcher.on('hover-shape.waterfall', handleShapeHover);
+        dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', handleShapeHover);
         return () => {
-            dispatcher.on('hover-shape.waterfall', null);
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', null);
         };
     }, [connectorSelector, dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,

package/dist/esm/hooks/useShapes/waterfall/prepare-data.d.ts

@@ -1,12 +1,12 @@
+import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 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;
+    xAxis: PreparedXAxis;
     xScale: ChartScale;
-    yAxis: PreparedAxis[];
+    yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
 }) => Promise<PreparedWaterfallData[]>;

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

@@ -53,6 +53,7 @@ function getBandWidth(args) {
     return bandWidth;
 }
 export const prepareWaterfallData = async (args) => {
+    var _a;
     const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale: [yScale], } = args;
     const yLinearScale = yScale;
     if (!yLinearScale) {
@@ -73,11 +74,11 @@ export const prepareWaterfallData = async (args) => {
     });
     const rectGap = Math.max(bandWidth * barPadding, MIN_BAR_GAP);
     const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(bandWidth - rectGap, barMaxWidth));
-    const yZero = getYValue({
+    const yZero = (_a = getYValue({
         point: { y: 0 },
         yScale: yLinearScale,
         yAxis,
-    });
+    })) !== null && _a !== void 0 ? _a : 0;
     let totalValue = 0;
     const result = [];
     for (let i = 0; i < data.length; i++) {
@@ -90,14 +91,20 @@ export const prepareWaterfallData = async (args) => {
         }
         const prevPoint = result[result.length - 1];
         const xCenter = getXValue({ point: item.data, xAxis, xScale });
+        if (xCenter === null) {
+            continue;
+        }
         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: yLinearScale,
-                yAxis,
-            });
+        const calculatedYValue = getYValue({
+            point: { y: Math.abs(yValue) },
+            yScale: yLinearScale,
+            yAxis,
+        });
+        if (calculatedYValue === null) {
+            continue;
+        }
+        const height = yZero - calculatedYValue;
         let y;
         if (!prevPoint || item.data.total) {
             y = getYValue({
@@ -122,6 +129,9 @@ export const prepareWaterfallData = async (args) => {
         else {
             y = prevPoint.y - height;
         }
+        if (y === null) {
+            continue;
+        }
         const preparedData = {
             x,
             y,