From ba12dfcdf819c31a20aac1e56dcead50065085cb Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 8 Jan 2025 11:57:33 +0100
Subject: [PATCH] ui: small fixes for granularity and comparisons

---
 frontend/app/components/Charts/utils.ts                     | 4 ++--
 .../Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx  | 6 +++++-
 .../Dashboard/components/WidgetChart/WidgetChart.tsx        | 1 +
 .../components/WidgetDateRange/RangeGranularity.tsx         | 2 +-
 .../Dashboard/components/WidgetPreview/WidgetPreview.tsx    | 2 +-
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Charts/utils.ts b/frontend/app/components/Charts/utils.ts
index d3c633576..621fe2b85 100644
--- a/frontend/app/components/Charts/utils.ts
+++ b/frontend/app/components/Charts/utils.ts
@@ -228,7 +228,7 @@ function buildCompareTag(val: number, prevVal: number): string {
   const isHigher = delta > 0;
   const arrow = isHigher ? '▲' : '▼';
   const absDelta = Math.abs(delta);
-  const ratio = prevVal !== 0 ? ((delta / prevVal) * 100).toFixed(2) : '∞';
+  const ratio = prevVal !== 0 ? ((delta / prevVal) * 100).toFixed(2) : null;
 
   const tagColor = isHigher ? '#D1FADF' : '#FEE2E2';
   const arrowColor = isHigher ? '#059669' : '#DC2626';
@@ -245,7 +245,7 @@ function buildCompareTag(val: number, prevVal: number): string {
       font-size: 0.75rem;">
       <span>${arrow}</span>
       <span>${absDelta}</span>
-      <span>(${ratio}%)</span>
+      <span>${ratio ? `(${ratio}%)` : ''}</span>
     </div>
   `;
 }
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx
index 1fb18b285..05fb1b8c7 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/BigNumChart.tsx
@@ -48,6 +48,10 @@ function BigNum({ color, series, value, label, compData, valueLabel }: {
     if (!compData || compData === 0) return '0%';
     return `${(((value - compData) / compData) * 100).toFixed(2)}%`;
   }, [value, compData])
+  const change = React.useMemo(() => {
+    if (!compData) return 0;
+    return value - compData;
+  }, [value, compData])
   return (
     <div className={'flex flex-col flex-auto justify-center items-center rounded-lg transition-all hover:transition-all ease-in-out hover:ease-in-out hover:bg-teal/5 hover:cursor-pointer'}>
       <div className={'flex items-center gap-2 font-medium text-gray-darkest'}>
@@ -61,7 +65,7 @@ function BigNum({ color, series, value, label, compData, valueLabel }: {
         {label}
       </div>
       {compData ? (
-        <CompareTag isHigher={value > compData} prevValue={changePercent} />
+        <CompareTag isHigher={value > compData} absDelta={change} delta={changePercent} />
       ) : null}
     </div>
   )
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index b26fad89e..2928139ee 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -398,6 +398,7 @@ function WidgetChart(props: Props) {
             series: data.namesMap[i],
           });
         }
+
         return (
           <BugNumChart
             values={values}
diff --git a/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx b/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx
index 4de0bb182..588843656 100644
--- a/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetDateRange/RangeGranularity.tsx
@@ -64,7 +64,7 @@ function calculateGranularities(periodDurationMs: number) {
   const result = [];
   if (periodDurationMs === PAST_24_HR_MS) {
     // if showing for 1 day, show by minute split as well
-    granularities.push(
+    granularities.unshift(
       { label: 'By minute', durationMs: 60 * 1000 },
     )
   }
diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
index 14b43a187..8994324b0 100644
--- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
@@ -21,7 +21,7 @@ function WidgetPreview(props: Props) {
 
   const hasGranularSettings = [TIMESERIES, FUNNEL].includes(metric.metricType)
   const hasGranularity = ['lineChart', 'barChart', 'areaChart'].includes(metric.viewType);
-  const hasComparison = metric.metricType === FUNNEL || ['lineChart', 'barChart', 'table', 'progressChart'].includes(metric.viewType);
+  const hasComparison = metric.metricType === FUNNEL || ['lineChart', 'barChart', 'table', 'progressChart', 'metric'].includes(metric.viewType);
   // [rangeStart, rangeEnd] or [period_name] -- have to check options
   const presetComparison = metric.compareTo;
   return (