simplify time utils

frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx

@@ -15,7 +15,8 @@ import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMeta
 import { useImpactMetricsData } from 'hooks/api/getters/useImpactMetricsData/useImpactMetricsData';
 import { usePlaceholderData } from '../hooks/usePlaceholderData.js';
 import { ImpactMetricsControls } from './ImpactMetricsControls.tsx';
-import { getDateRange, getDisplayFormat, getTimeUnit } from './time-utils.ts';
+import { getDisplayFormat, getTimeUnit } from './time-utils.ts';
+import { fromUnixTime } from 'date-fns';
 
 type ImpactMetricsProps = {};
 
@@ -33,7 +34,7 @@ export const ImpactMetrics: FC<ImpactMetricsProps> = () => {
         error: metadataError,
     } = useImpactMetricsMetadata();
     const {
-        data: timeSeriesData,
+        data: { start, end, data: timeSeriesData },
         loading: dataLoading,
         error: dataError,
     } = useImpactMetricsData(
@@ -86,7 +87,10 @@ export const ImpactMetrics: FC<ImpactMetricsProps> = () => {
         [data, isLoading],
     );
 
-    const { min: minTime, max: maxTime } = getDateRange(selectedRange);
+    const minTime = start
+        ? fromUnixTime(Number.parseInt(start, 10))
+        : undefined;
+    const maxTime = end ? fromUnixTime(Number.parseInt(end, 10)) : undefined;
 
     const placeholder = selectedSeries ? (
         <NotEnoughData description='Send impact metrics using Unleash SDK and select data series to view the chart.' />

frontend/src/component/insights/impact-metrics/time-utils.ts

@@ -14,55 +14,14 @@ export const getTimeUnit = (selectedRange: string) => {
 };
 
 export const getDisplayFormat = (selectedRange: string) => {
-    // TODO: localized format
     switch (selectedRange) {
         case 'hour':
-            return 'HH:mm:ss';
         case 'day':
             return 'HH:mm';
         case 'week':
-            return 'MMM dd';
         case 'month':
             return 'MMM dd';
         default:
             return 'MMM dd HH:mm';
     }
 };
-
-export const getDateRange = (
-    selectedRange: 'hour' | 'day' | 'week' | 'month',
-) => {
-    const now = new Date();
-    const endTime = now;
-
-    switch (selectedRange) {
-        case 'hour': {
-            const startTime = new Date(now);
-            startTime.setMinutes(now.getMinutes() - 60, 0, 0);
-            return { min: startTime, max: endTime };
-        }
-        case 'day': {
-            const startTime = new Date(now);
-            startTime.setHours(now.getHours() - 24, 0, 0, 0);
-            return { min: startTime, max: endTime };
-        }
-        case 'week': {
-            const startTime = new Date(now);
-            startTime.setDate(now.getDate() - 7);
-            startTime.setHours(0, 0, 0, 0);
-            const endTimeWeek = new Date(now);
-            endTimeWeek.setHours(23, 59, 59, 999);
-            return { min: startTime, max: endTimeWeek };
-        }
-        case 'month': {
-            const startTime = new Date(now);
-            startTime.setDate(now.getDate() - 30);
-            startTime.setHours(0, 0, 0, 0);
-            const endTimeMonth = new Date(now);
-            endTimeMonth.setHours(23, 59, 59, 999);
-            return { min: startTime, max: endTimeMonth };
-        }
-        default:
-            return { min: undefined, max: undefined };
-    }
-};

frontend/src/hooks/api/getters/useImpactMetricsData/useImpactMetricsData.ts

@@ -22,7 +22,12 @@ export const useImpactMetricsData = (query?: ImpactMetricsQuery) => {
 
     const PATH = createPath();
 
-    const { data, refetch, loading, error } = useApiGetter<TimeSeriesData>(
+    const { data, refetch, loading, error } = useApiGetter<{
+        start?: string;
+        end?: string;
+        step?: string;
+        data: TimeSeriesData;
+    }>(
         shouldFetch ? formatApiPath(PATH) : null,
         shouldFetch
             ? () => fetcher(formatApiPath(PATH), 'Impact metrics data')
@@ -34,7 +39,9 @@ export const useImpactMetricsData = (query?: ImpactMetricsQuery) => {
     );
 
     return {
-        data: data || [],
+        data: data || {
+            data: [],
+        },
         refetch,
         loading: shouldFetch ? loading : false,
         error,