{' '}
- {`${deltaPercent} % `}
+ {`${signPrefix(deltaPercent)}${deltaPercent} % `}
{confidenceText && confidenceIcons[confidenceText]}
@@ -260,9 +260,13 @@ export const studentTStrategy = {
baseMedian && newMedian
? formatTwoDigits.format(newMedian - baseMedian)
: '';
+ const medianPercentageNum =
+ baseMedian && newMedian
+ ? ((newMedian - baseMedian) / baseMedian) * 100
+ : 0;
const medianPercentage =
baseMedian && newMedian
- ? formatTwoDigits.format(((newMedian - baseMedian) / baseMedian) * 100)
+ ? formatTwoDigits.format(medianPercentageNum)
: '';
const { confidenceNote } = Strings.components.expandableRow;
@@ -270,13 +274,14 @@ export const studentTStrategy = {
return (
<>
- Difference of means: {deltaPercent}% ({formatNumber(delta)}
+ Difference of means: {signPrefix(deltaPercent)}
+ {deltaPercent}% ({formatNumber(delta)}
{deltaUnit ? ' ' + deltaUnit : null})
{newMedian && baseMedian ? (
- Difference of medians: {medianPercentage}% (
- {medianDifference}
+ Difference of medians: {signPrefix(medianPercentageNum)}
+ {medianPercentage}% ({medianDifference}
{deltaUnit ? ' ' + deltaUnit : null})
) : null}
@@ -334,7 +339,10 @@ export const studentTStrategy = {
{determineStatus(!!improvement, !!regression)}
- {` ${deltaPercent} % `}
+ {` ${signPrefix(deltaPercent)}${deltaPercent} % `}
{confidenceText && confidenceIcons[confidenceText]}
{confidenceText || '-'}
diff --git a/src/components/CompareResults/MannWhitneyCompareMetrics.tsx b/src/components/CompareResults/MannWhitneyCompareMetrics.tsx
index 1cead497e..71286c693 100644
--- a/src/components/CompareResults/MannWhitneyCompareMetrics.tsx
+++ b/src/components/CompareResults/MannWhitneyCompareMetrics.tsx
@@ -1,10 +1,15 @@
import { Box } from '@mui/material';
import { MannWhitneyResultsItem } from '../../types/state';
+import { formatNumberFixedTwo } from '../../utils/format';
import { getModeInterpretation } from '../../utils/helpers';
const METRIC_HEADERS = ['Metric', 'Base', 'New', 'Interpretation'];
+// Format a stat with thousands grouping and 2 decimals, or "N/A" when the value is missing.
+const formatStat = (value: number | null | undefined) =>
+ value != null ? formatNumberFixedTwo(value) : 'N/A';
+
interface MannWhitneyCompareMetricsProps {
result: MannWhitneyResultsItem;
}
@@ -98,38 +103,38 @@ export const MannWhitneyCompareMetrics = ({
| Mean |
- {baseMean?.toFixed(2) ?? 'N/A'} |
- {newMean?.toFixed(2) ?? 'N/A'} |
+ {formatStat(baseMean)} |
+ {formatStat(newMean)} |
|
| Median |
- {baseMedian?.toFixed(2) ?? 'N/A'} |
- {newMedian?.toFixed(2) ?? 'N/A'} |
+ {formatStat(baseMedian)} |
+ {formatStat(newMedian)} |
|
| Variance |
- {baseVariance?.toFixed(2) ?? 'N/A'} |
- {newVariance?.toFixed(2) ?? 'N/A'} |
+ {formatStat(baseVariance)} |
+ {formatStat(newVariance)} |
|
| Standard Deviation |
- {baseStandardDev?.toFixed(2) ?? 'N/A'} |
- {newStandardDev?.toFixed(2) ?? 'N/A'} |
+ {formatStat(baseStandardDev)} |
+ {formatStat(newStandardDev)} |
|
| Min |
- {baseMin?.toFixed(2) ?? 'N/A'} |
- {newMin?.toFixed(2) ?? 'N/A'} |
+ {formatStat(baseMin)} |
+ {formatStat(newMin)} |
|
| Max |
- {baseMax?.toFixed(2) ?? 'N/A'} |
- {newMax?.toFixed(2) ?? 'N/A'} |
+ {formatStat(baseMax)} |
+ {formatStat(newMax)} |
|
diff --git a/src/components/CompareResults/RunValues.tsx b/src/components/CompareResults/RunValues.tsx
index 16825dd7e..076305bc3 100644
--- a/src/components/CompareResults/RunValues.tsx
+++ b/src/components/CompareResults/RunValues.tsx
@@ -63,7 +63,7 @@ function RunValues(props: RunValuesProps) {
))}
{expanded
? lastValues.map((value, index) => (
- {value}
+ {formatNumber(value)}
))
: null}
{lastValues.length ? (
@@ -87,7 +87,7 @@ function RunValues(props: RunValuesProps) {
{values.length > 1
- ? `${stddev} ${unit} = ${stddevPercent}% standard deviation`
+ ? `${formatNumber(stddev)} ${unit} = ${stddevPercent}% standard deviation`
: 'N/A standard deviation'}
diff --git a/src/utils/format.ts b/src/utils/format.ts
index b0e2aec2f..b9d588af3 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -4,6 +4,12 @@ const dateFormatter = new Intl.DateTimeFormat('en-US', {
const numberFormatter = new Intl.NumberFormat('en-US');
+// Groups thousands while keeping exactly 2 decimals (e.g. 2,113.69).
+const numberFormatterFixedTwo = new Intl.NumberFormat('en-US', {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+});
+
export function formatDate(date: Date) {
return dateFormatter.format(date);
}
@@ -16,6 +22,13 @@ export const formatNumber = (value: number) => {
return numberFormatter.format(value);
};
+// Returns a leading "+" for positive values only (negatives already carry "-").
+export const signPrefix = (value: number) => (value > 0 ? '+' : '');
+
+export const formatNumberFixedTwo = (value: number) => {
+ return numberFormatterFixedTwo.format(value);
+};
+
// Determine the best human-readable scale for a unit given a set of values.
// Returns the divisor and display unit label; suitable for axis tick formatting.
export function getDisplayScale(