From cc3e49d7c03f5873adc1a834344d2d74f33f4f41 Mon Sep 17 00:00:00 2001
From: WasiqB <wasbhamla2005@gmail.com>
Date: Wed, 20 Nov 2024 18:56:00 +0300
Subject: [PATCH 1/2] fix: :bug: fixed the sorting issue on duration column

---
 packages/ui/src/data-table/table/columns.tsx | 6 ++++++
 packages/utils/src/functions/formatting.ts   | 9 +++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/data-table/table/columns.tsx b/packages/ui/src/data-table/table/columns.tsx
index 4579860..82e18bd 100644
--- 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/utils/src/functions/formatting.ts b/packages/utils/src/functions/formatting.ts
index 51a5d40..5ae081d 100644
--- 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;
   }
 

From da6155ec58e8b9fedd04a4bb110f2584cda66ffd Mon Sep 17 00:00:00 2001
From: WasiqB <wasbhamla2005@gmail.com>
Date: Wed, 20 Nov 2024 21:38:21 +0300
Subject: [PATCH 2/2] fix: :bug: fixed area chart tooltip label

---
 packages/ui/src/charts/area-chart.tsx    | 2 +-
 packages/ui/src/data-table/table/data.ts | 2 +-
 packages/utils/src/types/types.ts        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/charts/area-chart.tsx b/packages/ui/src/charts/area-chart.tsx
index e116bce..33f7bc4 100644
--- 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/data.ts b/packages/ui/src/data-table/table/data.ts
index f6dc60b..cb6f462 100644
--- 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/types/types.ts b/packages/utils/src/types/types.ts
index 555a2dc..5850bc2 100644
--- 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 = {