diff --git a/packages/ui/src/results/ResultHistory/ResultHistoryStats/ResultHistoryStats.tsx b/packages/ui/src/results/ResultHistory/ResultHistoryStats/ResultHistoryStats.tsx
index 3afe2a7..dad9449 100644
--- a/packages/ui/src/results/ResultHistory/ResultHistoryStats/ResultHistoryStats.tsx
+++ b/packages/ui/src/results/ResultHistory/ResultHistoryStats/ResultHistoryStats.tsx
@@ -87,11 +87,11 @@ export const ResultHistoryStats = ({
-
- Successful %
+ Success (%)
{Object.keys(RESULT_STAT_TYPES).map((key) => (
@@ -145,7 +145,7 @@ export const ResultHistoryStats = ({
-
diff --git a/packages/ui/src/results/ResultStats/ResultStats.tsx b/packages/ui/src/results/ResultStats/ResultStats.tsx
index 7917917..876897b 100644
--- a/packages/ui/src/results/ResultStats/ResultStats.tsx
+++ b/packages/ui/src/results/ResultStats/ResultStats.tsx
@@ -45,13 +45,18 @@ export const ResultStats = ({
key={'stats-list'}
className="grid grid-cols-3 md:flex items-center justify-center gap-4"
>
- {stats.map(({ label, value }, index) => (
+ {stats.map(({ label, value, unit }, index) => (
-
- {value} ms
-
+
+ {value} {unit}
+
+
{label}
diff --git a/packages/ui/src/shared/util/getLogStats.ts b/packages/ui/src/shared/util/getLogStats.ts
index 4a998df..5e7ef04 100644
--- a/packages/ui/src/shared/util/getLogStats.ts
+++ b/packages/ui/src/shared/util/getLogStats.ts
@@ -10,11 +10,12 @@ const { mean, q5, q95, q99, stdDev } = mathUtils;
export const RESULT_STAT_TYPES: {
[key: string]: string;
} = {
- MEAN: 'Average (Mean)',
- STD_DEV: 'Std. Deviation',
- FIFTH_PERCENTILE: '5th percentile',
- NINETY_FIFTH_PERCENTILE: '95th percentile',
- NINETY_NINTH_PERCENTILE: '99th percentile'
+ MEAN: 'Average (ms)',
+ STD_DEV: 'Std. dev (ms)',
+ FIFTH_PERCENTILE: 'p5 (ms)',
+ NINETY_FIFTH_PERCENTILE: 'p95 (ms)',
+ NINETY_NINTH_PERCENTILE: 'p99 (ms)',
+ TOTAL_TIME: 'Total time (s)'
};
export const getLogStats = (logs: Array) => {
@@ -23,6 +24,8 @@ export const getLogStats = (logs: Array) => {
.filter((log) => isNumber(log.metas.duration))
.map((log) => log.metas.duration as number);
+ const totalDuration = qualifiedDurations.reduce((acc, curr) => acc + curr, 0);
+ const totalDurationInSeconds = totalDuration / 1000;
const meanValue = mean(qualifiedDurations);
const stdDevValue = stdDev(qualifiedDurations);
const q5Value = q5(qualifiedDurations);
@@ -32,28 +35,39 @@ export const getLogStats = (logs: Array) => {
return [
{
value: formatNumber(meanValue),
+ unit: 'ms',
label: RESULT_STAT_TYPES.MEAN,
colorClass: getDurationColorClass(meanValue)
},
{
value: formatNumber(stdDevValue),
+ unit: 'ms',
label: RESULT_STAT_TYPES.STD_DEV,
colorClass: getDurationColorClass(stdDevValue)
},
{
value: formatNumber(q5Value),
+ unit: 'ms',
label: RESULT_STAT_TYPES.FIFTH_PERCENTILE,
colorClass: getDurationColorClass(q5Value)
},
{
value: formatNumber(q95Value),
+ unit: 'ms',
label: RESULT_STAT_TYPES.NINETY_FIFTH_PERCENTILE,
colorClass: getDurationColorClass(q95Value)
},
{
value: formatNumber(q99Value),
+ unit: 'ms',
label: RESULT_STAT_TYPES.NINETY_NINTH_PERCENTILE,
colorClass: getDurationColorClass(q99Value)
+ },
+ {
+ value: formatNumber(totalDurationInSeconds),
+ unit: 's',
+ label: 'Total time',
+ colorClass: getDurationColorClass(0) // Always green
}
];
};