From 57041140cbf1af273edafa3bfca836e5ad5bfc49 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 12 Feb 2025 15:53:21 +0100
Subject: [PATCH] ui: fix custom comparison period generation

---
 .../components/WidgetDateRange/WidgetDateRange.tsx     | 10 +++-------
 .../shared/SelectDateRange/SelectDateRange.tsx         |  2 +-
 frontend/app/types/app/period.js                       |  4 ++--
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx b/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx
index 1ff285009..40f688f32 100644
--- a/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetDateRange/WidgetDateRange.tsx
@@ -53,12 +53,8 @@ function WidgetDateRange({
           onChangeComparison(newPeriod);
         }, 1)
       } else {
-        const day = 86400000;
-        const originalPeriodLength = Math.ceil(
-          (period.end - period.start) / day
-        );
-        const start = presetComparison[0];
-        const end = presetComparison[1] + originalPeriodLength * day;
+        const start = parseInt(presetComparison[0], 10);
+        const end = parseInt(presetComparison[1], 10);
 
         // @ts-ignore
         const compRange = new Period({
@@ -102,7 +98,7 @@ function WidgetDateRange({
               compPeriod={compPeriod}
               onChange={onChangePeriod}
               onChangeComparison={onChangeComparison}
-              right={true}
+              right={false}
               isAnt={true}
               useButtonStyle={true}
               comparison={true}
diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
index 51005dc3d..f838271b7 100644
--- a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
+++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
@@ -290,7 +290,7 @@ function AndDateRange({
           }}
         >
           <div
-            className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
+            className={cn('absolute top-0 mt-10 z-40', right ? 'right-0' : 'left-0')}
             style={{
               width: isUSLocale ? '542px' : '500px',
               fontSize: '14px',
diff --git a/frontend/app/types/app/period.js b/frontend/app/types/app/period.js
index 4c54dfd80..50119c27d 100644
--- a/frontend/app/types/app/period.js
+++ b/frontend/app/types/app/period.js
@@ -90,9 +90,9 @@ export default Record(
           if (!period.rangeName || period.rangeName === CUSTOM_RANGE) {
               const isLuxon = DateTime.isDateTime(period.start);
               let start = isLuxon
-                ? period.start : DateTime.fromMillis(period.start || 0, { zone: Settings.defaultZone });
+                ? period.start : DateTime.fromMillis(parseInt(period.start || 0, 10), { zone: Settings.defaultZone });
               let end = isLuxon
-                ? period.end : DateTime.fromMillis(period.end || 0, { zone: Settings.defaultZone });
+                ? period.end : DateTime.fromMillis(parseInt(period.end || 0, 10), { zone: Settings.defaultZone });
               if (period.substract) {
                   const delta = substractValues[period.substract]
                   start = start.minus(delta);