Skip to content

Commit

Permalink
refactor(webapp): remove unnecessary divs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Torresmorah
Torresmorah committed Nov 29, 2022
1 parent 389d2c0 commit 27eaf15
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 244 deletions.
136 changes: 64 additions & 72 deletions webapp/src/routes/BlockDistribution/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,79 +95,71 @@ const BlockDistribution = () => {
}, [data])

return (
<div>
<div>
<div>
<Card className={classes.cardShadow}>
<CardContent>
<div className={classes.textDiv}>
<Typography component="p" variant="h6">
{t('title')}
</Typography>
<div className={classes.formControl}>
<FormControl variant="standard">
<InputLabel id="demo-simple-select-label">
{t('timeFrame')}
</InputLabel>
<Select
labelId="demo-simple-select-label"
value={range}
onChange={(e) => setRange(e.target.value)}
fullWidth
>
{rangeOptions.map((option) => (
<MenuItem key={option} value={option}>
{t(option)}
</MenuItem>
))}
</Select>
</FormControl>
</div>
</div>
{loading && <LinearProgress />}
{!loading && data?.items?.length > 0 && (
<>
<HighchartsReact
highcharts={Highcharts}
options={{ ...options, series }}
/>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>{t('account')}</TableCell>
<TableCell align="right">
{t('blocksProduced')}
</TableCell>
<TableCell align="right">{t('percent')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data?.items.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.account}</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.blocks)}
</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(
Math.ceil(item.percent * 100),
1,
)}
%
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
)}
</CardContent>
</Card>
<Card className={classes.cardShadow}>
<CardContent>
<div className={classes.textDiv}>
<Typography component="p" variant="h6">
{t('title')}
</Typography>
<div className={classes.formControl}>
<FormControl variant="standard">
<InputLabel id="demo-simple-select-label">
{t('timeFrame')}
</InputLabel>
<Select
labelId="demo-simple-select-label"
value={range}
onChange={(e) => setRange(e.target.value)}
fullWidth
>
{rangeOptions.map((option) => (
<MenuItem key={option} value={option}>
{t(option)}
</MenuItem>
))}
</Select>
</FormControl>
</div>
</div>
</div>
</div>
{loading && <LinearProgress />}
{!loading && data?.items?.length > 0 && (
<>
<HighchartsReact
highcharts={Highcharts}
options={{ ...options, series }}
/>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>{t('account')}</TableCell>
<TableCell align="right">{t('blocksProduced')}</TableCell>
<TableCell align="right">{t('percent')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data?.items.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.account}</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.blocks)}
</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(
Math.ceil(item.percent * 100),
1,
)}
%
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
)}
</CardContent>
</Card>
)
}

Expand Down
160 changes: 77 additions & 83 deletions webapp/src/routes/CPUBenchmark/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,31 @@ const useStyles = makeStyles(styles)

const options = {
time: {
timezoneOffset: new Date().getTimezoneOffset()
timezoneOffset: new Date().getTimezoneOffset(),
},
title: {
text: ' '
text: ' ',
},
xAxis: {
type: 'datetime'
type: 'datetime',
},
yAxis: {
title: {
text: ' '
}
text: ' ',
},
},
credits: {
enabled: false
enabled: false,
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
connectorAllowed: false,
},
},
},

series: []
series: [],
}

const CPUBenchmark = () => {
Expand All @@ -66,7 +66,7 @@ const CPUBenchmark = () => {

useEffect(() => {
load({
variables: { range }
variables: { range },
})
}, [load, range])

Expand All @@ -87,11 +87,11 @@ const CPUBenchmark = () => {
total: 0,
average: 0,
lowest: parseInt(item.usage),
highest: 0
highest: 0,
}
info[item.account] = {
name: item.account,
data: []
data: [],
}
}

Expand All @@ -110,86 +110,80 @@ const CPUBenchmark = () => {

info[item.account].data.push([
new Date(item.datetime).getTime(),
parseFloat(item.usage)
parseFloat(item.usage),
])
}
setProducers(
Object.values(summary).sort((a, b) => (a.average > b.average ? 1 : -1))
Object.values(summary).sort((a, b) => (a.average > b.average ? 1 : -1)),
)

setSeries(Object.values(info))
}, [data])

return (
<div>
<div>
<div>
<Card className={classes.cardShadow}>
<CardContent>
<div className={classes.textDiv}>
<Typography component="p" variant="h6">
{t('title')}
</Typography>
<FormControl variant="standard">
<InputLabel id="demo-simple-select-label">
{t('timeFrame')}
</InputLabel>
<Select
labelId="demo-simple-select-label"
value={range}
onChange={(e) => setRange(e.target.value)}
fullWidth
>
{rangeOptions.map((option) => (
<MenuItem key={option} value={option}>
{t(option)}
</MenuItem>
))}
</Select>
</FormControl>
</div>
{loading && <LinearProgress />}
{!loading && data?.items.length > 0 && (
<>
<HighchartsReact
highcharts={Highcharts}
options={{ ...options, series }}
/>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>{t('account')}</TableCell>
<TableCell align="right">{t('lowest')}</TableCell>
<TableCell align="right">{t('highest')}</TableCell>
<TableCell align="right">{t('average')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{producers.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.name}</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.lowest, 2)}
</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.highest, 2)}
</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.average, 2)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
)}
</CardContent>
</Card>
<Card className={classes.cardShadow}>
<CardContent>
<div className={classes.textDiv}>
<Typography component="p" variant="h6">
{t('title')}
</Typography>
<FormControl variant="standard">
<InputLabel id="demo-simple-select-label">
{t('timeFrame')}
</InputLabel>
<Select
labelId="demo-simple-select-label"
value={range}
onChange={(e) => setRange(e.target.value)}
fullWidth
>
{rangeOptions.map((option) => (
<MenuItem key={option} value={option}>
{t(option)}
</MenuItem>
))}
</Select>
</FormControl>
</div>
</div>
</div>
{loading && <LinearProgress />}
{!loading && data?.items.length > 0 && (
<>
<HighchartsReact
highcharts={Highcharts}
options={{ ...options, series }}
/>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>{t('account')}</TableCell>
<TableCell align="right">{t('lowest')}</TableCell>
<TableCell align="right">{t('highest')}</TableCell>
<TableCell align="right">{t('average')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{producers.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.name}</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.lowest, 2)}
</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.highest, 2)}
</TableCell>
<TableCell align="right">
{formatWithThousandSeparator(item.average, 2)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
)}
</CardContent>
</Card>
)
}

Expand Down
4 changes: 2 additions & 2 deletions webapp/src/routes/Home/BlockProducerInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const BlockProducerInfo = ({ t, classes }) => {
}, [producersSummary])

return (
<div>
<>
<div className={classes.divMargin}>
<div className={classes.cardHeader}>
<Card className={classes.cardShadow}>
Expand Down Expand Up @@ -234,7 +234,7 @@ const BlockProducerInfo = ({ t, classes }) => {
</Card>
</div>
</div>
</div>
</>
)
}

Expand Down
4 changes: 1 addition & 3 deletions webapp/src/routes/Home/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,7 @@ const Home = () => {
}, [])

return (
<div>
<BlockProducerInfo t={t} classes={classes} />
</div>
<BlockProducerInfo t={t} classes={classes} />
)
}

Expand Down
Loading

0 comments on commit 27eaf15

Please sign in to comment.