diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.tsx
index 32eb7649d4..1c21252e2a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.tsx
+++ b/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.
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.test.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.test.tsx
new file mode 100644
index 0000000000..ab76caaac4
--- /dev/null
+++ b/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();
+
+ 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(
+ ,
+ );
+
+ expect(
+ screen.getByText(
+ 'Total requests for the feature in the environment in the last 7 days.',
+ ),
+ ).toBeInTheDocument();
+});
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
index 28d1bf9813..b9a074debb 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
+++ b/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 (
{
+ if (hoursBack > 48) {
+ return `${Math.floor(hoursBack / 24)} days`;
+ }
+ return `${hoursBack} hours`;
+};
diff --git a/frontend/src/utils/formatDate.ts b/frontend/src/utils/formatDate.ts
index e071c6ea25..86729a5d12 100644
--- a/frontend/src/utils/formatDate.ts
+++ b/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,
});
};