feat: daily metrics display (#5836)

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.tsx

@@ -2,9 +2,10 @@ import { ILocationSettings } from 'hooks/useLocationSettings';
 import 'chartjs-adapter-date-fns';
 import { ChartOptions, defaults } from 'chart.js';
 import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
-import { formatDateHM } from 'utils/formatDate';
+import { formatDateHM, formatDateYMD, formatDateYMDHM } from 'utils/formatDate';
 import { Theme } from '@mui/material/styles/createTheme';
 import { IPoint } from './createChartData';
+import { daysOrHours } from '../daysOrHours';
 
 const formatVariantEntry = (
     variant: [string, number],
@@ -68,10 +69,18 @@ export const createChartOptions = (
                             .join('\n');
                     },
                     title: (items) =>
-                        `Time: ${formatDateHM(
-                            items[0].parsed.x,
-                            locationSettings.locale,
-                        )}`,
+                        `Time: ${
+                            hoursBack > 48
+                                ? formatDateYMDHM(
+                                      items[0].parsed.x,
+                                      locationSettings.locale,
+                                      'UTC',
+                                  )
+                                : formatDateHM(
+                                      items[0].parsed.x,
+                                      locationSettings.locale,
+                                  )
+                        }`,
                 },
             },
             legend: {
@@ -113,11 +122,20 @@ export const createChartOptions = (
             },
             x: {
                 type: 'time',
-                time: { unit: 'hour' },
+                time: { unit: hoursBack > 48 ? 'day' : 'hour' },
                 grid: { display: false },
                 ticks: {
                     callback: (_, i, data) =>
-                        formatDateHM(data[i].value, locationSettings.locale),
+                        hoursBack > 48
+                            ? formatDateYMD(
+                                  data[i].value,
+                                  locationSettings.locale,
+                                  'UTC',
+                              )
+                            : formatDateHM(
+                                  data[i].value,
+                                  locationSettings.locale,
+                              ),
                     color: theme.palette.text.secondary,
                 },
             },
@@ -128,7 +146,7 @@ export const createChartOptions = (
 const formatChartLabel = (hoursBack: number): string => {
     return hoursBack === 1
         ? 'Requests in the last hour'
-        : `Requests in the last ${hoursBack} hours`;
+        : `Requests in the last ${daysOrHours(hoursBack)}`;
 };
 
 // Set the default font for ticks, legends, tooltips, etc.

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.test.tsx

@@ -0,0 +1,27 @@
+import { render } from 'utils/testRenderer';
+import { FeatureMetricsStats } from './FeatureMetricsStats';
+import { screen } from '@testing-library/react';
+
+test('render hourly metrics stats', async () => {
+    render(<FeatureMetricsStats totalYes={100} totalNo={100} hoursBack={48} />);
+
+    expect(screen.getByText('200')).toBeInTheDocument();
+    expect(screen.getByText('50%')).toBeInTheDocument();
+    expect(
+        screen.getByText(
+            'Total requests for the feature in the environment in the last 48 hours.',
+        ),
+    ).toBeInTheDocument();
+});
+
+test('render daily metrics stats', async () => {
+    render(
+        <FeatureMetricsStats totalYes={100} totalNo={100} hoursBack={7 * 24} />,
+    );
+
+    expect(
+        screen.getByText(
+            'Total requests for the feature in the environment in the last 7 days.',
+        ),
+    ).toBeInTheDocument();
+});

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx

@@ -1,6 +1,7 @@
 import { calculatePercentage } from 'utils/calculatePercentage';
 import { Grid, styled } from '@mui/material';
 import { PrettifyLargeNumber } from 'component/common/PrettifyLargeNumber/PrettifyLargeNumber';
+import { daysOrHours } from '../daysOrHours';
 
 export interface IFeatureMetricsStatsProps {
     totalYes: number;
@@ -50,7 +51,9 @@ export const FeatureMetricsStats = ({
     tableSectionId,
 }: IFeatureMetricsStatsProps) => {
     const hoursSuffix =
-        hoursBack === 1 ? 'in the last hour' : `in the last ${hoursBack} hours`;
+        hoursBack === 1
+            ? 'in the last hour'
+            : `in the last ${daysOrHours(hoursBack)}`;
 
     return (
         <Grid

frontend/src/component/feature/FeatureView/FeatureMetrics/daysOrHours.ts

@@ -0,0 +1,6 @@
+export const daysOrHours = (hoursBack: number): string => {
+    if (hoursBack > 48) {
+        return `${Math.floor(hoursBack / 24)} days`;
+    }
+    return `${hoursBack} hours`;
+};

frontend/src/utils/formatDate.ts

@@ -15,6 +15,7 @@ export const formatDateYMDHMS = (
 export const formatDateYMDHM = (
     date: number | string | Date,
     locale: string,
+    timeZone?: string,
 ): string => {
     return new Date(date).toLocaleString(locale, {
         day: '2-digit',
@@ -22,17 +23,20 @@ export const formatDateYMDHM = (
         year: 'numeric',
         hour: '2-digit',
         minute: '2-digit',
+        timeZone,
     });
 };
 
 export const formatDateYMD = (
     date: number | string | Date,
     locale: string,
+    timeZone?: string,
 ): string => {
     return new Date(date).toLocaleString(locale, {
         day: '2-digit',
         month: '2-digit',
         year: 'numeric',
+        timeZone,
     });
 };