Implement Rewards Chart on validator page

packages/frontend/src/app/validator/[hash]/BlocksChart.js

@@ -1,104 +1,46 @@
-import { useState, useEffect, useRef } from 'react'
-import useResizeObserver from '@react-hook/resize-observer'
-import { fetchHandlerSuccess, fetchHandlerError, getDaysBetweenDates, getDynamicRange } from '../../../util'
-import { LineChart, TimeframeSelector } from './../../../components/charts'
 import * as Api from '../../../util/Api'
-import { ErrorMessageBlock } from '../../../components/Errors'
+import { useState, useEffect } from 'react'
+import { fetchHandlerSuccess, fetchHandlerError, getDaysBetweenDates } from '../../../util'
+import TabsChartBlock from '../../../components/charts/TabsChartBlock'
+import { defaultChartConfig } from '../../../components/charts/config'
 
-const chartConfig = {
-  timespan: {
-    defaultIndex: 3,
-    values: [
-      {
-        label: '24 hours',
-        range: getDynamicRange(24 * 60 * 60 * 1000)
-      },
-      {
-        label: '3 days',
-        range: getDynamicRange(3 * 24 * 60 * 60 * 1000)
-      },
-      {
-        label: '1 week',
-        range: getDynamicRange(7 * 24 * 60 * 60 * 1000)
-      },
-      {
-        label: '1 Month',
-        range: getDynamicRange(30 * 24 * 60 * 60 * 1000)
-      }
-    ]
-  }
-}
-
-export default function BlocksChart ({ hash, isActive }) {
+export default function BlocksChart ({ hash, isActive, loading }) {
   const [blocksHistory, setBlocksHistory] = useState({ data: {}, loading: true, error: false })
-  const [timespan, setTimespan] = useState(chartConfig.timespan.values[chartConfig.timespan.defaultIndex])
-  const [customRange, setCustomRange] = useState({ start: null, end: null })
-  const [menuIsOpen, setMenuIsOpen] = useState(false)
-  const TimeframeMenuRef = useRef(null)
-  const [selectorHeight, setSelectorHeight] = useState(0)
+  const [timespan, setTimespan] = useState(defaultChartConfig.timespan.values[defaultChartConfig.timespan.defaultIndex])
 
   useEffect(() => {
-    const { start = null, end = null } = timespan.range
+    const { start = null, end = null } = timespan?.range
     if (!start || !end) return
 
     setBlocksHistory(state => ({ ...state, loading: true }))
 
     Api.getBlocksStatsByValidator(hash, start, end)
       .then(res => fetchHandlerSuccess(setBlocksHistory, { resultSet: res }))
       .catch(err => fetchHandlerError(setBlocksHistory, err))
-  }, [timespan, customRange])
-
-  const updateMenuHeight = () => {
-    if (menuIsOpen && TimeframeMenuRef?.current) {
-      const element = TimeframeMenuRef.current
-      const height = element.getBoundingClientRect().height
-      setSelectorHeight(height)
-    } else {
-      setSelectorHeight(0)
-    }
-  }
-
-  useEffect(updateMenuHeight, [menuIsOpen, TimeframeMenuRef])
-
-  useResizeObserver(TimeframeMenuRef, updateMenuHeight)
-
-  if (blocksHistory.error || (!blocksHistory.loading && !blocksHistory.data?.resultSet)) {
-    return (<ErrorMessageBlock/>)
-  }
+  }, [timespan, hash])
 
   return (
-    <div style={{ height: menuIsOpen ? `${Math.max(selectorHeight, 350)}px` : '350px' }} className={'TabsChart'}>
-      <TimeframeSelector
-        menuRef={TimeframeMenuRef}
-        className={'TabsChart__TimeframeSelector'}
-        config={chartConfig}
-        changeCallback={setTimespan}
-        isActive={isActive}
-        openStateCallback={setMenuIsOpen}
-        customRangeCallback={(start, end) => setCustomRange({ start, end })}
-      />
-      <div className={`TabsChart__ChartContiner ${menuIsOpen ? 'TabsChart__ChartContiner--Hidden' : ''}`}>
-        <LineChart
-          data={blocksHistory.data?.resultSet?.map((item) => ({
-            x: new Date(item.timestamp),
-            y: item.data.blocksCount
-          })) || []}
-          dataLoading={blocksHistory.loading}
-          timespan={timespan.range}
-          xAxis={{
-            type: (() => {
-              if (getDaysBetweenDates(timespan.range.start, timespan.range.end) > 7) return { axis: 'date' }
-              if (getDaysBetweenDates(timespan.range.start, timespan.range.end) > 3) return { axis: 'date', tooltip: 'datetime' }
-              return { axis: 'time' }
-            })()
-          }}
-          yAxis={{
-            type: 'number',
-            abbreviation: 'blocks'
-          }}
-          height={'350px'}
-        />
-      </div>
-    </div>
+    <TabsChartBlock
+      menuIsActive={isActive}
+      timespanChangeCallback={setTimespan}
+      timespan={timespan}
+      data={blocksHistory.data?.resultSet?.map((item) => ({
+        x: new Date(item.timestamp),
+        y: item.data.blocksCount
+      })) || []}
+      loading={loading || blocksHistory.loading}
+      error={!hash || blocksHistory.error}
+      xAxis={{
+        type: (() => {
+          if (getDaysBetweenDates(timespan.range.start, timespan.range.end) > 7) return { axis: 'date' }
+          if (getDaysBetweenDates(timespan.range.start, timespan.range.end) > 3) return { axis: 'date', tooltip: 'datetime' }
+          return { axis: 'time' }
+        })()
+      }}
+      yAxis={{
+        type: 'number',
+        abbreviation: 'blocks'
+      }}
+    />
   )
 }

