Refactor transaction graphics (#404)

* fix(FE): refactor transaction graphics

* fix(FE): remove console log

* fix(FE): code review changes

webapp/src/components/TransactionsChart.js

@@ -11,8 +11,7 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.white,
     padding: theme.spacing(2),
     borderRadius: theme.spacing(1),
-    boxShadow:
-      '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)'
+    boxShadow: theme.shadows[8]
   },
   description: {
     fontWeight: 'normal'

webapp/src/components/TransactionsLineChart.js

@@ -0,0 +1,117 @@
+import React from 'react'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+import { makeStyles } from '@material-ui/styles'
+import { useTheme } from '@material-ui/core/styles'
+import Divider from '@material-ui/core/Divider'
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import {
+  LineChart,
+  Line,
+  YAxis,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from 'recharts'
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    backgroundColor: theme.palette.white,
+    padding: theme.spacing(2),
+    borderRadius: theme.spacing(1),
+    boxShadow: theme.shadows[8]
+  },
+  description: {
+    fontWeight: 'normal'
+  }
+}))
+
+const CustomTooltip = ({ active, payload }) => {
+  const classes = useStyles()
+  const { t } = useTranslation('transactionsChartComponent')
+
+  if (active && payload && payload?.length > 0) {
+    return (
+      <Box className={classes.wrapper}>
+        <Typography variant="h6">{t('transactions')}</Typography>
+        <Divider />
+        <Typography variant="subtitle1">{t('perSecond')}</Typography>
+        <Typography variant="subtitle2">
+          {t('amount')}:{' '}
+          <span className={classes.description}> {payload[0].payload.tps}</span>
+        </Typography>
+        <Typography variant="subtitle2">
+          {t('blocks')}:{' '}
+          <span className={classes.description}>
+            {' '}
+            {payload[0].payload.blocks.tps.join(', ')}
+          </span>
+        </Typography>
+        <Typography variant="subtitle1">{t('perBlock')}</Typography>
+        <Typography variant="subtitle2">
+          {t('amount')}:{' '}
+          <span className={classes.description}> {payload[0].payload.tpb}</span>
+        </Typography>
+        <Typography variant="subtitle2">
+          {t('blocks')}:{' '}
+          <span className={classes.description}>
+            {' '}
+            {payload[0].payload.blocks.tpb.join(', ')}
+          </span>
+        </Typography>
+      </Box>
+    )
+  }
+
+  return null
+}
+
+CustomTooltip.propTypes = {
+  active: PropTypes.bool,
+  payload: PropTypes.array
+}
+
+const TransactionsChart = ({ data }) => {
+  const theme = useTheme()
+  const { t } = useTranslation('transactionsChartComponent')
+
+  return (
+    <ResponsiveContainer width="100%" maxHeight={300} aspect={1.6}>
+      <LineChart
+        data={data}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5
+        }}
+      >
+        <YAxis />
+        <Tooltip content={<CustomTooltip />} />
+        <Legend iconType="circle" wrapperStyle={{ bottom: '0' }} />
+        <Line
+          type="monotone"
+          dataKey="tps"
+          name={t('transactionsPerSecond')}
+          stroke={theme.palette.primary.main}
+          activeDot={{ r: 8 }}
+          isAnimationActive={false}
+        />
+        <Line
+          type="monotone"
+          dataKey="tpb"
+          name={t('transactionsPerBlock')}
+          stroke={theme.palette.success.main}
+          isAnimationActive={false}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
+
+TransactionsChart.propTypes = {
+  data: PropTypes.array
+}
+
+export default TransactionsChart

webapp/src/language/en.json

@@ -75,6 +75,7 @@
     "bpSchedule": "Block Producer Schedule",
     "transPerSecond": "Transactions Per Second",
     "transPerBlock": "Transactions Per Block",
