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