Show x value in numeric graph's tooltip

web/components/analytics/charts.tsx

@@ -114,17 +114,11 @@ export function DailyPercentChart(props: {
 function Tooltip(props: { point: Point }) {
   const { point } = props
   return (
-    <Col
+    <Col className="border border-gray-300 bg-white py-2 px-3">
-      className="border bg-white py-1 px-3 "
-      style={{
-        border: '1px solid #ccc',
-      }}
-    >
       <div
-        key={point.id}
+        className="pb-1"
         style={{
           color: point.serieColor,
-          padding: '3px 0',
         }}
       >
         <strong>{point.serieId}</strong> {point.data.yFormatted}

web/components/contract/numeric-graph.tsx

@@ -1,11 +1,13 @@
 import { DatumValue } from '@nivo/core'
-import { ResponsiveLine } from '@nivo/line'
+import { Point, ResponsiveLine } from '@nivo/line'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
 import { memo } from 'react'
 import { range } from 'lodash'
 import { getDpmOutcomeProbabilities } from '../../../common/calculate-dpm'
 import { NumericContract } from '../../../common/contract'
 import { useWindowSize } from '../../hooks/use-window-size'
+import { Col } from '../layout/col'
+import { formatLargeNumber } from 'common/util/format'
 
 export const NumericGraph = memo(function NumericGraph(props: {
   contract: NumericContract
@@ -62,6 +64,10 @@ export const NumericGraph = memo(function NumericGraph(props: {
         colors={{ datum: 'color' }}
         pointSize={0}
         enableSlices="x"
+        sliceTooltip={({ slice }) => {
+          const point = slice.points[0]
+          return <Tooltip point={point} />
+        }}
         enableGridX={!!width && width >= 800}
         enableArea
         margin={{ top: 20, right: 28, bottom: 22, left: 50 }}
@@ -74,3 +80,20 @@ function formatPercent(y: DatumValue) {
   const p = Math.round(+y * 100) / 100
   return `${p}%`
 }
+
+function Tooltip(props: { point: Point }) {
+  const { point } = props
+  return (
+    <Col className="border border-gray-300 bg-white py-2 px-3">
+      <div
+        className="pb-1"
+        style={{
+          color: point.serieColor,
+        }}
+      >
+        <strong>{point.serieId}</strong> {point.data.yFormatted}
+      </div>
+      <div>{formatLargeNumber(+point.data.x)}</div>
+    </Col>
+  )
+}