@scality/core-ui 0.163.0 → 0.165.0

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

@@ -18,13 +18,18 @@ import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { renderTooltipContent, UnitRange, useChartData } from './utils';
+import {
+  formatDate,
+  renderTooltipContent,
+  UnitRange,
+  useChartData,
+} from './utils';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
   BAR_SIZE: 12,
-  MIN_POINT_SIZE: 1,
+  MIN_POINT_SIZE: 3,
   DEFAULT_HEIGHT: 200,
   CHART_MARGIN: {
     left: 0,
@@ -70,17 +75,25 @@ export type BarchartSortFn<T extends BarchartBars> = (
 
 export type BarchartProps<T extends BarchartBars> = {
   type: 'category' | TimeType;
-  bars: T;
+  bars?: T;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
   unitRange?: UnitRange;
-  helpTooltip?: string;
+  helpTooltip?: React.ReactNode;
   stacked?: boolean;
+  /**
+   * Sort the bars by default or by legend order
+   * legend will sort the bars by the order of the colorSet property of the ChartLegendWrapper component
+   * default will sort the bars by average values in descending order (biggest values will be at bottom)
+   * @default 'default'
+   */
+  stackedBarSort?: 'default' | 'legend';
   title?: string;
   secondaryTitle?: string;
   rightTitle?: React.ReactNode;
   height?: number;
   isLoading?: boolean;
+  isError?: boolean;
 };
 
 interface CustomTickProps {
@@ -91,6 +104,7 @@ interface CustomTickProps {
   };
   visibleTicksCount: number;
   width: number;
+  type: TimeType;
 }
 
 /* ---------------------------------- COMPONENTS ---------------------------------- */
@@ -101,6 +115,7 @@ const CustomTick = ({
   payload,
   visibleTicksCount,
   width,
+  type,
 }: CustomTickProps) => {
   const theme = useTheme();
   const tickWidth =
@@ -118,7 +133,9 @@ const CustomTick = ({
       <ConstrainedText
         text={
           <Text variant="Smaller" color="textSecondary">
-            {String(payload.value)}
+            {type.type === 'time'
+              ? formatDate(new Date(payload.value), type.timeRange.interval)
+              : String(payload.value)}
           </Text>
         }
         centered
@@ -149,16 +166,14 @@ const ChartHeader = ({
 }: {
   title?: string;
   secondaryTitle?: string;
-  helpTooltip?: string;
+  helpTooltip?: React.ReactNode;
   rightTitle?: React.ReactNode;
 }) => {
   return (
     <Wrap>
       <Stack gap="r4">
         <Text variant="ChartTitle">{title}</Text>
-        {helpTooltip && (
-          <IconHelp tooltipMessage={helpTooltip} title={helpTooltip} />
-        )}
+        {helpTooltip && <IconHelp tooltipMessage={helpTooltip} />}
 
         {secondaryTitle && (
           <Text
@@ -177,6 +192,21 @@ const ChartHeader = ({
   );
 };
 
+const Error = ({ height }: { height: number }) => {
+  return (
+    <Box
+      height={height}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+      }}
+    >
+      <Text>Chart data is not available</Text>
+    </Box>
+  );
+};
+
 const Loading = ({ height }: { height: number }) => {
   return (
     <Box
@@ -205,6 +235,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     type = 'category',
     unitRange,
     stacked,
+    stackedBarSort = 'default',
     defaultSort,
     tooltip,
     title,
@@ -212,10 +243,11 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     helpTooltip,
     rightTitle,
     isLoading,
+    isError,
   } = props;
 
   // Create colorSet from ChartLegendWrapper
-  const colorSet = bars.reduce(
+  const colorSet = bars?.reduce(
     (acc, bar) => {
       const color = getColor(bar.label);
       if (color) {
@@ -227,7 +259,15 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   );
 
   const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } =
-    useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
+    useChartData(
+      bars || [],
+      type,
+      colorSet || {},
+      stacked,
+      defaultSort,
+      unitRange,
+      stackedBarSort,
+    );
 
   return (
     <Stack direction="vertical" gap="r8">
@@ -237,7 +277,9 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
         helpTooltip={helpTooltip}
         rightTitle={rightTitle}
       />
-      {isLoading ? (
+      {isError || (!bars && !isLoading) ? (
+        <Error height={height} />
+      ) : isLoading ? (
         <Loading height={height} />
       ) : (
         <StyledResponsiveContainer width="100%" height={height}>
@@ -260,7 +302,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
                   key={dataKey}
                   dataKey={dataKey}
                   fill={chartColors[fill] || fill}
-                  minPointSize={CHART_CONSTANTS.MIN_POINT_SIZE}
+                  minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
                   stackId={stackId}
                   onMouseOver={() => setHoveredValue(dataKey)}
                   onMouseLeave={() => setHoveredValue(undefined)}
@@ -295,7 +337,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             />
             <XAxis
               dataKey="category"
-              tick={(props) => <CustomTick {...props} />}
+              tick={(props) => <CustomTick {...props} type={type} />}
               type="category"
               interval={0}
               allowDataOverflow={true}

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,
+      },
     ]);
   });
 });
@@ -482,8 +505,8 @@ describe('applySortingToData', () => {
 
 describe('getRoundReferenceValue', () => {
   it('should return appropriate rounded values', () => {
-    expect(getRoundReferenceValue(1)).toBe(1);
-    expect(getRoundReferenceValue(2)).toBe(2.5);
+    expect(getRoundReferenceValue(1)).toBe(5);
+    expect(getRoundReferenceValue(2)).toBe(5);
     expect(getRoundReferenceValue(3)).toBe(5);
     expect(getRoundReferenceValue(7)).toBe(10);
     expect(getRoundReferenceValue(15)).toBe(25);
@@ -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
@@ -717,6 +744,14 @@ describe('sortStackedBars', () => {
       { dataKey: 'bar1', fill: 'blue' },
     ]);
   });
+  it('should sort bars by legend order when stacked is true and legendOrder is provided', () => {
+    const result = sortStackedBars(bars, data, true, ['bar3', 'bar2', 'bar1']);
+    expect(result).toEqual([
+      { dataKey: 'bar3', fill: 'green' },
+      { dataKey: 'bar2', fill: 'red' },
+      { dataKey: 'bar1', fill: 'blue' },
+    ]);
+  });
   it('should not sort bars when stacked is false', () => {
     const result = sortStackedBars(bars, data, false);
     expect(result).toEqual([

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

@@ -18,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 = (
@@ -46,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);
 };
 
 /**
@@ -64,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()) {
@@ -89,7 +90,7 @@ const generateTimeRanges = (
  * @param interval - Interval in milliseconds
  * @returns Formatted string
  */
-const formatDate = (date: Date, interval: number): string => {
+export const formatDate = (date: Date, interval: number): string => {
   if (interval > 24 * 60 * 60 * 1000) {
     return (
       DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
@@ -155,7 +156,8 @@ export const transformTimeData = <T extends BarchartBars>(
 
   // Initialize all ranges with zeros
   timeRanges.forEach((range) => {
-    const categoryDisplay = formatDate(range.start, type.timeRange.interval);
+    // const categoryDisplay = formatDate(range.start, type.timeRange.interval);
+    const categoryDisplay = range.start.getTime();
     const initialData: { [key: string]: string | number } = {
       category: categoryDisplay,
     };
@@ -288,6 +290,7 @@ export const formatPrometheusDataToRechartsDataAndBars = <
   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 }[];
@@ -307,7 +310,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,
@@ -330,7 +338,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) => {
@@ -397,8 +405,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;
@@ -409,10 +417,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)
@@ -502,14 +533,20 @@ export const useChartData = <T extends BarchartBars>(
   stacked?: boolean,
   defaultSort?: BarchartProps<T>['defaultSort'],
   unitRange?: UnitRange,
+  stackedBarSort?: 'default' | 'legend',
 ) => {
-  const { selectedResources } = useChartLegend();
+  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,
   );
 
   // Filter both data and bars to only include selected resources for accurate maxValue calculation

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

@@ -2,7 +2,7 @@ import {
   HealthSelector,
   optionsDefaultConfiguration,
 } from './HealthSelector.component';
-import React from 'react';
+import { act } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { getWrapper } from '../../testUtils';
@@ -18,11 +18,11 @@ describe('HealthSelector', () => {
     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();
   });

package/src/lib/components/infomessage/InfoMessageUtils.test.tsx

@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import React from 'react';
 import { coreUIAvailableThemes } from '../../style/theme';
 import { CoreUiThemeProvider } from '../coreuithemeprovider/CoreUiThemeProvider';
 import { useComputeBackgroundColor } from './InfoMessageUtils';