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

Make margins on charts configurable

Browse Source
This commit is contained in:
Marshall Polaris 2022-10-02 22:23:21 -07:00
parent 4ab843d34f
commit 9bddae17bb
7 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

7
web/components/charts/contract/numeric.tsx
View File

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

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

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

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

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

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

@ -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 const MARGIN_X = MARGIN.right + MARGIN.left
export const MARGIN_Y = MARGIN.top + MARGIN.bottom
const MARGIN_STYLE = `${MARGIN.top}px ${MARGIN.right}px ${MARGIN.bottom}px ${MARGIN.left}px`
const MARGIN_XFORM = `translate(${MARGIN.left}, ${MARGIN.top})`
export type Margin = {
top: number
right: number
bottom: number
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 innerH = h - MARGIN_Y
const innerW = w - (margin.left + margin.right)
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>

7
web/components/charts/stats.tsx
View File

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