open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Memo-ize graph components for better performance

Browse Source
This commit is contained in:
James Grugett 2022-04-06 11:45:34 -05:00
parent e3800612ea
commit 849248376b
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/components/answers/answers-graph.tsx
View File

@ -2,6 +2,7 @@ import { DatumValue } from '@nivo/core'
import { ResponsiveLine } from '@nivo/line' import { ResponsiveLine } from '@nivo/line'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import _ from 'lodash' import _ from 'lodash'
import { memo } from 'react'
import { Bet } from '../../../common/bet' import { Bet } from '../../../common/bet'
import { DPM, FreeResponse, FullContract } from '../../../common/contract' import { DPM, FreeResponse, FullContract } from '../../../common/contract'
@ -11,7 +12,7 @@ import { useWindowSize } from '../../hooks/use-window-size'
const NUM_LINES = 6 const NUM_LINES = 6
export function AnswersGraph(props: { export const AnswersGraph = memo(function AnswersGraph(props: {
contract: FullContract<DPM, FreeResponse> contract: FullContract<DPM, FreeResponse>
bets: Bet[] bets: Bet[]
height?: number height?: number
@ -118,7 +119,7 @@ export function AnswersGraph(props: {
/> />
</div> </div>
) )
} })
function formatPercent(y: DatumValue) { function formatPercent(y: DatumValue) {
return `${Math.round(+y.toString())}%` return `${Math.round(+y.toString())}%`

7
web/components/contract-prob-graph.tsx
View File

@ -1,13 +1,14 @@
import { DatumValue } from '@nivo/core' import { DatumValue } from '@nivo/core'
import { ResponsiveLine } from '@nivo/line' import { ResponsiveLine } from '@nivo/line'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { memo } from 'react'
import { Bet } from '../../common/bet' import { Bet } from '../../common/bet'
import { getInitialProbability } from '../../common/calculate' import { getInitialProbability } from '../../common/calculate'
import { Binary, CPMM, DPM, FullContract } from '../../common/contract' import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
import { useBetsWithoutAntes } from '../hooks/use-bets' import { useBetsWithoutAntes } from '../hooks/use-bets'
import { useWindowSize } from '../hooks/use-window-size' import { useWindowSize } from '../hooks/use-window-size'
export function ContractProbGraph(props: { export const ContractProbGraph = memo(function ContractProbGraph(props: {
contract: FullContract<DPM | CPMM, Binary> contract: FullContract<DPM | CPMM, Binary>
bets: Bet[] bets: Bet[]
height?: number height?: number
@ -64,7 +65,7 @@ export function ContractProbGraph(props: {
return ( return (
<div <div
className="w-full overflow-hidden" className="w-full overflow-hidden"
style={{ height: height ?? (!width || width >= 800 ? 400 : 250) }} style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }}
> >
<ResponsiveLine <ResponsiveLine
data={data} data={data}
@ -96,7 +97,7 @@ export function ContractProbGraph(props: {
/> />
</div> </div>
) )
} })
function formatPercent(y: DatumValue) { function formatPercent(y: DatumValue) {
return `${Math.round(+y.toString())}%` return `${Math.round(+y.toString())}%`