docs: label the three numbers in the QSO counter
"Showing 10000 of 23683 matches · 28648 total" was read as a filter matching more than the log holds. The numbers were right — 23 683 matches out of 28 648 QSOs, capped at 10 000 displayed — but the middle one belonged to "matches" while sitting where "of N" normally means the total. Each number is now named where it appears: shown · match the filter · in the log. Thousands separators too, since 23683 and 28648 are hard to compare at a glance. No counting change: both counts run over the same table, so matches can never exceed the total.
This commit is contained in:
+20
-5
@@ -5560,16 +5560,31 @@ export default function App() {
|
||||
onClick={() => { setActiveFilter({ conditions: [], match: 'AND' }); setFilterCallsign(''); }}
|
||||
>clear</button>
|
||||
) : null}
|
||||
{/* Three different numbers, so each one is LABELLED. "Showing
|
||||
10000 of 23683 matches · 28648 total" was read as a filter
|
||||
matching more than the log holds: the middle number belonged
|
||||
to "matches" but sat where "of N" normally means the total.
|
||||
Thousands separators for the same reason — 23683 and 28648
|
||||
are hard to compare at a glance. */}
|
||||
{gridFilteredCount != null ? (
|
||||
<span>
|
||||
Showing <span className="font-semibold text-foreground">{gridFilteredCount}</span> of{' '}
|
||||
<span className="font-semibold text-foreground">{qsos.length}</span> (column filter)
|
||||
Showing <span className="font-semibold text-foreground">{gridFilteredCount.toLocaleString()}</span> of{' '}
|
||||
<span className="font-semibold text-foreground">{qsos.length.toLocaleString()}</span> (column filter)
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
Showing <span className="font-semibold text-foreground">{qsos.length}</span> of{' '}
|
||||
<span className="font-semibold text-foreground">{(activeFilter.conditions?.length || filterCallsign) && matchCount != null ? matchCount : total}</span>
|
||||
{(activeFilter.conditions?.length || filterCallsign) ? ` matches · ${total} total` : ''}
|
||||
{(activeFilter.conditions?.length || filterCallsign) ? (
|
||||
<>
|
||||
Showing <span className="font-semibold text-foreground">{qsos.length.toLocaleString()}</span>
|
||||
{' · '}<span className="font-semibold text-foreground">{(matchCount ?? 0).toLocaleString()}</span> match the filter
|
||||
{' · '}<span className="font-semibold text-foreground">{total.toLocaleString()}</span> in the log
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Showing <span className="font-semibold text-foreground">{qsos.length.toLocaleString()}</span> of{' '}
|
||||
<span className="font-semibold text-foreground">{total.toLocaleString()}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user