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