From 1c73bba9084238091bdfdd902bbd786ea31acff0 Mon Sep 17 00:00:00 2001 From: James Grugett Date: Sun, 22 May 2022 17:48:02 -0500 Subject: [PATCH] Show x value in numeric graph's tooltip --- web/components/analytics/charts.tsx | 10 ++------- web/components/contract/numeric-graph.tsx | 25 ++++++++++++++++++++++- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/web/components/analytics/charts.tsx b/web/components/analytics/charts.tsx index 9e156a5b..2f987d58 100644 --- a/web/components/analytics/charts.tsx +++ b/web/components/analytics/charts.tsx @@ -114,17 +114,11 @@ export function DailyPercentChart(props: { function Tooltip(props: { point: Point }) { const { point } = props return ( - +
{point.serieId} {point.data.yFormatted} diff --git a/web/components/contract/numeric-graph.tsx b/web/components/contract/numeric-graph.tsx index 4343e4c8..621c0e29 100644 --- a/web/components/contract/numeric-graph.tsx +++ b/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 + }} 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 ( + +
+ {point.serieId} {point.data.yFormatted} +
+
{formatLargeNumber(+point.data.x)}
+ + ) +}