simplify binary graphs (#921)

This commit is contained in:
ingawei 2022-09-21 18:49:20 -05:00 committed by GitHub
parent b875ac563d
commit 7988fdde60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -47,14 +47,14 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
times.push(latestTime.valueOf()) times.push(latestTime.valueOf())
probs.push(probs[probs.length - 1]) probs.push(probs[probs.length - 1])
const quartiles = [0, 25, 50, 75, 100] const { width } = useWindowSize()
const quartiles = !width || width < 800 ? [0, 50, 100] : [0, 25, 50, 75, 100]
const yTickValues = isBinary const yTickValues = isBinary
? quartiles ? quartiles
: quartiles.map((x) => x / 100).map(f) : quartiles.map((x) => x / 100).map(f)
const { width } = useWindowSize()
const numXTickValues = !width || width < 800 ? 2 : 5 const numXTickValues = !width || width < 800 ? 2 : 5
const startDate = dayjs(times[0]) const startDate = dayjs(times[0])
const endDate = startDate.add(1, 'hour').isAfter(latestTime) const endDate = startDate.add(1, 'hour').isAfter(latestTime)
@ -104,7 +104,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
return ( return (
<div <div
className="w-full overflow-visible" className="w-full overflow-visible"
style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }} style={{ height: height ?? (!width || width >= 800 ? 250 : 150) }}
> >
<ResponsiveLine <ResponsiveLine
data={data} data={data}
@ -144,7 +144,7 @@ export const ContractProbGraph = memo(function ContractProbGraph(props: {
pointBorderWidth={1} pointBorderWidth={1}
pointBorderColor="#fff" pointBorderColor="#fff"
enableSlices="x" enableSlices="x"
enableGridX={!!width && width >= 800} enableGridX={false}
enableArea enableArea
areaBaselineValue={isBinary || isLogScale ? 0 : contract.min} areaBaselineValue={isBinary || isLogScale ? 0 : contract.min}
margin={{ top: 20, right: 20, bottom: 25, left: 40 }} margin={{ top: 20, right: 20, bottom: 25, left: 40 }}