Small chart label adjustments (#1888)

* Staking chart opt.

* Small cleanups

* Push  through validatorId in rewards calc

packages/app-staking/src/Query/Validator.tsx

@@ -4,7 +4,7 @@
 
 import { I18nProps } from '@polkadot/react-components/types';
 import { Balance, BlockNumber, Hash, Exposure, SessionIndex } from '@polkadot/types/interfaces';
-import { SessionRewards } from '@polkadot/react-hooks/types';
+import { SessionRewards, Slash } from '@polkadot/react-hooks/types';
 
 import BN from 'bn.js';
 import React, { useContext, useEffect, useState } from 'react';
@@ -87,12 +87,20 @@ function extractSplit (values: [BN, Hash, Exposure][], validatorId: string): Spl
     }));
 }
 
+function extractEraSlash (validatorId: string, slashes: Slash[]): BN {
+  return slashes.reduce((total: BN, { accountId, amount }): BN => {
+    return accountId.eq(validatorId)
+      ? total.sub(amount)
+      : total;
+  }, new BN(0));
+}
+
 function Validator ({ blockCounts, className, currentIndex, stakingRewards, startNumber, t, validatorId }: Props): React.ReactElement<Props> {
   const { api } = useContext(ApiContext);
   const [blocksLabels, setBlocksLabels] = useState<string[]>([]);
   const [blocksChart, setBlocksChart] = useState<LineData | null>(null);
   const [{ rewardsChart, rewardsLabels }, setRewardsInfo] = useState<{ rewardsChart: LineData | null; rewardsLabels: string[] }>({ rewardsChart: null, rewardsLabels: [] });
-  const [splitChart, setSplitInfo] = useState<SplitData | null>(null);
+  const [{ splitChart, splitMax }, setSplitInfo] = useState<{ splitChart: SplitData | null; splitMax: number }>({ splitChart: null, splitMax: 100 });
   const [{ stakeChart, stakeLabels }, setStakeInfo] = useState<{ stakeChart: LineData | null; stakeLabels: string[]}>({ stakeChart: null, stakeLabels: [] });
   const divisor = new BN('1'.padEnd(formatBalance.getDefaults().decimals + 1, '0'));
 
@@ -105,9 +113,10 @@ function Validator ({ blockCounts, className, currentIndex, stakingRewards, star
       });
       const [stakeLabels, stakeChart] = extractStake(values, divisor);
       const splitChart = extractSplit(values, validatorId);
+      const splitMax = splitChart ? Math.min(Math.ceil(splitChart[0].value), 100) : 100;
 
       setStakeInfo({ stakeChart, stakeLabels });
-      setSplitInfo(splitChart);
+      setSplitInfo({ splitChart, splitMax });
     });
   }, []);
 
@@ -116,18 +125,17 @@ function Validator ({ blockCounts, className, currentIndex, stakingRewards, star
     const rewardsChart: LineData = [[]];
 
     stakingRewards.forEach(({ sessionIndex, slashes }): void => {
-      rewardsLabels.push(formatNumber(sessionIndex));
+      // this shows the start of the new era, however rewards are for previous
+      rewardsLabels.push(formatNumber(sessionIndex.subn(1)));
+
+      // calculate and format to 3 decimals
       rewardsChart[0].push(
-        slashes.reduce((total: BN, { accountId, amount }): BN => {
-          return accountId.eq(validatorId)
-            ? total.sub(amount)
-            : total;
-        }, new BN(0)).muln(1000).div(divisor).toNumber() / 1000
+        extractEraSlash(validatorId, slashes).muln(1000).div(divisor).toNumber() / 1000
       );
     });
 
     setRewardsInfo({ rewardsChart, rewardsLabels });
-  }, [stakingRewards]);
+  }, [stakingRewards, validatorId]);
 
   useEffect((): void => {
     setBlocksLabels(
@@ -201,7 +209,7 @@ function Validator ({ blockCounts, className, currentIndex, stakingRewards, star
                 <h1>{t('staker percentages')}</h1>
                 <Chart.HorizBar
                   aspectRatio={2}
-                  max={Math.min(Math.ceil(splitChart[0].value), 100)}
+                  max={splitMax}
                   values={splitChart}
                 />
               </div>