Make curve configurable on generic charts
This commit is contained in:
parent
39638a3888
commit
794fffec6a
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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 (
|
||||
|
|
Loading…
Reference in New Issue
Block a user