@gravity-ui/charts 1.24.2 → 1.25.0

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 export interface HeatmapSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value of the heatmap cell. Depending on the context, it may represents:
@@ -31,7 +31,7 @@ export interface HeatmapSeries<T = MeaningfulAny> extends BaseSeries {
     color?: string;
     dataLabels?: BaseSeries['dataLabels'];
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /**

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

@@ -1,6 +1,16 @@
 import type { BaseTextStyle } from './base';
-export interface ChartLegend {
+export interface ChartLegendItem {
     enabled?: boolean;
+    /**
+     * Defines the pixel distance between each legend item
+     *
+     * @default 20
+     * */
+    itemDistance?: number;
+    /** CSS styles for each legend item */
+    itemStyle?: BaseTextStyle;
+}
+export interface ChartLegend extends ChartLegendItem {
     /**
      * Different types for different color schemes.
      * If the color scheme is continuous, a gradient legend will be drawn.
@@ -21,14 +31,6 @@ export interface ChartLegend {
      * @default center
      * */
     justifyContent?: 'start' | 'center';
-    /**
-     * Defines the pixel distance between each legend item
-     *
-     * @default 20
-     * */
-    itemDistance?: number;
-    /** CSS styles for each legend item */
-    itemStyle?: BaseTextStyle;
     /**
      * The space between the legend and the axis labels or chart area.
      *

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

@@ -1,7 +1,7 @@
 import type { DashStyle, LineCap, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
 import type { ChartSeriesRangeSliderOptions } from './series';
 export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
@@ -42,7 +42,7 @@ export interface LineSeries<T = MeaningfulAny> extends BaseSeries {
      * */
     lineWidth?: number;
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line series */

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

@@ -1,8 +1,8 @@
 import type { BaseType } from 'd3';
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { ChartLegendItem, RectLegendSymbolOptions } from './legend';
 export interface PieSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The value of the pie segment. */
     value: number | null;
@@ -16,6 +16,10 @@ export interface PieSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     opacity?: number;
     /** The individual radius of the pie segment. The default value is series.radius */
     radius?: string | number;
+    /** Individual series legend options. Has higher priority than legend options in series data */
+    legend?: BaseSeriesLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 }
 export type ConnectorShape = 'straight-line' | 'polyline';
 export type ConnectorCurve = 'linear' | 'basic';
@@ -54,10 +58,6 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
      * If not specified, the minimum radius is calculated as 30% of the height or width of the chart (the minimum value is taken) minus the halo effect.
      */
     minRadius?: string | number;
-    /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
-        symbol?: RectLegendSymbolOptions;
-    };
     dataLabels?: BaseSeries['dataLabels'] & {
         /**
          * The distance of the data label from the pie's edge.
@@ -85,6 +85,10 @@ export interface PieSeries<T = MeaningfulAny> extends BaseSeries {
          * */
         connectorCurve?: ConnectorCurve;
     };
+    /** Individual series legend options. Has higher priority than legend options in chart data */
+    legend?: ChartLegendItem & {
+        symbol?: RectLegendSymbolOptions;
+    };
     /**
      * Function for adding custom svg nodes for a series
      *

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
 export interface RadarSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The value of the radar point. */
@@ -42,7 +42,7 @@ export interface RadarSeries<T = MeaningfulAny> extends BaseSeries {
      */
     fillOpacity?: number;
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Options for the point markers of line in radar series */

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 export interface SankeySeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     name: string;
     color?: string;
@@ -16,7 +16,7 @@ export interface SankeySeries<T = MeaningfulAny> extends BaseSeries {
     name: string;
     data: SankeySeriesData<T>[];
     /** Individual series legend options. Has higher priority than legend options in widget data. */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
 }

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE, SymbolType } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 import type { ChartSeriesRangeSliderOptions } from './series';
 export interface ScatterSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
@@ -39,7 +39,7 @@ export interface ScatterSeries<T = MeaningfulAny> extends BaseSeries {
     /** A predefined shape or symbol for the dot */
     symbolType?: `${SymbolType}`;
     /** Individual series legend options. Has higher priority than legend options in widget data */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Y-axis index (when using two axes) */

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

@@ -1,7 +1,7 @@
 import type { LayoutAlgorithm, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
-import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
+import type { RectLegendSymbolOptions } from './legend';
 export interface TreemapSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** The name of the node (used in legend, tooltip etc). */
     name: string | string[];
@@ -23,7 +23,7 @@ export interface TreemapSeries<T = MeaningfulAny> extends BaseSeries {
     /** The main color of the series (hex, rgba). */
     color?: string;
     /** Individual series legend options. Has higher priority than legend options in widget data. */
-    legend?: ChartLegend & {
+    legend?: BaseSeriesLegend & {
         symbol?: RectLegendSymbolOptions;
     };
     /** Set options on specific levels. Takes precedence over series options, but not point options. */

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

@@ -1,7 +1,7 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { BaseSeries, BaseSeriesData } from './base';
-import type { ChartLegend, RectLegendSymbolOptions } from './legend';
+import type { ChartLegendItem, RectLegendSymbolOptions } from './legend';
 export interface WaterfallSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /**
      * The `x` value. Depending on the context , it may represents:
@@ -34,7 +34,7 @@ export interface WaterfallSeries<T = MeaningfulAny> extends BaseSeries {
     /** The color used for negative values. If it is not specified, the general color of the series is used. */
     negativeColor?: string;
     /** Individual series legend options. Has higher priority than legend options in widget data. */
-    legend?: ChartLegend & {
+    legend?: ChartLegendItem & {
         symbol?: RectLegendSymbolOptions;
         /** The legend item text for positive, negative values and totals. */
         itemText?: {

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

@@ -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/esm/components/ChartInner/useChartInnerProps.js

@@ -81,7 +81,6 @@ export function useChartInnerProps(props) {
         boundsHeight,
         rangeSliderState,
         series: preparedSeries,
-        seriesOptions: preparedSeriesOptions,
         split: preparedSplit,
         xAxis,
         yAxis,

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

@@ -115,7 +115,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 +123,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 +144,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;
             }
@@ -158,7 +159,7 @@ export const Legend = (props) => {
             let legendWidth = 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 +175,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 +214,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;
@@ -282,7 +283,7 @@ export const Legend = (props) => {
             }
             else {
                 // 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,9 +352,9 @@ 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);
             }
@@ -364,7 +365,6 @@ export const Legend = (props) => {
                 align: legend.align,
                 width: config.maxWidth,
                 contentWidth: legendWidth,
-                offsetLeft: config.offset.left,
             });
             svgElement
                 .attr('transform', `translate(${[left, config.offset.top].join(',')})`)

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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;
     };