From 3a2d4ae60b6175b4e0c7e2a5db5b45e0684d8b7b Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Thu, 11 Jan 2024 10:39:58 +0100 Subject: [PATCH] feat: daily metrics display (#5836) --- .../createChartOptions.tsx | 34 ++++++++++++++----- .../FeatureMetricsStats.test.tsx | 27 +++++++++++++++ .../FeatureMetricsStats.tsx | 5 ++- .../FeatureView/FeatureMetrics/daysOrHours.ts | 6 ++++ frontend/src/utils/formatDate.ts | 4 +++ 5 files changed, 67 insertions(+), 9 deletions(-) create mode 100644 frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.test.tsx create mode 100644 frontend/src/component/feature/FeatureView/FeatureMetrics/daysOrHours.ts 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, }); };