From 7718c8b91089cc50bc4681e42c524d73c887157c Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 27 Sep 2022 16:36:52 -0700
Subject: [PATCH] Tighter chart tooltips

---
 web/components/charts/generic-charts.tsx |  4 ++--
 web/components/charts/helpers.tsx        | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx
index 1d9ec6a6..80476cb3 100644
--- a/web/components/charts/generic-charts.tsx
+++ b/web/components/charts/generic-charts.tsx
@@ -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>
       )}
diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx
index a330a4ff..22327742 100644
--- a/web/components/charts/helpers.tsx
+++ b/web/components/charts/helpers.tsx
@@ -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}