Make margins on charts configurable

web/components/charts/contract/binary.tsx

@@ -9,8 +9,6 @@ import { BinaryContract } from 'common/contract'
 import { DAY_MS } from 'common/util/time'
 import {
   TooltipProps,
-  MARGIN_X,
-  MARGIN_Y,
   getDateRange,
   getRightmostVisibleDate,
   formatDateInRange,
@@ -20,6 +18,10 @@ import { HistoryPoint, SingleValueHistoryChart } from '../generic-charts'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getBetPoints = (bets: Bet[]) => {
   return sortBy(bets, (b) => b.createdTime).map((b) => ({
     x: new Date(b.createdTime),
@@ -73,6 +75,7 @@ export const BinaryContractChart = (props: {
     <SingleValueHistoryChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
       yKind="percent"

web/components/charts/contract/choice.tsx

@@ -10,8 +10,6 @@ import { getOutcomeProbability } from 'common/calculate'
 import { DAY_MS } from 'common/util/time'
 import {
   TooltipProps,
-  MARGIN_X,
-  MARGIN_Y,
   getDateRange,
   getRightmostVisibleDate,
   formatPct,
@@ -79,6 +77,10 @@ const CATEGORY_COLORS = [
   '#70a560',
 ]
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getTrackedAnswers = (
   contract: FreeResponseContract | MultipleChoiceContract,
   topN: number
@@ -211,6 +213,7 @@ export const ChoiceContractChart = (props: {
     <MultiValueHistoryChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
       yKind="percent"

web/components/charts/contract/numeric.tsx

@@ -6,9 +6,13 @@ import { formatLargeNumber } from 'common/util/format'
 import { getDpmOutcomeProbabilities } from 'common/calculate-dpm'
 import { NumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
-import { TooltipProps, MARGIN_X, MARGIN_Y, formatPct } from '../helpers'
+import { TooltipProps, formatPct } from '../helpers'
 import { DistributionPoint, DistributionChart } from '../generic-charts'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getNumericChartData = (contract: NumericContract) => {
   const { totalShares, bucketCount, min, max } = contract
   const step = (max - min) / bucketCount
@@ -48,6 +52,7 @@ export const NumericContractChart = (props: {
     <DistributionChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
       data={data}

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

@@ -11,8 +11,6 @@ import { PseudoNumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
 import {
   TooltipProps,
-  MARGIN_X,
-  MARGIN_Y,
   getDateRange,
   getRightmostVisibleDate,
   formatDateInRange,
@@ -21,6 +19,10 @@ import { HistoryPoint, SingleValueHistoryChart } from '../generic-charts'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 // mqp: note that we have an idiosyncratic version of 'log scale'
 // contracts. the values are stored "linearly" and can include zero.
 // as a result, we have to do some weird-looking stuff in this code
@@ -95,6 +97,7 @@ export const PseudoNumericContractChart = (props: {
     <SingleValueHistoryChart
       w={width}
       h={height}
+      margin={MARGIN}
       xScale={xScale}
       yScale={yScale}
       data={data}

web/components/charts/generic-charts.tsx

@@ -14,6 +14,7 @@ import { range } from 'lodash'
 
 import {
   ContinuousScale,
+  Margin,
   SVGChart,
   AreaPath,
   AreaWithTopStroke,
@@ -52,13 +53,14 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   w: number
   h: number
   color: string
+  margin: Margin
   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, curve, Tooltip } = props
+  const { data, w, h, color, margin, yScale, curve, Tooltip } = props
 
   const [viewXScale, setViewXScale] =
     useState<ScaleContinuousNumeric<number, number>>()
@@ -96,6 +98,7 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
     <SVGChart
       w={w}
       h={h}
+      margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
       onSelect={onSelect}
@@ -119,6 +122,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   w: number
   h: number
   colors: readonly string[]
+  margin: Margin
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
   yKind?: ValueKind
@@ -126,7 +130,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<Date, P>
 }) => {
-  const { colors, data, yScale, yKind, w, h, curve, Tooltip } = props
+  const { data, w, h, colors, margin, yScale, yKind, curve, Tooltip } = props
 
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -138,7 +142,8 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
 
   const { xAxis, yAxis } = useMemo(() => {
     const [min, max] = yScale.domain()
-    const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
+    const nTicks = h < 200 ? 3 : 5
+    const pctTickValues = getTickValues(min, max, nTicks)
     const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
     const yAxis =
       yKind === 'percent'
@@ -146,8 +151,10 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
             .tickValues(pctTickValues)
             .tickFormat((n) => formatPct(n))
         : yKind === 'm$'
-        ? axisLeft<number>(yScale).tickFormat((n) => formatMoney(n))
+        ? axisLeft<number>(yScale)
-        : axisLeft<number>(yScale)
+            .ticks(nTicks)
+            .tickFormat((n) => formatMoney(n))
+        : axisLeft<number>(yScale).ticks(nTicks)
     return { xAxis, yAxis }
   }, [w, h, yKind, xScale, yScale])
 
@@ -181,6 +188,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
     <SVGChart
       w={w}
       h={h}
+      margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
       onSelect={onSelect}
@@ -207,6 +215,7 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   w: number
   h: number
   color: string
+  margin: Margin
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
   yKind?: ValueKind
@@ -215,7 +224,7 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   Tooltip?: TooltipComponent<Date, P>
   pct?: boolean
 }) => {
-  const { color, data, yScale, yKind, w, h, curve, Tooltip } = props
+  const { data, w, h, color, margin, yScale, yKind, curve, Tooltip } = props
 
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -226,7 +235,8 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
 
   const { xAxis, yAxis } = useMemo(() => {
     const [min, max] = yScale.domain()
-    const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
+    const nTicks = h < 200 ? 3 : 5
+    const pctTickValues = getTickValues(min, max, nTicks)
     const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
     const yAxis =
       yKind === 'percent'
@@ -234,8 +244,10 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
             .tickValues(pctTickValues)
             .tickFormat((n) => formatPct(n))
         : yKind === 'm$'
-        ? axisLeft<number>(yScale).tickFormat((n) => formatMoney(n))
+        ? axisLeft<number>(yScale)
-        : axisLeft<number>(yScale)
+            .ticks(nTicks)
+            .tickFormat((n) => formatMoney(n))
+        : axisLeft<number>(yScale).ticks(nTicks)
     return { xAxis, yAxis }
   }, [w, h, yKind, xScale, yScale])
 
@@ -261,6 +273,7 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
     <SVGChart
       w={w}
       h={h}
+      margin={margin}
       xAxis={xAxis}
       yAxis={yAxis}
       onSelect={onSelect}

web/components/charts/helpers.tsx

@@ -27,11 +27,12 @@ export interface ContinuousScale<T> extends AxisScale<T> {
 export type XScale<P> = P extends Point<infer X, infer _> ? AxisScale<X> : never
 export type YScale<P> = P extends Point<infer _, infer Y> ? AxisScale<Y> : never
 
-export const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+export type Margin = {
-export const MARGIN_X = MARGIN.right + MARGIN.left
+  top: number
-export const MARGIN_Y = MARGIN.top + MARGIN.bottom
+  right: number
-const MARGIN_STYLE = `${MARGIN.top}px ${MARGIN.right}px ${MARGIN.bottom}px ${MARGIN.left}px`
+  bottom: number
-const MARGIN_XFORM = `translate(${MARGIN.left}, ${MARGIN.top})`
+  left: number
+}
 
 export const XAxis = <X,>(props: { w: number; h: number; axis: Axis<X> }) => {
   const { h, axis } = props
@@ -55,8 +56,6 @@ export const YAxis = <Y,>(props: { w: number; h: number; axis: Axis<Y> }) => {
   useEffect(() => {
     if (axisRef.current != null) {
       select(axisRef.current)
-        .transition()
-        .duration(250)
         .call(axis)
         .call((g) =>
           g.selectAll('.tick line').attr('x2', w).attr('stroke-opacity', 0.1)
@@ -128,18 +127,29 @@ export const SVGChart = <X, TT>(props: {
   children: ReactNode
   w: number
   h: number
+  margin: Margin
   xAxis: Axis<X>
   yAxis: Axis<number>
   onSelect?: (ev: D3BrushEvent<any>) => void
   onMouseOver?: (mouseX: number, mouseY: number) => TT | undefined
   Tooltip?: TooltipComponent<X, TT>
 }) => {
-  const { children, w, h, xAxis, yAxis, onMouseOver, onSelect, Tooltip } = props
+  const {
+    children,
+    w,
+    h,
+    margin,
+    xAxis,
+    yAxis,
+    onMouseOver,
+    onSelect,
+    Tooltip,
+  } = props
   const [mouse, setMouse] = useState<{ x: number; y: number; data: TT }>()
   const tooltipMeasure = useMeasureSize()
   const overlayRef = useRef<SVGGElement>(null)
-  const innerW = w - MARGIN_X
+  const innerW = w - (margin.left + margin.right)
-  const innerH = h - MARGIN_Y
+  const innerH = h - (margin.top + margin.bottom)
   const clipPathId = useMemo(() => nanoid(), [])
 
   const justSelected = useRef(false)
@@ -194,6 +204,7 @@ export const SVGChart = <X, TT>(props: {
       {mouse && Tooltip && (
         <TooltipContainer
           setElem={tooltipMeasure.setElem}
+          margin={margin}
           pos={getTooltipPosition(
             mouse.x,
             mouse.y,
@@ -215,7 +226,7 @@ export const SVGChart = <X, TT>(props: {
         <clipPath id={clipPathId}>
           <rect x={0} y={0} width={innerW} height={innerH} />
         </clipPath>
-        <g transform={MARGIN_XFORM}>
+        <g transform={`translate(${margin.left}, ${margin.top})`}>
           <XAxis axis={xAxis} w={innerW} h={innerH} />
           <YAxis axis={yAxis} w={innerW} h={innerH} />
           <g clipPath={`url(#${clipPathId})`}>{children}</g>
@@ -275,10 +286,11 @@ export type TooltipComponent<X, T> = React.ComponentType<TooltipProps<X, T>>
 export const TooltipContainer = (props: {
   setElem: (e: HTMLElement | null) => void
   pos: TooltipPosition
+  margin: Margin
   className?: string
   children: React.ReactNode
 }) => {
-  const { setElem, pos, className, children } = props
+  const { setElem, pos, margin, className, children } = props
   return (
     <div
       ref={setElem}
@@ -286,7 +298,10 @@ export const TooltipContainer = (props: {
         className,
         'pointer-events-none absolute z-10 whitespace-pre rounded border border-gray-200 bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm'
       )}
-      style={{ margin: MARGIN_STYLE, ...pos }}
+      style={{
+        margin: `${margin.top}px ${margin.right}px ${margin.bottom}px ${margin.left}px`,
+        ...pos,
+      }}
     >
       {children}
     </div>

web/components/charts/stats.tsx

@@ -6,9 +6,13 @@ import dayjs from 'dayjs'
 import { formatPercent } from 'common/util/format'
 import { Row } from '../layout/row'
 import { HistoryPoint, SingleValueHistoryChart } from './generic-charts'
-import { TooltipProps, MARGIN_X, MARGIN_Y } from './helpers'
+import { TooltipProps } from './helpers'
 import { SizedContainer } from 'web/components/sized-container'
 
+const MARGIN = { top: 20, right: 10, bottom: 20, left: 40 }
+const MARGIN_X = MARGIN.left + MARGIN.right
+const MARGIN_Y = MARGIN.top + MARGIN.bottom
+
 const getPoints = (startDate: number, dailyValues: number[]) => {
   const startDateDayJs = dayjs(startDate)
   return dailyValues.map((y, i) => ({
@@ -63,6 +67,7 @@ export function DailyChart(props: {
         <SingleValueHistoryChart
           w={width}
           h={height}
+          margin={MARGIN}
           xScale={scaleTime([minDate, maxDate], [0, width - MARGIN_X])}
           yScale={scaleLinear([0, maxValue], [height - MARGIN_Y, 0])}
           yKind={pct ? 'percent' : 'amount'}