@gravity-ui/charts 1.21.0 → 1.23.0

package/dist/cjs/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/cjs/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/cjs/hooks/useShapes/utils.d.ts

@@ -4,24 +4,24 @@ 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;
     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;
     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/cjs/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/cjs/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,

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

@@ -6,13 +6,14 @@ export const useTooltip = ({ dispatcher, tooltip }) => {
     React.useEffect(() => {
         if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) {
             dispatcher.on('hover-shape.tooltip', (nextHovered, nextPointerPosition) => {
-                const isHoveredChanged = !isEqual(prevHovered.current, nextHovered);
+                const filteredNextHovered = nextHovered === null || nextHovered === void 0 ? void 0 : nextHovered.filter((item) => 'y' in item.data ? item.data.y !== null : true);
+                const isHoveredChanged = !isEqual(prevHovered.current, filteredNextHovered);
                 const newTooltipState = {
                     pointerPosition: nextPointerPosition,
-                    hovered: isHoveredChanged ? nextHovered : prevHovered.current,
+                    hovered: isHoveredChanged ? filteredNextHovered : prevHovered.current,
                 };
                 if (isHoveredChanged) {
-                    prevHovered.current = nextHovered;
+                    prevHovered.current = filteredNextHovered;
                 }
                 setTooltipState(newTooltipState);
             });
@@ -23,5 +24,8 @@ export const useTooltip = ({ dispatcher, tooltip }) => {
             }
         };
     }, [dispatcher, tooltip]);
-    return { hovered, pointerPosition };
+    return {
+        hovered,
+        pointerPosition,
+    };
 };

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

