fix: Round previous period offset to the second (#1421)

Closes HDX-2939

# Summary

This PR fixes a bug that caused the previous period to sometimes round to the incorrect second (see `1:34:59` instead of the desired `1:35:00`).

<img width="329" height="107" alt="Screenshot 2025-12-01 at 9 43 47 AM" src="https://github.com/user-attachments/assets/e967adca-6a91-48c2-be10-dd54ac15846a" />

This was due to the `getPreviousPeriodOffset` function returning an offset at the millisecond level, which was later not rounded to the second in `getPreviousDateRange`. We now round the offset to the nearest second, to match our time picker's granularity.

Author: pulpdrew

.changeset/curvy-wasps-sin.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Round previous period offset to the second

packages/app/src/ChartUtils.tsx

@@ -534,15 +534,20 @@ function inferGroupColumns(meta: Array<{ name: string; type: string }>) {
   ]);
 }
 
-export function getPreviousPeriodOffset(dateRange: [Date, Date]): number {
+export function getPreviousPeriodOffsetSeconds(
+  dateRange: [Date, Date],
+): number {
   const [start, end] = dateRange;
-  return end.getTime() - start.getTime();
+  return Math.round((end.getTime() - start.getTime()) / 1000);
 }
 
 export function getPreviousDateRange(currentRange: [Date, Date]): [Date, Date] {
   const [start, end] = currentRange;
-  const offset = getPreviousPeriodOffset(currentRange);
-  return [new Date(start.getTime() - offset), new Date(end.getTime() - offset)];
+  const offsetSeconds = getPreviousPeriodOffsetSeconds(currentRange);
+  return [
+    new Date(start.getTime() - offsetSeconds * 1000),
+    new Date(end.getTime() - offsetSeconds * 1000),
+  ];
 }
 
 export interface LineData {
@@ -633,10 +638,10 @@ function addResponseToFormattedData({
     const date = new Date(row[timestampColumn.name]);
 
     // Previous period data needs to be shifted forward to align with current period
-    const offset = isPreviousPeriod
-      ? getPreviousPeriodOffset(currentPeriodDateRange)
+    const offsetSeconds = isPreviousPeriod
+      ? getPreviousPeriodOffsetSeconds(currentPeriodDateRange)
       : 0;
-    const ts = Math.round((date.getTime() + offset) / 1000);
+    const ts = Math.round(date.getTime() / 1000 + offsetSeconds);
 
     for (const valueColumn of valueColumns) {
       let tsBucket = tsBucketMap.get(ts);

packages/app/src/HDXMultiSeriesTimeChart.tsx

@@ -117,7 +117,7 @@ export const TooltipItem = memo(
 
 type HDXLineChartTooltipProps = {
   lineDataMap: { [keyName: string]: LineData };
-  previousPeriodOffset?: number;
+  previousPeriodOffsetSeconds?: number;
   numberFormat?: NumberFormat;
 } & Record<string, any>;
 
@@ -129,7 +129,7 @@ const HDXLineChartTooltip = withErrorBoundary(
       label,
       numberFormat,
       lineDataMap,
-      previousPeriodOffset,
+      previousPeriodOffsetSeconds,
     } = props;
     const typedPayload = payload as TooltipPayload[];
 
@@ -143,10 +143,12 @@ const HDXLineChartTooltip = withErrorBoundary(
         <div className={styles.chartTooltip}>
           <div className={styles.chartTooltipHeader}>
             <FormatTime value={label * 1000} />
-            {previousPeriodOffset != null && (
+            {previousPeriodOffsetSeconds != null && (
               <>
                 {' (vs '}
-                <FormatTime value={label * 1000 - previousPeriodOffset} />
+                <FormatTime
+                  value={(label - previousPeriodOffsetSeconds) * 1000}
+                />
                 {')'}
               </>
             )}
@@ -332,7 +334,7 @@ export const MemoChart = memo(function MemoChart({
   timestampKey = 'ts_bucket',
   onTimeRangeSelect,
   showLegend = true,
-  previousPeriodOffset,
+  previousPeriodOffsetSeconds,
 }: {
   graphResults: any[];
   setIsClickActive: (v: any) => void;
@@ -347,7 +349,7 @@ export const MemoChart = memo(function MemoChart({
   timestampKey?: string;
   onTimeRangeSelect?: (start: Date, end: Date) => void;
   showLegend?: boolean;
-  previousPeriodOffset?: number;
+  previousPeriodOffsetSeconds?: number;
 }) {
   const _id = useId();
   const id = _id.replace(/:/g, '');
@@ -611,7 +613,7 @@ export const MemoChart = memo(function MemoChart({
               <HDXLineChartTooltip
                 numberFormat={numberFormat}
                 lineDataMap={lineDataMap}
-                previousPeriodOffset={previousPeriodOffset}
+                previousPeriodOffsetSeconds={previousPeriodOffsetSeconds}
               />
             }
             wrapperStyle={{

packages/app/src/components/DBTimeChart.tsx

@@ -34,7 +34,7 @@ import {
   convertGranularityToSeconds,
   formatResponseForTimeChart,
   getPreviousDateRange,
-  getPreviousPeriodOffset,
+  getPreviousPeriodOffsetSeconds,
   PreviousPeriodSuffix,
   useTimeChartSettings,
 } from '@/ChartUtils';
@@ -251,9 +251,9 @@ function DBTimeChartComponent({
     };
   }, [queriedConfig, dateRange]);
 
-  const previousPeriodOffset = useMemo(() => {
+  const previousPeriodOffsetSeconds = useMemo(() => {
     return config.compareToPreviousPeriod
-      ? getPreviousPeriodOffset(dateRange)
+      ? getPreviousPeriodOffsetSeconds(dateRange)
       : undefined;
   }, [dateRange, config.compareToPreviousPeriod]);
 
@@ -649,7 +649,7 @@ function DBTimeChartComponent({
           setIsClickActive={setActiveClickPayloadIfSourceAvailable}
           showLegend={showLegend}
           timestampKey={timestampColumn?.name}
-          previousPeriodOffset={previousPeriodOffset}
+          previousPeriodOffsetSeconds={previousPeriodOffsetSeconds}
         />
       </div>
     </div>