@gravity-ui/charts 1.24.2 → 1.26.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     clipPathId: string;
@@ -35,7 +35,7 @@ export declare function useChartInnerProps(props: Props): {
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
     preparedChart: import("../../hooks").PreparedChart;
-    preparedLegend: import("../../hooks").PreparedLegend | null;
+    preparedLegend: PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
@@ -52,7 +52,7 @@ export declare function useChartInnerProps(props: Props): {
     xScale: import("../../hooks").ChartScale | undefined;
     yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {
         type: import("../..").ChartAxisType;
-        labels: Omit<import("../..").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "enabled" | "html" | "padding" | "margin" | "rotation">> & {
+        labels: Omit<import("../..").ChartAxisLabels, "enabled" | "style" | "padding" | "autoRotation"> & Required<Pick<import("../..").ChartAxisLabels, "margin" | "html" | "enabled" | "padding" | "rotation">> & {
             style: import("../..").BaseTextStyle;
             rotation: number;
             height: number;

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

@@ -9,6 +9,30 @@ import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
 };
+function getBoundsOffsetTop(args) {
+    const { chartMarginTop, preparedLegend } = args;
+    return (chartMarginTop +
+        ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
+            ? preparedLegend.height + preparedLegend.margin
+            : 0));
+}
+function getBoundsOffsetLeft(args) {
+    const { chartMarginLeft, preparedLegend, yAxis, getYAxisWidth: getAxisWidth } = args;
+    const legendOffset = (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left'
+        ? preparedLegend.width + preparedLegend.margin
+        : 0;
+    const leftAxisWidth = yAxis.reduce((acc, axis) => {
+        if (axis.position !== 'left') {
+            return acc;
+        }
+        const axisWidth = getAxisWidth(axis);
+        if (acc < axisWidth) {
+            acc = axisWidth;
+        }
+        return acc;
+    }, 0);
+    return chartMarginLeft + legendOffset + leftAxisWidth;
+}
 export function useChartInnerProps(props) {
     var _a;
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
@@ -81,7 +105,6 @@ export function useChartInnerProps(props) {
         boundsHeight,
         rangeSliderState,
         series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
         split: preparedSplit,
         xAxis,
         yAxis,
@@ -130,22 +153,17 @@ export function useChartInnerProps(props) {
         yAxis,
         yScale,
     });
-    const boundsOffsetTop = chart.margin.top +
-        ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
-            ? preparedLegend.height + preparedLegend.margin
-            : 0);
+    const boundsOffsetTop = getBoundsOffsetTop({
+        chartMarginTop: chart.margin.top,
+        preparedLegend,
+    });
     // We need to calculate the width of each left axis because the first axis can be hidden
-    const boundsOffsetLeft = chart.margin.left +
-        yAxis.reduce((acc, axis) => {
-            if (axis.position !== 'left') {
-                return acc;
-            }
-            const axisWidth = getYAxisWidth(axis);
-            if (acc < axisWidth) {
-                acc = axisWidth;
-            }
-            return acc;
-        }, 0);
+    const boundsOffsetLeft = getBoundsOffsetLeft({
+        chartMarginLeft: chart.margin.left,
+        preparedLegend,
+        yAxis,
+        getYAxisWidth,
+    });
     const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
         allPreparedSeries,

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

@@ -6,16 +6,21 @@ import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineD
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
-const getLegendPosition = (args) => {
-    const { align, offsetLeft = 0, width, contentWidth } = args;
-    const top = 0;
-    if (align === 'left') {
-        return { top, left: offsetLeft };
-    }
+const getLegendItemPosition = (args) => {
+    const { align, width, contentWidth } = args;
     if (align === 'right') {
-        return { top, left: offsetLeft + width - contentWidth };
+        return { left: width - contentWidth };
+    }
+    else if (align === 'left') {
+        return { left: 0 };
+    }
+    else {
+        return { left: width / 2 - contentWidth / 2 };
     }
-    return { top, left: offsetLeft + width / 2 - contentWidth / 2 };
+};
+const getLegendPosition = (args) => {
+    const { offsetLeft, offsetTop, contentWidth, width } = args;
+    return { top: offsetTop, left: offsetLeft + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
     const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
@@ -115,7 +120,6 @@ function renderLegendSymbol(args) {
             }
             case 'symbol': {
                 const y = legendLineHeight / 2;
-                const translateX = x + d.symbol.width / 2;
                 element
                     .append('svg:path')
                     .attr('d', () => {
@@ -124,7 +128,9 @@ function renderLegendSymbol(args) {
                     // https://d3js.org/d3-shape/symbol#symbol
                     return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
                 })
-                    .attr('transform', () => {
+                    .attr('transform', (_d, _index, elements) => {
+                    var _a, _b;
+                    const translateX = x + ((_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) / 2;
                     return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
@@ -143,7 +149,7 @@ export const Legend = (props) => {
     }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _e, _f, _g, _h, _j;
             if (!ref.current || !htmlLayout) {
                 return;
             }
@@ -156,9 +162,11 @@ export const Legend = (props) => {
                 ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
                 : null;
             let legendWidth = 0;
+            let legendLeft = 0;
+            let legendTop = 0;
             if (legend.type === 'discrete') {
                 const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
+                const end = (_e = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _e === void 0 ? void 0 : _e.end;
                 const pageItems = typeof start === 'number' && typeof end === 'number'
                     ? items.slice(start, end)
                     : items;
@@ -174,7 +182,7 @@ export const Legend = (props) => {
                         .append('g')
                         .attr('class', b('item'))
                         .on('click', function (e, d) {
-                        onItemClick({ name: d.name, metaKey: e.metaKey });
+                        onItemClick({ id: d.id, name: d.name, metaKey: e.metaKey });
                         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
                     });
                     const getXPosition = (i) => {
@@ -213,7 +221,7 @@ export const Legend = (props) => {
                             return '0px';
                         })
                             .on('click', function (e, d) {
-                            onItemClick({ name: d.name, metaKey: e.metaKey });
+                            onItemClick({ id: d.id, name: d.name, metaKey: e.metaKey });
                             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
                         })[legend.html ? 'html' : 'text'](function (d) {
                             return d.name;
@@ -248,11 +256,10 @@ export const Legend = (props) => {
                     let left = 0;
                     switch (legend.justifyContent) {
                         case 'center': {
-                            const legendLinePostion = getLegendPosition({
+                            const legendLinePostion = getLegendItemPosition({
                                 align: legend.align,
                                 width: config.maxWidth,
                                 contentWidth,
-                                offsetLeft: config.offset.left,
                             });
                             left = legendLinePostion.left;
                             legendWidth = config.maxWidth;
@@ -279,10 +286,31 @@ export const Legend = (props) => {
                         onArrowClick: setPageIndex,
                     });
                 }
+                const { left, top } = getLegendPosition({
+                    width: config.maxWidth,
+                    contentWidth: legendWidth,
+                    offsetLeft: config.offset.left,
+                    offsetTop: config.offset.top,
+                });
+                legendLeft = left;
+                legendTop = top;
             }
             else {
+                const { left } = getLegendItemPosition({
+                    align: legend.align,
+                    width: config.maxWidth,
+                    contentWidth: legend.width,
+                });
+                const { top } = getLegendPosition({
+                    width: config.maxWidth,
+                    contentWidth: legendWidth,
+                    offsetLeft: config.offset.left,
+                    offsetTop: config.offset.top,
+                });
+                legendLeft = left;
+                legendTop = top;
                 // gradient rect
-                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
+                const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
                 svgElement.call(createGradientRect, {
                     y: legend.title.height + legend.title.margin,
@@ -351,25 +379,19 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
-                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
-                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
-                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
+                    .attr('font-weight', (_g = legend.title.style.fontWeight) !== null && _g !== void 0 ? _g : null)
+                    .attr('font-size', (_h = legend.title.style.fontSize) !== null && _h !== void 0 ? _h : null)
+                    .attr('fill', (_j = legend.title.style.fontColor) !== null && _j !== void 0 ? _j : null)
                     .style('dominant-baseline', 'text-before-edge')
                     .html(legend.title.text);
             }
             else {
                 svgElement.selectAll(`.${legendTitleClassname}`).remove();
             }
-            const { left } = getLegendPosition({
-                align: legend.align,
-                width: config.maxWidth,
-                contentWidth: legendWidth,
-                offsetLeft: config.offset.left,
-            });
             svgElement
-                .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
+                .attr('transform', `translate(${[legendLeft, legendTop].join(',')})`)
                 .style('opacity', 1);
-            htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
+            htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${legendLeft}px, ${legendTop}px)`);
         }
         prepareLegend();
     }, [chartSeries, onItemClick, onUpdate, legend, items, config, pageIndex, htmlLayout]);

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

@@ -18,7 +18,6 @@ export function useAxis(props) {
                 xAxis,
                 width,
                 seriesData,
-                seriesOptions: preparedSeriesOptions,
             });
             let estimatedBoundsHeight = boundsHeight !== null && boundsHeight !== void 0 ? boundsHeight : height;
             if (preparedXAxis && typeof boundsHeight !== 'number') {

package/dist/cjs/hooks/useAxis/x-axis.d.ts

@@ -1,9 +1,7 @@
 import type { ChartSeries, ChartXAxis } from '../../types';
-import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedXAxis } from './types';
-export declare const getPreparedXAxis: ({ xAxis, seriesData, seriesOptions, width, }: {
+export declare const getPreparedXAxis: ({ xAxis, seriesData, width, }: {
     xAxis?: ChartXAxis;
     seriesData: ChartSeries[];
-    seriesOptions: PreparedSeriesOptions;
     width: number;
 }) => Promise<PreparedXAxis | null>;

package/dist/cjs/hooks/useAxis/x-axis.js

@@ -4,8 +4,8 @@ import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisIte
 import { createXScale } from '../useAxisScales';
 import { getPreparedRangeSlider } from './range-slider';
 import { prepareAxisPlotLabel } from './utils';
-async function setLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
-    const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
+async function setLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
+    const scale = createXScale({ axis, series: seriesData, boundsWidth: width });
     if (!scale) {
         axis.labels.height = 0;
         axis.labels.rotation = 0;
@@ -56,7 +56,7 @@ function getMaxPaddingBySeries({ series }) {
     }
     return 0.01;
 }
-export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
+export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
     var _a, _b, _c, _d, _e;
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
     if (!hasAxisRelatedSeries) {
@@ -159,7 +159,6 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
     await setLabelSettings({
         axis: preparedXAxis,
         seriesData,
-        seriesOptions,
         width,
         autoRotation: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.autoRotation,
     });

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -1,12 +1,11 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
-import type { PreparedAxis, PreparedSeries, PreparedSeriesOptions, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedAxis, PreparedSeries, PreparedSplit, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartAxis, ChartSeries } from '../../types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;
     boundsHeight: number;
     series: PreparedSeries[];
-    seriesOptions: PreparedSeriesOptions;
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     split: PreparedSplit;
@@ -27,7 +26,6 @@ export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;
     series: (PreparedSeries | ChartSeries)[];
-    seriesOptions: PreparedSeriesOptions;
     rangeSliderState?: RangeSliderState;
     zoomStateX?: [number, number];
 }): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never> | undefined;

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

@@ -3,7 +3,6 @@ import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SERIES_TYPE } from '../../constants';
 import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisCategories, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
-import { getBarXLayoutForNumericScale, groupBarXDataByXValue } from '../utils/bar-x';
 import { getBandSize } from '../utils/get-band-size';
 import { checkIsPointDomain, getMinMaxPropsOrState, hasOnlyMarkerSeries } from './utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
@@ -214,32 +213,19 @@ function calculateXAxisPadding(series) {
     return result;
 }
 function isSeriesWithXAxisOffset(series) {
-    const types = [SERIES_TYPE.Heatmap];
+    const types = [SERIES_TYPE.Heatmap, SERIES_TYPE.BarX];
     return series.some((s) => types.includes(s.type));
 }
-function getXScaleRange({ boundsWidth, series, seriesOptions, hasZoomX, axis, }) {
+function getXScaleRange({ boundsWidth, hasZoomX }) {
     const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
     const xRange = [0, boundsWidth];
     const xRangeZoom = [0 + xAxisZoomPadding, boundsWidth - xAxisZoomPadding];
     const range = hasZoomX ? xRangeZoom : xRange;
-    const barXSeries = series.filter((s) => s.type === SERIES_TYPE.BarX);
-    if (barXSeries.length) {
-        const groupedData = groupBarXDataByXValue(barXSeries, axis);
-        if (Object.keys(groupedData).length > 1) {
-            const { bandSize } = getBarXLayoutForNumericScale({
-                plotWidth: boundsWidth,
-                groupedData,
-                seriesOptions,
-            });
-            const offset = bandSize / 2;
-            return [range[0] + offset, range[1] - offset];
-        }
-    }
     return range;
 }
 // eslint-disable-next-line complexity
 export function createXScale(args) {
-    const { axis, boundsWidth, series, seriesOptions, rangeSliderState, zoomStateX } = args;
+    const { axis, boundsWidth, series, rangeSliderState, zoomStateX } = args;
     const [xMinPropsOrState, xMaxPropsOrState] = getMinMaxPropsOrState({
         axis,
         maxValues: [zoomStateX === null || zoomStateX === void 0 ? void 0 : zoomStateX[1], rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.max],
@@ -260,10 +246,7 @@ export function createXScale(args) {
     const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
     const range = getXScaleRange({
         boundsWidth,
-        series,
-        seriesOptions,
         hasZoomX,
-        axis,
     });
     switch (axis.order) {
         case 'sortDesc':
@@ -407,7 +390,7 @@ export function createXScale(args) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, rangeSliderState, series, seriesOptions, split, xAxis, yAxis, zoomState, } = args;
+    const { boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
@@ -419,7 +402,6 @@ const createScales = (args) => {
                 boundsWidth,
                 rangeSliderState,
                 series: visibleSeries,
-                seriesOptions,
                 zoomStateX: zoomState === null || zoomState === void 0 ? void 0 : zoomState.x,
             })
             : undefined,
@@ -445,7 +427,7 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, rangeSliderState, series, seriesOptions, split, xAxis, yAxis, zoomState, } = args;
+    const { boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState } = args;
     return React.useMemo(() => {
         let xScale;
         let yScale;
@@ -456,7 +438,6 @@ export const useAxisScales = (args) => {
                 boundsHeight,
                 rangeSliderState,
                 series,
-                seriesOptions,
                 split,
                 xAxis,
                 yAxis,
@@ -464,15 +445,5 @@ export const useAxisScales = (args) => {
             }));
         }
         return { xScale, yScale };
-    }, [
-        boundsWidth,
-        boundsHeight,
-        rangeSliderState,
-        series,
-        seriesOptions,
-        split,
-        xAxis,
-        yAxis,
-        zoomState,
-    ]);
+    }, [boundsWidth, boundsHeight, rangeSliderState, series, split, xAxis, yAxis, zoomState]);
 };

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

@@ -30,6 +30,18 @@ const getTopOffset = ({ preparedLegend }) => {
     }
     return 0;
 };
+const getRightOffset = ({ preparedLegend }) => {
+    if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'right') {
+        return preparedLegend.width + preparedLegend.margin;
+    }
+    return 0;
+};
+const getLeftOffset = ({ preparedLegend }) => {
+    if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left') {
+        return preparedLegend.width + preparedLegend.margin;
+    }
+    return 0;
+};
 export const useChartDimensions = (args) => {
     const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width } = args;
     return React.useMemo(() => {
@@ -41,7 +53,10 @@ export const useChartDimensions = (args) => {
             preparedXAxis,
         });
         const topOffset = getTopOffset({ preparedLegend });
+        const rightOffset = getRightOffset({ preparedLegend });
+        const leftOffset = getLeftOffset({ preparedLegend });
         const boundsHeight = height - margin.top - margin.bottom - bottomOffset - topOffset;
-        return { boundsWidth, boundsHeight };
+        const adjustedBoundsWidth = boundsWidth - rightOffset - leftOffset;
+        return { boundsWidth: adjustedBoundsWidth, boundsHeight };
     }, [height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width]);
 };

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

@@ -41,7 +41,6 @@ export function useRangeSlider(props) {
         boundsHeight: preparedRangeSlider.height,
         boundsWidth,
         series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
         split: EMPTY_PREPARED_SPLIT,
         xAxis: preparedXAxis,
         yAxis: preparedYAxis,

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

@@ -9,7 +9,7 @@ const useVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
     return React.useMemo(() => {
         return preparedSeries.map((singleSeries) => {
             if (singleSeries.legend.enabled) {
-                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.name) });
+                return Object.assign(Object.assign({}, singleSeries), { visible: activeLegendItems.includes(singleSeries.legend.groupId) });
             }
             return singleSeries;
         });
@@ -61,15 +61,15 @@ export const useSeries = (args) => {
     }, [seriesData, seriesOptions, preparedLegend, colors]);
     const prevOriginalSeriesData = usePrevious(originalSeriesData);
     const chartSeries = useVisibleSeries({ preparedSeries, activeLegendItems });
-    const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
+    const handleLegendItemClick = React.useCallback(({ id, metaKey }) => {
         const allItems = getAllLegendItems(preparedSeries);
-        const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
+        const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(id);
         let nextActiveLegendItems;
-        if (metaKey && activeLegendItems.includes(name)) {
-            nextActiveLegendItems = activeLegendItems.filter((item) => item !== name);
+        if (metaKey && activeLegendItems.includes(id)) {
+            nextActiveLegendItems = activeLegendItems.filter((item) => item !== id);
         }
-        else if (metaKey && !activeLegendItems.includes(name)) {
-            nextActiveLegendItems = activeLegendItems.concat(name);
+        else if (metaKey && !activeLegendItems.includes(id)) {
+            nextActiveLegendItems = activeLegendItems.concat(id);
         }
         else if (onlyItemSelected && allItems.length === 1) {
             nextActiveLegendItems = [];
@@ -78,7 +78,7 @@ export const useSeries = (args) => {
             nextActiveLegendItems = allItems;
         }
         else {
-            nextActiveLegendItems = [name];
+            nextActiveLegendItems = [id];
         }
         setActiveLegendItems(nextActiveLegendItems);
     }, [preparedSeries, activeLegendItems]);

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

@@ -32,7 +32,6 @@ function prepareSeriesData(series) {
         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;
@@ -43,7 +42,7 @@ export function prepareArea(args) {
     const defaultAreaWidth = get(seriesOptions, 'area.lineWidth', DEFAULT_LINE_WIDTH);
     const defaultOpacity = get(seriesOptions, 'area.opacity', 0.75);
     return seriesList.map((series) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         const id = getUniqId();
         const name = series.name || '';
         const color = series.color || colorScale(name);
@@ -58,23 +57,26 @@ export function prepareArea(args) {
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
+                groupId: (_b = (_a = series.legend) === null || _a === void 0 ? void 0 : _a.groupId) !== null && _b !== void 0 ? _b : getUniqId(),
+                itemText: (_d = (_c = series.legend) === null || _c === void 0 ? void 0 : _c.itemText) !== null && _d !== void 0 ? _d : name,
             },
             data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(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),
+                enabled: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.enabled) || false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_f = series.dataLabels) === null || _f === void 0 ? void 0 : _f.style),
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
                 html: get(series, 'dataLabels.html', false),
-                format: (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.format,
+                format: (_g = series.dataLabels) === null || _g === void 0 ? void 0 : _g.format,
             },
             marker: prepareMarker(series, seriesOptions),
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
             tooltip: series.tooltip,
             rangeSlider: Object.assign({}, seriesRangeSliderOptionsDefaults, series.rangeSlider),
+            nullMode: series.nullMode,
         };
         return prepared;
     }, []);

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

@@ -12,13 +12,13 @@ function prepareSeriesData(series) {
             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);
+            return data;
     }
 }
 export function prepareBarXSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         const dataLabelsInside = series.stacking === 'percent' ? true : get(series, 'dataLabels.inside', false);
@@ -31,18 +31,20 @@ export function prepareBarXSeries(args) {
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
+                groupId: (_b = (_a = series.legend) === null || _a === void 0 ? void 0 : _a.groupId) !== null && _b !== void 0 ? _b : getUniqId(),
+                itemText: (_d = (_c = series.legend) === null || _c === void 0 ? void 0 : _c.itemText) !== null && _d !== void 0 ? _d : name,
             },
             data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
             dataLabels: {
-                enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || false,
+                enabled: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.enabled) || false,
                 inside: dataLabelsInside,
-                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
-                allowOverlap: ((_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.allowOverlap) || false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_f = series.dataLabels) === null || _f === void 0 ? void 0 : _f.style),
+                allowOverlap: ((_g = series.dataLabels) === null || _g === void 0 ? void 0 : _g.allowOverlap) || false,
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 html: get(series, 'dataLabels.html', false),
-                format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
+                format: (_h = series.dataLabels) === null || _h === void 0 ? void 0 : _h.format,
             },
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),

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

@@ -32,6 +32,8 @@ export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): Promise<
     id: string;
     visible: boolean;
     legend: {
+        groupId: string;
+        itemText: string;
         enabled: boolean;
         symbol: import("./types").PreparedLegendSymbol;
     };