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

Don't call Date.now a million times in answers graph

Browse Source
This commit is contained in:
Marshall Polaris 2022-08-31 13:39:43 -07:00
parent 8d853815d6
commit 6c19365068
1 changed files with 18 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,19 +18,20 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
}) { }) {
const { contract, bets, height } = props const { contract, bets, height } = props
const { createdTime, resolutionTime, closeTime, answers } = contract const { createdTime, resolutionTime, closeTime, answers } = contract
const now = Date.now()
const { probsByOutcome, sortedOutcomes } = computeProbsByOutcome( const { probsByOutcome, sortedOutcomes } = computeProbsByOutcome(
bets, bets,
contract contract
) )
const isClosed = !!closeTime && Date.now() > closeTime const isClosed = !!closeTime && now > closeTime
const latestTime = dayjs( const latestTime = dayjs(
resolutionTime && isClosed resolutionTime && isClosed
? Math.min(resolutionTime, closeTime) ? Math.min(resolutionTime, closeTime)
: isClosed : isClosed
? closeTime ? closeTime
: resolutionTime ?? Date.now() : resolutionTime ?? now
) )
const { width } = useWindowSize() const { width } = useWindowSize()
@ -71,14 +72,14 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
const yTickValues = [0, 25, 50, 75, 100] const yTickValues = [0, 25, 50, 75, 100]
const numXTickValues = isLargeWidth ? 5 : 2 const numXTickValues = isLargeWidth ? 5 : 2
const startDate = new Date(contract.createdTime) const startDate = dayjs(contract.createdTime)
const endDate = dayjs(startDate).add(1, 'hour').isAfter(latestTime) const endDate = startDate.add(1, 'hour').isAfter(latestTime)
? latestTime.add(1, 'hours').toDate() ? latestTime.add(1, 'hours')
: latestTime.toDate() : latestTime
const includeMinute = dayjs(endDate).diff(startDate, 'hours') < 2 const includeMinute = endDate.diff(startDate, 'hours') < 2
const multiYear = !dayjs(startDate).isSame(latestTime, 'year') const multiYear = !startDate.isSame(latestTime, 'year')
const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime) const lessThanAWeek = startDate.add(1, 'week').isAfter(latestTime)
return ( return (
<div <div
@ -96,16 +97,16 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
}} }}
xScale={{ xScale={{
type: 'time', type: 'time',
min: startDate, min: startDate.toDate(),
max: endDate, max: endDate.toDate(),
}} }}
xFormat={(d) => xFormat={(d) =>
formatTime(+d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek) formatTime(now, +d.valueOf(), multiYear, lessThanAWeek, lessThanAWeek)
} }
axisBottom={{ axisBottom={{
tickValues: numXTickValues, tickValues: numXTickValues,
format: (time) => format: (time) =>
formatTime(+time, multiYear, lessThanAWeek, includeMinute), formatTime(now, +time, multiYear, lessThanAWeek, includeMinute),
}} }}
colors={[ colors={[
'#fca5a5', // red-300 '#fca5a5', // red-300
@ -158,23 +159,20 @@ function formatPercent(y: DatumValue) {
} }
function formatTime( function formatTime(
now: number,
time: number, time: number,
includeYear: boolean, includeYear: boolean,
includeHour: boolean, includeHour: boolean,
includeMinute: boolean includeMinute: boolean
) { ) {
const d = dayjs(time) const d = dayjs(time)
if (d.add(1, 'minute').isAfter(now) && d.subtract(1, 'minute').isBefore(now))
if (
d.add(1, 'minute').isAfter(Date.now()) &&
d.subtract(1, 'minute').isBefore(Date.now())
)
return 'Now' return 'Now'
let format: string let format: string
if (d.isSame(Date.now(), 'day')) { if (d.isSame(now, 'day')) {
format = '[Today]' format = '[Today]'
} else if (d.add(1, 'day').isSame(Date.now(), 'day')) { } else if (d.add(1, 'day').isSame(now, 'day')) {
format = '[Yesterday]' format = '[Yesterday]'
} else { } else {
format = 'MMM D' format = 'MMM D'