1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

feat: daily metrics display (#5836)

This commit is contained in:
Mateusz Kwasniewski 2024-01-11 10:39:58 +01:00 committed by GitHub
parent ca3b4c5057
commit 3a2d4ae60b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 67 additions and 9 deletions

View File

@ -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(
`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.

View File

@ -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();
});

View File

@ -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

View File

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

View File

@ -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,
});
};