From 147d49a913e80fc96a53dd6a35804c00645e494f Mon Sep 17 00:00:00 2001 From: James Grugett Date: Fri, 6 May 2022 15:18:23 -0400 Subject: [PATCH] Zoom graph --- web/components/contract/numeric-graph.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/web/components/contract/numeric-graph.tsx b/web/components/contract/numeric-graph.tsx index f0a5b40d..44b112cc 100644 --- a/web/components/contract/numeric-graph.tsx +++ b/web/components/contract/numeric-graph.tsx @@ -18,11 +18,18 @@ export const NumericGraph = memo(function NumericGraph(props: { const xs = _.range(bucketCount).map( (i) => min + ((max - min) * i) / bucketCount ) - const probs = _.range(bucketCount).map((i) => bucketProbs[`${i}`]) - const points = probs.map((prob, i) => ({ x: xs[i], y: prob * 100 })) + const probs = _.range(bucketCount).map((i) => bucketProbs[`${i}`] * 100) + const points = probs.map((prob, i) => ({ x: xs[i], y: prob })) + const maxProb = Math.max(...probs) const data = [{ id: 'Probability', data: points, color: '#b91181' }] - const yTickValues = [0, 25, 50, 75, 100] + const yTickValues = [ + 0, + 0.25 * maxProb, + 0.5 & maxProb, + 0.75 * maxProb, + maxProb, + ] const { width } = useWindowSize() @@ -35,9 +42,8 @@ export const NumericGraph = memo(function NumericGraph(props: { > = 800} enableArea - margin={{ top: 20, right: 28, bottom: 22, left: 40 }} + margin={{ top: 20, right: 28, bottom: 22, left: 50 }} /> ) }) function formatPercent(y: DatumValue) { - return `${Math.round(+y.toString())}%` + const p = Math.round(+y * 100) / 100 + return `${p}%` }