@scality/core-ui 0.170.0 → 0.171.0

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

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useChartLegend } from './ChartLegendWrapper';
-import { Text } from '../text/Text.component';
+import { Text, TextVariant } from '../text/Text.component';
 import { chartColors } from '../../style/theme';
 import { useCallback } from 'react';
 
@@ -8,6 +8,7 @@ type ChartLegendProps = {
   shape: 'line' | 'rectangle';
   disabled?: boolean;
   direction?: 'horizontal' | 'vertical';
+  legendSize?: TextVariant;
 };
 
 const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
@@ -65,6 +66,7 @@ export const ChartLegend = ({
   shape,
   disabled = false,
   direction = 'horizontal',
+  legendSize = 'Basic',
 }: ChartLegendProps) => {
   const {
     listResources,
@@ -132,7 +134,7 @@ export const ChartLegend = ({
               shape={shape}
               chartColors={chartColors}
             />
-            <Text variant="Basic">{resource}</Text>
+            <Text variant={legendSize}>{resource}</Text>
           </LegendItem>
         );
       })}

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

@@ -0,0 +1,197 @@
+import { render, screen } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import {
+  ChartLegendWrapper,
+  useChartId,
+  useChartLegend,
+} from './ChartLegendWrapper';
+import { ChartLegend } from './ChartLegend';
+import userEvent from '@testing-library/user-event';
+
+describe('ChartLegendWrapper', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const TestChart = ({ seriesNames }: { seriesNames: string[] }) => {
+    const chartId = useChartId();
+    const { register } = useChartLegend();
+
+    useEffect(() => {
+      register(chartId, seriesNames);
+    }, [chartId, register, seriesNames]);
+
+    return <div data-testid={`chart-${chartId}`}>Test Chart</div>;
+  };
+
+  const generateColors = (seriesNames: string[]) => {
+    const colors: Record<string, string> = {};
+    const colorPalette = ['red', 'blue', 'green', 'yellow', 'purple'];
+    seriesNames.forEach((name, index) => {
+      colors[name] = colorPalette[index % colorPalette.length];
+    });
+    return colors;
+  };
+
+  describe('Dynamic Color Generation', () => {
+    it('should generate colors dynamically based on registered series', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU', 'Memory']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    });
+
+    it('should handle multiple charts with overlapping series', () => {
+      const TestChart1 = () => {
+        const chartId = useChartId();
+        const { register } = useChartLegend();
+
+        useEffect(() => {
+          register(chartId, ['CPU', 'Memory']);
+        }, [chartId, register]);
+
+        return <div data-testid={`chart1-${chartId}`}>Test Chart 1</div>;
+      };
+
+      const TestChart2 = () => {
+        const chartId = useChartId();
+        const { register } = useChartLegend();
+
+        useEffect(() => {
+          register(chartId, ['CPU', 'Disk']);
+        }, [chartId, register]);
+
+        return <div data-testid={`chart2-${chartId}`}>Test Chart 2</div>;
+      };
+
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart1 />
+          <TestChart2 />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should show unique series from both charts
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+
+      // All should be selected by default
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should handle empty series registration', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={[]} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should not crash and should render empty legend
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should maintain selection state when new series are added', () => {
+      const { rerender } = render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Initially only CPU
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+
+      // Select only CPU
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+
+      // Add more series
+      rerender(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU', 'Memory']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // New series should be added and all should be selected (reset behavior)
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    });
+
+    it('should work with different chart configurations', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['Series1', 'Series2', 'Series3']} />
+          <ChartLegend shape="rectangle" direction="vertical" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('Series1')).toBeInTheDocument();
+      expect(screen.getByText('Series2')).toBeInTheDocument();
+      expect(screen.getByText('Series3')).toBeInTheDocument();
+    });
+  });
+
+  describe('Static Color Set', () => {
+    const staticColorSet = {
+      CPU: 'red',
+      Memory: 'blue',
+      Disk: 'green',
+    };
+
+    it('should work with static color sets', () => {
+      render(
+        <ChartLegendWrapper colorSet={staticColorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+    });
+
+    it('should ignore registration when using static color sets', () => {
+      render(
+        <ChartLegendWrapper colorSet={staticColorSet}>
+          <TestChart seriesNames={['DifferentSeries']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should only show static color set items, not registered series
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+      expect(screen.queryByText('DifferentSeries')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should throw error when useChartLegend is used outside wrapper', () => {
+      const TestComponent = () => {
+        useChartLegend();
+        return <div>Test</div>;
+      };
+
+      expect(() => render(<TestComponent />)).toThrow(
+        'useChartLegend must be used within a ChartLegendWrapper',
+      );
+    });
+  });
+});

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

@@ -5,9 +5,22 @@ import {
   ReactNode,
   useMemo,
   useCallback,
+  useEffect,
+  useRef,
 } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { ChartColors } from '../../style/theme';
 
+export const useChartId = (): string => {
+  const idRef = useRef<string | null>(null);
+
+  if (idRef.current === null) {
+    idRef.current = uuidv4();
+  }
+
+  return idRef.current;
+};
+
 export type ChartLegendState = {
   selectedResources: string[];
   addSelectedResource: (resource: string) => void;
@@ -18,23 +31,65 @@ export type ChartLegendState = {
   getColor: (resource: string) => string | undefined;
   listResources: () => string[];
   isOnlyOneSelected: () => boolean;
+  register: (chartId: string, seriesNames: string[]) => void;
 };
 
 const ChartLegendContext = createContext<ChartLegendState | null>(null);
 
 export type ChartLegendWrapperProps = {
   children: ReactNode;
-  colorSet: Record<string, ChartColors | string>;
+  colorSet:
+    | Record<string, ChartColors | string>
+    | ((seriesNames: string[]) => Record<string, ChartColors | string>);
 };
 
 export const ChartLegendWrapper = ({
   children,
   colorSet,
 }: ChartLegendWrapperProps) => {
-  const allResources = Object.keys(colorSet);
+  const [registeredColorSets, setRegisteredColorSets] = useState<
+    Record<string, string[]>
+  >({});
+
+  const [internalColorSet, setInternalColorSet] = useState<
+    Record<string, ChartColors | string>
+  >(() => {
+    return typeof colorSet === 'function' ? {} : colorSet;
+  });
+
+  useEffect(() => {
+    if (typeof colorSet === 'function') {
+      const allUniqueSeriesNames = Array.from(
+        new Set(Object.values(registeredColorSets).flat()),
+      );
+
+      if (allUniqueSeriesNames.length > 0) {
+        const newColorSet = colorSet(allUniqueSeriesNames);
+        setInternalColorSet(newColorSet);
+      }
+    } else {
+      setInternalColorSet(colorSet);
+    }
+  }, [registeredColorSets, colorSet]);
+
+  const allResources = useMemo(
+    () => Object.keys(internalColorSet),
+    [internalColorSet],
+  );
   const [selectedResources, setSelectedResources] =
     useState<string[]>(allResources);
 
+  useEffect(() => {
+    setSelectedResources(allResources);
+  }, [allResources]);
+
+  const register = useCallback((chartId: string, seriesNames: string[]) => {
+    setRegisteredColorSets((prev) => ({
+      ...prev,
+      [chartId]: seriesNames,
+    }));
+  }, []);
+
   const addSelectedResource = useCallback((resource: string) => {
     setSelectedResources((prev) =>
       prev.includes(resource) ? prev : [...prev, resource],
@@ -46,8 +101,8 @@ export const ChartLegendWrapper = ({
   }, []);
 
   const selectAllResources = useCallback(() => {
-    setSelectedResources(allResources);
-  }, [allResources]);
+    setSelectedResources(Object.keys(internalColorSet));
+  }, [internalColorSet]);
 
   const selectOnlyResource = useCallback((resource: string) => {
     setSelectedResources([resource]);
@@ -65,7 +120,7 @@ export const ChartLegendWrapper = ({
 
   const getColor = useCallback(
     (resource: string) => {
-      const color = colorSet[resource];
+      const color = internalColorSet[resource];
       if (!color) {
         console.warn(
           `ChartLegendWrapper: No color defined for resource "${resource}"`,
@@ -74,12 +129,12 @@ export const ChartLegendWrapper = ({
       }
       return color;
     },
-    [colorSet],
+    [internalColorSet],
   );
 
   const listResources = useCallback(() => {
-    return Object.keys(colorSet);
-  }, [colorSet]);
+    return Object.keys(internalColorSet);
+  }, [internalColorSet]);
 
   const chartLegendState = useMemo(
     () => ({
@@ -92,6 +147,7 @@ export const ChartLegendWrapper = ({
       getColor,
       listResources,
       isOnlyOneSelected,
+      register,
     }),
     [
       selectedResources,
@@ -103,6 +159,7 @@ export const ChartLegendWrapper = ({
       getColor,
       listResources,
       isOnlyOneSelected,
+      register,
     ],
   );
 
@@ -113,7 +170,6 @@ export const ChartLegendWrapper = ({
   );
 };
 
-// Hook for accessing legend state in custom components
 export const useChartLegend = () => {
   const context = useContext(ChartLegendContext);
   if (!context) {

package/src/lib/components/icon/Icon.component.tsx

@@ -140,6 +140,8 @@ export const iconTable = {
   Stop: 'fas faStop',
   Play: 'fas faPlay',
   Mail: 'fas faEnvelope',
+  ThumbsUp: 'fas faThumbsUp',
+  ThumbsDown: 'fas faThumbsDown',
 };
 
 type IconProps = {

package/src/lib/components/linetemporalchart/ChartUtil.ts

@@ -148,8 +148,24 @@ export function addMissingDataPoint(
 
   const newValues: [number, number | string | null][] = [];
 
+  // add missing data points for the starting time
+  for (
+    let i = startingTimeStamp;
+    i < orginalValues[0][0];
+    i += sampleInterval
+  ) {
+    newValues.push([i, NAN_STRING]);
+  }
+
   // Process all but the last element
   for (let i = 0; i < orginalValues.length - 1; i++) {
+    if (
+      orginalValues[i][0] < startingTimeStamp ||
+      orginalValues[i][0] > startingTimeStamp + sampleDuration
+    ) {
+      continue;
+    }
+
     // Always add the current data point
     newValues.push(orginalValues[i]);
 
@@ -170,8 +186,18 @@ export function addMissingDataPoint(
   // Add the last element
   newValues.push(orginalValues[orginalValues.length - 1]);
 
+  // add missing data points for the ending time
+  for (
+    let i = orginalValues[orginalValues.length - 1][0] + sampleInterval;
+    i < startingTimeStamp + sampleDuration;
+    i += sampleInterval
+  ) {
+    newValues.push([i, NAN_STRING]);
+  }
+
   return newValues;
 }
+
 // get the value for the based value
 // TODO: We need to handle the negative value in the future
 export const getRelativeValue = (value: number, base: number) => {