fix: 🐛 fixed the sorting issue on duration column (#89)

* fix: 🐛 fixed the sorting issue on duration column * fix: 🐛 fixed area chart tooltip label
WasiqB · Nov 20, 2024 · 2313932 · 2313932
1 parent adb1960
commit 2313932
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/packages/ui/src/charts/area-chart.tsx b/packages/ui/src/charts/area-chart.tsx
@@ -67,7 +67,7 @@ export const AreaChartComponent = ({
               content={<ChartTooltipContent indicator='dot' />}
             />
             <Area
-              dataKey='value'
+              dataKey='duration'
               type='linear'
               fill='var(--color-property)'
               fillOpacity={0.4}

diff --git a/packages/ui/src/data-table/table/columns.tsx b/packages/ui/src/data-table/table/columns.tsx
@@ -1,6 +1,7 @@
 import { GearIcon } from '@radix-ui/react-icons';
 import { ColumnDef } from '@tanstack/react-table';
 import { cn } from '@ultra-reporter/utils/cn';
+import { toDuration } from '@ultra-reporter/utils/formatting';
 import { TestException, TestLog } from '@ultra-reporter/utils/types';
 import {
   CircleAlert,
@@ -112,6 +113,11 @@ export const columns: ColumnDef<TestResultData>[] = [
       const duration: string = row.getValue('duration_ms');
       return <CellData value={duration} align='right' />;
     },
+    sortingFn: (rowA, rowB, columnId) => {
+      const a = toDuration(rowA.getValue(columnId) as string);
+      const b = toDuration(rowB.getValue(columnId) as string);
+      return a < b ? -1 : a > b ? 1 : 0;
+    },
   },
   {
     accessorKey: 'is_config',

diff --git a/packages/ui/src/data-table/table/data.ts b/packages/ui/src/data-table/table/data.ts
@@ -133,7 +133,7 @@ export const getFormattedData = (data: TestResultData[]): FormattedData => {
   const areaChartData: AreaChartData[] = data.map((r) => {
     return {
       property: `${r.class_name} / ${r.method_name}`,
-      value: toDuration(r.duration_ms),
+      duration: toDuration(r.duration_ms),
     };
   });
 

diff --git a/packages/utils/src/functions/formatting.ts b/packages/utils/src/functions/formatting.ts
@@ -5,23 +5,24 @@ export const toDuration = (duration: string): number => {
   const splitTime = duration.split(' ');
   const time = parseFloat(splitTime[0] || '0');
   const type = splitTime[1];
-  const SECOND = 1000;
+  const SECOND = 1;
   const MINUTE = 60 * SECOND;
   const HOUR = 60 * MINUTE;
   let result = time;
 
   switch (type) {
     case 'm':
-      result = (result * MINUTE) / SECOND;
+      result *= MINUTE;
       break;
     case 'h':
-      result = (result * HOUR) / SECOND;
+      result *= HOUR;
       break;
     case 'ms':
-      result /= SECOND;
+      result = result / 1000;
       break;
     case 's':
     default:
+      result *= SECOND;
       break;
   }
 

diff --git a/packages/utils/src/types/types.ts b/packages/utils/src/types/types.ts
@@ -83,7 +83,7 @@ type ChartData = {
 
 type AreaChartData = {
   property: string;
-  value: number;
+  duration: number;
 };
 
 type FormattedData = {