fix(webapp): add logic to load more (soft paginations) and fix respon…

…sive polar graph (#816)
eoscostarica · Oct 7, 2021 · dc8e83a · dc8e83a
1 parent 4cbf5f5
commit dc8e83a
Show file tree

Hide file tree

Showing 19 changed files with 290 additions and 304 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -38,7 +38,6 @@
     "apollo-link-ws": "^1.0.19",
     "apollo-utilities": "^1.3.3",
     "chart.js": "^3.5.1",
-    "classnames": "^2.3.1",
     "core-js": "^3.15.2",
     "date-fns": "^2.24.0",
     "env-cmd": "^10.1.0",
@@ -79,6 +78,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.3",
     "serve": "^12.0.0",
+    "string-to-color": "^2.2.2",
     "subscriptions-transport-ws": "^0.9.19",
     "text-encoding": "^0.7.0",
     "ual-anchor": "^1.0.6",

diff --git a/webapp/src/components/Card/styles.js b/webapp/src/components/Card/styles.js
@@ -139,12 +139,13 @@ export default theme => ({
     letterSpacing: '0.44px'
   },
   chartWrapper: {
+    width: '100%',
     '& .highcharts-container ': {
       height: '400px !important',
-      width: '350px !important',
+      width: '100% !important',
       '& > svg': {
         height: '400px !important',
-        width: '350px !important'
+        width: '100% !important'
       }
     }
   }

diff --git a/webapp/src/components/CompareTool/styles.js b/webapp/src/components/CompareTool/styles.js
@@ -136,12 +136,13 @@ export default theme => ({
     overflow: 'hidden'
   },
   chartWrapperSliderView: {
+    width: '100%',
     '& .highcharts-container ': {
       height: '400px !important',
-      width: '340px !important',
+      width: '100% !important',
       '& > svg': {
         height: '400px !important',
-        width: '340px !important'
+        width: '100% !important'
       }
     }
   },
@@ -306,13 +307,14 @@ export default theme => ({
     alignItems: 'center'
   },
   chartWrapper: {
+    width: '100%',
     '& .highcharts-container ': {
       height: '300px !important',
-      width: '340px !important',
+      width: '100% !important',
       '& > svg': {
         marginTop: '-60px !important',
         height: '400px !important',
-        width: '340px !important'
+        width: '100% !important'
       }
     }
   },

diff --git a/webapp/src/components/PolarChart/index.js b/webapp/src/components/PolarChart/index.js
@@ -15,7 +15,7 @@ HighchartsMore(Highcharts)
 
 const useStyles = makeStyles(styles)
 
-const PolarChart = ({ data = [] }) => {
+const PolarChart = ({ data = [], showLegend = false }) => {
   const { t } = useTranslation('translations')
   const classes = useStyles()
   const [options] = useState(polarCharConfig.options)
@@ -36,15 +36,19 @@ const PolarChart = ({ data = [] }) => {
               t('trustiness')
             ]
           },
-          series: data
+          series: data,
+          legend: {
+            enabled: showLegend
+          }
         }}
       />
     </Box>
   )
 }
 
 PolarChart.propTypes = {
-  data: PropTypes.array
+  data: PropTypes.array,
+  showLegend: PropTypes.bool
 }
 
 export default PolarChart
diff --git a/webapp/src/components/PolarChart/styles.js b/webapp/src/components/PolarChart/styles.js
@@ -1,50 +1,13 @@
 export default theme => ({
   highchartsFigure: {
-    margin: '1em auto',
-    [theme.breakpoints.down('md')]: {
-      margin: '0 auto',
-      width: '100% !important'
-    },
+    margin: 0,
+    width: '100% !important',
     '& .highcharts-container ': {
-      margin: '1em auto',
+      margin: 0,
       [theme.breakpoints.down('md')]: {
-        margin: '0 auto',
+        margin: 0,
         width: '100% !important'
       }
-
-      // height: '400px !important',
-      // width: '350px !important',
-      // border: '2px dashed purple',
-
-      // '& > svg': {
-      //   fill: '#94d31b',
-      //   height: '400px !important',
-      //   width: '350px !important'
-      // },
-
-      // [theme.breakpoints.up('sm')]: {
-      //   border: '2px solid green',
-      //   height: '400px !important',
-      //   width: '600px !important',
-      //   '& > svg': {
-      //     fill: '#94d31b',
-      //     height: '400px !important',
-      //     width: '600px !important'
-      //   }
-      // },
-      // [theme.breakpoints.up('md')]: {
-      //   border: '2px solid blue',
-      //   height: '400px !important',
-      //   width: '400px !important',
-      //   '& > svg': {
-      //     fill: '#94d31b',
-      //     height: '400px !important',
-      //     width: '450px !important'
-      //   }
-      // },
-      // [theme.breakpoints.up('lg')]: {
-      //   border: '2px solid orange'
-      // }
     }
   }
 })
diff --git a/webapp/src/routes/BlockProducers/BlockProducerProfile.js b/webapp/src/routes/BlockProducers/BlockProducerProfile.js
@@ -180,7 +180,7 @@ const BlockProducerProfile = () => {
       </Grid>
       <Grid container className={classes.reliefGrid}>
         <Grid item md={12} xs={12}>
-          <Box style={{ display: 'flex' }}>
+          <Box className={classes.pageTitle}>
             {blockProducerLogo ? (
               <Avatar aria-label='Block Producer' className={classes.avatar}>
                 <img src={blockProducerLogo} alt='' width='100%' />
@@ -226,8 +226,8 @@ const BlockProducerProfile = () => {
           </Grid>
         )}
         <Grid container justifyContent='center' md={6}>
-          <Grid item md={12} style={{ marginTop: 20 }} xs={12}>
-            <PolarChart data={polarChartData} />
+          <Grid item className={classes.profileChartWrapper} xs={12}>
+            <PolarChart data={polarChartData} showLegend />
           </Grid>
           <Grid item md={4} xs={7}>
             <Button

diff --git a/webapp/src/routes/BlockProducers/BlockProducerRate.js b/webapp/src/routes/BlockProducers/BlockProducerRate.js
@@ -11,7 +11,7 @@ import Typography from '@mui/material/Typography'
 import AccountCircle from '@mui/icons-material/AccountCircle'
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
 import _get from 'lodash.get'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import Snackbar from '@mui/material/Snackbar'
 import MuiAlert from '@mui/material/Alert'
 import { makeStyles } from '@mui/styles'
@@ -404,7 +404,7 @@ const BlockProducerRate = () => {
               producer={state.blockProducer}
             />
             <Grid
-              className={classNames(classes.ctasWrapper, classes.showOnlyLg)}
+              className={clsx(classes.ctasWrapper, classes.showOnlyLg)}
               style={{ margin: '10px 0 10px 0' }}
               item
               xs={12}

diff --git a/webapp/src/routes/BlockProducers/GeneralInformationProfile.js b/webapp/src/routes/BlockProducers/GeneralInformationProfile.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import countries from 'i18n-iso-countries'
 import Grid from '@mui/material/Grid'
@@ -52,7 +52,7 @@ const SocialNetworks = ({ classes, producer }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               <a
                 href={`https://github.com/${github}`}
@@ -72,7 +72,7 @@ const SocialNetworks = ({ classes, producer }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               <a
                 href={`https://twitter.com/${twitter}`}
@@ -92,7 +92,7 @@ const SocialNetworks = ({ classes, producer }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               <a
                 href={`https://www.linkedin.com/in/${linkedin}`}
@@ -112,7 +112,7 @@ const SocialNetworks = ({ classes, producer }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               <a
                 href={`https://web.telegram.org/#/${telegram}`}
@@ -132,7 +132,7 @@ const SocialNetworks = ({ classes, producer }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               <a
                 href={`https://www.instagram.com/${instagram}`}
@@ -169,11 +169,11 @@ const AdditionalResources = ({ classes, producer }) => {
               </Typography>
               <Typography
                 variant='subtitle1'
-                className={classNames(classes.value, classes.subTitle)}
+                className={clsx(classes.value, classes.subTitle)}
               >
                 <a
                   href={additionalResources.alohaEOS}
-                  className={classNames(classes.links, classes.noWrap)}
+                  className={clsx(classes.links, classes.noWrap)}
                   target='_blank'
                   rel='noopener noreferrer'
                 >
@@ -189,12 +189,12 @@ const AdditionalResources = ({ classes, producer }) => {
               </Typography>
               <Typography
                 variant='subtitle1'
-                className={classNames(classes.value, classes.subTitle)}
+                className={clsx(classes.value, classes.subTitle)}
                 noWrap
               >
                 <a
                   href={additionalResources.eosNation}
-                  className={classNames(classes.links, classes.noWrap)}
+                  className={clsx(classes.links, classes.noWrap)}
                   target='_blank'
                   rel='noopener noreferrer'
                 >
@@ -210,12 +210,12 @@ const AdditionalResources = ({ classes, producer }) => {
               </Typography>
               <Typography
                 variant='subtitle1'
-                className={classNames(classes.value, classes.subTitle)}
+                className={clsx(classes.value, classes.subTitle)}
                 noWrap
               >
                 <a
                   href={{ edenInterview }}
-                  className={classNames(classes.links, classes.noWrap)}
+                  className={clsx(classes.links, classes.noWrap)}
                   target='_blank'
                   rel='noopener noreferrer'
                 >
@@ -278,7 +278,7 @@ const GeneralInformation = ({ classes, producer = {} }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               {_get(producer, 'system.owner', '- -')}
             </Typography>
@@ -289,7 +289,7 @@ const GeneralInformation = ({ classes, producer = {} }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               {countryName}
             </Typography>
@@ -300,7 +300,7 @@ const GeneralInformation = ({ classes, producer = {} }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               {webpageURL ? (
                 <a
@@ -322,7 +322,7 @@ const GeneralInformation = ({ classes, producer = {} }) => {
             </Typography>
             <Typography
               variant='subtitle1'
-              className={classNames(classes.value, classes.subTitle)}
+              className={clsx(classes.value, classes.subTitle)}
             >
               {formatNumber(parseFloat(totalVotes), 0)}
             </Typography>