diff --git a/packages/app-staking/src/Query/Validator.tsx b/packages/app-staking/src/Query/Validator.tsx index 37e595bd8c0..2fd3cd2c75e 100644 --- a/packages/app-staking/src/Query/Validator.tsx +++ b/packages/app-staking/src/Query/Validator.tsx @@ -30,6 +30,7 @@ type LineData = LineDataEntry[]; interface SplitEntry { colors: string[]; label: string; + tooltip: string; value: number; } @@ -70,16 +71,25 @@ function extractSplit (values: [Hash, Exposure][], validatorId: string): SplitDa return null; } + const currency = formatBalance.getDefaults().unit; + return [{ accountId: validatorId, isOwn: true, value: last.own.unwrap() }] .concat(last.others.map(({ who, value }): { accountId: string; isOwn: boolean; value: Balance } => ({ accountId: who.toString(), isOwn: false, value: value.unwrap() }))) .sort((a, b): number => b.value.cmp(a.value)) - .map(({ accountId, isOwn, value }): SplitEntry => ({ - colors: isOwn ? COLORS_MINE : COLORS_OTHER, - label: toShortAddress(accountId), - value: value.muln(10000).div(total).toNumber() / 100 - })); + .map(({ accountId, isOwn, value }): SplitEntry => { + const label = toShortAddress(accountId); + const percentage = value.muln(10000).div(total).toNumber() / 100; + const tooltip = `${formatBalance(value, { forceUnit: '-', withSi: false })} ${currency} (${percentage.toFixed(2)}%)`; + + return { + colors: isOwn ? COLORS_MINE : COLORS_OTHER, + label, + tooltip, + value: percentage + }; + }); } function extractEraSlash (validatorId: string, slashes: Slash[]): BN { diff --git a/packages/react-components/src/Chart/HorizBar.tsx b/packages/react-components/src/Chart/HorizBar.tsx index c9aeca5cb7a..5bc9d2502a4 100644 --- a/packages/react-components/src/Chart/HorizBar.tsx +++ b/packages/react-components/src/Chart/HorizBar.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ // Copyright 2017-2019 @polkadot/react-components authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -13,6 +14,7 @@ import { bnToBn, isNumber } from '@polkadot/util'; interface Value { colors: string[]; label: string; + tooltip?: string; value: number | BN; } @@ -30,6 +32,10 @@ interface State { jsonValues?: string; } +interface TooltipItem { + index: number; +} + interface Config { labels: string[]; datasets: { @@ -76,6 +82,12 @@ function calculateOptions (aspectRatio: number, values: Value[], jsonValues: str ? { beginAtZero: true, max } : { display: false } }] + }, + tooltips: { + callbacks: { + label: (item: TooltipItem, _: any): string => + values[item.index].tooltip || values[item.index].label + } } }, jsonValues