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

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

@ -9,8 +9,9 @@ import {
line, line,
select, select,
} from 'd3' } from 'd3'
import dayjs from 'dayjs'
import { nanoid } from 'nanoid' import { nanoid } from 'nanoid'
import dayjs from 'dayjs'
import clsx from 'clsx'
import { Contract } from 'common/contract' import { Contract } from 'common/contract'
@ -180,12 +181,15 @@ export const SVGChart = <X, Y>(props: {
export type TooltipPosition = { top: number; left: number } export type TooltipPosition = { top: number; left: number }
export const ChartTooltip = ( 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 ( return (
<div <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 }} style={{ top, left }}
> >
{children} {children}