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

Tighter chart tooltips

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-27 16:36:52 -07:00
parent 5ff21a65f7
commit 7718c8b910
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,7 +156,7 @@ export const SingleValueDistributionChart = (props: {
return (
<div className="relative">
{mouseState && (
<ChartTooltip {...mouseState}>
<ChartTooltip className="text-sm" {...mouseState}>
<strong>{fmtY(mouseState.p[1])}</strong> {fmtX(mouseState.p[0])}
</ChartTooltip>
)}
@ -362,7 +362,7 @@ export const SingleValueHistoryChart = (props: {
return (
<div className="relative">
{mouseState && (
<ChartTooltip {...mouseState}>
<ChartTooltip className="text-sm" {...mouseState}>
<strong>{fmtY(mouseState.p[1])}</strong> {fmtX(mouseState.p[0])}
</ChartTooltip>
)}

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

@ -9,8 +9,9 @@ import {
line,
select,
} from 'd3'
import dayjs from 'dayjs'
import { nanoid } from 'nanoid'
import dayjs from 'dayjs'
import clsx from 'clsx'
import { Contract } from 'common/contract'
@ -180,12 +181,15 @@ export const SVGChart = <X, Y>(props: {
export type TooltipPosition = { top: number; left: number }
export const ChartTooltip = (
props: TooltipPosition & { children: React.ReactNode }
props: TooltipPosition & { className?: string; children: React.ReactNode }
) => {
const { top, left, children } = props
const { top, left, className, children } = props
return (
<div
className="pointer-events-none absolute z-10 whitespace-pre rounded border-2 border-black bg-white/90 p-2"
className={clsx(
className,
'pointer-events-none absolute z-10 whitespace-pre rounded border-2 border-black bg-white/90 p-2'
)}
style={{ top, left }}
>
{children}