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

Continue tweaking time selection handling to be perfect

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-27 18:34:21 -07:00
parent 399a3121ca
commit ac887a729b
4 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { Bet } from 'common/bet'
import { getInitialProbability, getProbability } from 'common/calculate'
import { BinaryContract } from 'common/contract'
import { useIsMobile } from 'web/hooks/use-is-mobile'
import { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
import { SingleValueHistoryChart } from '../generic-charts'
import { useElementWidth } from 'web/hooks/use-element-width'
@ -30,21 +30,22 @@ export const BinaryContractChart = (props: {
height?: number
}) => {
const { contract, bets } = props
const [start, end] = getDateRange(contract)
const [contractStart, contractEnd] = getDateRange(contract)
const betPoints = useMemo(() => getBetPoints(bets), [bets])
const data = useMemo(
() => [
getStartPoint(contract, start),
getStartPoint(contract, contractStart),
...betPoints,
getEndPoint(contract, end),
getEndPoint(contract, contractEnd ?? MAX_DATE),
],
[contract, betPoints, start, end]
[contract, betPoints, contractStart, contractEnd]
)
const visibleRange = [contractStart, contractEnd ?? Date.now()]
const isMobile = useIsMobile(800)
const containerRef = useRef<HTMLDivElement>(null)
const width = useElementWidth(containerRef) ?? 0
const height = props.height ?? (isMobile ? 150 : 250)
const xScale = scaleTime([start, end], [0, width - MARGIN_X])
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
return (
<div ref={containerRef}>

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

@ -7,7 +7,7 @@ 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 { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
import { MultiPoint, MultiValueHistoryChart } from '../generic-charts'
import { useElementWidth } from 'web/hooks/use-element-width'
@ -129,7 +129,7 @@ export const ChoiceContractChart = (props: {
height?: number
}) => {
const { contract, bets } = props
const [start, end] = getDateRange(contract)
const [contractStart, contractEnd] = getDateRange(contract)
const answers = useMemo(
() => getTrackedAnswers(contract, CATEGORY_COLORS.length),
[contract]
@ -137,17 +137,19 @@ export const ChoiceContractChart = (props: {
const betPoints = useMemo(() => getBetPoints(answers, bets), [answers, bets])
const data = useMemo(
() => [
getStartPoint(answers, start),
getStartPoint(answers, contractStart),
...betPoints,
getEndPoint(answers, contract, end),
getEndPoint(answers, contract, contractEnd ?? MAX_DATE),
],
[answers, contract, betPoints, start, end]
[answers, contract, betPoints, contractStart, contractEnd]
)
const visibleRange = [contractStart, contractEnd ?? Date.now()]
const isMobile = useIsMobile(800)
const containerRef = useRef<HTMLDivElement>(null)
const width = useElementWidth(containerRef) ?? 0
const height = props.height ?? (isMobile ? 150 : 250)
const xScale = scaleTime([start, end], [0, width - MARGIN_X])
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
const yScale = scaleLinear([0, 1], [height - MARGIN_Y, 0])
return (
<div ref={containerRef}>

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

@ -7,7 +7,7 @@ import { getInitialProbability, getProbability } from 'common/calculate'
import { PseudoNumericContract } from 'common/contract'
import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
import { useIsMobile } from 'web/hooks/use-is-mobile'
import { MARGIN_X, MARGIN_Y, getDateRange } from '../helpers'
import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
import { SingleValueHistoryChart } from '../generic-charts'
import { useElementWidth } from 'web/hooks/use-element-width'
@ -42,24 +42,26 @@ export const PseudoNumericContractChart = (props: {
height?: number
}) => {
const { contract, bets } = props
const [start, end] = getDateRange(contract)
const [contractStart, contractEnd] = getDateRange(contract)
const betPoints = useMemo(
() => getBetPoints(contract, bets),
[contract, bets]
)
const data = useMemo(
() => [
getStartPoint(contract, start),
getStartPoint(contract, contractStart),
...betPoints,
getEndPoint(contract, end),
getEndPoint(contract, contractEnd ?? MAX_DATE),
],
[contract, betPoints, start, end]
[contract, betPoints, contractStart, contractEnd]
)
const visibleRange = [contractStart, contractEnd ?? Date.now()]
const isMobile = useIsMobile(800)
const containerRef = useRef<HTMLDivElement>(null)
const width = useElementWidth(containerRef) ?? 0
const height = props.height ?? (isMobile ? 150 : 250)
const xScale = scaleTime([start, end], [0, width - MARGIN_X])
const xScale = scaleTime(visibleRange, [0, width - MARGIN_X])
const yScale = contract.isLogScale
? scaleLog(
[Math.max(contract.min, 1), contract.max],

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

@ -18,6 +18,9 @@ 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)
@ -198,8 +201,7 @@ export const ChartTooltip = (
export const getDateRange = (contract: Contract) => {
const { createdTime, closeTime, resolutionTime } = contract
const now = Date.now()
const isClosed = !!closeTime && now > closeTime
const endDate = resolutionTime ?? (isClosed ? closeTime : now)
return [new Date(createdTime), new Date(endDate)] as const
const isClosed = !!closeTime && Date.now() > closeTime
const endDate = resolutionTime ?? (isClosed ? closeTime : null)
return [new Date(createdTime), endDate ? new Date(endDate) : null] as const
}