@gravity-ui/charts 1.24.2 → 1.25.0

package/dist/cjs/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/cjs/components/ChartInner/useChartInnerProps.js

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

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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,