import { DatumValue } from '@nivo/core' import { Point, ResponsiveLine } from '@nivo/line' import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants' import { memo } from 'react' import { range } from 'lodash' import { getDpmOutcomeProbabilities } from '../../../common/calculate-dpm' import { NumericContract } from '../../../common/contract' import { useWindowSize } from '../../hooks/use-window-size' import { Col } from '../layout/col' import { formatLargeNumber } from 'common/util/format' export const NumericGraph = memo(function NumericGraph(props: { contract: NumericContract height?: number }) { const { contract, height } = props const { totalShares, bucketCount, min, max } = contract const bucketProbs = getDpmOutcomeProbabilities(totalShares) const xs = range(bucketCount).map( (i) => min + ((max - min) * i) / bucketCount ) 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: NUMERIC_GRAPH_COLOR }] const yTickValues = [ 0, 0.25 * maxProb, 0.5 & maxProb, 0.75 * maxProb, maxProb, ] const { width } = useWindowSize() const numXTickValues = !width || width < 800 ? 2 : 5 return ( <div className="w-full overflow-hidden" style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }} > <ResponsiveLine data={data} yScale={{ min: 0, max: maxProb, type: 'linear' }} yFormat={formatPercent} axisLeft={{ tickValues: yTickValues, format: formatPercent, }} xScale={{ type: 'linear', min: min, max: max, }} xFormat={(d) => `${formatLargeNumber(+d, 3)}`} axisBottom={{ tickValues: numXTickValues, format: (d) => `${formatLargeNumber(+d, 3)}`, }} colors={{ datum: 'color' }} pointSize={0} enableSlices="x" sliceTooltip={({ slice }) => { const point = slice.points[0] return <Tooltip point={point} /> }} enableGridX={!!width && width >= 800} enableArea margin={{ top: 20, right: 28, bottom: 22, left: 50 }} /> </div> ) }) function formatPercent(y: DatumValue) { const p = Math.round(+y * 100) / 100 return `${p}%` } function Tooltip(props: { point: Point }) { const { point } = props return ( <Col className="border border-gray-300 bg-white py-2 px-3"> <div className="pb-1" style={{ color: point.serieColor, }} > <strong>{point.serieId}</strong> {point.data.yFormatted} </div> <div>{formatLargeNumber(+point.data.x)}</div> </Col> ) }