refactor: ledger chart size

mistakia · Apr 10, 2024 · c20eff9 · c20eff9
1 parent 4c9968c
commit c20eff9
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 82 deletions.
diff --git a/src/views/components/ledger-chart-addresses/ledger-chart-addresses.js b/src/views/components/ledger-chart-addresses/ledger-chart-addresses.js
@@ -25,6 +25,8 @@ echarts.use([
 export default function LedgerChartAddresses({ data, isLoading }) {
   const option = {
     grid: {
+      left: '3%',
+      right: '4%',
       containLabel: true
     },
     legend: {
@@ -120,8 +122,13 @@ export default function LedgerChartAddresses({ data, isLoading }) {
         echarts={echarts}
         option={option}
         showLoading={isLoading}
-        loadingOption={{ maskColor: 'rgba(255, 255, 255, 0)', text: '' }}
-        style={{ width: '100%', height: '400px' }}
+        loadingOption={{
+          maskColor: 'rgba(255, 255, 255, 0)',
+          text: '',
+          spinnerRadius: 24,
+          lineWidth: 2
+        }}
+        style={{ width: '100%', height: '600px' }}
       />
       <div className='ledger__chart-sections'>
         <div className='ledger__chart-section'>

diff --git a/src/views/components/ledger-chart-amounts/ledger-chart-amounts.js b/src/views/components/ledger-chart-amounts/ledger-chart-amounts.js
@@ -164,7 +164,12 @@ export default function LedgerChartAmounts({ data, isLoading }) {
         echarts={echarts}
         option={option}
         showLoading={isLoading}
-        loadingOption={{ maskColor: 'rgba(255, 255, 255, 0)', text: '' }}
+        loadingOption={{
+          maskColor: 'rgba(255, 255, 255, 0)',
+          text: '',
+          spinnerRadius: 24,
+          lineWidth: 2
+        }}
         style={{ width: '100%', height: '600px' }}
       />
       <div className='ledger__chart-sections'>

diff --git a/src/views/components/ledger-chart-blocks/ledger-chart-blocks.js b/src/views/components/ledger-chart-blocks/ledger-chart-blocks.js
@@ -25,6 +25,8 @@ echarts.use([
 export default function LedgerChartBlocks({ data, isLoading }) {
   const option = {
     grid: {
+      left: '3%',
+      right: '4%',
       containLabel: true
     },
     legend: {
@@ -142,8 +144,13 @@ export default function LedgerChartBlocks({ data, isLoading }) {
         echarts={echarts}
         option={option}
         showLoading={isLoading}
-        loadingOption={{ maskColor: 'rgba(255, 255, 255, 0)', text: '' }}
-        style={{ width: '100%', height: '400px' }}
+        loadingOption={{
+          maskColor: 'rgba(255, 255, 255, 0)',
+          text: '',
+          spinnerRadius: 10,
+          lineWidth: 2
+        }}
+        style={{ width: '100%', height: '600px' }}
       />
       <div className='ledger__chart-sections'>
         <div className='ledger__chart-section'>

diff --git a/src/views/components/ledger-chart-usd-transferred/ledger-chart-usd-transferred.js b/src/views/components/ledger-chart-usd-transferred/ledger-chart-usd-transferred.js
@@ -29,6 +29,8 @@ export default function LedgerUSDTransferred({ data, isLoading }) {
 
   const option = {
     grid: {
+      left: '3%',
+      right: '4%',
       containLabel: true
     },
     legend: {
@@ -126,8 +128,13 @@ export default function LedgerUSDTransferred({ data, isLoading }) {
         echarts={echarts}
         option={option}
         showLoading={isLoading}
-        loadingOption={{ maskColor: 'rgba(255, 255, 255, 0)', text: '' }}
-        style={{ width: '100%', height: '400px' }}
+        loadingOption={{
+          maskColor: 'rgba(255, 255, 255, 0)',
+          text: '',
+          spinnerRadius: 24,
+          lineWidth: 2
+        }}
+        style={{ width: '100%', height: '600px' }}
       />
       <div className='ledger__chart-sections'>
         <div className='ledger__chart-section'>

diff --git a/src/views/components/ledger-chart-volume/ledger-chart-volume.js b/src/views/components/ledger-chart-volume/ledger-chart-volume.js
@@ -43,6 +43,8 @@ export default function LedgerChartVolume({ data, isLoading }) {
 
   const option = {
     grid: {
+      left: '3%',
+      right: '4%',
       containLabel: true
     },
     legend: {
@@ -144,8 +146,13 @@ export default function LedgerChartVolume({ data, isLoading }) {
         echarts={echarts}
         option={option}
         showLoading={isLoading}
-        loadingOption={{ maskColor: 'rgba(255, 255, 255, 0)', text: '' }}
-        style={{ width: '100%', height: '400px' }}
+        loadingOption={{
+          maskColor: 'rgba(255, 255, 255, 0)',
+          text: '',
+          spinnerRadius: 24,
+          lineWidth: 2
+        }}
+        style={{ width: '100%', height: '600px' }}
       />
       <div className='ledger__chart-sections'>
         <div className='ledger__chart-section'>

diff --git a/src/views/pages/ledger/ledger.js b/src/views/pages/ledger/ledger.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
@@ -29,82 +29,72 @@ TabPanel.propTypes = {
   index: PropTypes.number
 }
 
-export default class LedgerPage extends React.Component {
-  constructor(props) {
-    super(props)
+export default function LedgerPage({ load, data, isLoading }) {
+  const [value, setValue] = useState(0)
 
-    this.state = {
-      value: 0
-    }
-  }
-
-  handleChange = (event, value) => {
-    this.setState({ value })
-  }
+  useEffect(() => {
+    load()
+  }, [])
 
-  componentDidMount() {
-    this.props.load()
+  const handleChange = (event, value) => {
+    setValue(value)
   }
 
-  render() {
-    const { data, isLoading } = this.props
-
-    return (
-      <>
-        <Seo
-          title='Nano Ledger Analysis'
-          description='On-chain metrics and analytics of the Nano ledger'
-          tags={[
-            'nano',
-            'ledger',
-            'analytics',
-            'chain',
-            'on-chain',
-            'analysis',
-            'crypto',
-            'blockchain',
-            'data',
-            'insights',
-            'addresses',
-            'active',
-            'transactions'
-          ]}
-        />
-        <div className='ledger__body'>
-          <Tabs
-            orientation={'horizontal'}
-            className='ledger__body-menu'
-            variant='scrollable'
-            value={this.state.value}
-            onChange={this.handleChange}>
-            <Tab label='Addresses' />
-            <Tab label='Blocks' />
-            <Tab label='Volume' />
-            <Tab label='Value Transferred' />
-            <Tab label='Amounts' />
-          </Tabs>
-          <TabPanel value={this.state.value} index={0}>
-            <LedgerChartAddresses data={data} isLoading={isLoading} />
-          </TabPanel>
-          <TabPanel value={this.state.value} index={1}>
-            <LedgerChartBlocks data={data} isLoading={isLoading} />
-          </TabPanel>
-          <TabPanel value={this.state.value} index={2}>
-            <LedgerChartVolume data={data} isLoading={isLoading} />
-          </TabPanel>
-          <TabPanel value={this.state.value} index={3}>
-            <LedgerChartUSDTransferred data={data} isLoading={isLoading} />
-          </TabPanel>
-          <TabPanel value={this.state.value} index={4}>
-            <LedgerChartAmounts data={data} isLoading={isLoading} />
-          </TabPanel>
-        </div>
-        <div className='ledger__footer'>
-          <Menu />
-        </div>
-      </>
-    )
-  }
+  return (
+    <>
+      <Seo
+        title='Nano Ledger Analysis'
+        description='On-chain metrics and analytics of the Nano ledger'
+        tags={[
+          'nano',
+          'ledger',
+          'analytics',
+          'chain',
+          'on-chain',
+          'analysis',
+          'crypto',
+          'blockchain',
+          'data',
+          'insights',
+          'addresses',
+          'active',
+          'transactions'
+        ]}
+      />
+      <div className='ledger__body'>
+        <Tabs
+          orientation={'horizontal'}
+          className='ledger__body-menu'
+          variant='scrollable'
+          value={value}
+          onChange={handleChange}>
+          <Tab label='Addresses' />
+          <Tab label='Blocks' />
+          <Tab label='Volume' />
+          <Tab label='Value Transferred' />
+          <Tab label='Amounts' />
+        </Tabs>
+        <TabPanel value={value} index={0}>
+          <LedgerChartAddresses data={data} isLoading={isLoading} />
+        </TabPanel>
+        <TabPanel value={value} index={1}>
+          <LedgerChartBlocks data={data} isLoading={isLoading} />
+        </TabPanel>
+        <TabPanel value={value} index={2}>
+          <LedgerChartVolume data={data} isLoading={isLoading} />
+        </TabPanel>
+        <TabPanel value={value} index={3}>
+          <LedgerChartUSDTransferred data={data} isLoading={isLoading} />
+        </TabPanel>
+        <TabPanel value={value} index={4}>
+          <LedgerChartAmounts data={data} isLoading={isLoading} />
+        </TabPanel>
+      </div>
+      <div className='ledger__footer'>
+        <Menu />
+      </div>
+    </>
+  )
 }
 
 LedgerPage.propTypes = {