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

Make curve configurable on generic charts

Browse Source
This commit is contained in:
Marshall Polaris 2022-10-02 15:20:17 -07:00
parent 39638a3888
commit 794fffec6a
5 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { useMemo } from 'react'
import { last, sortBy } from 'lodash'
import { scaleTime, scaleLinear } from 'd3-scale'
import { curveStepAfter } from 'd3-shape'
import { Bet } from 'common/bet'
import { getProbability, getInitialProbability } from 'common/calculate'
@ -76,6 +77,7 @@ export const BinaryContractChart = (props: {
yScale={yScale}
data={data}
color="#11b981"
curve={curveStepAfter}
onMouseOver={onMouseOver}
Tooltip={BinaryChartTooltip}
pct

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

@ -1,6 +1,7 @@
import { useMemo } from 'react'
import { last, sum, sortBy, groupBy } from 'lodash'
import { scaleTime, scaleLinear } from 'd3-scale'
import { curveStepAfter } from 'd3-shape'
import { Bet } from 'common/bet'
import { Answer } from 'common/answer'
@ -214,6 +215,7 @@ export const ChoiceContractChart = (props: {
yScale={yScale}
data={data}
colors={CATEGORY_COLORS}
curve={curveStepAfter}
onMouseOver={onMouseOver}
Tooltip={ChoiceTooltip}
pct

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

@ -1,6 +1,7 @@
import { useMemo } from 'react'
import { last, sortBy } from 'lodash'
import { scaleTime, scaleLog, scaleLinear } from 'd3-scale'
import { curveStepAfter } from 'd3-shape'
import { Bet } from 'common/bet'
import { DAY_MS } from 'common/util/time'
@ -97,6 +98,7 @@ export const PseudoNumericContractChart = (props: {
xScale={xScale}
yScale={yScale}
data={data}
curve={curveStepAfter}
onMouseOver={onMouseOver}
Tooltip={PseudoNumericChartTooltip}
color={NUMERIC_GRAPH_COLOR}

19
web/components/charts/generic-charts.tsx
View File

@ -4,11 +4,11 @@ import { axisBottom, axisLeft } from 'd3-axis'
import { D3BrushEvent } from 'd3-brush'
import { ScaleTime, ScaleContinuousNumeric } from 'd3-scale'
import {
CurveFactory,
SeriesPoint,
curveLinear,
curveStepAfter,
stack,
stackOrderReverse,
SeriesPoint,
} from 'd3-shape'
import { range } from 'lodash'
@ -52,10 +52,11 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
color: string
xScale: ScaleContinuousNumeric<number, number>
yScale: ScaleContinuousNumeric<number, number>
curve?: CurveFactory
onMouseOver?: (p: P | undefined) => void
Tooltip?: TooltipComponent<number, P>
}) => {
const { color, data, yScale, w, h, Tooltip } = props
const { color, data, yScale, w, h, curve, Tooltip } = props
const [viewXScale, setViewXScale] =
useState<ScaleContinuousNumeric<number, number>>()
@ -100,7 +101,7 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
px={px}
py0={py0}
py1={py1}
curve={curveLinear}
curve={curve ?? curveLinear}
/>
</SVGChart>
)
@ -113,11 +114,12 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
colors: readonly string[]
xScale: ScaleTime<number, number>
yScale: ScaleContinuousNumeric<number, number>
curve?: CurveFactory
onMouseOver?: (p: P | undefined) => void
Tooltip?: TooltipComponent<Date, P>
pct?: boolean
}) => {
const { colors, data, yScale, w, h, Tooltip, pct } = props
const { colors, data, yScale, w, h, curve, Tooltip, pct } = props
const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
const xScale = viewXScale ?? props.xScale
@ -177,7 +179,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
px={px}
py0={py0}
py1={py1}
curve={curveStepAfter}
curve={curve ?? curveLinear}
fill={colors[i]}
/>
))}
@ -192,11 +194,12 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
color: string
xScale: ScaleTime<number, number>
yScale: ScaleContinuousNumeric<number, number>
curve?: CurveFactory
onMouseOver?: (p: P | undefined) => void
Tooltip?: TooltipComponent<Date, P>
pct?: boolean
}) => {
const { color, data, yScale, w, h, Tooltip, pct } = props
const { color, data, yScale, w, h, curve, Tooltip, pct } = props
const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
const xScale = viewXScale ?? props.xScale
@ -246,7 +249,7 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
px={px}
py0={py0}
py1={py1}
curve={curveStepAfter}
curve={curve ?? curveLinear}
/>
</SVGChart>
)

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

@ -10,7 +10,7 @@ import {
import { pointer, select } from 'd3-selection'
import { Axis, AxisScale } from 'd3-axis'
import { brushX, D3BrushEvent } from 'd3-brush'
import { area, line, curveStepAfter, CurveFactory } from 'd3-shape'
import { area, line, CurveFactory } from 'd3-shape'
import { nanoid } from 'nanoid'
import dayjs from 'dayjs'
import clsx from 'clsx'
@ -73,11 +73,11 @@ const LinePathInternal = <P,>(
data: P[]
px: number | ((p: P) => number)
py: number | ((p: P) => number)
curve?: CurveFactory
curve: CurveFactory
} & SVGProps<SVGPathElement>
) => {
const { data, px, py, curve, ...rest } = props
const d3Line = line<P>(px, py).curve(curve ?? curveStepAfter)
const d3Line = line<P>(px, py).curve(curve)
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return <path {...rest} fill="none" d={d3Line(data)!} />
}
@ -89,11 +89,11 @@ const AreaPathInternal = <P,>(
px: number | ((p: P) => number)
py0: number | ((p: P) => number)
py1: number | ((p: P) => number)
curve?: CurveFactory
curve: CurveFactory
} & SVGProps<SVGPathElement>
) => {
const { data, px, py0, py1, curve, ...rest } = props
const d3Area = area<P>(px, py0, py1).curve(curve ?? curveStepAfter)
const d3Area = area<P>(px, py0, py1).curve(curve)
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return <path {...rest} d={d3Area(data)!} />
}
@ -105,7 +105,7 @@ export const AreaWithTopStroke = <P,>(props: {
px: number | ((p: P) => number)
py0: number | ((p: P) => number)
py1: number | ((p: P) => number)
curve?: CurveFactory
curve: CurveFactory
}) => {
const { color, data, px, py0, py1, curve } = props
return (