From dc8e83a8aa96979913d5c52f005553b24d74cee0 Mon Sep 17 00:00:00 2001 From: Teto Gomez Date: Thu, 7 Oct 2021 08:13:25 -0600 Subject: [PATCH] fix(webapp): add logic to load more (soft paginations) and fix responsive polar graph (#816) --- webapp/package.json | 2 +- webapp/src/components/Card/styles.js | 5 +- webapp/src/components/CompareTool/styles.js | 10 +- webapp/src/components/PolarChart/index.js | 10 +- webapp/src/components/PolarChart/styles.js | 45 +-- .../BlockProducers/BlockProducerProfile.js | 6 +- .../BlockProducers/BlockProducerRate.js | 4 +- .../GeneralInformationProfile.js | 32 +-- .../BlockProducers/SliderRatingSection.js | 76 ++--- webapp/src/routes/BlockProducers/index.js | 11 +- webapp/src/routes/BlockProducers/styles.js | 17 +- webapp/src/routes/Home/index.js | 11 +- webapp/src/routes/Home/styles.js | 21 +- .../Proxies/GeneralInformationProfile.js | 20 +- webapp/src/routes/Proxies/ProxyProfile.js | 6 +- webapp/src/routes/Proxies/index.js | 7 +- webapp/src/routes/Proxies/styles.js | 8 +- webapp/src/utils/get-rgb-colors-from-hex.js | 39 +-- webapp/yarn.lock | 264 ++++++++++-------- 19 files changed, 290 insertions(+), 304 deletions(-) diff --git a/webapp/package.json b/webapp/package.json index 8ec8baf9..b5a81940 100644 --- 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 index 1609e8b7..5eda1a06 100644 --- 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 index a3710b59..07537573 100644 --- 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 index 1fd586ff..1d1341d4 100644 --- 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,7 +36,10 @@ const PolarChart = ({ data = [] }) => { t('trustiness') ] }, - series: data + series: data, + legend: { + enabled: showLegend + } }} /> @@ -44,7 +47,8 @@ const PolarChart = ({ data = [] }) => { } 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 index 64d64ef5..f4572e3b 100644 --- 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 index 5abd126a..22a8ac85 100644 --- a/webapp/src/routes/BlockProducers/BlockProducerProfile.js +++ b/webapp/src/routes/BlockProducers/BlockProducerProfile.js @@ -180,7 +180,7 @@ const BlockProducerProfile = () => { - + {blockProducerLogo ? ( @@ -226,8 +226,8 @@ const BlockProducerProfile = () => { )} - - + +