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

Fix time clamping causing little visual glitch

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-28 23:22:26 -07:00
parent 8862425120
commit f135a17dc9
4 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/charts/contract/binary.tsx
View File

@ -5,11 +5,11 @@ import { scaleTime, scaleLinear } from 'd3-scale'
import { Bet } from 'common/bet'
import { getProbability, getInitialProbability } from 'common/calculate'
import { BinaryContract } from 'common/contract'
import { DAY_MS } from 'common/util/time'
import { useIsMobile } from 'web/hooks/use-is-mobile'
import {
MARGIN_X,
MARGIN_Y,
MAX_DATE,
getDateRange,
getRightmostVisibleDate,
formatDateInRange,
@ -58,7 +58,7 @@ export const BinaryContractChart = (props: {
() => [
{ x: startDate, y: startP },
...betPoints,
{ x: endDate ?? MAX_DATE, y: endP },
{ x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
],
[startDate, startP, endDate, endP, betPoints]
)
@ -73,7 +73,7 @@ export const BinaryContractChart = (props: {
const containerRef = useRef<HTMLDivElement>(null)
const width = useElementWidth(containerRef) ?? 0
const height = props.height ?? (isMobile ? 250 : 350)
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X]).clamp(true)
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
return (

6
web/components/charts/contract/choice.tsx
View File

@ -7,11 +7,11 @@ import { Answer } from 'common/answer'
import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
import { getOutcomeProbability } from 'common/calculate'
import { useIsMobile } from 'web/hooks/use-is-mobile'
import { DAY_MS } from 'common/util/time'
import {
Legend,
MARGIN_X,
MARGIN_Y,
MAX_DATE,
getDateRange,
getRightmostVisibleDate,
formatPct,
@ -141,7 +141,7 @@ export const ChoiceContractChart = (props: {
{ x: start, y: answers.map((_) => 0) },
...betPoints,
{
x: end ?? MAX_DATE,
x: end ?? new Date(Date.now() + DAY_MS),
y: answers.map((a) => getOutcomeProbability(contract, a.id)),
},
],
@ -157,7 +157,7 @@ export const ChoiceContractChart = (props: {
const containerRef = useRef<HTMLDivElement>(null)
const width = useElementWidth(containerRef) ?? 0
const height = props.height ?? (isMobile ? 150 : 250)
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X]).clamp(true)
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
const ChoiceTooltip = useMemo(

6
web/components/charts/contract/pseudo-numeric.tsx
View File

@ -3,6 +3,7 @@ import { last, sortBy } from 'lodash'
import { scaleTime, scaleLog, scaleLinear } from 'd3-scale'
import { Bet } from 'common/bet'
import { DAY_MS } from 'common/util/time'
import { getInitialProbability, getProbability } from 'common/calculate'
import { formatLargeNumber } from 'common/util/format'
import { PseudoNumericContract } from 'common/contract'
@ -11,7 +12,6 @@ import { useIsMobile } from 'web/hooks/use-is-mobile'
import {
MARGIN_X,
MARGIN_Y,
MAX_DATE,
getDateRange,
getRightmostVisibleDate,
formatDateInRange,
@ -77,7 +77,7 @@ export const PseudoNumericContractChart = (props: {
() => [
{ x: startDate, y: startP },
...betPoints,
{ x: endDate ?? MAX_DATE, y: endP },
{ x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
],
[betPoints, startDate, startP, endDate, endP]
)
@ -91,7 +91,7 @@ export const PseudoNumericContractChart = (props: {
const containerRef = useRef<HTMLDivElement>(null)
const width = useElementWidth(containerRef) ?? 0
const height = props.height ?? (isMobile ? 150 : 250)
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X]).clamp(true)
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
// clamp log scale to make sure zeroes go to the bottom
const yScale = isLogScale
? scaleLog([Math.max(min, 1), max], [height - MARGIN_Y, 0]).clamp(true)

3
web/components/charts/helpers.tsx
View File

@ -22,9 +22,6 @@ export const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
export const MARGIN_X = MARGIN.right + MARGIN.left
export const MARGIN_Y = MARGIN.top + MARGIN.bottom
export const MAX_TIMESTAMP = 8640000000000000
export const MAX_DATE = new Date(MAX_TIMESTAMP)
export const XAxis = <X,>(props: { w: number; h: number; axis: Axis<X> }) => {
const { h, axis } = props
const axisRef = useRef<SVGGElement>(null)