Prob change table shows variable number of rows

This commit is contained in:
James Grugett 2022-09-12 00:19:41 -05:00
parent 299f2f24c6
commit 1f797309a6

View File

@ -17,16 +17,20 @@ export function ProbChangeTable(props: {
if (!changes) return <LoadingIndicator /> if (!changes) return <LoadingIndicator />
const { positiveChanges, negativeChanges } = changes const { positiveChanges, negativeChanges } = changes
if (positiveChanges.length === 0 && negativeChanges.length === 0) return null
const rows = Math.min( const threshold = 0.075
Math.min(positiveChanges.length, negativeChanges.length), const countOverThreshold = Math.max(
3 positiveChanges.findIndex((c) => c.probChanges.day < threshold) + 1,
negativeChanges.findIndex((c) => c.probChanges.day > -threshold) + 1
) )
const maxRows = Math.min(positiveChanges.length, negativeChanges.length)
const rows = Math.min(3, Math.min(maxRows, countOverThreshold))
const filteredPositiveChanges = positiveChanges.slice(0, rows) const filteredPositiveChanges = positiveChanges.slice(0, rows)
const filteredNegativeChanges = negativeChanges.slice(0, rows) const filteredNegativeChanges = negativeChanges.slice(0, rows)
if (rows === 0) return <div className="px-4 text-gray-500">None</div>
return ( return (
<Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0"> <Col className="mb-4 w-full divide-x-2 divide-y rounded-lg bg-white shadow-md md:flex-row md:divide-y-0">
<Col className="flex-1 divide-y"> <Col className="flex-1 divide-y">