@gravity-ui/charts 1.21.0 → 1.23.0

package/dist/cjs/components/ChartInner/index.js

@@ -14,13 +14,14 @@ import { Tooltip } from '../Tooltip';
 import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
-import { useAsyncState } from './utils';
+import { getResetZoomButtonStyle, useAsyncState } from './utils';
 import './styles.css';
 const b = block('chart');
 export const ChartInner = (props) => {
     var _a, _b, _c, _d;
     const { width, height, data } = props;
     const svgRef = React.useRef(null);
+    const resetZoomButtonRef = React.useRef(null);
     const [htmlLayout, setHtmlLayout] = React.useState(null);
     const plotRef = React.useRef(null);
     const plotBeforeRef = React.useRef(null);
@@ -39,7 +40,7 @@ export const ChartInner = (props) => {
         dispatcher,
         tooltip: preparedTooltip,
     });
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, xAxis, xScale, yAxis, yScale, svgXPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, preparedZoom, prevHeight, prevWidth, shapes, shapesData, svgXPos, title, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, svgContainer: svgRef.current, updateZoomState,
         zoomState }));
@@ -143,7 +144,10 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        Object.keys(zoomState).length > 0 && (React.createElement(Button, { style: { position: 'absolute', top: 0, right: 0 }, onClick: () => updateZoomState({}) },
+        Object.keys(zoomState).length > 0 && preparedZoom && (React.createElement(Button, { onClick: () => updateZoomState({}), ref: resetZoomButtonRef, style: getResetZoomButtonStyle(Object.assign({ boundsHeight,
+                boundsOffsetLeft,
+                boundsOffsetTop,
+                boundsWidth, node: resetZoomButtonRef.current, titleHeight: title === null || title === void 0 ? void 0 : title.height }, preparedZoom.resetButton)) },
             React.createElement(ButtonIcon, null,
                 React.createElement(ArrowRotateLeft, null)))),
         React.createElement(Tooltip, { dispatcher: dispatcher, tooltip: preparedTooltip, svgContainer: svgRef.current, xAxis: xAxis, yAxis: yAxis[0], onOutsideClick: unpinTooltip, tooltipPinned: tooltipPinned })));

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

@@ -12,8 +12,6 @@ type Props = ChartInnerProps & {
     zoomState: Partial<ZoomState>;
 };
 export declare function useChartInnerProps(props: Props): {
-    svgBottomPos: number | undefined;
-    svgTopPos: number | undefined;
     svgXPos: number | undefined;
     boundsHeight: number;
     boundsOffsetLeft: number;
@@ -38,6 +36,22 @@ export declare function useChartInnerProps(props: Props): {
     preparedLegend: import("../../hooks").PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSplit: import("../../hooks").PreparedSplit;
+    preparedZoom: Required<{
+        type?: import("../../constants").ZoomType | undefined;
+        brush?: Required<{
+            style?: Required<{
+                fillOpacity?: number | undefined;
+            } | undefined>;
+        } | undefined>;
+        resetButton?: Required<{
+            align?: ("bottom-left" | "bottom-right" | "top-left" | "top-right") | undefined;
+            offset?: Required<{
+                x?: number | undefined;
+                y?: number | undefined;
+            } | undefined>;
+            relativeTo?: ("chart-box" | "plot-box") | undefined;
+        } | undefined>;
+    }> | null;
     prevHeight: number | undefined;
     prevWidth: number | undefined;
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -138,10 +138,8 @@ export function useChartInnerProps(props) {
             }
             return acc;
         }, 0);
-    const { bottom, top, x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
+    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
-        svgBottomPos: bottom,
-        svgTopPos: top,
         svgXPos: x,
         boundsHeight,
         boundsOffsetLeft,
@@ -154,6 +152,7 @@ export function useChartInnerProps(props) {
         preparedLegend,
         preparedSeries,
         preparedSplit,
+        preparedZoom: chart.zoom,
         prevHeight,
         prevWidth,
         shapes,

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

@@ -1,4 +1,13 @@
+import React from 'react';
 import type { PreparedSeries } from '../../hooks';
-import type { PreparedAxis } from '../../hooks/useChartOptions/types';
+import type { PreparedAxis, PreparedZoom } from '../../hooks/useChartOptions/types';
 export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: PreparedSeries[], yAxes?: PreparedAxis[]): boolean;
 export declare function useAsyncState<T>(value: T, setState: () => Promise<T>): T;
+export declare function getResetZoomButtonStyle(args: {
+    boundsHeight: number;
+    boundsOffsetLeft: number;
+    boundsOffsetTop: number;
+    boundsWidth: number;
+    node: HTMLElement | null;
+    titleHeight?: number;
+} & PreparedZoom['resetButton']): React.CSSProperties;

package/dist/cjs/components/ChartInner/utils.js

@@ -47,3 +47,63 @@ export function useAsyncState(value, setState) {
     }, [setState]);
     return stateValue;
 }
+export function getResetZoomButtonStyle(args) {
+    const { align, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, node, offset, relativeTo, titleHeight, } = args;
+    const style = {
+        position: 'absolute',
+        transform: `translate(${offset.x}px, ${offset.y}px)`,
+    };
+    switch (relativeTo) {
+        case 'chart-box': {
+            switch (align) {
+                case 'bottom-left': {
+                    style.bottom = 0;
+                    style.left = 0;
+                    break;
+                }
+                case 'bottom-right': {
+                    style.bottom = 0;
+                    style.right = 0;
+                    break;
+                }
+                case 'top-left': {
+                    style.top = 0;
+                    style.left = 0;
+                    break;
+                }
+                case 'top-right': {
+                    style.top = 0;
+                    style.right = 0;
+                    break;
+                }
+            }
+            break;
+        }
+        case 'plot-box': {
+            switch (align) {
+                case 'bottom-left': {
+                    style.left = boundsOffsetLeft;
+                    style.top = boundsHeight - ((node === null || node === void 0 ? void 0 : node.clientHeight) || 0) + (titleHeight || 0);
+                    break;
+                }
+                case 'bottom-right': {
+                    style.left = boundsWidth + boundsOffsetLeft - ((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
+                    style.top = boundsHeight - ((node === null || node === void 0 ? void 0 : node.clientHeight) || 0) + (titleHeight || 0);
+                    break;
+                }
+                case 'top-left': {
+                    style.left = boundsOffsetLeft;
+                    style.top = boundsOffsetTop;
+                    break;
+                }
+                case 'top-right': {
+                    style.left = boundsWidth + boundsOffsetLeft - ((node === null || node === void 0 ? void 0 : node.clientWidth) || 0);
+                    style.top = boundsOffsetTop;
+                    break;
+                }
+            }
+            break;
+        }
+    }
+    return style;
+}

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,81 +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;
-    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),
-        },
-    };
-}
 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),