@gravity-ui/charts 1.24.1 → 1.25.0

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;
     };

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

@@ -13,7 +13,7 @@ function prepareSeriesData(series) {
             return data.map((p) => { var _a; return (Object.assign(Object.assign({}, p), { x: (_a = p.x) !== null && _a !== void 0 ? _a : 0 })); });
         case 'skip':
         default:
-            return data.filter((p) => p.x !== null);
+            return data;
     }
 }
 async function prepareDataLabels(series) {
@@ -46,7 +46,7 @@ async function prepareDataLabels(series) {
 export function prepareBarYSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return Promise.all(seriesList.map(async (series) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         return {
@@ -58,15 +58,17 @@ export function prepareBarYSeries(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: await prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
-            borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
-            borderWidth: (_f = (_d = series.borderWidth) !== null && _d !== void 0 ? _d : (_e = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _e === void 0 ? void 0 : _e.borderWidth) !== null && _f !== void 0 ? _f : 0,
-            borderColor: (_j = (_g = series.borderColor) !== null && _g !== void 0 ? _g : (_h = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _h === void 0 ? void 0 : _h.borderColor) !== null && _j !== void 0 ? _j : 'var(--gcharts-shape-border-color)',
+            borderRadius: (_g = (_e = series.borderRadius) !== null && _e !== void 0 ? _e : (_f = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _f === void 0 ? void 0 : _f.borderRadius) !== null && _g !== void 0 ? _g : 0,
+            borderWidth: (_k = (_h = series.borderWidth) !== null && _h !== void 0 ? _h : (_j = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _j === void 0 ? void 0 : _j.borderWidth) !== null && _k !== void 0 ? _k : 0,
+            borderColor: (_o = (_l = series.borderColor) !== null && _l !== void 0 ? _l : (_m = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _m === void 0 ? void 0 : _m.borderColor) !== null && _o !== void 0 ? _o : 'var(--gcharts-shape-border-color)',
             tooltip: series.tooltip,
         };
     }));

package/dist/esm/hooks/useSeries/prepare-funnel.js

@@ -10,7 +10,7 @@ export function prepareFunnelSeries(args) {
     const colorScale = scaleOrdinal(dataNames, colors);
     const isConnectorsEnabled = (_b = (_a = series.connectors) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true;
     const preparedSeries = series.data.map((dataItem) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const id = getUniqId();
         const color = dataItem.color || colorScale(dataItem.name);
         const result = {
@@ -28,20 +28,24 @@ export function prepareFunnelSeries(args) {
             id,
             color,
             legend: {
-                enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
+                enabled: (_h = (_f = (_e = dataItem.legend) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : (_g = series.legend) === null || _g === void 0 ? void 0 : _g.enabled) !== null && _h !== void 0 ? _h : legend.enabled,
+                symbol: ((_j = dataItem.legend) === null || _j === void 0 ? void 0 : _j.symbol)
+                    ? prepareLegendSymbol(dataItem)
+                    : prepareLegendSymbol(series),
+                groupId: (_l = (_k = dataItem.legend) === null || _k === void 0 ? void 0 : _k.groupId) !== null && _l !== void 0 ? _l : getUniqId(),
+                itemText: (_o = (_m = dataItem.legend) === null || _m === void 0 ? void 0 : _m.itemText) !== null && _o !== void 0 ? _o : dataItem.name,
             },
             cursor: get(series, 'cursor', null),
             tooltip: series.tooltip,
             connectors: {
                 enabled: isConnectorsEnabled,
-                height: isConnectorsEnabled ? ((_f = (_e = series.connectors) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : '25%') : 0,
-                lineDashStyle: (_h = (_g = series.connectors) === null || _g === void 0 ? void 0 : _g.lineDashStyle) !== null && _h !== void 0 ? _h : 'Dash',
-                lineOpacity: (_k = (_j = series.connectors) === null || _j === void 0 ? void 0 : _j.lineOpacity) !== null && _k !== void 0 ? _k : 1,
-                lineColor: (_m = (_l = series.connectors) === null || _l === void 0 ? void 0 : _l.lineColor) !== null && _m !== void 0 ? _m : 'var(--g-color-line-generic-active)',
-                areaColor: (_p = (_o = series.connectors) === null || _o === void 0 ? void 0 : _o.areaColor) !== null && _p !== void 0 ? _p : color,
-                areaOpacity: (_r = (_q = series.connectors) === null || _q === void 0 ? void 0 : _q.areaOpacity) !== null && _r !== void 0 ? _r : 0.25,
-                lineWidth: (_t = (_s = series.connectors) === null || _s === void 0 ? void 0 : _s.lineWidth) !== null && _t !== void 0 ? _t : 1,
+                height: isConnectorsEnabled ? ((_q = (_p = series.connectors) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : '25%') : 0,
+                lineDashStyle: (_s = (_r = series.connectors) === null || _r === void 0 ? void 0 : _r.lineDashStyle) !== null && _s !== void 0 ? _s : 'Dash',
+                lineOpacity: (_u = (_t = series.connectors) === null || _t === void 0 ? void 0 : _t.lineOpacity) !== null && _u !== void 0 ? _u : 1,
+                lineColor: (_w = (_v = series.connectors) === null || _v === void 0 ? void 0 : _v.lineColor) !== null && _w !== void 0 ? _w : 'var(--g-color-line-generic-active)',
+                areaColor: (_y = (_x = series.connectors) === null || _x === void 0 ? void 0 : _x.areaColor) !== null && _y !== void 0 ? _y : color,
+                areaOpacity: (_0 = (_z = series.connectors) === null || _z === void 0 ? void 0 : _z.areaOpacity) !== null && _0 !== void 0 ? _0 : 0.25,
+                lineWidth: (_2 = (_1 = series.connectors) === null || _1 === void 0 ? void 0 : _1.lineWidth) !== null && _2 !== void 0 ? _2 : 1,
             },
         };
         return result;

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

@@ -18,7 +18,7 @@ function prepareSeriesData(series) {
 export function prepareHeatmapSeries(args) {
     const { colorScale, series: seriesList, seriesOptions, legend } = args;
     return seriesList.map((series) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const name = series.name || '';
         const color = series.color || colorScale(name);
         return {
@@ -30,20 +30,22 @@ export function prepareHeatmapSeries(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),
             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),
-                html: (_d = (_c = series.dataLabels) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : false,
-                format: (_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.format,
+                html: (_h = (_g = series.dataLabels) === null || _g === void 0 ? void 0 : _g.html) !== null && _h !== void 0 ? _h : false,
+                format: (_j = series.dataLabels) === null || _j === void 0 ? void 0 : _j.format,
             },
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
             tooltip: series.tooltip,
-            borderColor: (_h = (_f = series.borderColor) !== null && _f !== void 0 ? _f : (_g = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.heatmap) === null || _g === void 0 ? void 0 : _g.borderColor) !== null && _h !== void 0 ? _h : 'var(--gcharts-shape-border-color)',
-            borderWidth: (_l = (_j = series.borderWidth) !== null && _j !== void 0 ? _j : (_k = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.heatmap) === null || _k === void 0 ? void 0 : _k.borderWidth) !== null && _l !== void 0 ? _l : 0,
+            borderColor: (_m = (_k = series.borderColor) !== null && _k !== void 0 ? _k : (_l = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.heatmap) === null || _l === void 0 ? void 0 : _l.borderColor) !== null && _m !== void 0 ? _m : 'var(--gcharts-shape-border-color)',
+            borderWidth: (_q = (_o = series.borderWidth) !== null && _o !== void 0 ? _o : (_p = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.heatmap) === null || _p === void 0 ? void 0 : _p.borderWidth) !== null && _q !== void 0 ? _q : 0,
         };
     }, []);
 }

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

@@ -1,4 +1,5 @@
 import { select } from 'd3';
+import { groupBy } from 'lodash';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
@@ -75,10 +76,11 @@ export async function getPreparedLegend(args) {
     };
 }
 function getFlattenLegendItems(series, preparedLegend) {
-    return series.reduce((acc, s) => {
-        const legendEnabled = get(s, 'legend.enabled', true);
-        if (legendEnabled) {
-            acc.push(Object.assign(Object.assign({}, s), { height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
+    const grouped = groupBy(series, (s) => s.legend.groupId);
+    return Object.values(grouped).reduce((acc, items) => {
+        const s = items.find((item) => item.legend.enabled);
+        if (s) {
+            acc.push(Object.assign(Object.assign({}, s), { id: s.legend.groupId, name: s.legend.itemText, height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
         }
         return acc;
     }, []);

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

@@ -60,7 +60,7 @@ export function prepareLineSeries(args) {
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
     const defaultDashStyle = get(seriesOptions, 'line.dashStyle', DEFAULT_DASH_STYLE);
     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);
@@ -75,15 +75,17 @@ export function prepareLineSeries(args) {
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLineLegendSymbol(series, seriesOptions),
+                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),
             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),
             dashStyle: dashStyle,

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

@@ -24,7 +24,7 @@ export function preparePieSeries(args) {
     const stackId = getUniqId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
     const preparedSeries = preparedData.map((dataItem) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const id = getUniqId();
         const result = {
             type: 'pie',
@@ -48,14 +48,18 @@ export function preparePieSeries(args) {
             id,
             color: dataItem.color || colorScale(dataItem.name),
             legend: {
-                enabled: get(series, 'legend.enabled', legend.enabled),
-                symbol: prepareLegendSymbol(series),
+                enabled: (_f = (_d = (_c = dataItem.legend) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : (_e = series.legend) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : legend.enabled,
+                symbol: ((_g = dataItem.legend) === null || _g === void 0 ? void 0 : _g.symbol)
+                    ? prepareLegendSymbol(dataItem)
+                    : prepareLegendSymbol(series),
+                groupId: (_j = (_h = dataItem.legend) === null || _h === void 0 ? void 0 : _h.groupId) !== null && _j !== void 0 ? _j : getUniqId(),
+                itemText: (_l = (_k = dataItem.legend) === null || _k === void 0 ? void 0 : _k.itemText) !== null && _l !== void 0 ? _l : dataItem.name,
             },
             center: series.center || ['50%', '50%'],
             borderColor: series.borderColor || '',
-            borderRadius: (_c = series.borderRadius) !== null && _c !== void 0 ? _c : 0,
-            borderWidth: (_d = series.borderWidth) !== null && _d !== void 0 ? _d : 1,
-            radius: (_f = (_e = dataItem.radius) !== null && _e !== void 0 ? _e : series.radius) !== null && _f !== void 0 ? _f : '100%',
+            borderRadius: (_m = series.borderRadius) !== null && _m !== void 0 ? _m : 0,
+            borderWidth: (_o = series.borderWidth) !== null && _o !== void 0 ? _o : 1,
+            radius: (_q = (_p = dataItem.radius) !== null && _p !== void 0 ? _p : series.radius) !== null && _q !== void 0 ? _q : '100%',
             innerRadius: series.innerRadius || 0,
             minRadius: series.minRadius,
             stackId,

package/dist/esm/hooks/useSeries/prepare-radar.js

@@ -30,7 +30,7 @@ export function prepareRadarSeries(args) {
     const colorScale = scaleOrdinal(radarSeries.map((s, index) => { var _a; return (_a = s.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`; }), colors);
     const categories = (_b = (_a = radarSeries.find((s) => s.categories)) === null || _a === void 0 ? void 0 : _a.categories) !== null && _b !== void 0 ? _b : [];
     return radarSeries.map((series, index) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const name = (_a = series.name) !== null && _a !== void 0 ? _a : `Series ${index + 1}`;
         const color = (_b = series.color) !== null && _b !== void 0 ? _b : colorScale(name);
         const preparedSeries = {
@@ -44,17 +44,19 @@ export function prepareRadarSeries(args) {
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(series),
+                groupId: (_d = (_c = series.legend) === null || _c === void 0 ? void 0 : _c.groupId) !== null && _d !== void 0 ? _d : getUniqId(),
+                itemText: (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) !== null && _f !== void 0 ? _f : name,
             },
             borderColor: series.borderColor || color,
-            borderWidth: (_c = series.borderWidth) !== null && _c !== void 0 ? _c : 1,
-            fillOpacity: (_d = series.fillOpacity) !== null && _d !== void 0 ? _d : 0.25,
+            borderWidth: (_g = series.borderWidth) !== null && _g !== void 0 ? _g : 1,
+            fillOpacity: (_h = series.fillOpacity) !== null && _h !== void 0 ? _h : 0.25,
             dataLabels: {
                 enabled: get(series, 'dataLabels.enabled', true),
-                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.style),
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_j = series.dataLabels) === null || _j === void 0 ? void 0 : _j.style),
                 padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
                 allowOverlap: get(series, 'dataLabels.allowOverlap', false),
                 html: get(series, 'dataLabels.html', false),
-                format: (_f = series.dataLabels) === null || _f === void 0 ? void 0 : _f.format,
+                format: (_k = series.dataLabels) === null || _k === void 0 ? void 0 : _k.format,
             },
             cursor: get(series, 'cursor', null),
             marker: prepareMarker(series, seriesOptions),

package/dist/esm/hooks/useSeries/prepare-sankey.js

@@ -5,7 +5,7 @@ import { prepareLegendSymbol } from './utils';
 export function prepareSankeySeries(args) {
     const { colorScale, legend, series } = args;
     return series.map((s) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         const id = getUniqId();
         const name = s.name || '';
         const color = colorScale(name);
@@ -31,6 +31,8 @@ export function prepareSankeySeries(args) {
             legend: {
                 enabled: get(s, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(s),
+                groupId: (_d = (_c = s.legend) === null || _c === void 0 ? void 0 : _c.groupId) !== null && _d !== void 0 ? _d : getUniqId(),
+                itemText: (_f = (_e = s.legend) === null || _e === void 0 ? void 0 : _e.itemText) !== null && _f !== void 0 ? _f : name,
             },
             cursor: get(s, 'cursor', null),
             tooltip: s.tooltip,

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

@@ -39,6 +39,7 @@ function prepareSeriesData(series) {
 export function prepareScatterSeries(args) {
     const { colorScale, series, seriesOptions, legend } = args;
     return series.map((s, index) => {
+        var _a, _b, _c, _d, _e, _f;
         const id = getUniqId();
         const name = 'name' in s && s.name ? s.name : '';
         const symbolType = s.symbolType || getSymbolType(index);
@@ -49,8 +50,10 @@ export function prepareScatterSeries(args) {
             color: get(s, 'color', colorScale(name)),
             visible: get(s, 'visible', true),
             legend: {
-                enabled: get(s, 'legend.enabled', legend.enabled),
+                enabled: (_b = (_a = s.legend) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : legend.enabled,
                 symbol: prepareLegendSymbol(s, symbolType),
+                groupId: (_d = (_c = s.legend) === null || _c === void 0 ? void 0 : _c.groupId) !== null && _d !== void 0 ? _d : getUniqId(),
+                itemText: (_f = (_e = s.legend) === null || _e === void 0 ? void 0 : _e.itemText) !== null && _f !== void 0 ? _f : name,
             },
             data: prepareSeriesData(s),
             marker: prepareMarker(s, seriesOptions, index),

package/dist/esm/hooks/useSeries/prepare-treemap.js

@@ -6,7 +6,7 @@ import { prepareLegendSymbol } from './utils';
 export function prepareTreemap(args) {
     const { colorScale, legend, series } = args;
     return series.map((s) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         const id = getUniqId();
         const name = s.name || '';
         const color = s.color || colorScale(name);
@@ -29,8 +29,10 @@ export function prepareTreemap(args) {
             legend: {
                 enabled: get(s, 'legend.enabled', legend.enabled),
                 symbol: prepareLegendSymbol(s),
+                groupId: (_d = (_c = s.legend) === null || _c === void 0 ? void 0 : _c.groupId) !== null && _d !== void 0 ? _d : getUniqId(),
+                itemText: (_f = (_e = s.legend) === null || _e === void 0 ? void 0 : _e.itemText) !== null && _f !== void 0 ? _f : name,
             },
-            levels: (_c = s.levels) !== null && _c !== void 0 ? _c : [],
+            levels: (_g = s.levels) !== null && _g !== void 0 ? _g : [],
             layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
             cursor: get(s, 'cursor', null),
             sorting: Object.assign({ enabled: false, direction: 'desc' }, s.sorting),

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

@@ -19,7 +19,7 @@ function prepareSeriesData(series) {
     }
 }
 export function prepareWaterfallSeries(args) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const { colorScale, series: seriesList, legend, colors } = args;
     const [, negativeColor, positiveColor] = colors;
     const series = seriesList[0];
@@ -29,10 +29,6 @@ export function prepareWaterfallSeries(args) {
         type: series.type,
         name: series.name,
         visible: get(series, 'visible', true),
-        legend: {
-            enabled: get(series, 'legend.enabled', legend.enabled),
-            symbol: prepareLegendSymbol(series),
-        },
         dataLabels: {
             enabled: ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) || true,
             style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_b = series.dataLabels) === null || _b === void 0 ? void 0 : _b.style),
@@ -41,13 +37,22 @@ export function prepareWaterfallSeries(args) {
             html: get(series, 'dataLabels.html', false),
             format: (_d = series.dataLabels) === null || _d === void 0 ? void 0 : _d.format,
         },
+        legend: {
+            enabled: get(series, 'legend.enabled', legend.enabled),
+            symbol: prepareLegendSymbol(series),
+            groupId: '',
+            itemText: '',
+        },
         cursor: get(series, 'cursor', null),
         data: [],
         tooltip: series.tooltip,
     };
-    const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
-    const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });
-    const totals = Object.assign(Object.assign({}, common), { name: (_o = (_m = (_l = series.legend) === null || _l === void 0 ? void 0 : _l.itemText) === null || _m === void 0 ? void 0 : _m.totals) !== null && _o !== void 0 ? _o : series.name, id: getUniqId(), data: [] });
+    const positiveName = (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`;
+    const positive = Object.assign(Object.assign({}, common), { name: positiveName, legend: Object.assign(Object.assign({}, common.legend), { groupId: getUniqId(), itemText: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.positive) !== null && _k !== void 0 ? _k : positiveName }), id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
+    const negativeName = (_o = (_m = (_l = series.legend) === null || _l === void 0 ? void 0 : _l.itemText) === null || _m === void 0 ? void 0 : _m.negative) !== null && _o !== void 0 ? _o : `${series.name} ↓`;
+    const negative = Object.assign(Object.assign({}, common), { name: negativeName, legend: Object.assign(Object.assign({}, common.legend), { groupId: getUniqId(), itemText: (_r = (_q = (_p = series.legend) === null || _p === void 0 ? void 0 : _p.itemText) === null || _q === void 0 ? void 0 : _q.negative) !== null && _r !== void 0 ? _r : negativeName }), id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });
+    const totalsName = (_u = (_t = (_s = series.legend) === null || _s === void 0 ? void 0 : _s.itemText) === null || _t === void 0 ? void 0 : _t.totals) !== null && _u !== void 0 ? _u : series.name;
+    const totals = Object.assign(Object.assign({}, common), { name: totalsName, legend: Object.assign(Object.assign({}, common.legend), { groupId: getUniqId(), itemText: (_x = (_w = (_v = series.legend) === null || _v === void 0 ? void 0 : _v.itemText) === null || _w === void 0 ? void 0 : _w.totals) !== null && _x !== void 0 ? _x : totalsName }), id: getUniqId(), data: [] });
     const preparedData = prepareSeriesData(series);
     preparedData.forEach((d, index) => {
         var _a;

package/dist/esm/hooks/useSeries/types.d.ts

@@ -35,10 +35,12 @@ export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>>
     };
 };
 export type OnLegendItemClick = (data: {
+    id: string;
     name: string;
     metaKey: boolean;
 }) => void;
 export type LegendItem = {
+    id: string;
     color: string;
     height: number;
     name: string;
@@ -72,6 +74,8 @@ type BasePreparedSeries = {
     id: string;
     visible: boolean;
     legend: {
+        groupId: string;
+        itemText: string;
         enabled: boolean;
         symbol: PreparedLegendSymbol;
     };
@@ -228,6 +232,7 @@ export type PreparedAreaSeries = {
     stackId: string;
     lineWidth: number;
     opacity: number;
+    nullMode: AreaSeries['nullMode'];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;

package/dist/esm/hooks/useSeries/utils.d.ts

@@ -1,7 +1,11 @@
 import { SymbolType } from '../../constants';
-import type { ChartSeries } from '../../types';
-import type { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
+import type { RectLegendSymbolOptions } from '../../types';
+import type { PathLegendSymbol, PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
 export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
 export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
-export declare function prepareLegendSymbol(series: ChartSeries, symbolType?: `${SymbolType}`): PreparedLegendSymbol;
+export declare function prepareLegendSymbol(series: {
+    legend?: {
+        symbol?: RectLegendSymbolOptions | PathLegendSymbol;
+    };
+}, symbolType?: `${SymbolType}`): PreparedLegendSymbol;
 export declare function getSeriesStackId(series: StackedSeries): string;

package/dist/esm/hooks/useSeries/utils.js

@@ -5,13 +5,13 @@ import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './con
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {
-            acc.push(s.name);
+            acc.push(s.legend.groupId);
         }
         return acc;
     }, []);
 };
 export const getAllLegendItems = (series) => {
-    return series.map((s) => s.name);
+    return series.map((s) => s.legend.groupId);
 };
 export function prepareLegendSymbol(series, symbolType) {
     var _a;

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -76,7 +76,7 @@ export const prepareAreaData = async (args) => {
     var _a, _b;
     const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isOutsideBounds, } = args;
     const [_xMin, xRangeMax] = xScale.range();
-    const xMax = xRangeMax / (1 - xAxis.maxPadding);
+    const xMax = xRangeMax;
     const result = [];
     const dataByPlots = Array.from(group(series, (s) => {
         const yAxisIndex = s.yAxis;
@@ -133,6 +133,9 @@ export const prepareAreaData = async (args) => {
                     if (yPointValue !== null) {
                         accumulatedYValues.set(x, yMin - yPointValue);
                     }
+                    if (s.nullMode === 'connect' && yPointValue === null) {
+                        return pointsAcc;
+                    }
                     pointsAcc.push({
                         y0: yAxisTop + yMin - accumulatedYValue,
                         x: xValue,