fix(viewports): format relative viewports properly

awslabs · Oct 4, 2024 · 2a9b263 · 2a9b263
1 parent 92c0bfc
commit 2a9b263
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 12 deletions.
diff --git a/packages/core-util/src/sdks/viewportAdapters.spec.ts b/packages/core-util/src/sdks/viewportAdapters.spec.ts
@@ -8,39 +8,39 @@ import {
 describe('dateRangeToViewport', () => {
   it('can convert a relative date range option to the correct viewport', () => {
     expect(dateRangeToViewport(relativeViewportOptions[0])).toEqual({
-      duration: '1 minute',
+      duration: '1m',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[1])).toEqual({
-      duration: '5 minute',
+      duration: '5m',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[2])).toEqual({
-      duration: '10 minute',
+      duration: '10m',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[3])).toEqual({
-      duration: '30 minute',
+      duration: '30m',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[4])).toEqual({
-      duration: '1 hour',
+      duration: '1h',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[5])).toEqual({
-      duration: '1 day',
+      duration: '24h',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[6])).toEqual({
-      duration: '7 day',
+      duration: '168h',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[7])).toEqual({
-      duration: '30 day',
+      duration: '720h',
     });
 
     expect(dateRangeToViewport(relativeViewportOptions[8])).toEqual({
-      duration: '90 day',
+      duration: '2160h',
     });
   });
 
@@ -51,15 +51,15 @@ describe('dateRangeToViewport', () => {
         unit: 'minute',
         type: 'relative',
       })
-    ).toEqual({ duration: '20 minute' });
+    ).toEqual({ duration: '20m' });
 
     expect(
       dateRangeToViewport({
         amount: 3,
         unit: 'month',
         type: 'relative',
       })
-    ).toEqual({ duration: '3 month' });
+    ).toEqual({ duration: '2160h' });
   });
 
   it('can convert an absolute date range to the correct viewport', () => {

diff --git a/packages/core-util/src/sdks/viewportAdapters.ts b/packages/core-util/src/sdks/viewportAdapters.ts
@@ -38,17 +38,50 @@ const durationUnits = [
   'month',
   'year',
 ] as const;
+
 type DurationUnits = (typeof durationUnits)[number];
+const durationUnitToCharacter: {
+  [key in DurationUnits]: string;
+} = {
+  second: 's',
+  minute: 'm',
+  hour: 'h',
+  day: 'd',
+  week: 'w',
+  month: 'month',
+  year: 'y',
+};
 const parseDuration = (duration: string, unit: DurationUnits) => ({
   amount: parse(duration, unit),
   unit,
 });
 
+const convertDurationViewportToValidViewport = (
+  value: DateRangePickerProps.RelativeValue
+) => {
+  const unitCharacter = durationUnitToCharacter[value.unit];
+
+  switch (value.unit) {
+    case 'second':
+    case 'minute':
+    case 'hour':
+      return { duration: `${value.amount}${unitCharacter}` };
+    case 'day':
+      return { duration: `${value.amount * 24}h` };
+    case 'week':
+      return { duration: `${value.amount * 24 * 7}h` };
+    case 'month':
+      return { duration: `${value.amount * 24 * 30}h` };
+    case 'year':
+      return { duration: `${value.amount * 24 * 30 * 12}h` };
+  }
+};
+
 export const dateRangeToViewport = (
   value: DateRangePickerProps.Value
 ): Viewport => {
   if (value.type === 'relative')
-    return { duration: `${value.amount} ${value.unit}` };
+    return convertDurationViewportToValidViewport(value);
   return {
     start: new Date(value.startDate),
     end: new Date(value.endDate),
@@ -100,6 +133,24 @@ export const viewportToDateRange = (
           ({ amount, unit } = parseDuration(duration, 'minute'));
         } else if (d.match(hours)) {
           ({ amount, unit } = parseDuration(duration, 'hour'));
+          if (amount) {
+            if (!(amount % 24)) {
+              amount = amount / 24;
+              unit = 'day';
+            }
+            if (!(amount % (24 * 7))) {
+              amount = amount / (24 * 7);
+              unit = 'week';
+            }
+            if (!(amount % (24 * 30))) {
+              amount = amount / (24 * 7 * 4);
+              unit = 'month';
+            }
+            if (!(amount % (24 * 30 * 12))) {
+              amount = amount / (24 * 7 * 4 * 12);
+              unit = 'year';
+            }
+          }
         } else if (d.match(days)) {
           ({ amount, unit } = parseDuration(duration, 'day'));
         } else if (d.match(weeks)) {