feat: first click on paginate timeline should move backward from curr…

…ent time duration
awslabs · Dec 18, 2023 · 5f9aa42 · 5f9aa42
1 parent 4d3b6d5
commit 5f9aa42
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/packages/react-components/src/components/time-sync/timeSelection.tsx b/packages/react-components/src/components/time-sync/timeSelection.tsx
@@ -83,7 +83,7 @@ export const TimeSelection = ({ isPaginationEnabled }: { isPaginationEnabled?: b
     }
     if (value.type === 'relative') {
       const newStart = new Date();
-      const newEnd = getViewportDateRelativeToAbsolute(value, true);
+      const newEnd = getViewportDateRelativeToAbsolute(value, false, true);
       setViewport(
         dateRangeToViewport({ startDate: newStart.toISOString(), endDate: newEnd.toISOString(), type: 'absolute' }),
         'date-picker'
@@ -102,8 +102,8 @@ export const TimeSelection = ({ isPaginationEnabled }: { isPaginationEnabled?: b
         'date-picker'
       );
     } else if (value.type === 'relative') {
-      const newEnd = new Date();
-      const newStart = getViewportDateRelativeToAbsolute(value);
+      const newEnd = getViewportDateRelativeToAbsolute(value);
+      const newStart = getViewportDateRelativeToAbsolute(value, true);
       setViewport(
         dateRangeToViewport({ startDate: newStart.toISOString(), endDate: newEnd.toISOString(), type: 'absolute' }),
         'date-picker'

diff --git a/packages/react-components/src/components/time-sync/viewportAdapter.spec.ts b/packages/react-components/src/components/time-sync/viewportAdapter.spec.ts
@@ -201,3 +201,83 @@ describe('getViewportStartOnBackwardRelative', () => {
     jest.useRealTimers();
   });
 });
+
+describe('getViewportStartOnBackwardRelative on first backward click', () => {
+  jest.useFakeTimers().setSystemTime(new Date(2023, 11, 24).getTime());
+
+  it('can get the new start date from current range when going back from a relative duration', () => {
+    let currentDate = new Date();
+    let newDate = getViewportDateRelativeToAbsolute(
+      {
+        amount: 5,
+        unit: 'minute',
+        type: 'relative',
+      },
+      true
+    );
+
+    const result = currentDate.getTime() - newDate.getTime();
+    expect(result).toEqual(600000);
+
+    currentDate = new Date();
+    newDate = getViewportDateRelativeToAbsolute(
+      {
+        amount: 1,
+        unit: 'hour',
+        type: 'relative',
+      },
+      true
+    );
+
+    expect(currentDate.getTime() - newDate.getTime()).toEqual(7200000);
+
+    currentDate = new Date();
+    newDate = getViewportDateRelativeToAbsolute(
+      {
+        amount: 30,
+        unit: 'second',
+        type: 'relative',
+      },
+      true
+    );
+    expect(currentDate.getTime() - newDate.getTime()).toEqual(60000);
+
+    currentDate = new Date();
+    newDate = getViewportDateRelativeToAbsolute(
+      {
+        amount: 1,
+        unit: 'day',
+        type: 'relative',
+      },
+      true
+    );
+    expect(currentDate.getTime() - newDate.getTime()).toEqual(172800000);
+
+    currentDate = new Date();
+    newDate = getViewportDateRelativeToAbsolute(
+      {
+        amount: 1,
+        unit: 'week',
+        type: 'relative',
+      },
+      true
+    );
+    expect(currentDate.getTime() - newDate.getTime()).toEqual(1209600000);
+
+    currentDate = new Date();
+    newDate = getViewportDateRelativeToAbsolute(
+      {
+        amount: 1,
+        unit: 'month',
+        type: 'relative',
+      },
+      true
+    );
+
+    const previousMonthDays = new Date(newDate.getFullYear(), newDate.getMonth() - 1, 0).getDate(); //calculating no of days for previous month of current range
+    const timeGap = previousMonthDays === 30 ? 5184000000 : 5270400000;
+    expect(currentDate.getTime() - newDate.getTime()).toEqual(timeGap);
+
+    jest.useRealTimers();
+  });
+});
diff --git a/packages/react-components/src/components/time-sync/viewportAdapter.tsx b/packages/react-components/src/components/time-sync/viewportAdapter.tsx
@@ -122,30 +122,32 @@ export const viewportToDateRange = (viewport?: Viewport): DateRangePickerProps.V
 
 export const getViewportDateRelativeToAbsolute = (
   value: DateRangePickerProps.RelativeValue,
+  relativeBackwardClick?: boolean,
   forward?: boolean
 ): Date => {
   const newEnd = new Date();
+  const durationRange = relativeBackwardClick ? -2 : -1;
   switch (value.unit) {
     case 'second':
-      newEnd.setSeconds(newEnd.getSeconds() + value.amount * (forward ? 1 : -1));
+      newEnd.setSeconds(newEnd.getSeconds() + value.amount * (forward ? 1 : durationRange));
       break;
     case 'minute':
-      newEnd.setMinutes(newEnd.getMinutes() + value.amount * (forward ? 1 : -1));
+      newEnd.setMinutes(newEnd.getMinutes() + value.amount * (forward ? 1 : durationRange));
       break;
     case 'hour':
-      newEnd.setHours(newEnd.getHours() + value.amount * (forward ? 1 : -1));
+      newEnd.setHours(newEnd.getHours() + value.amount * (forward ? 1 : durationRange));
       break;
     case 'day':
-      newEnd.setDate(newEnd.getDate() + value.amount * (forward ? 1 : -1));
+      newEnd.setDate(newEnd.getDate() + value.amount * (forward ? 1 : durationRange));
       break;
     case 'week':
-      newEnd.setDate(newEnd.getDate() + 7 * (value.amount * (forward ? 1 : -1)));
+      newEnd.setDate(newEnd.getDate() + 7 * (value.amount * (forward ? 1 : durationRange)));
       break;
     case 'month':
-      newEnd.setMonth(newEnd.getMonth() + value.amount * (forward ? 1 : -1));
+      newEnd.setMonth(newEnd.getMonth() + value.amount * (forward ? 1 : durationRange));
       break;
     case 'year':
-      newEnd.setFullYear(newEnd.getFullYear() + value.amount * (forward ? 1 : -1));
+      newEnd.setFullYear(newEnd.getFullYear() + value.amount * (forward ? 1 : durationRange));
       break;
   }
   return newEnd;