feat: change charts format (#18)

* feat: change charts format * ignore zero values
tari-project · Oct 7, 2024 · aac7296 · aac7296
1 parent 40cdec1
commit aac7296
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 19 deletions.
diff --git a/src/routes/BlockExplorer.tsx b/src/routes/BlockExplorer.tsx
@@ -76,13 +76,25 @@ function BlockExplorerPage() {
       >
         <GradientPaper>
           <InnerHeading>Block Times (Minutes)</InnerHeading>
-          <BlockTimes type="RandomX" />
-          <BlockTimes type="Sha3" />
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <BlockTimes type="RandomX" />
+            </Grid>
+            <Grid item xs={12}>
+              <BlockTimes type="Sha3" />
+            </Grid>
+          </Grid>
         </GradientPaper>
         <GradientPaper>
           <InnerHeading>Hash Rates</InnerHeading>
-          <HashRates type="RandomX" />
-          <HashRates type="Sha3" />
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <HashRates type="RandomX" />
+            </Grid>
+            <Grid item xs={12}>
+              <HashRates type="Sha3" />
+            </Grid>
+          </Grid>
         </GradientPaper>
         <GradientPaper>
           <VNTable />

diff --git a/src/routes/Charts/BlockTimes.tsx b/src/routes/Charts/BlockTimes.tsx
@@ -26,12 +26,15 @@ import { chartColor } from '../../theme/colors';
 import { useAllBlocks } from '../../api/hooks/useBlocks';
 
 interface BlockTimesProps {
-  type: 'RandomX' | 'Sha3' | 'All';
+  type: 'RandomX' | 'Sha3';
 }
 
 const BlockTimes: React.FC<BlockTimesProps> = ({ type }) => {
   const { data } = useAllBlocks();
   const theme = useTheme();
+  const tip = data?.tipInfo?.metadata.best_block_height;
+  const noOfBlocks = 60;
+  const zoomAmount = 30;
 
   const name = type;
   const colorMap: { [key: string]: string } = {
@@ -48,7 +51,13 @@ const BlockTimes: React.FC<BlockTimesProps> = ({ type }) => {
 
   const color = colorMap[type] || colorMap['default'];
   const blockTimes = blockTimesMap[type] || blockTimesMap['default'];
-  const blockNumbers = data?.headers.map((header: any) => header.height);
+
+  const blockNumbers = new Array();
+  let blockItem = parseInt(tip, 10);
+  for (let i = 1; i <= noOfBlocks; i++) {
+    blockNumbers.push(blockItem);
+    blockItem = blockItem - 1;
+  }
 
   function generateDataArray(amount: number) {
     const dataArray = [];
@@ -86,14 +95,13 @@ const BlockTimes: React.FC<BlockTimesProps> = ({ type }) => {
     grid: {
       left: '2%',
       right: '2%',
-      bottom: '15%',
+      bottom: '20%',
       top: '5%',
       containLabel: true,
     },
     xAxis: {
       type: 'category',
-      boundaryGap: false,
-      data: generateDataArray(20),
+      data: generateDataArray(noOfBlocks),
       inverse: true,
       axisLine: {
         lineStyle: {
@@ -108,6 +116,7 @@ const BlockTimes: React.FC<BlockTimesProps> = ({ type }) => {
     },
     yAxis: {
       type: 'value',
+      boundaryGap: ['10%', '10%'],
       axisLine: {
         lineStyle: {
           color: theme.palette.text.primary,
@@ -122,6 +131,18 @@ const BlockTimes: React.FC<BlockTimesProps> = ({ type }) => {
         formatter: (value: number) => value + 'm',
       },
     },
+    dataZoom: [
+      {
+        type: 'slider',
+        start: 0,
+        end: (zoomAmount / noOfBlocks) * 100,
+      },
+      {
+        type: 'inside',
+        start: 0,
+        end: (zoomAmount / noOfBlocks) * 100,
+      },
+    ],
     series: [
       {
         name,

diff --git a/src/routes/Charts/HashRates.tsx b/src/routes/Charts/HashRates.tsx
@@ -33,6 +33,9 @@ interface HashRatesProps {
 const HashRates: React.FC<HashRatesProps> = ({ type }) => {
   const { data } = useAllBlocks();
   const theme = useTheme();
+  const tip = data?.tipInfo?.metadata.best_block_height;
+  const noOfBlocks = 180;
+  const zoomAmount = 30;
 
   const name = type;
   const colorMap: { [key: string]: string } = {
@@ -44,12 +47,18 @@ const HashRates: React.FC<HashRatesProps> = ({ type }) => {
   const hashRatesMap: { [key: string]: any[] } = {
     RandomX: data?.moneroHashRates,
     Sha3: data?.shaHashRates,
-    default: data?.blockTimes || [],
   };
 
   const color = colorMap[type] || colorMap['default'];
-  const blockTimes = hashRatesMap[type] || hashRatesMap['default'];
-  const blockNumbers = data?.headers.map((header: any) => header.height);
+  const blockTimes = hashRatesMap[type] || [];
+  const blockNumbers = Array.from(
+    { length: noOfBlocks },
+    (_, i) => parseInt(tip, 10) - i
+  );
+  const minValue = blockTimes.length
+    ? Math.min(...blockTimes.filter((item) => item !== 0))
+    : 0;
+  const minValueWithMargin = minValue * 0.98;
 
   function generateDataArray(amount: number) {
     const dataArray = [];
@@ -66,7 +75,7 @@ const HashRates: React.FC<HashRatesProps> = ({ type }) => {
       formatter: (params: any) => {
         const tooltipContent = params.map((param: any) => {
           const seriesName = param.seriesName;
-          const value = formatHash(param.value);
+          const value = formatHash(param.value, 2);
           return `${seriesName}: ${value}`;
         });
         const blockNumber = blockNumbers?.[params[0].dataIndex];
@@ -87,14 +96,13 @@ const HashRates: React.FC<HashRatesProps> = ({ type }) => {
     grid: {
       left: '2%',
       right: '2%',
-      bottom: '15%',
+      bottom: '20%',
       top: '5%',
       containLabel: true,
     },
     xAxis: {
       type: 'category',
-      boundaryGap: false,
-      data: generateDataArray(20),
+      data: generateDataArray(noOfBlocks),
       inverse: true,
       axisLine: {
         lineStyle: {
@@ -109,6 +117,8 @@ const HashRates: React.FC<HashRatesProps> = ({ type }) => {
     },
     yAxis: {
       type: 'value',
+      boundaryGap: ['10%', '10%'],
+      min: minValueWithMargin,
       axisLine: {
         lineStyle: {
           color: theme.palette.text.primary,
@@ -120,9 +130,21 @@ const HashRates: React.FC<HashRatesProps> = ({ type }) => {
         },
       },
       axisLabel: {
-        formatter: (value: number) => formatHash(value),
+        formatter: (value: number) => formatHash(value, 2),
       },
     },
+    dataZoom: [
+      {
+        type: 'slider',
+        start: 0,
+        end: (zoomAmount / noOfBlocks) * 100,
+      },
+      {
+        type: 'inside',
+        start: 0,
+        end: (zoomAmount / noOfBlocks) * 100,
+      },
+    ],
     series: [
       {
         name,

diff --git a/src/utils/helpers.tsx b/src/utils/helpers.tsx
@@ -130,14 +130,14 @@ function formatTimestamp(timestamp: any) {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
 
-function formatHash(number: number) {
+function formatHash(number: number, decimals: number = 1) {
   const suffixes = ['', 'K', 'M', 'G', 'T', 'P'];
   let suffixIndex = 0;
   while (number >= 1000 && suffixIndex < suffixes.length - 1) {
     number /= 1000;
     suffixIndex++;
   }
-  return number.toFixed(1) + ' ' + suffixes[suffixIndex] + 'H';
+  return number.toFixed(decimals) + ' ' + suffixes[suffixIndex] + 'H';
 }
 
 export {