@@ -4,6 +4,7 @@ import { useBrush } from '../useBrush';
 import { selectionToZoomBounds } from './utils';
 export function useZoom(props) {
     const { node, onUpdate, plotContainerHeight, plotContainerWidth, preparedSplit, preparedZoom, xAxis, xScale, yAxis, yScale, } = props;
+    const isBrushDisabled = Boolean(!xAxis || !yAxis || !xScale || !yScale);
     const areas = React.useMemo(() => {
         const result = [];
         if (!preparedZoom) {
@@ -47,6 +48,7 @@ export function useZoom(props) {
     useBrush({
         areas,
         brushOptions: preparedZoom === null || preparedZoom === void 0 ? void 0 : preparedZoom.brush,
+        disabled: isBrushDisabled,
         node,
         type: preparedZoom === null || preparedZoom === void 0 ? void 0 : preparedZoom.type,
         onBrushEnd: handleChartBrushEnd,

package/dist/cjs/hooks/useZoom/utils.d.ts

@@ -1,6 +1,7 @@
 import type { BrushSelection } from 'd3';
+import type { ZoomType } from '../../constants';
 import type { ChartScale } from '../useAxisScales';
-import type { PreparedAxis, PreparedZoom } from '../useChartOptions/types';
+import type { PreparedAxis } from '../useChartOptions/types';
 import type { ZoomState } from './types';
 export declare function selectionToZoomBounds(args: {
     selection: BrushSelection;
@@ -8,5 +9,5 @@ export declare function selectionToZoomBounds(args: {
     xScale: ChartScale;
     yAxes: PreparedAxis[];
     yScales: (ChartScale | undefined)[];
-    zoomType: PreparedZoom['type'];
+    zoomType: ZoomType;
 }): Partial<ZoomState>;

package/dist/cjs/hooks/useZoom/utils.js

@@ -1,13 +1,14 @@
+import { ZOOM_TYPE } from '../../constants';
 export function selectionToZoomBounds(args) {
     const { selection, xAxis, xScale, yAxes, yScales, zoomType } = args;
     const zoomState = {};
     switch (zoomType) {
-        case 'x': {
+        case ZOOM_TYPE.X: {
             const [x0, x1] = selection;
             zoomState.x = selectionXToZoomBounds({ xAxis, xScale, selection: [x0, x1] });
             break;
         }
-        case 'y': {
+        case ZOOM_TYPE.Y: {
             const [y1, y0] = selection;
             yAxes.forEach((yAxis, index) => {
                 if (!Array.isArray(zoomState.y)) {
@@ -27,7 +28,7 @@ export function selectionToZoomBounds(args) {
             });
             break;
         }
-        case 'xy': {
+        case ZOOM_TYPE.XY: {
             const [x0, y0] = selection[0];
             const [x1, y1] = selection[1];
             zoomState.x = selectionXToZoomBounds({ xAxis, xScale, selection: [x0, x1] });

package/dist/cjs/hooks/utils/bar-y.d.ts

@@ -2,8 +2,14 @@ import type { BarYSeries, BarYSeriesData } from '../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../useSeries/types';
+/**
+ * BarY always filters out data with null or replace null by zero.
+ */
+type PreparedBarYSeriesData = BarYSeriesData & {
+    x?: number | string;
+};
 export declare function groupBarYDataByYValue<T extends BarYSeries | PreparedBarYSeries>(series: T[], yAxis: PreparedAxis[]): Record<string | number, Record<string, {
-    data: BarYSeriesData;
+    data: PreparedBarYSeriesData;
     series: T;
 }[]>>;
 export declare function getBarYLayout(args: {
@@ -16,3 +22,4 @@ export declare function getBarYLayout(args: {
     barGap: number;
     barSize: number;
 };
+export {};

package/dist/cjs/hooks/utils/bar-y.js

@@ -4,10 +4,14 @@ import { getDataCategoryValue } from '../../utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
 import { getSeriesStackId } from '../useSeries/utils';
 import { getBandSize } from './get-band-size';
+const isSeriesDataValid = (d) => d.x !== null;
 export function groupBarYDataByYValue(series, yAxis) {
     const data = {};
     series.forEach((s) => {
         s.data.forEach((d) => {
+            if (!isSeriesDataValid(d)) {
+                return;
+            }
             const axisIndex = get(s, 'yAxis', 0);
             const seriesYAxis = yAxis[axisIndex];
             const categories = get(seriesYAxis, 'categories', []);

package/dist/cjs/i18n/keysets/en.json

@@ -4,9 +4,9 @@
     "label_unknown-plugin": "Unknown plugin type \"{{type}}\"",
     "label_unknown-error": "Unknown error",
     "label_invalid-axis-category-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"category\". Strings and numbers are allowed.",
-    "label_invalid-axis-datetime-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"datetime\". Only numbers are allowed.",
+    "label_invalid-axis-datetime-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"datetime\". Numbers are allowed.",
     "label_invalid-axis-linear-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"linear\". Numbers and nulls are allowed.",
-    "label_invalid-pie-data-value": "It seems you are trying to use inappropriate data type for \"value\" value. Only numbers are allowed.",
+    "label_invalid-pie-data-value": "It seems you are trying to use inappropriate data type for \"value\" value. Only numbers or nulls are allowed.",
     "label_invalid-series-type": "It seems you haven't defined \"series.type\" property, or defined it incorrectly. Available values: [{{types}}].",
     "label_invalid-series-property": "It seems you are trying to use inappropriate value for \"{{key}}\", or defined it incorrectly. Available values: [{{values}}].",
     "label_invalid-treemap-redundant-value": "It seems you are trying to set \"value\" for container node. Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",

package/dist/cjs/i18n/keysets/ru.json

@@ -4,9 +4,9 @@
     "label_unknown-plugin": "Неизвестный тип плагина \"{{type}}\"",
     "label_unknown-error": "Неизвестная ошибка",
     "label_invalid-axis-category-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"category\". Допускается использование строк и чисел.",
-    "label_invalid-axis-datetime-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"datetime\". Допускается только использование чисел.",
+    "label_invalid-axis-datetime-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"datetime\". Допускается использование чисел.",
     "label_invalid-axis-linear-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"linear\". Допускается использование чисел и значений null.",
-    "label_invalid-pie-data-value": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"value\". Допускается только использование чисел.",
+    "label_invalid-pie-data-value": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"value\". Допускается только использование чисел или null.",
     "label_invalid-series-type": "Похоже, что вы не указали значение \"series.type\" или указали его неверно. Доступные значения: [{{types}}].",
     "label_invalid-series-property": "Похоже, что вы пытаетесь использовать недопустимое значение для \"{{key}}\", или указали его неверно. Доступные значения: [{{values}}].",
     "label_invalid-treemap-redundant-value": "Похоже, что вы пытаетесь установить значение \"value\" для узла, используемого в качестве контейнера. Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",

package/dist/cjs/types/chart/area.d.ts

@@ -17,7 +17,7 @@ export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
      * - timestamp value (for `datetime` y axis)
      * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
      */
-    y?: string | number;
+    y?: string | number | null;
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
     /** Individual marker options for the point. */
@@ -73,4 +73,14 @@ export interface AreaSeries<T = MeaningfulAny> extends BaseSeries {
     marker?: AreaMarkerOptions;
     /** Y-axis index (when using two axes) */
     yAxis?: number;
+    /**
+     * Specifies how null or undefined values should be handled in the series.
+     *
+     * - `'connect'`: Connect points across null values (skip nulls in rendering)
+     * - `'zero'`: Treat null values as zero
+     * - `'skip'`: Omit the data point (creates gap in area)
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'connect' | 'zero' | 'skip';
 }

package/dist/cjs/types/chart/bar-x.d.ts

@@ -17,7 +17,7 @@ export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
      * - timestamp value (for `datetime` y axis)
      * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
      */
-    y?: string | number;
+    y?: string | number | null;
     /**
      * Corresponding value of axis category.
      *
@@ -69,4 +69,13 @@ export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
     };
     /** Y-axis index (when using two axes) */
     yAxis?: number;
+    /**
+     * Specifies how null or undefined values should be handled in the series.
+     *
+     * - `'skip'`: Omit data points with null values (no bar shown)
+     * - `'zero'`: Treat null values as zero
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'zero' | 'skip';
 }

package/dist/cjs/types/chart/bar-y.d.ts

@@ -9,7 +9,7 @@ export interface BarYSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
      * - timestamp value (for `datetime` x axis)
      * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
      */
-    x?: string | number;
+    x?: string | number | null;
     /**
      * The `y` value of the bar. Depending on the context , it may represents:
      * - numeric value (for `linear` y axis)
@@ -71,4 +71,13 @@ export interface BarYSeries<T = MeaningfulAny> extends BaseSeries {
     legend?: ChartLegend & {
         symbol?: RectLegendSymbolOptions;
     };
+    /**
+     * Specifies how null or undefined values should be handled in the series.
+     *
+     * - `'skip'`: Omit data points with null values (no bar shown)
+     * - `'zero'`: Treat null values as zero
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'zero' | 'skip';
 }

package/dist/cjs/types/chart/heatmap.d.ts

@@ -18,7 +18,7 @@ export interface HeatmapSeriesData<T = MeaningfulAny> extends BaseSeriesData<T>
      */
     y?: string | number;
     /** Value of the heatmap cell */
-    value?: number;
+    value?: number | null;
     /** Data label value of the heatmap cell. If not specified, the value is used. */
     label?: string;
 }
@@ -44,4 +44,13 @@ export interface HeatmapSeries<T = MeaningfulAny> extends BaseSeries {
      * The color of the border surrounding each cell.
      */
     borderColor?: string;
+    /**
+     * Specifies how null or undefined values should be handled in the series.
+     *
+     * - `'zero'`: Treat null values as zero
+     * - `'skip'`: Omit data points with null values (show gaps)
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'zero' | 'skip';
 }

package/dist/cjs/types/chart/line.d.ts

@@ -17,7 +17,7 @@ export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
      * - timestamp value (for `datetime` y axis)
      * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
      */
-    y?: string | number;
+    y?: string | number | null;
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
     marker?: {
@@ -54,4 +54,14 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
     opacity?: number;
     /** Y-axis index (when using two axes) */
     yAxis?: number;
+    /**
+     * Specifies how null or undefined values should be handled in the series.
+     *
+     * - `'connect'`: Connect points across null values (skip nulls in rendering)
+     * - `'zero'`: Treat null values as zero
+     * - `'skip'`: Omit the data point (creates gap in line)
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'connect' | 'zero' | 'skip';
 }

package/dist/cjs/types/chart/pie.d.ts

@@ -5,7 +5,7 @@ import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartLegend, RectLegendSymbolOptions } from './legend';
 export interface PieSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The value of the pie segment. */
-    value: number;
+    value: number | null;
     /** The name of the pie segment (used in legend, tooltip etc). */
     name: string;
     /** Initial visibility of the pie segment. */
@@ -95,4 +95,13 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
             innerRadius: number;
         };
     }) => BaseType | Promise<BaseType>;
+    /**
+     * Specifies how null or undefined values should be handled in the series.
+     *
+     * - `'zero'`: Treat null values as zero
+     * - `'skip'`: Omit segments with null values (don't render them)
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'zero' | 'skip';
 }

package/dist/cjs/types/chart/scatter.d.ts

@@ -9,14 +9,14 @@ export interface ScatterSeriesData<T = MeaningfulAny> extends BaseSeriesData<T>
      * - timestamp value (for `datetime` x axis)
      * - x axis category value (for `category` x axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `xAxis.categories`
      */
-    x?: string | number;
+    x?: string | number | null;
     /**
      * The `y` value of the point. Depending on the context , it may represents:
      * - numeric value (for `linear` y axis)
      * - timestamp value (for `datetime` y axis)
      * - y axis category value (for `category` y axis). If the type is a string, then it is a category value itself. If the type is a number, then it is the index of an element in the array of categories described in `yAxis[0].categories`
      */
-    y?: string | number;
+    y?: string | number | null;
     /**
      * Corresponding value of axis category.
      *
@@ -43,4 +43,13 @@ export interface ScatterSeries<T = MeaningfulAny> extends BaseSeries {
     };
     /** Y-axis index (when using two axes) */
     yAxis?: number;
+    /**
+     * Defines how to handle null values in the data.
+     *
+     * - `'zero'`: Treat null values as zero
+     * - `'skip'`: Omit data points with null values (don't render them)
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'zero' | 'skip';
 }

package/dist/cjs/types/chart/waterfall.d.ts

@@ -14,7 +14,7 @@ export interface WaterfallSeriesData<T = MeaningfulAny> extends BaseSeriesData<T
      * The `y` value. Depending on the context , it may represents:
      * - numeric value (for `linear` y axis)
      */
-    y?: number;
+    y?: number | null;
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
     /** Individual opacity for the point. */
@@ -46,4 +46,13 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
             totals?: string;
         };
     };
+    /**
+     * Defines how to handle null values in the data.
+     *
+     * - `'zero'`: Treat null values as zero
+     * - `'skip'`: Omit data points with null values (don't render them)
+     *
+     * @default 'skip'
+     */
+    nullMode?: 'zero' | 'skip';
 }

package/dist/cjs/types/chart/zoom.d.ts

@@ -1,3 +1,4 @@
+import type { ZoomType } from '../../constants';
 /**
  * Configuration options for chart zooming functionality using area selection.
  * Working with only axis related series.
@@ -24,7 +25,7 @@ export interface ChartZoom {
      * - `Scatter`: `xy`
      * - All others: `x`
      */
-    type?: 'x' | 'y' | 'xy';
+    type?: ZoomType;
     /**
      * Zoom brush configuration.
      */
@@ -33,4 +34,33 @@ export interface ChartZoom {
             fillOpacity?: number;
         };
     };
+    /**
+     * Reset zoom button configuration.
+     * The button appears only after the zoom has been applied.
+     */
+    resetButton?: {
+        /**
+         * The alignment of the button.
+         *
+         * @default 'top-right'
+         */
+        align?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+        /**
+         * The offset of the button.
+         *
+         * @default {x: 0, y: 0}
+         */
+        offset?: {
+            x?: number;
+            y?: number;
+        };
+        /**
+         * The box to which the button is positioned relative to.
+         * - `chart-box` refers to the entire chart area, including titles and legends.
+         * - `plot-box` refers to the area where the series are drawn.
+         *
+         * @default 'chart-box'
+         */
+        relativeTo?: 'chart-box' | 'plot-box';
+    };
 }