+    "transactions": "Transactions",
     "transactionsHistory": "Transactions History"
   },
   "networkInfoRoute": {
@@ -194,5 +195,14 @@
   },
   "contractActionFormComponent": {
     "executeTransaction": "Execute Transaction"
+  },
+  "transactionsChartComponent": {
+    "blocks": "Blocks",
+    "transactions": "Transactions",
+    "transactionsPerSecond": "Transactions per Second",
+    "transactionsPerBlock": "Transactions per Block",
+    "perSecond": "Per Second",
+    "perBlock": "Per Block",
+    "amount": "Amount"
   }
 }

webapp/src/models/eos.js

@@ -31,7 +31,7 @@ export default {
     updateTransactionsStats(state, item) {
       let tpb = state.tpb
 
-      if (state.tpb.length >= 10) {
+      if (state.tpb.length >= 30) {
         tpb = state.tpb.splice(1, state.tpb.length)
       }
 
@@ -53,7 +53,7 @@ export default {
 
       let tps = state.tps
 
-      if (state.tps.length >= 10) {
+      if (state.tps.length >= 30) {
         tps = state.tps.splice(1, state.tps.length)
       }
 

webapp/src/routes/Home.js

@@ -14,7 +14,9 @@ const Grid = lazy(() => import('@material-ui/core/Grid'))
 const Typography = lazy(() => import('@material-ui/core/Typography'))
 const LinearProgress = lazy(() => import('@material-ui/core/LinearProgress'))
 const ProducersChart = lazy(() => import('../components/ProducersChart'))
-const TransactionsChart = lazy(() => import('../components/TransactionsChart'))
+const TransactionsLineChart = lazy(() =>
+  import('../components/TransactionsLineChart')
+)
 
 const Home = () => {
   const dispatch = useDispatch()
@@ -36,8 +38,29 @@ const Home = () => {
   const tpb = useSelector((state) => state.eos.tpb)
   const scheduleInfo = useSelector((state) => state.eos.schedule)
   const [schedule, setSchedule] = useState({ producers: [] })
+  const [graphicData, setGraphicData] = useState([])
   const { t } = useTranslation('homeRoute')
 
+  useEffect(() => {
+    const majorLength = tps.length > tpb.length ? tps.length : tpb.length
+    const dataModeled = []
+
+    if (!majorLength) return
+
+    for (let index = 0; index < majorLength; index++) {
+      dataModeled.push({
+        tps: tps[index] ? tps[index].transactions : 0,
+        tpb: tpb[index] ? tpb[index].transactions : 0,
+        blocks: {
+          tps: tps[index] ? tps[index].blocks : [0],
+          tpb: tpb[index] ? tpb[index].blocks : [0]
+        }
+      })
+    }
+
+    setGraphicData(dataModeled)
+  }, [tps, tpb])
+
   useEffect(() => {
     dispatch.eos.startTrackingInfo({ interval: 0.5 })
     dispatch.eos.startTrackingProducerSchedule({ interval: 60 })
@@ -210,29 +233,17 @@ const Home = () => {
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={12} md={4}>
-          <Grid container spacing={2}>
-            <Grid item xs={12}>
-              <Card>
-                <CardContent>
-                  <Typography component="p" variant="h6">
-                    {t('transPerSecond')}
-                  </Typography>
-                  <TransactionsChart data={tps} />
-                </CardContent>
-              </Card>
-            </Grid>
-            <Grid item xs={12}>
-              <Card>
-                <CardContent>
-                  <Typography component="p" variant="h6">
-                    {t('transPerBlock')}
-                  </Typography>
-                  <TransactionsChart data={tpb} />
-                </CardContent>
-              </Card>
-            </Grid>
-          </Grid>
+      </Grid>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Card>
+            <CardContent>
+              <Typography component="p" variant="h6">
+                {t('transactions')}
+              </Typography>
+              <TransactionsLineChart data={graphicData} />
+            </CardContent>
+          </Card>
         </Grid>
       </Grid>
     </Grid>