packages/frontend/src/app/validator/[hash]/RewardsChart.js

@@ -0,0 +1,46 @@
+import * as Api from '../../../util/Api'
+import { useState, useEffect } from 'react'
+import { fetchHandlerSuccess, fetchHandlerError, getDaysBetweenDates } from '../../../util'
+import TabsChartBlock from '../../../components/charts/TabsChartBlock'
+import { defaultChartConfig } from '../../../components/charts/config'
+
+export default function RewardsChart ({ hash, isActive, loading }) {
+  const [rewardsHistory, setRewardsHistory] = useState({ data: {}, loading: true, error: false })
+  const [timespan, setTimespan] = useState(defaultChartConfig.timespan.values[defaultChartConfig.timespan.defaultIndex])
+
+  useEffect(() => {
+    const { start = null, end = null } = timespan?.range
+    if (!start || !end) return
+
+    setRewardsHistory(state => ({ ...state, loading: true }))
+
+    Api.getRewardsStatsByValidator(hash, start, end)
+      .then(res => fetchHandlerSuccess(setRewardsHistory, { resultSet: res }))
+      .catch(err => fetchHandlerError(setRewardsHistory, err))
+  }, [timespan, hash])
+
+  return (
+    <TabsChartBlock
+      menuIsActive={isActive}
+      timespanChangeCallback={setTimespan}
+      timespan={timespan}
+      data={rewardsHistory.data?.resultSet?.map((item) => ({
+        x: new Date(item.timestamp),
+        y: item.data.reward
+      })) || []}
+      loading={loading || rewardsHistory.loading}
+      error={!hash || rewardsHistory.error}
+      xAxis={{
+        type: (() => {
+          if (getDaysBetweenDates(timespan.range.start, timespan.range.end) > 7) return { axis: 'date' }
+          if (getDaysBetweenDates(timespan.range.start, timespan.range.end) > 3) return { axis: 'date', tooltip: 'datetime' }
+          return { axis: 'time' }
+        })()
+      }}
+      yAxis={{
+        type: 'number',
+        abbreviation: 'Credits'
+      }}
+    />
+  )
+}

packages/frontend/src/app/validator/[hash]/Validator.js

@@ -9,6 +9,7 @@ import { ErrorMessageBlock } from '../../../components/Errors'
 import BlocksList from '../../../components/blocks/BlocksList'
 import TransactionsList from '../../../components/transactions/TransactionsList'
 import BlocksChart from './BlocksChart'
+import RewardsChart from './RewardsChart'
 import Link from 'next/link'
 import { Identifier, DateBlock, Endpoint, IpAddress, InfoLine, Credits } from '../../../components/data'
 import { ValueContainer, PageDataContainer, InfoContainer } from '../../../components/ui/containers'
