From 15cd8b1f9458572b9a1edd3bf8aa23adb1bdb9de Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Wed, 28 Sep 2022 23:27:42 -0700 Subject: [PATCH] Fix a couple small chart bugs (#960) * Fix time clamping causing little visual glitch * Fix tick formatting glitch --- web/components/charts/contract/binary.tsx | 6 ++--- web/components/charts/contract/choice.tsx | 6 ++--- .../charts/contract/pseudo-numeric.tsx | 6 ++--- web/components/charts/generic-charts.tsx | 26 +++++++------------ web/components/charts/helpers.tsx | 3 --- 5 files changed, 18 insertions(+), 29 deletions(-) diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx index 1f163266..8a378799 100644 --- a/web/components/charts/contract/binary.tsx +++ b/web/components/charts/contract/binary.tsx @@ -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(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 ( diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx index 11b1f8c3..0811a2ed 100644 --- a/web/components/charts/contract/choice.tsx +++ b/web/components/charts/contract/choice.tsx @@ -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(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( diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx index fcfe9d38..f1b438dc 100644 --- a/web/components/charts/contract/pseudo-numeric.tsx +++ b/web/components/charts/contract/pseudo-numeric.tsx @@ -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(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) diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx index 8bbfc659..161721f1 100644 --- a/web/components/charts/generic-charts.tsx +++ b/web/components/charts/generic-charts.tsx @@ -21,21 +21,9 @@ import { } from './helpers' import { useEvent } from 'web/hooks/use-event' -export type MultiPoint = { - x: Date - y: number[] - datum?: T -} -export type HistoryPoint = { - x: Date - y: number - datum?: T -} -export type DistributionPoint = { - x: number - y: number - datum?: T -} +export type MultiPoint = { x: Date; y: number[]; datum?: T } +export type HistoryPoint = { x: Date; y: number; datum?: T } +export type DistributionPoint = { x: number; y: number; datum?: T } const getTickValues = (min: number, max: number, n: number) => { const step = (max - min) / (n - 1) @@ -143,7 +131,9 @@ export const MultiValueHistoryChart = (props: { const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5) const xAxis = axisBottom(xScale).ticks(w / 100) const yAxis = pct - ? axisLeft(yScale).tickValues(pctTickValues).tickFormat(formatPct) + ? axisLeft(yScale) + .tickValues(pctTickValues) + .tickFormat((n) => formatPct(n)) : axisLeft(yScale) return { xAxis, yAxis } }, [w, h, pct, xScale, yScale]) @@ -233,7 +223,9 @@ export const SingleValueHistoryChart = (props: { const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5) const xAxis = axisBottom(xScale).ticks(w / 100) const yAxis = pct - ? axisLeft(yScale).tickValues(pctTickValues).tickFormat(formatPct) + ? axisLeft(yScale) + .tickValues(pctTickValues) + .tickFormat((n) => formatPct(n)) : axisLeft(yScale) return { xAxis, yAxis } }, [w, h, pct, xScale, yScale]) diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx index 55bb6e90..236c6e1d 100644 --- a/web/components/charts/helpers.tsx +++ b/web/components/charts/helpers.tsx @@ -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 = (props: { w: number; h: number; axis: Axis }) => { const { h, axis } = props const axisRef = useRef(null)