@scality/core-ui 0.164.0 → 0.166.0

package/src/lib/components/barchartv2/utils.test.ts

@@ -13,6 +13,21 @@ import {
   UnitRange,
 } from './utils';
 
+// Test date constants to avoid repetition
+const TEST_DATES = {
+  JULY_5_2024: new Date('2024-07-05T00:00:00'),
+  JULY_6_2024: new Date('2024-07-06T00:00:00'),
+  JULY_7_2024: new Date('2024-07-07T00:00:00'),
+  JULY_5_10AM: new Date('2024-07-05T10:00:00'),
+  JULY_5_11AM: new Date('2024-07-05T11:00:00'),
+  JULY_5_8_30AM: new Date('2024-07-05T08:30:00'),
+  JULY_5_2_45PM: new Date('2024-07-05T14:45:00'),
+  JULY_6_9_15AM: new Date('2024-07-06T09:15:00'),
+  JULY_5_8AM: new Date('2024-07-05T08:00:00'),
+  JULY_6_2PM: new Date('2024-07-06T14:00:00'),
+  JULY_7_10AM: new Date('2024-07-07T10:00:00'),
+} as const;
+
 // Mock theme object for tests
 const mockTheme = {
   statusHealthy: '#00D100',
@@ -46,8 +61,8 @@ describe('transformTimeData', () => {
       {
         label: 'Success',
         data: [
-          [new Date('2024-07-05T00:00:00'), 10],
-          [new Date('2024-07-06T00:00:00'), 20],
+          [TEST_DATES.JULY_5_2024, 10],
+          [TEST_DATES.JULY_6_2024, 20],
         ] as [Date, number][],
       },
     ];
@@ -55,8 +70,8 @@ describe('transformTimeData', () => {
     const type = {
       type: 'time' as const,
       timeRange: {
-        startDate: new Date('2024-07-05T00:00:00'),
-        endDate: new Date('2024-07-06T00:00:00'),
+        startDate: TEST_DATES.JULY_5_2024,
+        endDate: TEST_DATES.JULY_6_2024,
         interval: 24 * 60 * 60 * 1000, // 1 day
       },
     };
@@ -66,8 +81,8 @@ describe('transformTimeData', () => {
     const result = transformTimeData(bars, type, barDataKeys);
 
     expect(result).toEqual([
-      { category: 'Fri05Jul', Success: 10 },
-      { category: 'Sat06Jul', Success: 20 },
+      { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
+      { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 20 },
     ]);
   });
 
@@ -76,9 +91,9 @@ describe('transformTimeData', () => {
       {
         label: 'Success',
         data: [
-          [new Date('2024-07-05T00:00:00'), 10],
+          [TEST_DATES.JULY_5_2024, 10],
           // Missing July 6th
-          [new Date('2024-07-07T00:00:00'), 30],
+          [TEST_DATES.JULY_7_2024, 30],
         ] as [Date, number][],
       },
     ];
@@ -86,8 +101,8 @@ describe('transformTimeData', () => {
     const type = {
       type: 'time' as const,
       timeRange: {
-        startDate: new Date('2024-07-05T00:00:00'),
-        endDate: new Date('2024-07-07T00:00:00'),
+        startDate: TEST_DATES.JULY_5_2024,
+        endDate: TEST_DATES.JULY_7_2024,
         interval: 24 * 60 * 60 * 1000, // 1 day
       },
     };
@@ -97,9 +112,9 @@ describe('transformTimeData', () => {
     const result = transformTimeData(bars, type, barDataKeys);
 
     expect(result).toEqual([
-      { category: 'Fri05Jul', Success: 10 },
-      { category: 'Sat06Jul', Success: 0 }, // Missing data filled with 0
-      { category: 'Sun07Jul', Success: 30 },
+      { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
+      { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 0 }, // Missing data filled with 0
+      { category: TEST_DATES.JULY_7_2024.valueOf(), Success: 30 },
     ]);
   });
 
@@ -108,8 +123,8 @@ describe('transformTimeData', () => {
       {
         label: 'Success',
         data: [
-          [new Date('2024-07-05T10:00:00'), 10],
-          [new Date('2024-07-05T11:00:00'), 20],
+          [TEST_DATES.JULY_5_10AM, 10],
+          [TEST_DATES.JULY_5_11AM, 20],
         ] as [Date, number][],
       },
     ];
@@ -117,8 +132,8 @@ describe('transformTimeData', () => {
     const type = {
       type: 'time' as const,
       timeRange: {
-        startDate: new Date('2024-07-05T10:00:00'),
-        endDate: new Date('2024-07-05T11:00:00'),
+        startDate: TEST_DATES.JULY_5_10AM,
+        endDate: TEST_DATES.JULY_5_11AM,
         interval: 60 * 60 * 1000, // 1 hour
       },
     };
@@ -128,8 +143,8 @@ describe('transformTimeData', () => {
     const result = transformTimeData(bars, type, barDataKeys);
 
     expect(result).toEqual([
-      { category: '10:00', Success: 10 },
-      { category: '11:00', Success: 20 },
+      { category: TEST_DATES.JULY_5_10AM.valueOf(), Success: 10 },
+      { category: TEST_DATES.JULY_5_11AM.valueOf(), Success: 20 },
     ]);
   });
 
@@ -138,9 +153,9 @@ describe('transformTimeData', () => {
       {
         label: 'Success',
         data: [
-          [new Date('2024-07-05T08:30:00'), 10], // 8:30 AM
-          [new Date('2024-07-05T14:45:00'), 25], // 2:45 PM (should overwrite 8:30 AM)
-          [new Date('2024-07-06T09:15:00'), 15], // Next day
+          [TEST_DATES.JULY_5_8_30AM, 10], // 8:30 AM
+          [TEST_DATES.JULY_5_2_45PM, 25], // 2:45 PM (should overwrite 8:30 AM)
+          [TEST_DATES.JULY_6_9_15AM, 15], // Next day
         ] as [Date, number][],
       },
     ];
@@ -148,8 +163,8 @@ describe('transformTimeData', () => {
     const type = {
       type: 'time' as const,
       timeRange: {
-        startDate: new Date('2024-07-05T00:00:00'),
-        endDate: new Date('2024-07-06T00:00:00'),
+        startDate: TEST_DATES.JULY_5_2024,
+        endDate: TEST_DATES.JULY_6_2024,
         interval: 24 * 60 * 60 * 1000, // 1 day
       },
     };
@@ -159,8 +174,8 @@ describe('transformTimeData', () => {
     const result = transformTimeData(bars, type, barDataKeys);
 
     expect(result).toEqual([
-      { category: 'Fri05Jul', Success: 25 }, // Last value for July 5th
-      { category: 'Sat06Jul', Success: 15 }, // July 6th value
+      { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 25 }, // Last value for July 5th
+      { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 15 }, // July 6th value
     ]);
   });
 
@@ -169,9 +184,9 @@ describe('transformTimeData', () => {
       {
         label: 'Success',
         data: [
-          [new Date('2024-07-07T10:00:00'), 30], // July 7th (latest)
-          [new Date('2024-07-05T08:00:00'), 10], // July 5th (earliest)
-          [new Date('2024-07-06T14:00:00'), 20], // July 6th (middle)
+          [TEST_DATES.JULY_7_10AM, 30], // July 7th (latest)
+          [TEST_DATES.JULY_5_8AM, 10], // July 5th (earliest)
+          [TEST_DATES.JULY_6_2PM, 20], // July 6th (middle)
         ] as [Date, number][],
       },
     ];
@@ -179,8 +194,8 @@ describe('transformTimeData', () => {
     const type = {
       type: 'time' as const,
       timeRange: {
-        startDate: new Date('2024-07-05T00:00:00'),
-        endDate: new Date('2024-07-07T00:00:00'),
+        startDate: TEST_DATES.JULY_5_2024,
+        endDate: TEST_DATES.JULY_7_2024,
         interval: 24 * 60 * 60 * 1000, // 1 day
       },
     };
@@ -191,9 +206,9 @@ describe('transformTimeData', () => {
 
     // Should be in chronological order regardless of input order
     expect(result).toEqual([
-      { category: 'Fri05Jul', Success: 10 },
-      { category: 'Sat06Jul', Success: 20 },
-      { category: 'Sun07Jul', Success: 30 },
+      { category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
+      { category: TEST_DATES.JULY_6_2024.valueOf(), Success: 20 },
+      { category: TEST_DATES.JULY_7_2024.valueOf(), Success: 30 },
     ]);
   });
 
@@ -201,19 +216,19 @@ describe('transformTimeData', () => {
     const bars = [
       {
         label: 'Success',
-        data: [[new Date('2024-07-05T00:00:00'), 10]] as [Date, number][],
+        data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
       },
       {
         label: 'Failed',
-        data: [[new Date('2024-07-06T00:00:00'), 5]] as [Date, number][],
+        data: [[TEST_DATES.JULY_6_2024, 5]] as [Date, number][],
       },
     ];
 
     const type = {
       type: 'time' as const,
       timeRange: {
-        startDate: new Date('2024-07-05T00:00:00'),
-        endDate: new Date('2024-07-06T00:00:00'),
+        startDate: TEST_DATES.JULY_5_2024,
+        endDate: TEST_DATES.JULY_6_2024,
         interval: 24 * 60 * 60 * 1000, // 1 day
       },
     };
@@ -223,8 +238,16 @@ describe('transformTimeData', () => {
     const result = transformTimeData(bars, type, barDataKeys);
 
     expect(result).toEqual([
-      { category: 'Fri05Jul', Success: 10, Failed: 0 },
-      { category: 'Sat06Jul', Success: 0, Failed: 5 },
+      {
+        category: TEST_DATES.JULY_5_2024.valueOf(),
+        Success: 10,
+        Failed: 0,
+      },
+      {
+        category: TEST_DATES.JULY_6_2024.valueOf(),
+        Success: 0,
+        Failed: 5,
+      },
     ]);
   });
 });
@@ -570,11 +593,11 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
     const bars = [
       {
         label: 'Success Count',
-        data: [[new Date('2024-07-05T00:00:00'), 10]] as [Date, number][],
+        data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
       },
       {
         label: 'Failed Count',
-        data: [[new Date('2024-07-05T00:00:00'), 5]] as [Date, number][],
+        data: [[TEST_DATES.JULY_5_2024, 5]] as [Date, number][],
       },
     ];
 
@@ -583,8 +606,8 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
       {
         type: 'time',
         timeRange: {
-          startDate: new Date('2024-07-05T00:00:00'),
-          endDate: new Date('2024-07-05T00:00:00'),
+          startDate: TEST_DATES.JULY_5_2024,
+          endDate: TEST_DATES.JULY_5_2024,
           interval: 24 * 60 * 60 * 1000,
         },
       },
@@ -598,7 +621,11 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
 
     // Should integrate: time transformation + status color assignment
     expect(result.data).toEqual([
-      { category: 'Fri05Jul', 'Success Count': 10, 'Failed Count': 5 },
+      {
+        category: TEST_DATES.JULY_5_2024.valueOf(),
+        'Success Count': 10,
+        'Failed Count': 5,
+      },
     ]);
     expect(result.rechartsBars).toEqual([
       { dataKey: 'Success Count', fill: '#4BE4E2' }, // lineColor3

package/src/lib/components/barchartv2/utils.ts

@@ -3,7 +3,6 @@ import {
   BarchartBars,
   BarchartTooltipFn,
 } from './Barchart.component';
-import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
 import { TooltipContentProps } from 'recharts';
 import { chartColors, ChartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
@@ -84,31 +83,6 @@ const generateTimeRanges = (
   return ranges;
 };
 
-/**
- * Formats a date based on the interval
- * @param date - Date object
- * @param interval - Interval in milliseconds
- * @returns Formatted string
- */
-const formatDate = (date: Date, interval: number): string => {
-  if (interval > 24 * 60 * 60 * 1000) {
-    return (
-      DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
-      ' ' +
-      TIME_FORMATER.format(date)
-    );
-  } else if (interval === 24 * 60 * 60 * 1000) {
-    // Daily or longer intervals - use day format
-    return DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '');
-  } else if (interval >= 60 * 1000) {
-    //Handle hourly and minute intervals - use minute format
-    return TIME_FORMATER.format(date);
-  } else {
-    // Second intervals or less - use full timestamp
-    return date.toISOString();
-  }
-};
-
 /**
  * Finds the time range that contains the given date
  * @param date - Data point date
@@ -149,16 +123,12 @@ export const transformTimeData = <T extends BarchartBars>(
     type.timeRange.interval,
   );
 
-  const categoryMap = new Map<
-    string | number,
-    { [key: string]: string | number }
-  >();
+  const categoryMap = new Map<number, { [key: string]: string | number }>();
 
   // Initialize all ranges with zeros
   timeRanges.forEach((range) => {
-    const categoryDisplay = formatDate(range.start, type.timeRange.interval);
     const initialData: { [key: string]: string | number } = {
-      category: categoryDisplay,
+      category: range.start.getTime(),
     };
     barDataKeys.forEach((dataKey) => {
       initialData[dataKey] = 0;

package/src/lib/components/chartlegend/ChartLegend.test.tsx

@@ -0,0 +1,218 @@
+import { render, screen } from '@testing-library/react';
+import { ChartLegend } from './ChartLegend';
+import React from 'react';
+import { ChartLegendWrapper } from './ChartLegendWrapper';
+import userEvent from '@testing-library/user-event';
+
+const colorSet = {
+  CPU: 'red',
+  Memory: 'blue',
+  Disk: 'green',
+};
+
+describe('ChartLegend', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render all legend items', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" />
+      </ChartLegendWrapper>,
+    );
+    expect(screen.getByText('CPU')).toBeInTheDocument();
+    expect(screen.getByText('Memory')).toBeInTheDocument();
+    expect(screen.getByText('Disk')).toBeInTheDocument();
+  });
+
+  it('should have all items selected by default', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" />
+      </ChartLegendWrapper>,
+    );
+
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+  });
+  it('should not respond to clicks when disabled', () => {
+    render(
+      <ChartLegendWrapper colorSet={colorSet}>
+        <ChartLegend shape="line" disabled />
+      </ChartLegendWrapper>,
+    );
+
+    userEvent.click(screen.getByText('CPU'));
+    // If disabled, should not select any items
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+
+    userEvent.click(screen.getByText('Memory'), { metaKey: true });
+    // If disabled, should not select any items
+    expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+  });
+  describe('Normal Click Behavior', () => {
+    it('should select only clicked item when all are selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+
+      // Click on CPU should select only CPU
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should select all items when clicking on the only selected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // First click to select only CPU
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      // Second click should select all
+      userEvent.click(screen.getByLabelText('CPU selected'));
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should select only clicked item when clicking unselected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByLabelText('CPU selected'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Click on unselected Memory should select only Memory
+      userEvent.click(screen.getByText('Memory'));
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+  });
+
+  describe('Cmd+Click Behavior', () => {
+    it('should add unselected item to selection when cmd+clicking', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Cmd+click Memory should add it to selection
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should remove selected item from selection when cmd+clicking with multiple selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Start with all selected, select only CPU, then add Memory
+      userEvent.click(screen.getByText('CPU'));
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+
+      // Cmd+click CPU should remove it
+      userEvent.click(screen.getByText('CPU'), { metaKey: true });
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should select all when cmd+clicking the only selected item', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+
+      // Cmd+click the only selected item should select all
+      userEvent.click(screen.getByText('CPU'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should work with ctrl+click on Windows/Linux', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Select only CPU first
+      userEvent.click(screen.getByText('CPU'));
+
+      // Ctrl+click Memory should add it to selection
+      userEvent.click(screen.getByText('Memory'), { ctrlKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
+
+    it('should handle mixed normal and cmd+clicks correctly', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Normal click to select CPU only
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+
+      // Cmd+click to add Memory
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+
+      // Normal click on Disk should select only Disk
+      userEvent.click(screen.getByText('Disk'));
+      expect(screen.getByLabelText('CPU not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+  });
+});

package/src/lib/components/chartlegend/ChartLegend.tsx

@@ -18,7 +18,10 @@ const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
   flex-wrap: wrap;
 `;
 
-const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
+export const LegendItem = styled.div<{
+  disabled?: boolean;
+  selected?: boolean;
+}>`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -31,7 +34,7 @@ const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
   }
 `;
 
-const LegendShape = styled.div<{
+export const LegendShape = styled.div<{
   color?: string;
   shape: 'line' | 'rectangle';
   chartColors: Record<string, string>;
@@ -69,21 +72,51 @@ export const ChartLegend = ({
     isSelected,
     addSelectedResource,
     removeSelectedResource,
+    selectAllResources,
+    getAllResourcesCount,
+    getSelectedCount,
+    selectOnlyResource,
   } = useChartLegend();
 
   const resources = listResources();
 
   const handleLegendClick = useCallback(
-    (resource: string) => {
+    (resource: string, event: React.MouseEvent) => {
       if (disabled) return;
 
-      if (isSelected(resource)) {
-        removeSelectedResource(resource);
+      const isModifierClick = event.metaKey || event.ctrlKey;
+      const itemIsSelected = isSelected(resource);
+
+      if (isModifierClick) {
+        if (itemIsSelected) {
+          if (getSelectedCount() === 1) {
+            selectAllResources();
+          } else {
+            removeSelectedResource(resource);
+          }
+        } else {
+          addSelectedResource(resource);
+        }
       } else {
-        addSelectedResource(resource);
+        if (getSelectedCount() === getAllResourcesCount()) {
+          selectOnlyResource(resource);
+        } else if (itemIsSelected) {
+          selectAllResources();
+        } else {
+          selectOnlyResource(resource);
+        }
       }
     },
-    [disabled, isSelected, addSelectedResource, removeSelectedResource],
+    [
+      disabled,
+      isSelected,
+      addSelectedResource,
+      removeSelectedResource,
+      selectAllResources,
+      selectOnlyResource,
+      getAllResourcesCount,
+      getSelectedCount,
+    ],
   );
 
   return (
@@ -97,7 +130,8 @@ export const ChartLegend = ({
             key={resource}
             disabled={disabled}
             selected={selected}
-            onClick={() => handleLegendClick(resource)}
+            aria-label={`${resource} ${selected ? 'selected' : 'not selected'}`}
+            onClick={(event) => handleLegendClick(resource, event)}
           >
             <LegendShape
               color={color}