@@ -412,19 +413,22 @@ function Validator ({ hash }) {
             <Tabs onChange={(index) => setActiveChartTab(index)} index={activeChartTab}>
               <TabList>
                 <Tab>Proposed Blocks</Tab>
-                <Tab isDisabled>Reward Earned</Tab>
+                <Tab>Reward Earned</Tab>
               </TabList>
               <TabPanels>
                   <TabPanel className={'ValidatorPage__ChartTab'} position={'relative'}>
                     <BlocksChart
-                      blockBorders={false}
                       hash={hash}
                       isActive={activeChartTab === 0}
                       loading={validator.loading}
                     />
                   </TabPanel>
                   <TabPanel className={'ValidatorPage__ChartTab'} position={'relative'}>
-                    Reward Earned
+                    <RewardsChart
+                      hash={hash}
+                      isActive={activeChartTab === 1}
+                      loading={validator.loading}
+                    />
                   </TabPanel>
               </TabPanels>
             </Tabs>

packages/frontend/src/components/charts/TabsChartBlock.js

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import useResizeObserver from '@react-hook/resize-observer'
+import { LineChart, TimeframeSelector } from './'
+import { ErrorMessageBlock } from '../Errors'
+import { defaultChartConfig } from './config'
+import './TabsChartBlock.scss'
+
+export default function TabsChartBlock ({
+  menuIsActive = true,
+  timespanChangeCallback,
+  loading,
+  error,
+  data,
+  xAxis,
+  yAxis,
+  timespan,
+  chartConfig = defaultChartConfig,
+  heightPx = 350
+}) {
+  const [menuIsOpen, setMenuIsOpen] = useState(false)
+  const TimeframeMenuRef = useRef(null)
+  const [selectorHeight, setSelectorHeight] = useState(0)
+
+  const updateMenuHeight = () => {
+    if (menuIsOpen && TimeframeMenuRef?.current) {
+      const element = TimeframeMenuRef.current
+      const height = element.getBoundingClientRect().height
+      setSelectorHeight(height)
+    } else {
+      setSelectorHeight(0)
+    }
+  }
+
+  useEffect(updateMenuHeight, [menuIsOpen, TimeframeMenuRef])
+
+  useResizeObserver(TimeframeMenuRef, updateMenuHeight)
+
+  if (error || (!loading && !data)) {
+    return (<ErrorMessageBlock h={`${heightPx}px`}/>)
+  }
+
+  return (
+    <div
+      className={'TabsChartBlock'}
+      style={{ height: menuIsOpen ? `${Math.max(selectorHeight, heightPx)}px` : `${heightPx}px` }}
+    >
+      <TimeframeSelector
+        menuRef={TimeframeMenuRef}
+        className={'TabsChartBlock__TimeframeSelector'}
+        config={chartConfig}
+        changeCallback={timespanChangeCallback}
+        menuIsActive={menuIsActive}
+        openStateCallback={setMenuIsOpen}
+      />
+      <div className={`TabsChartBlock__ChartContiner ${menuIsOpen ? 'TabsChartBlock__ChartContiner--Hidden' : ''}`}>
+        <LineChart
+          data={data}
+          dataLoading={loading}
+          timespan={timespan}
+          xAxis={xAxis}
+          yAxis={yAxis}
+          height={`${heightPx}px`}
+        />
+      </div>
+    </div>
+  )
+}

packages/frontend/src/styles/components/TabsChart.scss → packages/frontend/src/components/charts/TabsChartBlock.scss

@@ -1,4 +1,5 @@
-.TabsChart {
+.TabsChartBlock {
+  container-type: inline-size;
   height: 100%;
   transition: all .2s;
 
@@ -20,8 +21,8 @@
       top: -36px;
       right: 10px;
     }
-  
-    @media screen and (max-width: 555px) {
+
+    @container (max-width: 500px) {
       &__Button {
         top: 10px;
         right: 12px;

packages/frontend/src/components/charts/TimeframeSelector.js

@@ -1,12 +1,12 @@
 import { useState, useEffect } from 'react'
 import TimeframeMenu from './TimeframeMenu'
 import { Button } from '@chakra-ui/react'
-import { CalendarIcon2, CloseIcon } from '../../components/ui/icons'
+import { CalendarIcon2, CloseIcon } from '../ui/icons'
 import './TimeframeSelector.scss'
 
 export default function TimeframeSelector ({
   config,
-  isActive,
+  menuIsActive,
   changeCallback,
   openStateCallback,
   menuRef,
@@ -22,12 +22,12 @@ export default function TimeframeSelector ({
   }
 
   useEffect(() => {
-    if (!isActive) setMenuIsOpen(false)
-  }, [isActive])
+    if (!menuIsActive) setMenuIsOpen(false)
+  }, [menuIsActive])
 
   useEffect(() => {
     if (typeof openStateCallback === 'function') openStateCallback(menuIsOpen)
-  }, [menuIsOpen])
+  }, [menuIsOpen, openStateCallback])
 
   return (
     <div className={`TimeframeSelector ${menuIsOpen ? 'TimeframeSelector--MenuActive' : ''} ${className || ''}`}>

packages/frontend/src/components/charts/config.js

@@ -0,0 +1,25 @@
+import { getDynamicRange } from '../../util'
+
+export const defaultChartConfig = {
+  timespan: {
+    defaultIndex: 3,
+    values: [
+      {
+        label: '24 hours',
+        range: getDynamicRange(24 * 60 * 60 * 1000)
+      },
+      {
+        label: '3 days',
+        range: getDynamicRange(3 * 24 * 60 * 60 * 1000)
+      },
+      {
+        label: '1 week',
+        range: getDynamicRange(7 * 24 * 60 * 60 * 1000)
+      },
+      {
+        label: '1 Month',
+        range: getDynamicRange(30 * 24 * 60 * 60 * 1000)
+      }
+    ]
+  }
+}