@scality/core-ui 0.162.0 → 0.163.0

package/src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { getWrapper } from '../../testUtils';
 import { Barchart } from './Barchart.component';
+import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
 
 const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
 const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
@@ -48,19 +49,19 @@ const testTimeBars = [
   },
 ] as const;
 
+const testColorSet = {
+  Success: 'lineColor1',
+};
+
 describe('Barchart', () => {
   describe('Basic rendering', () => {
     it('should render the Barchart component with category data', async () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type="category"
-            bars={testBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={testBars} />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -72,20 +73,19 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={{
-              type: 'time',
-              timeRange: {
-                startDate: new Date('2024-07-05'),
-                endDate: new Date('2024-07-07'),
-                interval: ONE_DAY_IN_MILLISECONDS,
-              },
-            }}
-            bars={testTimeBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart
+              type={{
+                type: 'time',
+                timeRange: {
+                  startDate: new Date('2024-07-05'),
+                  endDate: new Date('2024-07-07'),
+                  interval: ONE_DAY_IN_MILLISECONDS,
+                },
+              }}
+              bars={testTimeBars}
+            />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -100,21 +100,20 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={{
-              type: 'time',
-              timeRange: {
-                startDate: new Date('2024-07-03'),
-                endDate: new Date('2024-07-07'),
-                interval: ONE_DAY_IN_MILLISECONDS,
-              },
-            }}
-            // data starts on 2024-07-05
-            bars={testTimeBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart
+              type={{
+                type: 'time',
+                timeRange: {
+                  startDate: new Date('2024-07-03'),
+                  endDate: new Date('2024-07-07'),
+                  interval: ONE_DAY_IN_MILLISECONDS,
+                },
+              }}
+              // data starts on 2024-07-05
+              bars={testTimeBars}
+            />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
       expect(screen.getByText('Wed03Jul')).toBeInTheDocument();
@@ -154,14 +153,14 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={type}
-            bars={bars}
+          <ChartLegendWrapper
             colorSet={{
               Success: 'lineColor1',
               Failed: 'lineColor2',
             }}
-          />
+          >
+            <Barchart type={type} bars={bars} />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -202,13 +201,9 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={type}
-            bars={testTimeBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type={type} bars={testTimeBars} />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
       await waitFor(() => {
@@ -236,20 +231,19 @@ describe('Barchart', () => {
       const { Wrapper } = getWrapper();
       render(
         <Wrapper>
-          <Barchart
-            type={{
-              type: 'time',
-              timeRange: {
-                startDate: new Date('2024-07-05T10:00:00'),
-                endDate: new Date('2024-07-05T12:00:00'),
-                interval: ONE_HOUR_IN_MILLISECONDS,
-              },
-            }}
-            bars={testHourlyBars}
-            colorSet={{
-              Success: 'lineColor1',
-            }}
-          />
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart
+              type={{
+                type: 'time',
+                timeRange: {
+                  startDate: new Date('2024-07-05T10:00:00'),
+                  endDate: new Date('2024-07-05T12:00:00'),
+                  interval: ONE_HOUR_IN_MILLISECONDS,
+                },
+              }}
+              bars={testHourlyBars}
+            />
+          </ChartLegendWrapper>
         </Wrapper>,
       );
 
@@ -284,15 +278,9 @@ describe('Barchart', () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <Barchart
-          type="category"
-          bars={testStackedBars}
-          stacked={true}
-          colorSet={{
-            Success: 'lineColor1',
-            Failed: 'lineColor2',
-          }}
-        />
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart type="category" bars={testStackedBars} stacked={true} />
+        </ChartLegendWrapper>
       </Wrapper>,
     );
 
@@ -317,18 +305,17 @@ describe('Barchart', () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <Barchart
-          type="category"
-          bars={testBars}
-          defaultSort={(pointA, pointB) => {
-            const valueA = pointA.Success;
-            const valueB = pointB.Success;
-            return valueB - valueA > 0 ? 1 : valueB - valueA < 0 ? -1 : 0;
-          }}
-          colorSet={{
-            Success: 'lineColor1',
-          }}
-        />
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart
+            type="category"
+            bars={testBars}
+            defaultSort={(pointA, pointB) => {
+              const valueA = pointA.Success;
+              const valueB = pointB.Success;
+              return valueB - valueA > 0 ? 1 : valueB - valueA < 0 ? -1 : 0;
+            }}
+          />
+        </ChartLegendWrapper>
       </Wrapper>,
     );
 
@@ -343,14 +330,9 @@ describe('Barchart', () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <Barchart
-          type="category"
-          bars={[]}
-          isLoading
-          colorSet={{
-            Success: 'lineColor1',
-          }}
-        />
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart type="category" bars={[]} isLoading />
+        </ChartLegendWrapper>
       </Wrapper>,
     );
     expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
@@ -359,17 +341,16 @@ describe('Barchart', () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <Barchart
-          type="category"
-          bars={[]}
-          title="Test Title"
-          secondaryTitle="Test Secondary Title"
-          rightTitle="Test Right Title"
-          helpTooltip="Test Help Tooltip"
-          colorSet={{
-            Success: 'lineColor1',
-          }}
-        />
+        <ChartLegendWrapper colorSet={testColorSet}>
+          <Barchart
+            type="category"
+            bars={[]}
+            title="Test Title"
+            secondaryTitle="Test Secondary Title"
+            rightTitle="Test Right Title"
+            helpTooltip="Test Help Tooltip"
+          />
+        </ChartLegendWrapper>
       </Wrapper>,
     );
 

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -19,6 +19,7 @@ import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { renderTooltipContent, UnitRange, useChartData } from './utils';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
@@ -70,7 +71,6 @@ export type BarchartSortFn<T extends BarchartBars> = (
 export type BarchartProps<T extends BarchartBars> = {
   type: 'category' | TimeType;
   bars: T;
-  colorSet: Record<T[number]['label'], ChartColors | (string & {})>;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
   unitRange?: UnitRange;
@@ -196,13 +196,13 @@ const Loading = ({ height }: { height: number }) => {
 
 export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   const theme = useTheme();
+  const { getColor } = useChartLegend();
   const [hoveredValue, setHoveredValue] = useState<string | undefined>();
 
   const {
     height = CHART_CONSTANTS.DEFAULT_HEIGHT,
     bars,
     type = 'category',
-    colorSet,
     unitRange,
     stacked,
     defaultSort,
@@ -214,6 +214,18 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     isLoading,
   } = props;
 
+  // Create colorSet from ChartLegendWrapper
+  const colorSet = bars.reduce(
+    (acc, bar) => {
+      const color = getColor(bar.label);
+      if (color) {
+        acc[bar.label] = color;
+      }
+      return acc;
+    },
+    {} as Record<string, ChartColors | string>,
+  );
+
   const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } =
     useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
 

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

@@ -2,6 +2,7 @@ import { coreUIAvailableThemes } from '../../style/theme';
 import {
   applySortingToData,
   computeUnitLabelAndRoundReferenceValue,
+  filterChartDataAndBarsByLegendSelection,
   formatPrometheusDataToRechartsDataAndBars,
   getMaxBarValue,
   getRoundReferenceValue,
@@ -780,3 +781,119 @@ describe('renderTooltipContent', () => {
     });
   });
 });
+
+describe('filterChartDataAndBarsByLegendSelection', () => {
+  const mockChartData = [
+    { category: 'Jan', Success: 10, Failed: 5, Warning: 3, Pending: 2 },
+    { category: 'Feb', Success: 20, Failed: 8, Warning: 6, Pending: 4 },
+    { category: 'Mar', Success: 15, Failed: 12, Warning: 9, Pending: 7 },
+  ];
+
+  const mockRechartsBars = [
+    { dataKey: 'Success', fill: '#00D100', stackId: undefined },
+    { dataKey: 'Failed', fill: '#D10000', stackId: undefined },
+    { dataKey: 'Warning', fill: '#FFA500', stackId: 'stacked' },
+    { dataKey: 'Pending', fill: '#337FBD', stackId: 'stacked' },
+  ];
+
+  it('should return all data and bars when no resources are selected (empty array)', () => {
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      [],
+    );
+
+    expect(result.filteredData).toEqual(mockChartData);
+    expect(result.filteredRechartsBars).toEqual(mockRechartsBars);
+    expect(result.filteredData).toHaveLength(3);
+    expect(result.filteredRechartsBars).toHaveLength(4);
+    // Verify all properties are preserved
+    expect(Object.keys(result.filteredData[0])).toEqual([
+      'category',
+      'Success',
+      'Failed',
+      'Warning',
+      'Pending',
+    ]);
+  });
+
+  it('should return only selected resources in both data and bars when resources are selected', () => {
+    const selectedResources = ['Success', 'Warning'];
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      selectedResources,
+    );
+
+    expect(result.filteredData).toHaveLength(3);
+    expect(result.filteredData).toEqual([
+      { category: 'Jan', Success: 10, Warning: 3 },
+      { category: 'Feb', Success: 20, Warning: 6 },
+      { category: 'Mar', Success: 15, Warning: 9 },
+    ]);
+
+    expect(result.filteredRechartsBars).toHaveLength(2);
+    expect(result.filteredRechartsBars).toEqual([
+      { dataKey: 'Success', fill: '#00D100', stackId: undefined },
+      { dataKey: 'Warning', fill: '#FFA500', stackId: 'stacked' },
+    ]);
+  });
+
+  it('should return single resource when only one resource is selected', () => {
+    const selectedResources = ['Failed'];
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      selectedResources,
+    );
+
+    expect(result.filteredData).toHaveLength(3);
+    expect(result.filteredData).toEqual([
+      { category: 'Jan', Failed: 5 },
+      { category: 'Feb', Failed: 8 },
+      { category: 'Mar', Failed: 12 },
+    ]);
+
+    expect(result.filteredRechartsBars).toHaveLength(1);
+    expect(result.filteredRechartsBars).toEqual([
+      { dataKey: 'Failed', fill: '#D10000', stackId: undefined },
+    ]);
+  });
+
+  it('should handle empty data array', () => {
+    const result = filterChartDataAndBarsByLegendSelection(
+      [],
+      mockRechartsBars,
+      ['Success'],
+    );
+
+    expect(result.filteredData).toEqual([]);
+    expect(result.filteredRechartsBars).toHaveLength(1);
+    expect(result.filteredRechartsBars).toEqual([
+      { dataKey: 'Success', fill: '#00D100', stackId: undefined },
+    ]);
+  });
+
+  it('should preserve order of selected resources based on data object keys', () => {
+    const selectedResources = ['Pending', 'Success', 'Failed']; // Different order
+    const result = filterChartDataAndBarsByLegendSelection(
+      mockChartData,
+      mockRechartsBars,
+      selectedResources,
+    );
+
+    // Should maintain the order they appear in selectedResources
+    expect(Object.keys(result.filteredData[0])).toEqual([
+      'category',
+      'Pending',
+      'Success',
+      'Failed',
+    ]);
+
+    // Should maintain original bar order regardless of selection order
+    expect(result.filteredRechartsBars).toHaveLength(3);
+    expect(result.filteredRechartsBars[0].dataKey).toBe('Success');
+    expect(result.filteredRechartsBars[1].dataKey).toBe('Failed');
+    expect(result.filteredRechartsBars[2].dataKey).toBe('Pending');
+  });
+});

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

@@ -6,6 +6,7 @@ import {
 import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
 import { TooltipContentProps } from 'recharts';
 import { chartColors, ChartColors } from '../../style/theme';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 export const getRoundReferenceValue = (value: number): number => {
   if (value <= 0) return 10; // Default for zero or negative values
@@ -248,7 +249,7 @@ export const applySortingToData = <T extends BarchartBars>(
 
 const getRechartsBarsAndBarDataKeys = (
   bars: BarchartBars,
-  colorSet: Record<BarchartBars[number]['label'], ChartColors | (string & {})>,
+  colorSet: Record<string, ChartColors | string>,
   stacked?: boolean,
 ) => {
   const rechartsBars: { dataKey: string; fill: string; stackId?: string }[] =
@@ -284,7 +285,7 @@ export const formatPrometheusDataToRechartsDataAndBars = <
 >(
   bars: T,
   type: BarchartProps<T>['type'],
-  colorSet: Record<T[number]['label'], ChartColors | (string & {})>,
+  colorSet: Record<string, ChartColors | string>,
   stacked?: boolean,
   defaultSort?: BarchartProps<T>['defaultSort'],
 ): {
@@ -456,14 +457,53 @@ export const renderTooltipContent = <T extends BarchartBars>(
   return tooltip(currentPoint);
 };
 
+/**
+ * Filters both chart data and recharts bars to only include selected resources from legend
+ * @param data - Array of chart data objects with category and resource values
+ * @param rechartsBars - Array of recharts bar configurations
+ * @param selectedResources - Array of selected resource names
+ * @returns Object containing filtered data and recharts bars
+ */
+export const filterChartDataAndBarsByLegendSelection = (
+  data: { [key: string]: string | number }[],
+  rechartsBars: { dataKey: string; fill: string; stackId?: string }[],
+  selectedResources: string[],
+) => {
+  // If no resources are selected, show all data and bars (default behavior)
+  if (selectedResources.length === 0) {
+    return { filteredData: data, filteredRechartsBars: rechartsBars };
+  }
+
+  // Filter recharts bars
+  const filteredRechartsBars = rechartsBars.filter((bar) =>
+    selectedResources.includes(bar.dataKey),
+  );
+
+  // Filter data to only include selected resources
+  const filteredData = data.map((item) => {
+    const filteredItem: { [key: string]: string | number } = {
+      category: item.category,
+    };
+    selectedResources.forEach((resource) => {
+      if (resource in item) {
+        filteredItem[resource] = item[resource];
+      }
+    });
+    return filteredItem;
+  });
+
+  return { filteredData, filteredRechartsBars };
+};
+
 export const useChartData = <T extends BarchartBars>(
   bars: T,
   type: BarchartProps<T>['type'],
-  colorSet: Record<T[number]['label'], ChartColors | (string & {})>,
+  colorSet: Record<string, ChartColors | string>,
   stacked?: boolean,
   defaultSort?: BarchartProps<T>['defaultSort'],
   unitRange?: UnitRange,
 ) => {
+  const { selectedResources } = useChartLegend();
   const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(
     bars,
     type,
@@ -472,13 +512,21 @@ export const useChartData = <T extends BarchartBars>(
     defaultSort,
   );
 
-  const maxValue = getMaxBarValue(data, stacked);
+  // Filter both data and bars to only include selected resources for accurate maxValue calculation
+  const { filteredData, filteredRechartsBars } =
+    filterChartDataAndBarsByLegendSelection(
+      data,
+      rechartsBars,
+      selectedResources,
+    );
+
+  const maxValue = getMaxBarValue(filteredData, stacked);
 
   const { unitLabel, roundReferenceValue, rechartsData } =
-    computeUnitLabelAndRoundReferenceValue(data, maxValue, unitRange);
+    computeUnitLabelAndRoundReferenceValue(filteredData, maxValue, unitRange);
 
   return {
-    rechartsBars,
+    rechartsBars: filteredRechartsBars,
     unitLabel,
     roundReferenceValue,
     rechartsData,

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

@@ -0,0 +1,113 @@
+import styled from 'styled-components';
+import { useChartLegend } from './ChartLegendWrapper';
+import { Text } from '../text/Text.component';
+import { chartColors } from '../../style/theme';
+import { useCallback } from 'react';
+
+type ChartLegendProps = {
+  shape: 'line' | 'rectangle';
+  disabled?: boolean;
+  direction?: 'horizontal' | 'vertical';
+};
+
+const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
+  display: flex;
+  flex-direction: ${({ direction }) =>
+    direction === 'horizontal' ? 'row' : 'column'};
+  gap: ${({ direction }) => (direction === 'horizontal' ? '16px' : '8px')};
+  flex-wrap: wrap;
+`;
+
+const LegendItem = styled.div<{ disabled?: boolean; selected?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ selected, disabled }) => (disabled ? 0.5 : selected ? 1 : 0.7)};
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  }
+`;
+
+const LegendShape = styled.div<{
+  color?: string;
+  shape: 'line' | 'rectangle';
+  chartColors: Record<string, string>;
+}>`
+  ${({ shape, color, chartColors }) => {
+    if (shape === 'line') {
+      return `
+        width: 20px;
+        height: 2px;
+        background-color: ${chartColors[color as keyof typeof chartColors] || color};
+      `;
+    } else if (shape === 'rectangle') {
+      return `
+        width: 12px;
+        height: 12px;
+        background-color: ${chartColors[color as keyof typeof chartColors] || color};
+        border-radius: 2px;
+      `;
+    } else {
+      console.error(
+        'The shape is not valid. Please use "line" or "rectangle".',
+      );
+    }
+  }}
+`;
+
+export const ChartLegend = ({
+  shape,
+  disabled = false,
+  direction = 'horizontal',
+}: ChartLegendProps) => {
+  const {
+    listResources,
+    getColor,
+    isSelected,
+    addSelectedResource,
+    removeSelectedResource,
+  } = useChartLegend();
+
+  const resources = listResources();
+
+  const handleLegendClick = useCallback(
+    (resource: string) => {
+      if (disabled) return;
+
+      if (isSelected(resource)) {
+        removeSelectedResource(resource);
+      } else {
+        addSelectedResource(resource);
+      }
+    },
+    [disabled, isSelected, addSelectedResource, removeSelectedResource],
+  );
+
+  return (
+    <Legend direction={direction}>
+      {resources.map((resource) => {
+        const color = getColor(resource);
+        const selected = isSelected(resource);
+
+        return (
+          <LegendItem
+            key={resource}
+            disabled={disabled}
+            selected={selected}
+            onClick={() => handleLegendClick(resource)}
+          >
+            <LegendShape
+              color={color}
+              shape={shape}
+              chartColors={chartColors}
+            />
+            <Text variant="Basic">{resource}</Text>
+          </LegendItem>
+        );
+      })}
+    </Legend>
+  );
+};