@scality/core-ui 0.162.0 → 0.164.0

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
@@ -17,10 +18,14 @@ export const getRoundReferenceValue = (value: number): number => {
   const normalized = value / magnitude;
 
   // Round to nice numbers based on normalized value
-  if (normalized <= 1) return magnitude;
-  if (normalized <= 2.5) return 2.5 * magnitude;
-  if (normalized <= 5) return 5 * magnitude;
-  return 10 * magnitude;
+  let result: number;
+  if (normalized <= 1) result = magnitude;
+  else if (normalized <= 2.5) result = 2.5 * magnitude;
+  else if (normalized <= 5) result = 5 * magnitude;
+  else result = 10 * magnitude;
+
+  // Ensure minimum value of 5 for better chart appearance
+  return Math.max(result, 5);
 };
 
 export const getMaxBarValue = (
@@ -45,9 +50,9 @@ export const getMaxBarValue = (
       .filter((key) => key !== 'category')
       .map((key) => Number(item[key]));
     // Get the max value among the values in the object (corresponding to one bar)
-    return Math.max(...numberValues);
+    return Math.max(...numberValues, 0); // Ensure we don't get -Infinity
   });
-  return Math.max(...values);
+  return Math.max(...values, 0);
 };
 
 /**
@@ -63,9 +68,6 @@ const generateTimeRanges = (
   interval: number,
 ): { start: Date; end: Date }[] => {
   const ranges: { start: Date; end: Date }[] = [];
-  if (!startDate || !endDate || !interval) {
-    return ranges;
-  }
 
   let currentDate = new Date(startDate.getTime());
   while (currentDate.getTime() <= endDate.getTime()) {
@@ -248,7 +250,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,9 +286,10 @@ 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'],
+  legendOrder?: string[],
 ): {
   data: { [key: string]: string | number }[];
   rechartsBars: { dataKey: string; fill: string; stackId?: string }[];
@@ -306,7 +309,12 @@ export const formatPrometheusDataToRechartsDataAndBars = <
     data = applySortingToData(data, barDataKeys, defaultSort);
   }
 
-  const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked);
+  const sortedRechartsBars = sortStackedBars(
+    rechartsBars,
+    data,
+    stacked,
+    legendOrder,
+  );
 
   return {
     rechartsBars: sortedRechartsBars,
@@ -329,7 +337,7 @@ export const computeUnitLabelAndRoundReferenceValue = (
     return { unitLabel: '', roundReferenceValue, rechartsData: data };
   }
 
-  const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
+  const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
   const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
   const roundReferenceValue = getRoundReferenceValue(topValue);
   const rechartsData = data.map((dataPoint) => {
@@ -396,8 +404,8 @@ export function getUnitLabel(
   };
 }
 
-// Sort stacked bars by their average values in descending order
-// This ensures the largest bars appear at the bottom of the stack
+// Sort stacked bars by their average values in descending order or by legend order
+// This ensures the largest bars appear at the bottom of the stack (default) or follow legend order
 export const sortStackedBars = (
   rechartsBars: {
     dataKey: string;
@@ -408,10 +416,33 @@ export const sortStackedBars = (
     [key: string]: string | number;
   }[],
   stacked?: boolean,
+  legendOrder?: string[],
 ) => {
   if (!stacked) {
     return rechartsBars;
   }
+
+  // If legend order is provided, sort by legend order
+  if (legendOrder && legendOrder.length > 0) {
+    return [...rechartsBars].sort((a, b) => {
+      const indexA = legendOrder.indexOf(a.dataKey);
+      const indexB = legendOrder.indexOf(b.dataKey);
+
+      // If both items are in legend order, sort by their position
+      if (indexA !== -1 && indexB !== -1) {
+        return indexA - indexB;
+      }
+
+      // If only one item is in legend order, prioritize it
+      if (indexA !== -1) return -1;
+      if (indexB !== -1) return 1;
+
+      // If neither is in legend order, maintain original order
+      return 0;
+    });
+  }
+
+  // Default behavior: sort by average values
   const barAverages = rechartsBars.map((bar) => {
     const values = data
       .map((item) => Number(item[bar.dataKey]) || 0)
@@ -456,29 +487,82 @@ 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,
+  stackedBarSort?: 'default' | 'legend',
 ) => {
+  const { selectedResources, listResources } = useChartLegend();
+
+  // Get legend order when stackedBarSort is 'legend'
+  const legendOrder = stackedBarSort === 'legend' ? listResources() : undefined;
+
   const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(
     bars,
     type,
     colorSet,
     stacked,
     defaultSort,
+    legendOrder,
   );
 
-  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>
+  );
+};

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

@@ -0,0 +1,85 @@
+import { createContext, useContext, useState, ReactNode, useMemo, useCallback } from 'react';
+import { ChartColors } from '../../style/theme';
+
+export type ChartLegendState = {
+  selectedResources: string[];
+  addSelectedResource: (resource: string) => void;
+  removeSelectedResource: (resource: string) => void;
+  isSelected: (resource: string) => boolean;
+  getColor: (resource: string) => string | undefined;
+  listResources: () => string[];
+};
+
+const ChartLegendContext = createContext<ChartLegendState | null>(null);
+
+export type ChartLegendWrapperProps = {
+  children: ReactNode;
+  colorSet: Record<string, ChartColors | string>;
+};
+
+export const ChartLegendWrapper = ({
+  children,
+  colorSet,
+}: ChartLegendWrapperProps) => {
+  const [selectedResources, setSelectedResources] = useState<string[]>([]);
+
+  const addSelectedResource = useCallback((resource: string) => {
+    setSelectedResources((prev) =>
+      prev.includes(resource) ? prev : [...prev, resource],
+    );
+  }, []);
+
+  const removeSelectedResource = useCallback((resource: string) => {
+    setSelectedResources((prev) => prev.filter((r) => r !== resource));
+  }, []);
+
+  const isSelected = useCallback((resource: string) => {
+    return selectedResources.includes(resource);
+  }, [selectedResources]);
+
+  const getColor = useCallback((resource: string) => {
+    const color = colorSet[resource];
+    if (!color) {
+      console.warn(
+        `ChartLegendWrapper: No color defined for resource "${resource}"`,
+      );
+      return undefined;
+    }
+    return color;
+  }, [colorSet]);
+
+  const listResources = useCallback(() => {
+    return Object.keys(colorSet);
+  }, [colorSet]);
+
+  const chartLegendState = useMemo(() => ({
+    selectedResources,
+    addSelectedResource,
+    removeSelectedResource,
+    isSelected,
+    getColor,
+    listResources,
+  }), [
+    selectedResources,
+    addSelectedResource,
+    removeSelectedResource,
+    isSelected,
+    getColor,
+    listResources,
+  ]);
+
+  return (
+    <ChartLegendContext.Provider value={chartLegendState}>
+      {children}
+    </ChartLegendContext.Provider>
+  );
+};
+
+// Hook for accessing legend state in custom components
+export const useChartLegend = () => {
+  const context = useContext(ChartLegendContext);
+  if (!context) {
+    throw new Error('useChartLegend must be used within a ChartLegendWrapper');
+  }
+  return context;
+};

package/src/lib/components/date/FormattedDateTime.spec.tsx

@@ -214,4 +214,28 @@ describe('FormatttedDateTime', () => {
     //V
     expect(screen.getByText('2022-12-12 11:57:26')).toBeInTheDocument();
   });
+
+  it('should display the date in the expected format of the xaxis tick in the chart', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="day-month-abbreviated-hour-minute"
+        value={new Date('2022-10-06T18:33:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('6 Oct 18:33')).toBeInTheDocument();
+  });
+
+  it('should display the date in the expected format of date in the chart', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="day-month-abbreviated-hour-minute-second"
+        value={new Date('2022-10-06T18:33:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('6 Oct 18:33:00')).toBeInTheDocument();
+  });
 });

package/src/lib/components/date/FormattedDateTime.tsx

@@ -27,6 +27,26 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
   minute: '2-digit',
 });
 
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
+  'en-GB',
+  {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  },
+);
+
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
+  day: 'numeric',
+  month: 'short',
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -34,7 +54,9 @@ type FormattedDateTimeProps = {
     | 'date-time-second'
     | 'time'
     | 'time-second'
-    | 'relative';
+    | 'relative'
+    | 'day-month-abbreviated-hour-minute'
+    | 'day-month-abbreviated-hour-minute-second';
   value: Date;
 };
 
@@ -149,7 +171,19 @@ export const FormattedDateTime = ({
           few seconds ago
         </Tooltip>
       );
-    //TO FINISH
+    case 'day-month-abbreviated-hour-minute':
+      return (
+        <>{DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '')}</>
+      );
+    case 'day-month-abbreviated-hour-minute-second':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(
+            ',',
+            '',
+          )}
+        </>
+      );
     default:
       return <></>;
   }

package/src/lib/components/healthselectorv2/HealthSelector.component.test.tsx

@@ -2,27 +2,27 @@ import {
   HealthSelector,
   optionsDefaultConfiguration,
 } from './HealthSelector.component';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { getWrapper } from '../../testUtils';
 describe('HealthSelector', () => {
-  it('should display correctly without any props and select first option', () => {
+  it('should display correctly without any props and select first option', async () => {
     const { Wrapper } = getWrapper();
     const { getByText } = render(
       <Wrapper>
         <HealthSelector id="health" onChange={() => {}} />
       </Wrapper>,
     );
+    await waitFor(() => screen.findByRole('img', { hidden: true }));
     const input = screen.getByRole('textbox');
 
     // open the menu
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const healthyOption = getByText(/healthy/i);
     expect(healthyOption).toBeInTheDocument();
   });
-  it('should call the onChange function when it change', () => {
+  it('should call the onChange function when it change', async () => {
     const { Wrapper } = getWrapper();
     const onChange = jest.fn();
     const { getByText } = render(
@@ -31,12 +31,12 @@ describe('HealthSelector', () => {
       </Wrapper>,
     );
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const warningOption = getByText(/warning/i);
-    userEvent.click(warningOption);
+    await act(() => userEvent.click(warningOption));
     expect(onChange).toHaveBeenCalledWith('warning');
   });
-  it('should not display hidden options', () => {
+  it('should not display hidden options', async () => {
     const { Wrapper } = getWrapper();
     const { queryByText } = render(
       <Wrapper>
@@ -55,7 +55,7 @@ describe('HealthSelector', () => {
 
     // open the menu
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const healthyOption = queryByText(/healthy/i);
     expect(healthyOption).not.toBeInTheDocument();
   });