@gravity-ui/chartkit 3.4.2 → 3.5.0

package/build/components/ChartKit.js

@@ -1,13 +1,13 @@
 import { __rest } from "tslib";
 import React from 'react';
-import block from 'bem-cn-lite';
 import { i18n } from '../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError, settings } from '../libs';
 import { getRandomCKId, typedMemo } from '../utils';
+import { cn } from '../utils/cn';
 import { ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
 import { Loader } from './Loader/Loader';
 import './ChartKit.css';
-const b = block('chartkit');
+const b = cn('chartkit');
 const ChartKitComponent = (props) => {
     const widgetRef = React.useRef();
     const { instanceRef, id: propsId, type, isMobile, renderPluginLoader } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile", "renderPluginLoader"]);

package/build/components/Loader/Loader.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { Loader as BaseLoader } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
 import './Loader.css';
-const b = block('chartkit-loader');
+const b = block('loader');
 export const Loader = (props) => {
     return (React.createElement("div", { className: b() },
         React.createElement(BaseLoader, Object.assign({}, props))));

package/build/plugins/d3/renderer/D3Widget.js

@@ -8,8 +8,8 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
     const [dimensions, setDimensions] = React.useState();
     const handleResize = React.useCallback(() => {
         if (ref.current) {
-            const { width, height } = ref.current.getBoundingClientRect();
-            setDimensions({ width, height });
+            const { top, left, width, height } = ref.current.getBoundingClientRect();
+            setDimensions({ top, left, width, height });
         }
     }, []);
     const debuncedHandleResize = React.useMemo(() => {
@@ -35,6 +35,6 @@ const D3Widget = React.forwardRef(function D3Widget(props, forwardedRef) {
         // dimensions initialize
         handleResize();
     }, [handleResize]);
-    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { width: dimensions.width, height: dimensions.height, data: props.data }))));
+    return (React.createElement("div", { ref: ref, style: { width: '100%', height: '100%', position: 'relative' } }, (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) && (dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) && (React.createElement(Chart, { top: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.top) || 0, left: dimensions.left || 0, width: dimensions.width, height: dimensions.height, data: props.data }))));
 });
 export default D3Widget;

package/build/plugins/d3/renderer/components/AxisX.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { axisBottom, select } from 'd3';
+import { block } from '../../../../utils/cn';
 import { formatAxisTickLabel, parseTransformStyle } from '../utils';
