feat: add legend grouping (#292)

Author: kuzmadom

src/__snapshots__/legend.visual.test.tsx-snapshots/Legend-Discrete-Grouped-legend-items-1-chromium-linux.png

@@ -0,0 +1,20 @@
+import type {Meta, StoryObj} from '@storybook/react-webpack5';
+
+import {ChartStory} from '../../ChartStory';
+import {groupedLegend} from '../../__data__';
+
+const meta: Meta<typeof ChartStory> = {
+    title: 'Other/Legend',
+    component: ChartStory,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChartStory>;
+
+export const SharedLegend = {
+    name: 'Shared legend',
+    args: {
+        data: groupedLegend,
+    },
+} satisfies Story;

src/__snapshots__/legend.visual.test.tsx-snapshots/Legend-Discrete-Grouped-legend-items-2-chromium-linux.png

@@ -2,18 +2,18 @@ import React from 'react';
 
 import type {Meta} from '@storybook/react-webpack5';
 
-import {ChartStory} from '../ChartStory';
-import {lineBasicData} from '../__data__';
+import {ChartStory} from '../../ChartStory';
+import {lineBasicData} from '../../__data__';
 
 const meta: Meta<typeof ChartStory> = {
-    title: 'Other',
+    title: 'Other/Legend',
     component: ChartStory,
 };
 
 export default meta;
 
 export const LegendPosition = {
-    name: 'Legend Position',
+    name: 'Position',
     args: {
         position: 'bottom',
     },

src/__stories__/Other/Legend/Legend.stories.tsx

@@ -3,3 +3,4 @@ export * from './crosshair';
 export * from './line-and-bar';
 export * from './lines';
 export * from './tooltip';
+export * from './legend';

src/__stories__/Other/LegendPosition.stories.tsx renamed to src/__stories__/Other/Legend/LegendPosition.stories.tsx

@@ -0,0 +1,25 @@
+import type {ChartData} from '../../../../types';
+
+export const groupedLegend: ChartData = {
+    xAxis: {maxPadding: 0},
+    yAxis: [{maxPadding: 0}],
+    chart: {margin: {top: 10, bottom: 10, right: 10, left: 10}},
+    series: {
+        data: [
+            {
+                type: 'scatter',
+                name: 'Series 1.1',
+                data: [{x: 1.1, y: 1.1}],
+                legend: {groupId: 's1', itemText: 'Series 1'},
+            },
+            {
+                type: 'scatter',
+                name: 'Series 1.2',
+                data: [{x: 1.2, y: 1.2}],
+                legend: {groupId: 's1'},
+            },
+            {type: 'scatter', name: 'Series 2', data: [{x: 2, y: 2}]},
+            {type: 'scatter', name: 'Series 3', data: [{x: 3, y: 3}]},
+        ],
+    },
+};

src/__stories__/__data__/other/index.ts

@@ -0,0 +1 @@
+export * from './grouping';

src/__stories__/__data__/other/legend/grouping.ts

@@ -6,7 +6,7 @@ import range from 'lodash/range';
 import set from 'lodash/set';
 
 import {ChartTestStory} from '../../playwright/components/ChartTestStory';
-import {pieHtmlLegendData} from '../__stories__/__data__';
+import {groupedLegend, pieHtmlLegendData} from '../__stories__/__data__';
 import type {ChartData} from '../types';
 
 const pieOverflowedLegendItemsData: ChartData = {
@@ -163,5 +163,15 @@ test.describe('Legend', () => {
                 await expect(component.locator('svg')).toHaveScreenshot();
             });
         });
+
+        test('Grouped legend items', async ({mount}) => {
+            const component = await mount(<ChartTestStory data={groupedLegend} />);
+
+            await expect(component.locator('svg')).toHaveScreenshot();
+
+            const legendItem = component.locator('.gcharts-legend__item text').first();
+            await legendItem.click();
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
     });
 });

src/__stories__/__data__/other/legend/index.ts

@@ -254,7 +254,7 @@ export const Legend = (props: 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?.();
                         });
 
@@ -298,7 +298,7 @@ export const Legend = (props: 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?.();
                             })
                             [legend.html ? 'html' : 'text'](function (d) {

src/__tests__/legend.visual.test.tsx

@@ -32,7 +32,7 @@ const useVisibleSeries = ({
             if (singleSeries.legend.enabled) {
                 return {
                     ...singleSeries,
-                    visible: activeLegendItems.includes(singleSeries.name),
+                    visible: activeLegendItems.includes(singleSeries.legend.groupId),
                 };
             }
 
@@ -124,22 +124,22 @@ export const useSeries = (args: Args) => {
     const chartSeries = useVisibleSeries({preparedSeries, activeLegendItems});
 
     const handleLegendItemClick: OnLegendItemClick = React.useCallback(
-        ({name, metaKey}) => {
+        ({id, metaKey}) => {
             const allItems = getAllLegendItems(preparedSeries);
             const onlyItemSelected =
-                activeLegendItems.length === 1 && activeLegendItems.includes(name);
+                activeLegendItems.length === 1 && activeLegendItems.includes(id);
             let nextActiveLegendItems: string[];
 
-            if (metaKey && activeLegendItems.includes(name)) {
-                nextActiveLegendItems = activeLegendItems.filter((item) => item !== name);
-            } else if (metaKey && !activeLegendItems.includes(name)) {
-                nextActiveLegendItems = activeLegendItems.concat(name);
+            if (metaKey && activeLegendItems.includes(id)) {
+                nextActiveLegendItems = activeLegendItems.filter((item) => item !== id);
+            } else if (metaKey && !activeLegendItems.includes(id)) {
+                nextActiveLegendItems = activeLegendItems.concat(id);
             } else if (onlyItemSelected && allItems.length === 1) {
                 nextActiveLegendItems = [];
             } else if (onlyItemSelected) {
                 nextActiveLegendItems = allItems;
             } else {
-                nextActiveLegendItems = [name];
+                nextActiveLegendItems = [id];
             }
 
             setActiveLegendItems(nextActiveLegendItems);