ui: small fixes for granularity and comparisons

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>
   `;
 }

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>
   )

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -398,6 +398,7 @@ function WidgetChart(props: Props) {
             series: data.namesMap[i],
           });
         }
+
         return (
           <BugNumChart
             values={values}

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 },
     )
   }

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 (