Merge pull request #1600 from oasisprotocol/mz/chartTooltip

Show precise balance in chart tooltip
oasisprotocol · Nov 5, 2024 · 5e6bb5e · 5e6bb5e
2 parents 5339b4a + 632e51a
commit 5e6bb5e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/.changelog/1600.bugfix.md b/.changelog/1600.bugfix.md
@@ -0,0 +1 @@
+Show precise balance in chart tooltip
diff --git a/src/app/components/charts/Tooltip.tsx b/src/app/components/charts/Tooltip.tsx
@@ -17,7 +17,7 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
 
 export type Formatters = {
   formatters?: {
-    data?: (value: number) => string
+    data?: (value: number, payload?: { [key: string]: string | number }) => string
     label?: (value: string) => string
   }
 }
@@ -36,7 +36,6 @@ export const TooltipContent = ({
   if (!active || !payload || !payload.length) {
     return null
   }
-
   const { [payload[0].dataKey!]: value, ...rest } = payload[0].payload
   const labelKey = dataLabelKey || Object.keys(rest)[0]
 
@@ -46,7 +45,7 @@ export const TooltipContent = ({
         {formatters?.label ? formatters.label(payload[0].payload[labelKey]) : payload[0].payload[labelKey]}
       </Typography>
       <Typography paragraph={false} sx={{ fontSize: 12, fontWeight: 600 }}>
-        {formatters?.data ? formatters.data(payload[0].value!) : payload[0].value}
+        {formatters?.data ? formatters.data(payload[0].value!, payload[0].payload.payload) : payload[0].value}
       </Typography>
     </StyledPaper>
   )

diff --git a/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx b/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx
@@ -53,17 +53,21 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
     return <ConsensusAccountCardEmptyState label={t('account.noBalances')} />
   }
 
+  // value props have rounding issues. Avoid displaying in text, but they are fine for visualization
   const data = [
     {
       label: t('account.available'),
+      preciseValue: account.available,
       value: Number(account.available),
     },
     {
       label: t('common.staked'),
+      preciseValue: account.delegations_balance,
       value: Number(account.delegations_balance),
     },
     {
       label: t('account.debonding'),
+      preciseValue: account.debonding_delegations_balance,
       value: Number(account.debonding_delegations_balance),
     },
   ]
@@ -88,9 +92,9 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
           data={data}
           dataKey="value"
           formatters={{
-            data: (value: number) =>
+            data: (value, payload) =>
               t('common.valueInToken', {
-                ...getPreciseNumberFormat(value.toString()),
+                ...getPreciseNumberFormat(String(payload!.preciseValue)),
                 ticker: account.ticker,
               }),
             label: (label: string) => label,

diff --git a/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx b/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx
@@ -20,13 +20,16 @@ function chartData(t: TFunction, validator: Validator | undefined) {
     return []
   }
 
+  // value props have rounding issues. Avoid displaying in text, but they are fine for visualization
   return [
     {
       label: t('validator.self'),
+      preciseValue: validator.escrow.self_delegation_balance,
       value: Number(validator.escrow.self_delegation_balance),
     },
     {
       label: t('validator.others'),
+      preciseValue: validator.escrow.self_delegation_balance,
       value: Number(validator.escrow.otherBalance),
     },
   ]
@@ -59,9 +62,9 @@ export const BalanceDistributionCard: FC<BalanceDistributionCardProps> = ({ vali
           data={chartData(t, validator)}
           dataKey="value"
           formatters={{
-            data: (value: number) =>
+            data: (value, payload) =>
               t('common.valueInToken', {
-                ...getPreciseNumberFormat(value.toString()),
+                ...getPreciseNumberFormat(String(payload!.preciseValue)),
                 ticker: validator.ticker,
               }),
             label: (label: string) => label,