Comparisons: Only render comparisons in top stats when both query and data supports it (#4732)

* Comparisons: Only render comparisons in top stats when both query and data support it

This fixes a bug from navigation:
1. Comparison disabled, choose a non-realtime period (e.g. press T for "Last 30 days")
2. Enable comparison mode (press X)
3. Choose the realtime period (press R)
4. Choose a non-realtime period again (press T)

Kudos to robert for discovering the repro case.

* Fix conditional

Broken when fixing another bug d727ba5ed5 (diff-f2361637bc87773faced883d7560491e4612b7581f4748f03241821f4ff8f6feL166)
This commit is contained in:
Karl-Aksel Puulmann 2024-10-24 11:27:55 +03:00 committed by GitHub
parent a59f12733d
commit 35851e9084
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -31,13 +31,15 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
const lastLoadTimestamp = useLastLoadContext() const lastLoadTimestamp = useLastLoadContext()
const site = useSiteContext() const site = useSiteContext()
const isComparison = query.comparison && data && data.comparing_from
function tooltip(stat) { function tooltip(stat) {
let statName = stat.name.toLowerCase() let statName = stat.name.toLowerCase()
statName = stat.value === 1 ? statName.slice(0, -1) : statName statName = stat.value === 1 ? statName.slice(0, -1) : statName
return ( return (
<div> <div>
{query.comparison && ( {isComparison && (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
{topStatNumberLong(stat.graph_metric, stat.value)} vs.{' '} {topStatNumberLong(stat.graph_metric, stat.value)} vs.{' '}
{topStatNumberLong(stat.graph_metric, stat.comparison_value)}{' '} {topStatNumberLong(stat.graph_metric, stat.comparison_value)}{' '}
@ -50,7 +52,7 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
</div> </div>
)} )}
{!query.comparison && ( {!isComparison && (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
{topStatNumberLong(stat.graph_metric, stat.value)} {statName} {topStatNumberLong(stat.graph_metric, stat.value)} {statName}
</div> </div>
@ -147,7 +149,7 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
> >
{topStatNumberShort(stat.graph_metric, stat.value)} {topStatNumberShort(stat.graph_metric, stat.value)}
</p> </p>
{query.comparison && stat.change != null ? ( {!isComparison && stat.change != null ? (
<ChangeArrow <ChangeArrow
metric={stat.graph_metric} metric={stat.graph_metric}
change={stat.change} change={stat.change}
@ -155,14 +157,14 @@ export default function TopStats({ data, onMetricUpdate, tooltipBoundary }) {
/> />
) : null} ) : null}
</span> </span>
{query.comparison ? ( {isComparison ? (
<p className="text-xs dark:text-gray-100"> <p className="text-xs dark:text-gray-100">
{formatDateRange(site, data.from, data.to)} {formatDateRange(site, data.from, data.to)}
</p> </p>
) : null} ) : null}
</div> </div>
{query.comparison ? ( {isComparison ? (
<div> <div>
<p className="font-bold text-xl text-gray-500 dark:text-gray-400"> <p className="font-bold text-xl text-gray-500 dark:text-gray-400">
{topStatNumberShort(stat.graph_metric, stat.comparison_value)} {topStatNumberShort(stat.graph_metric, stat.comparison_value)}