Make curve configurable on generic charts

web/components/charts/contract/binary.tsx

@@ -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

web/components/charts/contract/choice.tsx

@@ -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

web/components/charts/contract/pseudo-numeric.tsx

@@ -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}

web/components/charts/generic-charts.tsx

@@ -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>
   )

web/components/charts/helpers.tsx

@@ -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 (