diff --git a/www/js/metrics/ChangeIndicator.tsx b/www/js/metrics/ChangeIndicator.tsx index 137113ac1..8118d59ad 100644 --- a/www/js/metrics/ChangeIndicator.tsx +++ b/www/js/metrics/ChangeIndicator.tsx @@ -18,26 +18,21 @@ const ChangeIndicator = ({ change }: Props) => { if (!change) return; let low = isFinite(change.low) ? Math.round(Math.abs(change.low)) : '∞'; let high = isFinite(change.high) ? Math.round(Math.abs(change.high)) : '∞'; - + if (low == '∞' && high == '∞') return; // both are ∞, no information is really conveyed; don't show if (Math.round(change.low) == Math.round(change.high)) { - let text = changeSign(change.low) + low + '%'; - return text; - } else if (!(isFinite(change.low) || isFinite(change.high))) { - return ''; //if both are not finite, no information is really conveyed, so don't show - } else { - let text = `${changeSign(change.low) + low}% / ${changeSign(change.high) + high}%`; - return text; + // high and low being the same means there is no uncertainty; show just one percentage + return changeSign(change.low) + low + '%'; } + // when there is uncertainty, show both percentages separated by a slash + return `${changeSign(change.low) + low}% / ${changeSign(change.high) + high}%`; }, [change]); - return changeText != '' ? ( + return changeText ? ( 0 ? colors.danger : colors.success)}> {changeText + '\n'} {`${t('metrics.this-week')}`} - ) : ( - <> - ); + ) : null; }; const styles: any = {