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