stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 10:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

better radio buttons

Browse Source
This commit is contained in:
Marco van Dijk 2022-04-22 19:11:09 +02:00
parent 1d77e66c09
commit 2c00caf209
2 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/MonthlyGraphs.js
View File

@ -1,11 +1,11 @@
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { VictoryPie } from 'victory';
import { RadioGroup, Radio } from "@mantine/core";
import { SegmentedControl } from "@mantine/core";
const MonthlyGraphs = (obj) => {
const livepeer = useSelector((state) => state.livepeerstate);
const [activeGraph, setGraph] = useState(1);
const [activeGraph, setGraph] = useState(2);
let totalGraphs = 0;
@ -381,24 +381,42 @@ const MonthlyGraphs = (obj) => {
thisColour = "orange";
}
let dataRow = [];
if (totalGraphs && stakeObj) {
dataRow.push({ label: 'Stake', value: '1' });
}
if (totalGraphs && earningsObj) {
dataRow.push({ label: 'Earnings', value: '2' });
}
if (totalGraphs && broadcasterObj) {
dataRow.push({ label: 'Broadcasters', value: '3' });
}
return (
<div className="stroke fullMargin insetEffect" style={{ padding: 0, margin: 0 }}>
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
<div className="row" style={{ margin: 0 }}>
{totalGraphs > 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>
<SegmentedControl
styles={{
root: { backgroundColor: 'rgba(103, 103, 103, 0.6)' },
label: { color: 'black' },
labelActive: { color: 'black' },
input: { color: 'black' },
control: { color: 'black' },
controlActive: {},
active: { color: 'black' },
disabled: {},
}}
value={activeGraph}
onChange={setGraph}
radius="md"
spacing="lg"
size="lg"
transitionDuration={200}
transitionTimingFunction="linear"
color={thisColour}
data={dataRow}
/>
: null}
</div>
<div className="row" style={{ marginTop: '1em', marginBottom: '1em', minHeight: '70vh', height: '100%' }}>

34
src/pages/MonthlyStats.js
View File

@ -2,10 +2,10 @@ import React, { useState } from 'react';
import MonthlyFactoids from '../components/MonthlyFactoids';
import MonthlyGraphs from '../components/MonthlyGraphs';
import MonthlyOrchestrators from '../components/MonthlyOrchestrators';
import { RadioGroup, Radio } from "@mantine/core";
import { SegmentedControl } from "@mantine/core";
const MonthlyStats = (obj) => {
const [activePage, setPage] = useState(0);
const [activePage, setPage] = useState(1);
let thisColour;
if (activePage == 1) {
@ -18,20 +18,32 @@ const MonthlyStats = (obj) => {
return (
<div className="stroke" key={obj.seed + "menu"}>
<div className="verticalDivider" />
<div className="row" style={{ marginTop: '0.3em', marginBottom: '0.3em' }}>
<RadioGroup
<div className="row" style={{ margin: '0' }}>
<SegmentedControl
styles={{
root: { backgroundColor: 'rgba(103, 103, 103, 0.6)' },
label: { color: 'black' },
labelActive: { color: 'black' },
input: { color: 'black' },
control: { color: 'black' },
controlActive: {},
active: { color: 'black' },
disabled: {},
}}
value={activePage}
onChange={setPage}
radius="md"
spacing="lg"
size="lg"
transitionDuration={200}
transitionTimingFunction="linear"
color={thisColour}
required
>
<Radio value="1" label="Summary" />
<Radio value="2" label="Graphs" />
<Radio value="3" label="Orchestrators" />
</RadioGroup>
data={[
{ label: 'Summary', value: '1' },
{ label: 'Graphs', value: '2' },
{ label: 'Orchestrators', value: '3' }
]}
/>
</div>
<div className="verticalDivider" />
<div className="row">