From 5e3fe64683d00046e91e31493b08a1371c9eb95a Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Wed, 28 Sep 2022 20:47:09 -0700
Subject: [PATCH] Jazz up the chart tooltips with avatars

---
 web/components/avatar.tsx                        |  5 +++--
 web/components/charts/contract/binary.tsx        | 12 ++++++++----
 web/components/charts/contract/choice.tsx        |  9 +++++++--
 .../charts/contract/pseudo-numeric.tsx           | 16 +++++++++++-----
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/web/components/avatar.tsx b/web/components/avatar.tsx
index abb67d46..27861909 100644
--- a/web/components/avatar.tsx
+++ b/web/components/avatar.tsx
@@ -8,13 +8,14 @@ export function Avatar(props: {
   username?: string
   avatarUrl?: string
   noLink?: boolean
-  size?: number | 'xs' | 'sm'
+  size?: number | 'xxs' | 'xs' | 'sm'
   className?: string
 }) {
   const { username, noLink, size, className } = props
   const [avatarUrl, setAvatarUrl] = useState(props.avatarUrl)
   useEffect(() => setAvatarUrl(props.avatarUrl), [props.avatarUrl])
-  const s = size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10
+  const s =
+    size == 'xxs' ? 4 : size == 'xs' ? 6 : size === 'sm' ? 8 : size || 10
   const sizeInPx = s * 4
 
   const onClick =
diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx
index 828fe198..74ac472b 100644
--- a/web/components/charts/contract/binary.tsx
+++ b/web/components/charts/contract/binary.tsx
@@ -20,6 +20,8 @@ import {
   SingleValueHistoryChart,
 } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
+import { Row } from 'web/components/layout/row'
+import { Avatar } from 'web/components/avatar'
 
 const getBetPoints = (bets: Bet[]) => {
   return sortBy(bets, (b) => b.createdTime).map((b) => ({
@@ -30,12 +32,14 @@ const getBetPoints = (bets: Bet[]) => {
 }
 
 const BinaryChartTooltip = (props: SingleValueHistoryTooltipProps<Bet>) => {
-  const { x, y, xScale } = props
+  const { x, y, xScale, datum } = props
   const [start, end] = xScale.domain()
   return (
-    <span className="text-sm">
-      <strong>{formatPct(y)}</strong> {formatDateInRange(x, start, end)}
-    </span>
+    <Row className="items-center gap-2 text-sm">
+      {datum && <Avatar size="xs" avatarUrl={datum.userAvatarUrl} />}
+      <strong>{formatPct(y)}</strong>
+      <span>{formatDateInRange(x, start, end)}</span>
+    </Row>
   )
 }
 
diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx
index 25e5e9ec..584d3d7c 100644
--- a/web/components/charts/contract/choice.tsx
+++ b/web/components/charts/contract/choice.tsx
@@ -23,6 +23,8 @@ import {
   MultiValueHistoryTooltipProps,
 } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
+import { Row } from 'web/components/layout/row'
+import { Avatar } from 'web/components/avatar'
 
 // thanks to https://observablehq.com/@jonhelfman/optimal-orders-for-choosing-categorical-colors
 const CATEGORY_COLORS = [
@@ -160,7 +162,7 @@ export const ChoiceContractChart = (props: {
 
   const ChoiceTooltip = useMemo(
     () => (props: MultiValueHistoryTooltipProps<Bet>) => {
-      const { x, y, xScale } = props
+      const { x, y, xScale, datum } = props
       const [start, end] = xScale.domain()
       const legendItems = sortBy(
         y.map((p, i) => ({
@@ -173,7 +175,10 @@ export const ChoiceContractChart = (props: {
       ).slice(0, 10)
       return (
         <div>
-          <p>{formatDateInRange(x, start, end)}</p>
+          <Row className="items-center gap-2">
+            {datum && <Avatar size="xxs" avatarUrl={datum.userAvatarUrl} />}
+            <span>{formatDateInRange(x, start, end)}</span>
+          </Row>
           <Legend className="max-w-xs text-sm" items={legendItems} />
         </div>
       )
diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx
index c13c7e5e..56359bc7 100644
--- a/web/components/charts/contract/pseudo-numeric.tsx
+++ b/web/components/charts/contract/pseudo-numeric.tsx
@@ -21,6 +21,8 @@ import {
   SingleValueHistoryTooltipProps,
 } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
+import { Row } from 'web/components/layout/row'
+import { Avatar } from 'web/components/avatar'
 
 // mqp: note that we have an idiosyncratic version of 'log scale'
 // contracts. the values are stored "linearly" and can include zero.
@@ -41,13 +43,17 @@ const getBetPoints = (bets: Bet[], scaleP: (p: number) => number) => {
   }))
 }
 
-const PseudoNumericChartTooltip = (props: SingleValueHistoryTooltipProps) => {
-  const { x, y, xScale } = props
+const PseudoNumericChartTooltip = (
+  props: SingleValueHistoryTooltipProps<Bet>
+) => {
+  const { x, y, xScale, datum } = props
   const [start, end] = xScale.domain()
   return (
-    <span className="text-sm">
-      <strong>{formatLargeNumber(y)}</strong> {formatDateInRange(x, start, end)}
-    </span>
+    <Row className="items-center gap-2 text-sm">
+      {datum && <Avatar size="xs" avatarUrl={datum.userAvatarUrl} />}
+      <strong>{formatLargeNumber(y)}</strong>
+      <span>{formatDateInRange(x, start, end)}</span>
+    </Row>
   )
 }