Add sorting function and typing

Author: JeanMarcMilletScality

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

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import Barchart, { BarchartProps } from './Barchart.component';
+import Barchart, { BarchartProps, Point } from './Barchart.component';
 import { getWrapper } from '../../testUtils';
 
 const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
@@ -263,4 +263,42 @@ describe('Barchart', () => {
     expect(screen.getByText('category2')).toBeInTheDocument();
     expect(screen.getByText('category3')).toBeInTheDocument();
   });
+
+  it('should sort categories using defaultSort function', () => {
+    const testBars: BarchartProps['bars'] = [
+      {
+        label: 'Success',
+        data: [
+          ['category3', 30],
+          ['category1', 10],
+          ['category2', 20],
+        ],
+        color: 'green',
+      },
+    ];
+
+    // Sort by total value in descending order
+    const sortByValueDesc = (pointA: Point, pointB: Point) => {
+      const totalA = pointA.values.reduce((sum, v) => sum + v.value, 0);
+      const totalB = pointB.values.reduce((sum, v) => sum + v.value, 0);
+      return totalB - totalA > 0 ? 1 : totalB - totalA < 0 ? -1 : 0;
+    };
+
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <Barchart
+          type="category"
+          bars={testBars}
+          defaultSort={sortByValueDesc}
+        />
+      </Wrapper>,
+    );
+
+    // Categories should be rendered in descending order by value
+    const categories = screen.getAllByText(/category[123]/);
+    expect(categories[0]).toHaveTextContent('category3'); // 30 (highest)
+    expect(categories[1]).toHaveTextContent('category2'); // 20 (middle)
+    expect(categories[2]).toHaveTextContent('category1'); // 10 (lowest)
+  });
 });

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

@@ -25,24 +25,28 @@ export type TimeType = {
     interval: number;
   };
 };
-type Point = {
+export type Point = {
   key: string | number;
   values: { label: string; value: number }[];
 };
 
-export type BarchartProps = {
+export type BarchartProps<
+  T extends readonly {
+    readonly label: string;
+    readonly data: readonly (readonly [number | string, number | string])[];
+    readonly color: string;
+  }[],
+> = {
   type: 'category' | TimeType;
-  bars: {
-    label: string;
-    data: [number | string, number | string][];
-    color: string;
-  }[];
+  bars: T;
   tooltip?: (currentPoint: {
     key: string | number;
     values: { label: string; value: number; isHovered: boolean }[];
   }) => React.ReactNode;
-  defaultSort?: (pointA: Point, pointB: Point) => 1 | -1 | 0;
-
+  defaultSort?: (
+    pointA: Record<T[number]['label'], number> & { category: string | number },
+    pointB: Record<T[number]['label'], number> & { category: string | number },
+  ) => 1 | -1 | 0;
   unitRange?: UnitRange;
   helpTooltip?: string;
   stacked?: boolean;
@@ -108,15 +112,31 @@ const StyledResponsiveContainer = styled(ResponsiveContainer)`
   }
 `;
 
-const Barchart = (props: BarchartProps) => {
+const Barchart = <
+  T extends readonly {
+    readonly label: string;
+    readonly data: readonly (readonly [number | string, number | string])[];
+    readonly color: string;
+  }[],
+>(
+  props: BarchartProps<T>,
+) => {
   const theme = useTheme();
 
-  const { height = 200, bars, type = 'category', unitRange, stacked } = props;
+  const {
+    height = 200,
+    bars,
+    type = 'category',
+    unitRange,
+    stacked,
+    defaultSort,
+  } = props;
 
   const { data, rechartsBars } = formatPrometheusDataToChartData(
     bars,
     type,
     stacked,
+    defaultSort,
   );
 
   const maxValue = getMaxBarValue(data, stacked);

src/lib/components/barchartv2/utils.ts

@@ -1,4 +1,5 @@
-import { BarchartProps } from './Barchart.component';
+import { BarchartProps, Point } from './Barchart.component';
+
 import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
 
 export const getRoundReferenceValue = (value: number): number => {
@@ -135,21 +136,23 @@ const findRangeForTimestamp = (
  * @param type - The chart type (category or time)
  * @returns Recharts data format
  */
-export const formatPrometheusDataToChartData = (
-  bars: BarchartProps['bars'],
-  type: BarchartProps['type'],
+export const formatPrometheusDataToChartData = <
+  T extends readonly {
+    readonly label: string;
+    readonly data: readonly (readonly [number | string, number | string])[];
+    readonly color: string;
+  }[],
+>(
+  bars: T,
+  type: BarchartProps<T>['type'],
   stacked?: boolean,
+  defaultSort?: BarchartProps<T>['defaultSort'],
 ): {
-  data: {
-    [key: string]: string | number;
-  }[];
-  rechartsBars: {
-    dataKey: string;
-    fill: string;
-  }[];
+  data: { [key: string]: string | number }[];
+  rechartsBars: { dataKey: string; fill: string }[];
 } => {
   let rechartsBars = bars.map((bar) => ({
-    dataKey: bar.label.toLowerCase().replace(/\s+/g, ''),
+    dataKey: bar.label,
     fill: bar.color,
   }));
 
@@ -185,7 +188,7 @@ export const formatPrometheusDataToChartData = (
 
     // Process actual data from bars
     bars.forEach((bar) => {
-      const dataKey = bar.label.toLowerCase().replace(/\s+/g, '');
+      const dataKey = bar.label;
 
       bar.data.forEach(([timestamp, value]) => {
         // Find which range this timestamp belongs to
@@ -202,7 +205,7 @@ export const formatPrometheusDataToChartData = (
   } else {
     // Handle category data
     bars.forEach((bar) => {
-      const dataKey = bar.label.toLowerCase().replace(/\s+/g, '');
+      const dataKey = bar.label;
 
       bar.data.forEach(([key, value]) => {
         const categoryKey = String(key);
@@ -226,7 +229,41 @@ export const formatPrometheusDataToChartData = (
   }
 
   // Convert map to array (order is preserved for time ranges)
-  const data = Array.from(categoryMap.values());
+  let data = Array.from(categoryMap.values());
+
+  // Apply custom sorting for category data only
+  if (type === 'category' && defaultSort) {
+    // Convert data to the new record format for sorting
+    const points = data.map((item) => {
+      const point: Record<T[number]['label'], number> & {
+        category: string | number;
+      } = {
+        category: item.category,
+      } as any;
+
+      rechartsBars.forEach((bar) => {
+        (point as any)[bar.dataKey] = Number(item[bar.dataKey]) || 0;
+      });
+
+      return point;
+    });
+
+    // Sort using the provided function
+    points.sort((pointA, pointB) => {
+      return defaultSort(pointA, pointB);
+    });
+
+    // Convert back to data format
+    data = points.map((point) => {
+      const dataItem: { [key: string]: string | number } = {
+        category: point.category,
+      };
+      rechartsBars.forEach((bar) => {
+        dataItem[bar.dataKey] = (point as any)[bar.dataKey];
+      });
+      return dataItem;
+    });
+  }
 
   // Sort bars by their average values in descending order when stacked
   // This ensures the largest bars appear at the bottom of the stack