-const b = block('chartkit-d3-axis');
+const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 // Note: this method do not prepared for rotated labels
 const removeOverlappingXTicks = (axis) => {

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { axisLeft, select } from 'd3';
+import { block } from '../../../../utils/cn';
 import { formatAxisTickLabel, parseTransformStyle } from '../utils';
-const b = block('chartkit-d3-axis');
+const b = block('d3-axis');
 const EMPTY_SPACE_BETWEEN_LABELS = 10;
 // Note: this method do not prepared for rotated labels
 const removeOverlappingYTicks = (axis) => {

package/build/plugins/d3/renderer/components/Chart.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import type { ChartKitWidgetData } from '../../../../types/widget-data';
 import './styles.css';
 type Props = {
+    top: number;
+    left: number;
     width: number;
     height: number;
     data: ChartKitWidgetData;
 };
-export declare const Chart: ({ width, height, data }: Props) => React.JSX.Element;
+export declare const Chart: (props: Props) => React.JSX.Element;
 export {};

package/build/plugins/d3/renderer/components/Chart.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../utils/cn';
 import { AxisY } from './AxisY';
 import { AxisX } from './AxisX';
 import { Legend } from './Legend';
 import { Title } from './Title';
 import { Tooltip } from './Tooltip';
-import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useScales, useSeries, useShapes, useTooltip, } from '../hooks';
+import { useChartDimensions, useChartEvents, useChartOptions, useLegend, useAxisScales, useSeries, useShapes, useTooltip, } from '../hooks';
 import { isAxisRelatedSeries } from '../utils';
 import './styles.css';
-const b = block('chartkit-d3');
-export const Chart = ({ width, height, data }) => {
+const b = block('d3');
+export const Chart = (props) => {
+    const { top, left, width, height, data } = props;
     // FIXME: add data validation
     const { series } = data;
     const svgRef = React.createRef();
@@ -27,7 +28,7 @@ export const Chart = ({ width, height, data }) => {
     });
     const { activeLegendItems, handleLegendItemClick } = useLegend({ series: series.data });
     const { chartSeries } = useSeries({ activeLegendItems, series: series.data });
-    const { xScale, yScale } = useScales({
+    const { xScale, yScale } = useAxisScales({
         boundsWidth,
         boundsHeight,
         series: chartSeries,
@@ -38,6 +39,10 @@ export const Chart = ({ width, height, data }) => {
         tooltip,
     });
     const { shapes } = useShapes({
+        top,
+        left,
+        boundsWidth,
+        boundsHeight,
         series: chartSeries,
         xAxis,
         xScale,
@@ -54,7 +59,7 @@ export const Chart = ({ width, height, data }) => {
                     chart.margin.left,
                     chart.margin.top + ((title === null || title === void 0 ? void 0 : title.height) || 0),
                 ].join(',')})` },
-                hasAxisRelatedSeries && (React.createElement(React.Fragment, null,
+                hasAxisRelatedSeries && xScale && yScale && (React.createElement(React.Fragment, null,
                     React.createElement(AxisY, { axises: yAxis, width: boundsWidth, height: boundsHeight, scale: yScale }),
                     React.createElement("g", { transform: `translate(0, ${boundsHeight})` },
                         React.createElement(AxisX, { axis: xAxis, width: boundsWidth, height: boundsHeight, scale: xScale })))),

package/build/plugins/d3/renderer/components/Legend.js

@@ -1,66 +1,85 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { select } from 'd3';
-const b = block('chartkit-d3-legend');
+import get from 'lodash/get';
+import { block } from '../../../../utils/cn';
+import { isAxisRelatedSeries } from '../utils';
+const b = block('d3-legend');
+const getLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        const isAxisRelated = isAxisRelatedSeries(s);
+        const legendEnabled = get(s, 'legend.enabled', true);
+        if (isAxisRelated) {
+            acc.push(s);
+        }
+        else if (!isAxisRelated && legendEnabled) {
+            acc.push(...s.data);
+        }
+        return acc;
+    }, []);
+};
 export const Legend = (props) => {
     const { width, offsetWidth, height, offsetHeight, chartSeries, onItemClick } = props;
-    return (React.createElement("g", { width: width, height: height, ref: (node) => {
-            if (!node) {
-                return;
-            }
-            const size = 10;
-            const textWidths = [0];
-            const svgElement = select(node);
-            svgElement.selectAll('*').remove();
-            const legendItemTemplate = svgElement
-                .selectAll('legend-history')
-                .data(chartSeries)
-                .enter()
-                .append('g')
-                .attr('class', b('item'))
-                .on('click', function (e, d) {
-                onItemClick({ name: d.name, metaKey: e.metaKey });
-            });
-            svgElement
-                .selectAll('*')
-                .data(chartSeries)
-                .append('text')
-                .text(function (d) {
-                return d.name;
-            })
-                .each(function () {
-                textWidths.push(this.getComputedTextLength());
-            })
-                .remove();
-            legendItemTemplate
-                .append('rect')
-                .attr('x', function (_d, i) {
-                return (offsetWidth +
-                    i * size +
-                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
-            })
-                .attr('y', offsetHeight - size / 2)
-                .attr('width', size)
-                .attr('height', size)
-                .style('fill', function (d) {
-                return d.color;
-            });
-            legendItemTemplate
-                .append('text')
-                .attr('x', function (_d, i) {
-                return (offsetWidth +
-                    i * size +
-                    size +
-                    textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
-            })
-                .attr('y', offsetHeight)
-                .attr('class', function (d) {
-                const mods = { selected: d.visible, unselected: !d.visible };
-                return b('item-text', mods);
-            })
-                .text(function (d) {
-                return ('name' in d && d.name);
-            })
-                .style('alignment-baseline', 'middle');
-        } }));
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const legendItems = getLegendItems(chartSeries);
+        const size = 10;
+        const textWidths = [0];
+        const svgElement = select(ref.current);
+        svgElement.selectAll('*').remove();
+        const legendItemTemplate = svgElement
+            .selectAll('legend-history')
+            .data(legendItems)
+            .enter()
+            .append('g')
+            .attr('class', b('item'))
+            .on('click', function (e, d) {
+            onItemClick({ name: d.name, metaKey: e.metaKey });
+        });
+        svgElement
+            .selectAll('*')
+            .data(legendItems)
+            .append('text')
+            .text(function (d) {
+            return d.name;
+        })
+            .each(function () {
+            textWidths.push(this.getComputedTextLength());
+        })
+            .remove();
+        legendItemTemplate
+            .append('rect')
+            .attr('x', function (_d, i) {
+            return (offsetWidth +
+                i * size +
+                textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+        })
+            .attr('y', offsetHeight - size / 2)
+            .attr('width', size)
+            .attr('height', size)
+            .attr('class', b('item-shape'))
+            .style('fill', function (d) {
+            return d.color;
+        });
+        legendItemTemplate
+            .append('text')
+            .attr('x', function (_d, i) {
+            return (offsetWidth +
+                i * size +
+                size +
+                textWidths.slice(0, i + 1).reduce((acc, tw) => acc + tw, 0));
+        })
+            .attr('y', offsetHeight)
+            .attr('class', function (d) {
+            const mods = { selected: d.visible, unselected: !d.visible };
+            return b('item-text', mods);
+        })
+            .text(function (d) {
+            return ('name' in d && d.name);
+        })
+            .style('alignment-baseline', 'middle');
+    }, [width, offsetWidth, height, offsetHeight, chartSeries, onItemClick]);
+    return React.createElement("g", { ref: ref, width: width, height: height });
 };

package/build/plugins/d3/renderer/components/Title.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import block from 'bem-cn-lite';
-const b = block('chartkit-d3-title');
+import { block } from '../../../../utils/cn';
+const b = block('d3-title');
 export const Title = (props) => {
     const { chartWidth, text, height, style } = props;
     return (React.createElement("text", { className: b(), dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: { fontSize: style === null || style === void 0 ? void 0 : style.fontSize, lineHeight: `${height}px` } },

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -14,6 +14,18 @@ export const DefaultContent = ({ hovered, xAxis, yAxis }) => {
                     React.createElement("span", null, "Y:\u00A0"),
                     React.createElement("b", null, yRow))));
         }
+        case 'bar-x': {
+            const barXData = data;
+            const xRow = xAxis.type === 'category' ? barXData.category : barXData.x;
+            const yRow = yAxis.type === 'category' ? barXData.category : barXData.y;
+            return (React.createElement("div", null,
+                React.createElement("div", null, xRow),
+                React.createElement("div", null,
+                    React.createElement("span", null,
+                        React.createElement("b", null, series.name),
+                        ": ",
+                        yRow))));
+        }
         default: {
             return null;
         }

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
-const b = block('chartkit-d3-tooltip');
+const b = block('d3-tooltip');
 const POINTER_OFFSET_X = 20;
 export const Tooltip = (props) => {
     const { hovered, pointerPosition, tooltip, xAxis, yAxis } = props;

package/build/plugins/d3/renderer/components/styles.css

@@ -19,6 +19,10 @@
   user-select: none;
 }
 
+.chartkit-d3-legend__item-shape {
+  fill: var(--g-color-base-misc-medium);
+}
+
 .chartkit-d3-legend__item-text {
   fill: var(--g-color-text-secondary);
 }
@@ -31,19 +35,6 @@
   fill: var(--g-color-text-complementary);
 }
 
-.chartkit-d3-scatter__point {
-  stroke-width: 1px;
-}
-
-.chartkit-d3_hovered .chartkit-d3-scatter__point {
-  opacity: 0.5;
-}
-
-.chartkit-d3-scatter__point:hover {
-  stroke: #fff;
-  opacity: 1;
-}
-
 .chartkit-d3-title {
   font-size: var(--g-text-subheader-2-font-size);
   font-weight: var(--g-text-subheader-font-weight);

package/build/plugins/d3/renderer/hooks/index.d.ts

@@ -3,7 +3,7 @@ export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useLegend';
-export * from './useScales';
+export * from './useAxisScales';
 export * from './useSeries';
 export * from './useShapes';
 export * from './useTooltip';

package/build/plugins/d3/renderer/hooks/index.js

@@ -3,7 +3,7 @@ export * from './useChartEvents';
 export * from './useChartOptions';
 export * from './useChartOptions/types';
 export * from './useLegend';
-export * from './useScales';
+export * from './useAxisScales';
 export * from './useSeries';
 export * from './useShapes';
 export * from './useTooltip';

package/build/plugins/d3/renderer/hooks/{useScales → useAxisScales}/index.d.ts

@@ -10,8 +10,11 @@ type Args = {
     yAxis: ChartOptions['yAxis'];
 };
 type ReturnValue = {
-    xScale: ChartScale;
-    yScale: ChartScale;
+    xScale?: ChartScale;
+    yScale?: ChartScale;
 };
-export declare const useScales: (args: Args) => ReturnValue;
+/**
+ * Uses to create scales for axis related series
+ */
+export declare const useAxisScales: (args: Args) => ReturnValue;
 export {};

package/build/plugins/d3/renderer/hooks/useAxisScales/index.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
+import get from 'lodash/get';
+import { getOnlyVisibleSeries, getDomainDataXBySeries, getDomainDataYBySeries, isAxisRelatedSeries, } from '../../utils';
+const isNumericalArrayData = (data) => {
+    return data.every((d) => typeof d === 'number' || d === null);
+};
+const filterCategoriesByVisibleSeries = (categories, series) => {
+    return categories.filter((category) => {
+        return series.some((s) => {
+            return s.data.some((d) => 'category' in d && d.category === category);
+        });
+    });
+};
+const createScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    const xMin = get(xAxis, 'min');
+    const xType = get(xAxis, 'type', 'linear');
+    const xCategories = get(xAxis, 'categories');
+    const xTimestamps = get(xAxis, 'timestamps');
+    const yType = get(yAxis[0], 'type', 'linear');
+    const yMin = get(yAxis[0], 'min');
+    const yCategories = get(yAxis[0], 'categories');
+    const yTimestamps = get(xAxis, 'timestamps');
+    let visibleSeries = getOnlyVisibleSeries(series);
+    // Reassign to all series in case of all series unselected,
+    // otherwise we will get an empty space without grid
+    visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
+    let xScale;
+    let yScale;
+    switch (xType) {
+        case 'linear': {
+            const domain = getDomainDataXBySeries(visibleSeries);
+            const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
+            if (isNumericalArrayData(domain)) {
+                const [domainXMin, xMax] = extent(domain);
+                const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
+                xScale = scaleLinear().domain([xMinValue, xMax]).range(range).nice();
+            }
+            break;
+        }
+        case 'category': {
+            if (xCategories) {
+                const filteredCategories = filterCategoriesByVisibleSeries(xCategories, visibleSeries);
+                xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
+            }
+            break;
+        }
+        case 'datetime': {
+            const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
+            if (xTimestamps) {
+                const [xMin, xMax] = extent(xTimestamps);
+                xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
+            }
+            else {
+                const domain = getDomainDataXBySeries(visibleSeries);
+                if (isNumericalArrayData(domain)) {
+                    const [xMin, xMax] = extent(domain);
+                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
+                }
+            }
+            break;
+        }
+    }
+    if (!xScale) {
+        throw new Error('Failed to create xScale');
+    }
+    switch (yType) {
+        case 'linear': {
+            const domain = getDomainDataYBySeries(visibleSeries);
+            const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
+            if (isNumericalArrayData(domain)) {
+                const [domainYMin, yMax] = extent(domain);
+                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
+                yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
+            }
+            break;
+        }
+        case 'category': {
+            if (yCategories) {
+                const filteredCategories = filterCategoriesByVisibleSeries(yCategories, visibleSeries);
+                yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
+            }
+            break;
+        }
+        case 'datetime': {
+            const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
+            if (yTimestamps) {
+                const [yMin, yMax] = extent(yTimestamps);
+                yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
+            }
+            else {
+                const domain = getDomainDataYBySeries(visibleSeries);
+                if (isNumericalArrayData(domain)) {
+                    const [yMin, yMax] = extent(domain);
+                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
+                }
+            }
+            break;
+        }
+    }
+    if (!yScale) {
+        throw new Error('Failed to create yScale');
+    }
+    return { xScale, yScale };
+};
+/**
+ * Uses to create scales for axis related series
+ */
+export const useAxisScales = (args) => {
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
+    const scales = React.useMemo(() => {
+        let xScale;
+        let yScale;
+        const hasAxisRelatedSeries = series.some(isAxisRelatedSeries);
+        if (hasAxisRelatedSeries) {
+            ({ xScale, yScale } = createScales({ boundsWidth, boundsHeight, series, xAxis, yAxis }));
+        }
+        return { xScale, yScale };
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis]);
+    return scales;
+};

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -1,6 +1,6 @@
 import { select, max } from 'd3';
 import get from 'lodash/get';
-import { formatAxisTickLabel, getDomainDataYBySeries } from '../../utils';
+import { formatAxisTickLabel, getDomainDataYBySeries, isAxisRelatedSeries } from '../../utils';
 import { getHorisontalSvgTextDimensions } from './utils';
 const AXIS_WIDTH = 1;
 const getAxisLabelMaxWidth = (args) => {
@@ -45,17 +45,24 @@ const getAxisLabelMaxWidth = (args) => {
 };
 export const getPreparedChart = (args) => {
     const { chart, series, preparedXAxis, preparedY1Axis } = args;
-    const marginBottom = get(chart, 'margin.bottom', 0) +
-        preparedXAxis.labels.padding +
-        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
-    const marginLeft = get(chart, 'margin.left', AXIS_WIDTH) +
-        preparedY1Axis.labels.padding +
-        getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
-        (preparedY1Axis.title.height || 0);
-    const marginTop = get(chart, 'margin.top', 0) +
-        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
-    const marginRight = get(chart, 'margin.right', 0) +
-        getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
+    const hasAxisRelatedSeries = series.data.some(isAxisRelatedSeries);
+    let marginBottom = get(chart, 'margin.bottom', 0);
+    let marginLeft = get(chart, 'margin.left', 0);
+    let marginTop = get(chart, 'margin.top', 0);
+    let marginRight = get(chart, 'margin.right', 0);
+    if (hasAxisRelatedSeries) {
+        marginBottom +=
+            preparedXAxis.labels.padding +
+                getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedXAxis.labels.style });
+        marginLeft +=
+            AXIS_WIDTH +
+                preparedY1Axis.labels.padding +
+                getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
+                (preparedY1Axis.title.height || 0);
+        marginTop +=
+            getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+        marginRight += getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
+    }
     return {
         margin: {
             top: marginTop,

package/build/plugins/d3/renderer/hooks/useChartOptions/index.d.ts

@@ -1,3 +1,5 @@
 import type { ChartKitWidgetData } from '../../../../../types/widget-data';
 import type { ChartOptions } from './types';
-export declare const useChartOptions: (args: ChartKitWidgetData) => ChartOptions;
+type Args = ChartKitWidgetData;
+export declare const useChartOptions: (args: Args) => ChartOptions;
+export {};

package/build/plugins/d3/renderer/hooks/useLegend/index.js

@@ -1,8 +1,39 @@
 import React from 'react';
-import { getVisibleSeriesNames } from '../../utils';
+import get from 'lodash/get';
+import { isAxisRelatedSeries } from '../../utils';
+const getActiveLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        const isAxisRelated = isAxisRelatedSeries(s);
+        const isLegendEnabled = get(s, 'legend.enabled', true);
+        const isSeriesVisible = get(s, 'visible', true);
+        if (isLegendEnabled && isAxisRelated && isSeriesVisible && 'name' in s) {
+            acc.push(s.name);
+        }
+        else if (isLegendEnabled && !isAxisRelated) {
+            s.data.forEach((d) => {
+                const isDataVisible = get(d, 'visible', true);
+                if (isDataVisible && 'name' in d) {
+                    acc.push(d.name);
+                }
+            });
+        }
+        return acc;
+    }, []);
+};
+const getAllLegendItems = (series) => {
+    return series.reduce((acc, s) => {
+        if (isAxisRelatedSeries(s) && 'name' in s) {
+            acc.push(s.name);
+        }
+        else {
+            acc.push(...s.data.map((d) => ('name' in d && d.name) || ''));
+        }
+        return acc;
+    }, []);
+};
 export const useLegend = (args) => {
     const { series } = args;
-    const [activeLegendItems, setActiveLegendItems] = React.useState(getVisibleSeriesNames(series));
+    const [activeLegendItems, setActiveLegendItems] = React.useState(getActiveLegendItems(series));
     const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
         const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
         let nextActiveLegendItems;
@@ -13,7 +44,7 @@ export const useLegend = (args) => {
             nextActiveLegendItems = activeLegendItems.concat(name);
         }
         else if (onlyItemSelected) {
-            nextActiveLegendItems = getVisibleSeriesNames(series);
+            nextActiveLegendItems = getAllLegendItems(series);
         }
         else {
             nextActiveLegendItems = [name];
@@ -22,7 +53,7 @@ export const useLegend = (args) => {
     }, [series, activeLegendItems]);
     // FIXME: remove effect. It initiates extra rerender
     React.useEffect(() => {
-        setActiveLegendItems(getVisibleSeriesNames(series));
+        setActiveLegendItems(getActiveLegendItems(series));
     }, [series]);
     return { activeLegendItems, handleLegendItemClick };
 };