diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx index c9b3bb0b..c5bda8d1 100644 --- a/web/components/charts/contract/binary.tsx +++ b/web/components/charts/contract/binary.tsx @@ -75,12 +75,12 @@ export const BinaryContractChart = (props: { h={height} xScale={xScale} yScale={yScale} + yKind="percent" data={data} color="#11b981" curve={curveStepAfter} onMouseOver={onMouseOver} Tooltip={BinaryChartTooltip} - pct /> ) } diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx index 99e02fa8..09e16909 100644 --- a/web/components/charts/contract/choice.tsx +++ b/web/components/charts/contract/choice.tsx @@ -213,12 +213,12 @@ export const ChoiceContractChart = (props: { h={height} xScale={xScale} yScale={yScale} + yKind="percent" data={data} colors={CATEGORY_COLORS} curve={curveStepAfter} onMouseOver={onMouseOver} Tooltip={ChoiceTooltip} - pct /> ) } diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx index fa135432..43742003 100644 --- a/web/components/charts/generic-charts.tsx +++ b/web/components/charts/generic-charts.tsx @@ -22,10 +22,12 @@ import { formatPct, } from './helpers' import { useEvent } from 'web/hooks/use-event' +import { formatMoney } from 'common/util/format' export type MultiPoint = Point export type HistoryPoint = Point export type DistributionPoint = Point +export type ValueKind = 'm$' | 'percent' | 'amount' const getTickValues = (min: number, max: number, n: number) => { const step = (max - min) / (n - 1) @@ -119,12 +121,12 @@ export const MultiValueHistoryChart =

(props: { colors: readonly string[] xScale: ScaleTime yScale: ScaleContinuousNumeric + yKind?: ValueKind curve?: CurveFactory onMouseOver?: (p: P | undefined) => void Tooltip?: TooltipComponent - pct?: boolean }) => { - const { colors, data, yScale, w, h, curve, Tooltip, pct } = props + const { colors, data, yScale, yKind, w, h, curve, Tooltip } = props const [viewXScale, setViewXScale] = useState>() const xScale = viewXScale ?? props.xScale @@ -138,13 +140,16 @@ export const MultiValueHistoryChart =

(props: { const [min, max] = yScale.domain() const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5) const xAxis = axisBottom(xScale).ticks(w / 100) - const yAxis = pct - ? axisLeft(yScale) - .tickValues(pctTickValues) - .tickFormat((n) => formatPct(n)) - : axisLeft(yScale) + const yAxis = + yKind === 'percent' + ? axisLeft(yScale) + .tickValues(pctTickValues) + .tickFormat((n) => formatPct(n)) + : yKind === 'm$' + ? axisLeft(yScale).tickFormat((n) => formatMoney(n)) + : axisLeft(yScale) return { xAxis, yAxis } - }, [w, h, pct, xScale, yScale]) + }, [w, h, yKind, xScale, yScale]) const series = useMemo(() => { const d3Stack = stack() @@ -204,12 +209,13 @@ export const SingleValueHistoryChart =

(props: { color: string xScale: ScaleTime yScale: ScaleContinuousNumeric + yKind?: ValueKind curve?: CurveFactory onMouseOver?: (p: P | undefined) => void Tooltip?: TooltipComponent pct?: boolean }) => { - const { color, data, yScale, w, h, curve, Tooltip, pct } = props + const { color, data, yScale, yKind, w, h, curve, Tooltip } = props const [viewXScale, setViewXScale] = useState>() const xScale = viewXScale ?? props.xScale @@ -222,13 +228,16 @@ export const SingleValueHistoryChart =

(props: { const [min, max] = yScale.domain() const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5) const xAxis = axisBottom(xScale).ticks(w / 100) - const yAxis = pct - ? axisLeft(yScale) - .tickValues(pctTickValues) - .tickFormat((n) => formatPct(n)) - : axisLeft(yScale) + const yAxis = + yKind === 'percent' + ? axisLeft(yScale) + .tickValues(pctTickValues) + .tickFormat((n) => formatPct(n)) + : yKind === 'm$' + ? axisLeft(yScale).tickFormat((n) => formatMoney(n)) + : axisLeft(yScale) return { xAxis, yAxis } - }, [w, h, pct, xScale, yScale]) + }, [w, h, yKind, xScale, yScale]) const selector = betAtPointSelector(data, xScale) const onMouseOver = useEvent((mouseX: number) => { diff --git a/web/components/charts/stats.tsx b/web/components/charts/stats.tsx index a630657a..544f39c6 100644 --- a/web/components/charts/stats.tsx +++ b/web/components/charts/stats.tsx @@ -65,10 +65,10 @@ export function DailyChart(props: { h={height} xScale={scaleTime([minDate, maxDate], [0, width - MARGIN_X])} yScale={scaleLinear([0, maxValue], [height - MARGIN_Y, 0])} + yKind={pct ? 'percent' : 'amount'} data={data} Tooltip={pct ? DailyPercentTooltip : DailyCountTooltip} color="#11b981" - pct={pct} /> )}