@gravity-ui/charts 1.22.0 → 1.23.0

package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts

@@ -37,7 +37,7 @@ export declare function useChartInnerProps(props: Props): {
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSplit: import("../../hooks").PreparedSplit;
     preparedZoom: Required<{
-        type?: ("x" | "y" | "xy") | undefined;
+        type?: import("../../constants").ZoomType | undefined;
         brush?: Required<{
             style?: Required<{
                 fillOpacity?: number | undefined;

package/dist/cjs/components/Tooltip/DefaultTooltipContent/utils.d.ts

@@ -1,6 +1,6 @@
 import type { ChartSeriesData, ChartTooltip, ChartTooltipTotalsAggregationValue, ChartTooltipTotalsBuiltInAggregation, ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../../types';
 export type HoveredValue = string | number | null | undefined;
-export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | undefined;
+export declare function getXRowData(data: ChartSeriesData, xAxis?: ChartXAxis | null): string | number | null | undefined;
 export declare function getDefaultValueFormat({ axis, closestPointsRange, }: {
     axis?: ChartXAxis | ChartYAxis | null;
     closestPointsRange?: number;
@@ -14,7 +14,7 @@ export declare const getMeasureValue: ({ data, xAxis, yAxis, headerFormat, }: {
     value: string | null;
     formattedValue?: undefined;
 } | {
-    value: string | number | undefined;
+    value: string | number | null | undefined;
     formattedValue: string;
 } | null;
 export declare function getHoveredValues(args: {

package/dist/cjs/constants/index.d.ts

@@ -9,3 +9,4 @@ export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';
 export * from './typography';
+export * from './zoom';

package/dist/cjs/constants/index.js

@@ -9,3 +9,4 @@ export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';
 export * from './typography';
+export * from './zoom';

package/dist/cjs/constants/zoom.d.ts

@@ -0,0 +1,6 @@
+export declare const ZOOM_TYPE: {
+    readonly X: "x";
+    readonly XY: "xy";
+    readonly Y: "y";
+};
+export type ZoomType = (typeof ZOOM_TYPE)[keyof typeof ZOOM_TYPE];

package/dist/cjs/constants/zoom.js

@@ -0,0 +1,5 @@
+export const ZOOM_TYPE = {
+    X: 'x',
+    XY: 'xy',
+    Y: 'y',
+};

package/dist/cjs/hooks/useBrush/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { brush, brushX, brushY, select } from 'd3';
+import { ZOOM_TYPE } from '../../constants';
 import { block } from '../../utils';
 import './styles.css';
 const b = block('brush');
 export function useBrush(props) {
-    const { areas, brushOptions, node, type, onBrushStart, onBrush, onBrushEnd } = props;
+    const { areas, brushOptions, disabled, node, type, onBrushStart, onBrush, onBrushEnd } = props;
     React.useEffect(() => {
-        if (!node || !areas.length) {
+        if (!node || !areas.length || disabled) {
             return () => { };
         }
         const brushes = [];
@@ -15,15 +16,15 @@ export function useBrush(props) {
         areas.forEach((area) => {
             let brushFn;
             switch (type) {
-                case 'x': {
+                case ZOOM_TYPE.X: {
                     brushFn = brushX;
                     break;
                 }
-                case 'y': {
+                case ZOOM_TYPE.Y: {
                     brushFn = brushY;
                     break;
                 }
-                case 'xy':
+                case ZOOM_TYPE.XY:
                 default: {
                     brushFn = brush;
                     break;
@@ -66,5 +67,5 @@ export function useBrush(props) {
                 selection === null || selection === void 0 ? void 0 : selection.remove();
             });
         };
-    }, [areas, brushOptions, node, type, onBrushStart, onBrush, onBrushEnd]);
+    }, [areas, brushOptions, disabled, node, type, onBrushStart, onBrush, onBrushEnd]);
 }

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

@@ -1,6 +1,6 @@
 import type { BrushBehavior } from 'd3';
+import type { ZoomType } from '../../constants';
 import type { PreparedZoom } from '../useChartOptions/types';
-type BrushType = PreparedZoom['type'];
 type BrushSelection = [number, number] | [[number, number], [number, number]];
 export interface BrushArea {
     /**
@@ -15,8 +15,9 @@ export interface BrushArea {
 export interface UseBrushProps {
     areas: BrushArea[];
     node: SVGGElement | null;
-    type?: BrushType;
+    type?: ZoomType;
     brushOptions?: PreparedZoom['brush'];
+    disabled?: boolean;
     onBrushStart?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>) => void;
     onBrush?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection) => void;
     onBrushEnd?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection | null) => void;

package/dist/cjs/hooks/useChartOptions/chart.js

@@ -1,6 +1,5 @@
 import get from 'lodash/get';
-import intersection from 'lodash/intersection';
-import { SeriesType } from '../../constants';
+import { getPreparedZoom } from './zoom';
 const getMarginTop = (args) => {
     const { chart, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
@@ -13,86 +12,6 @@ const getMarginRight = (args) => {
     const { chart } = args;
     return get(chart, 'margin.right', 0);
 };
-function mapSeriesTypeToZoomType(seriesType) {
-    switch (seriesType) {
-        case SeriesType.Area: {
-            return ['x', 'y', 'xy'];
-        }
-        case SeriesType.BarX: {
-            return ['x'];
-        }
-        case SeriesType.BarY: {
-            return ['y'];
-        }
-        case SeriesType.Line: {
-            return ['x', 'y', 'xy'];
-        }
-        case SeriesType.Scatter: {
-            return ['x', 'y', 'xy'];
-        }
-        case SeriesType.Waterfall: {
-            return ['x', 'y', 'xy'];
-        }
-        default: {
-            return [];
-        }
-    }
-}
-function getDefaultZoomType(seriesType) {
-    switch (seriesType) {
-        case SeriesType.BarY: {
-            return 'y';
-        }
-        case SeriesType.Scatter: {
-            return 'xy';
-        }
-        default: {
-            return 'x';
-        }
-    }
-}
-function getZoomType(args) {
-    const { seriesData, zoomType } = args;
-    const possibleDefaultZoomTypes = seriesData.map((s) => {
-        return getDefaultZoomType(s.type);
-    });
-    const availableDefaultZoomTypes = intersection(possibleDefaultZoomTypes);
-    if (zoomType) {
-        const possibleZoomTypes = seriesData.map((s) => {
-            return mapSeriesTypeToZoomType(s.type);
-        });
-        const availableZoomTypes = intersection(...possibleZoomTypes);
-        if (availableZoomTypes.includes(zoomType)) {
-            return zoomType;
-        }
-    }
-    if (availableDefaultZoomTypes.length) {
-        return availableDefaultZoomTypes[0];
-    }
-    return undefined;
-}
-function getPreparedZoom(args) {
-    var _a, _b, _c, _d;
-    const { zoom, seriesData } = args;
-    if (!(zoom === null || zoom === void 0 ? void 0 : zoom.enabled)) {
-        return null;
-    }
-    const type = getZoomType({ seriesData, zoomType: zoom.type });
-    if (!type) {
-        return null;
-    }
-    return {
-        type,
-        brush: {
-            style: Object.assign({ fillOpacity: 1 }, (_a = zoom === null || zoom === void 0 ? void 0 : zoom.brush) === null || _a === void 0 ? void 0 : _a.style),
-        },
-        resetButton: {
-            align: ((_b = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _b === void 0 ? void 0 : _b.align) || 'top-right',
-            offset: Object.assign({ x: 0, y: 0 }, (_c = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _c === void 0 ? void 0 : _c.offset),
-            relativeTo: ((_d = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _d === void 0 ? void 0 : _d.relativeTo) || 'chart-box',
-        },
-    };
-}
 export const getPreparedChart = (args) => {
     const { chart, preparedTitle, seriesData } = args;
     const marginTop = getMarginTop({ chart, preparedTitle });

package/dist/cjs/hooks/useChartOptions/zoom.d.ts

@@ -0,0 +1,11 @@
+import type { ZoomType } from '../../constants';
+import type { ChartSeries, ChartZoom } from '../../types';
+import type { PreparedZoom } from './types';
+export declare function getZoomType(args: {
+    seriesData: ChartSeries[];
+    zoomType?: ZoomType;
+}): ZoomType | undefined;
+export declare function getPreparedZoom(args: {
+    zoom?: ChartZoom;
+    seriesData: ChartSeries[];
+}): PreparedZoom | null;

package/dist/cjs/hooks/useChartOptions/zoom.js

@@ -0,0 +1,88 @@
+import intersection from 'lodash/intersection';
+import { SeriesType, ZOOM_TYPE } from '../../constants';
+function mapSeriesTypeToZoomType(seriesType) {
+    switch (seriesType) {
+        case SeriesType.Area: {
+            return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];
+        }
+        case SeriesType.BarX: {
+            return [ZOOM_TYPE.X];
+        }
+        case SeriesType.BarY: {
+            return [ZOOM_TYPE.Y];
+        }
+        case SeriesType.Line: {
+            return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];
+        }
+        case SeriesType.Scatter: {
+            return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];
+        }
+        case SeriesType.Waterfall: {
+            return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];
+        }
+        default: {
+            return [];
+        }
+    }
+}
+function getDefaultZoomType(seriesType) {
+    switch (seriesType) {
+        case SeriesType.BarY: {
+            return ZOOM_TYPE.Y;
+        }
+        case SeriesType.Scatter: {
+            return ZOOM_TYPE.XY;
+        }
+        case SeriesType.Area:
+        case SeriesType.BarX:
+        case SeriesType.Line:
+        case SeriesType.Waterfall: {
+            return ZOOM_TYPE.X;
+        }
+        default: {
+            return undefined;
+        }
+    }
+}
+export function getZoomType(args) {
+    const { seriesData, zoomType } = args;
+    const possibleZoomTypes = seriesData.map((s) => {
+        return mapSeriesTypeToZoomType(s.type);
+    });
+    const availableZoomTypes = intersection(...possibleZoomTypes);
+    if (zoomType && availableZoomTypes.includes(zoomType)) {
+        return zoomType;
+    }
+    const possibleDefaultZoomTypes = seriesData
+        .map((s) => {
+        return getDefaultZoomType(s.type);
+    })
+        .filter(Boolean);
+    const availableDefaultZoomTypes = intersection(possibleDefaultZoomTypes, ...possibleZoomTypes);
+    if (availableDefaultZoomTypes.length) {
+        return availableDefaultZoomTypes[0];
+    }
+    return undefined;
+}
+export function getPreparedZoom(args) {
+    var _a, _b, _c, _d;
+    const { zoom, seriesData } = args;
+    if (!(zoom === null || zoom === void 0 ? void 0 : zoom.enabled)) {
+        return null;
+    }
+    const type = getZoomType({ seriesData, zoomType: zoom.type });
+    if (!type) {
+        return null;
+    }
+    return {
+        type,
+        brush: {
+            style: Object.assign({ fillOpacity: 1 }, (_a = zoom === null || zoom === void 0 ? void 0 : zoom.brush) === null || _a === void 0 ? void 0 : _a.style),
+        },
+        resetButton: {
+            align: ((_b = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _b === void 0 ? void 0 : _b.align) || 'top-right',
+            offset: Object.assign({ x: 0, y: 0 }, (_c = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _c === void 0 ? void 0 : _c.offset),
+            relativeTo: ((_d = zoom === null || zoom === void 0 ? void 0 : zoom.resetButton) === null || _d === void 0 ? void 0 : _d.relativeTo) || 'chart-box',
+        },
+    };
+}

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

@@ -24,6 +24,20 @@ function prepareMarker(series, seriesOptions) {
         },
     };
 }
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { y: (_a = p.y) !== null && _a !== void 0 ? _a : 0 })); });
+        case 'connect':
+            return data.filter((p) => p.y !== null);
+        case 'skip':
+        default:
+            return data;
+    }
+}
 export function prepareArea(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     const defaultAreaWidth = get(seriesOptions, 'area.lineWidth', DEFAULT_LINE_WIDTH);
@@ -45,7 +59,7 @@ export function prepareArea(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
             },
-            data: series.data,
+            data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: {

package/dist/cjs/hooks/useSeries/prepare-bar-x.js

@@ -3,6 +3,18 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { y: (_a = p.y) !== null && _a !== void 0 ? _a : 0 })); });
+        case 'skip':
+        default:
+            return data.filter((p) => p.y !== null);
+    }
+}
 export function prepareBarXSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
@@ -19,7 +31,7 @@ export function prepareBarXSeries(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
             },
-            data: series.data,
+            data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: {

package/dist/cjs/hooks/useSeries/prepare-bar-y.d.ts

@@ -1,5 +1,5 @@
 import type { ScaleOrdinal } from 'd3';
-import type { BarYSeries, ChartSeriesOptions } from '../../types';
+import type { BarYSeries, BarYSeriesData, ChartSeriesOptions } from '../../types';
 import type { PreparedLegend } from './types';
 type PrepareBarYSeriesArgs = {
     colorScale: ScaleOrdinal<string, string>;
@@ -9,7 +9,7 @@ type PrepareBarYSeriesArgs = {
 };
 export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): Promise<({
     type: BarYSeries["type"];
-    data: import("../../types").BarYSeriesData[];
+    data: BarYSeriesData[];
     stackId: string;
     stacking: BarYSeries["stacking"];
     dataLabels: {

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -3,6 +3,18 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getLabelsSize, getUniqId } from '../../utils';
 import { getFormattedValue } from '../../utils/chart/format';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { x: (_a = p.x) !== null && _a !== void 0 ? _a : 0 })); });
+        case 'skip':
+        default:
+            return data.filter((p) => p.x !== null);
+    }
+}
 async function prepareDataLabels(series) {
     var _a, _b, _c, _d;
     const enabled = get(series, 'dataLabels.enabled', false);
@@ -46,7 +58,7 @@ export function prepareBarYSeries(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
             },
-            data: series.data.filter((d) => d.x !== null),
+            data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: await prepareDataLabels(series),

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

@@ -3,6 +3,18 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { value: (_a = p.value) !== null && _a !== void 0 ? _a : 0 })); });
+        case 'skip':
+        default:
+            return data;
+    }
+}
 export function prepareHeatmapSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
@@ -19,7 +31,7 @@ export function prepareHeatmapSeries(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
             },
-            data: series.data,
+            data: prepareSeriesData(series),
             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),

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

@@ -150,7 +150,7 @@ function getPagination(args) {
         if (!pages[currentPageIndex]) {
             pages[currentPageIndex] = { start: i, end: i };
         }
-        const legendLineHeight = Math.max(...item.map((item) => item.height));
+        const legendLineHeight = Math.max(...item.map(({ height }) => height));
         currentHeight += legendLineHeight;
         if (currentHeight > maxLegendHeight - paginatorHeight) {
             pages[currentPageIndex].end = i;

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

@@ -41,6 +41,20 @@ function prepareMarker(series, seriesOptions) {
         },
     };
 }
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { y: (_a = p.y) !== null && _a !== void 0 ? _a : 0 })); });
+        case 'connect':
+            return data.filter((p) => p.y !== null);
+        case 'skip':
+        default:
+            return data;
+    }
+}
 export function prepareLineSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
@@ -62,7 +76,7 @@ export function prepareLineSeries(args) {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLineLegendSymbol(series, seriesOptions),
             },
-            data: series.data,
+            data: prepareSeriesData(series),
             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),

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

@@ -4,13 +4,26 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { value: (_a = p.value) !== null && _a !== void 0 ? _a : 0 })); });
+        case 'skip':
+        default:
+            return data.filter((p) => p.value !== null);
+    }
+}
 export function preparePieSeries(args) {
     const { series, seriesOptions, legend, colors } = args;
-    const dataNames = series.data.map((d) => d.name);
+    const preparedData = prepareSeriesData(series);
+    const dataNames = preparedData.map((d) => d.name);
     const colorScale = scaleOrdinal(dataNames, colors);
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
-    const preparedSeries = series.data.map((dataItem, i) => {
+    const preparedSeries = preparedData.map((dataItem, i) => {
         var _a, _b, _c, _d, _e, _f;
         const result = {
             type: 'pie',

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

@@ -20,6 +20,21 @@ function prepareMarker(series, seriesOptions, index) {
         },
     };
 }
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((p) => {
+                var _a, _b;
+                return (Object.assign(Object.assign({}, p), { x: (_a = p.x) !== null && _a !== void 0 ? _a : 0, y: (_b = p.y) !== null && _b !== void 0 ? _b : 0 }));
+            });
+        case 'skip':
+        default:
+            return data.filter((p) => p.y !== null && p.x !== null);
+    }
+}
 export function prepareScatterSeries(args) {
     const { colorScale, series, seriesOptions, legend } = args;
     return series.map((s, index) => {
@@ -36,7 +51,7 @@ export function prepareScatterSeries(args) {
                 enabled: get(s, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(s, symbolType),
             },
-            data: s.data,
+            data: prepareSeriesData(s),
             marker: prepareMarker(s, seriesOptions, index),
             cursor: get(s, 'cursor', null),
             yAxis: get(s, 'yAxis', 0),

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

@@ -3,6 +3,21 @@ import { DEFAULT_DATALABELS_STYLE } from '../../constants';
 import { getUniqId } from '../../utils';
 import { DEFAULT_DATALABELS_PADDING } from './constants';
 import { prepareLegendSymbol } from './utils';
+function prepareSeriesData(series) {
+    var _a;
+    const nullMode = (_a = series.nullMode) !== null && _a !== void 0 ? _a : 'skip';
+    const data = series.data;
+    switch (nullMode) {
+        case 'zero':
+            return data.map((d) => {
+                var _a;
+                return (Object.assign(Object.assign({}, d), { y: d.total ? d.y : ((_a = d.y) !== null && _a !== void 0 ? _a : 0) }));
+            });
+        case 'skip':
+        default:
+            return data.filter((d) => d.y !== null);
+    }
+}
 export function prepareWaterfallSeries(args) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { colorScale, series: seriesList, legend, colors } = args;
@@ -33,14 +48,15 @@ export function prepareWaterfallSeries(args) {
     const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
     const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });
     const totals = Object.assign(Object.assign({}, common), { name: (_o = (_m = (_l = series.legend) === null || _l === void 0 ? void 0 : _l.itemText) === null || _m === void 0 ? void 0 : _m.totals) !== null && _o !== void 0 ? _o : series.name, id: getUniqId(), data: [] });
-    series.data.forEach((d, index) => {
+    const preparedData = prepareSeriesData(series);
+    preparedData.forEach((d, index) => {
         var _a;
         const value = (_a = d === null || d === void 0 ? void 0 : d.y) !== null && _a !== void 0 ? _a : 0;
         const dataItem = Object.assign(Object.assign({}, d), { index });
         if (d === null || d === void 0 ? void 0 : d.total) {
             totals.data.push(dataItem);
         }
-        else if (value > 0) {
+        else if (value >= 0) {
             positive.data.push(dataItem);
         }
         else if (value < 0) {

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

@@ -22,6 +22,7 @@ export const AreaSeriesShapes = (args) => {
         const inactiveOptions = get(seriesOptions, 'area.states.inactive');
         const line = lineGenerator()
             .x((d) => d.x)
+            .defined((d) => d.y !== null)
             .y((d) => d.y);
         plotSvgElement.selectAll('*').remove();
         markersSvgElement.selectAll('*').remove();
@@ -41,6 +42,7 @@ export const AreaSeriesShapes = (args) => {
             .attr('stroke-linejoin', 'round')
             .attr('stroke-linecap', 'round');
         const area = areaGenerator()
+            .defined((d) => d.y !== null)
             .x((d) => d.x)
             .y0((d) => d.y0)
             .y1((d) => d.y);