More radio buttons

This commit is contained in:
Marco van Dijk 2022-04-22 18:55:08 +02:00
parent a9bb6fd37f
commit 1d77e66c09
2 changed files with 28 additions and 36 deletions

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { VictoryPie } from 'victory'; import { VictoryPie } from 'victory';
import { Pagination } from "@mantine/core"; import { RadioGroup, Radio } from "@mantine/core";
const MonthlyGraphs = (obj) => { const MonthlyGraphs = (obj) => {
const livepeer = useSelector((state) => state.livepeerstate); const livepeer = useSelector((state) => state.livepeerstate);
@ -372,47 +372,39 @@ const MonthlyGraphs = (obj) => {
} }
} }
let renderStake = false; let thisColour;
let renderEarnings = false; if (activeGraph == 1) {
let renderBread = false; thisColour = "violet";
let graphIndex = activeGraph; } else if (activeGraph == 2) {
if (totalGraphs && stakeObj) { thisColour = "green";
if (graphIndex == 1) { } else if (activeGraph == 3) {
renderStake = true; thisColour = "orange";
graphIndex = 0;
} else {
graphIndex--;
}
}
if (graphIndex == 1 && graphIndex && totalGraphs && earningsObj) {
if (graphIndex == 1) {
renderEarnings = true;
graphIndex = 0;
} else {
graphIndex--;
}
}
graphIndex--;
if (graphIndex == 1 && graphIndex && totalGraphs && broadcasterObj) {
if (graphIndex == 1) {
renderBread = true;
graphIndex = 0;
} else {
graphIndex--;
}
} }
return ( return (
<div className="stroke fullMargin insetEffect" style={{ padding: 0, margin: 0, minHeight: '70vh' }}> <div className="stroke fullMargin insetEffect" style={{ padding: 0, margin: 0 }}>
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}> <div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
{totalGraphs > 1 ? {totalGraphs > 1 ?
<Pagination page={activeGraph} onChange={setGraph} total={totalGraphs} siblings={1} initialPage={1} /> <div className="row" style={{ marginTop: '0.3em', marginBottom: '0.3em' }}>
<RadioGroup
value={activeGraph}
onChange={setGraph}
spacing="lg"
size="lg"
color={thisColour}
required
>
{(totalGraphs && stakeObj) ? <Radio value="1" label="Stake" /> : null}
{(totalGraphs && earningsObj) ? <Radio value="2" label="Earnings" /> : null}
{(totalGraphs && broadcasterObj) ? <Radio value="3" label="Broadcasters" /> : null}
</RadioGroup>
</div>
: null} : null}
</div> </div>
<div className="row" style={{ marginTop: '1em', marginBottom: '1em', height: '100%' }}> <div className="row" style={{ marginTop: '1em', marginBottom: '1em', minHeight: '70vh', height: '100%' }}>
{renderStake ? stakeObj : null} {(activeGraph == 1) ? stakeObj : null}
{renderEarnings ? earningsObj : null} {(activeGraph == 2) ? earningsObj : null}
{renderBread ? broadcasterObj : null} {(activeGraph == 3) ? broadcasterObj : null}
</div> </div>
</div> </div>
) )

View File

@ -42,7 +42,7 @@ const MonthlyStats = (obj) => {
activePage == 2 ? <h4>Graphs</h4> : null activePage == 2 ? <h4>Graphs</h4> : null
} }
{ {
activePage == 3 ? <h3>orchestrators</h3> : null activePage == 3 ? <h4>Orchestrators</h4> : null
} }
</div> </div>
<div className="verticalDivider" /> <div className="verticalDivider" />