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

Better tooltip bisection

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-26 17:21:45 -07:00
parent 1a40e60012
commit 55204cf8a8
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
import { useMemo, useRef, useCallback } from 'react'
import { useRef, useCallback } from 'react'
import {
axisBottom,
axisLeft,
bisectCenter,
bisector,
curveLinear,
curveStepAfter,
pointer,
@ -188,7 +188,6 @@ export const SingleValueHistoryChart = (props: {
const py0 = yScale(0)
const py1 = useCallback((p: HistoryPoint) => yScale(p[1]), [yScale])
const dates = useMemo(() => data.map(([d]) => d), [data])
const [start, end] = xScale.domain()
const formatX = getFormatterForDateRange(start, end)
const formatY = (n: number) => (pct ? formatPct(n, 0) : formatLargeNumber(n))
@ -201,12 +200,13 @@ export const SingleValueHistoryChart = (props: {
.tickValues(tickValues)
.tickFormat(formatY)
const dateBisector = bisector((p: HistoryPoint) => p[0])
const onMouseOver = useEvent((event: React.PointerEvent) => {
const tt = tooltipRef.current
if (tt != null) {
const [mouseX, mouseY] = pointer(event)
const date = xScale.invert(mouseX)
const [_, prob] = data[bisectCenter(dates, date)]
const [_, prob] = data[dateBisector.center(data, date)]
tt.innerHTML = `<strong>${formatY(prob)}</strong> ${formatX(date)}`
tt.style.display = 'block'
tt.style.top = mouseY - 10 + 'px'