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

Add pages to stats

Browse Source
This commit is contained in:
Marco van Dijk 2022-04-22 13:33:58 +02:00
parent ac796e0fdb
commit 668d8170fa
1 changed files with 92 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/WinnerMonth.js
View File

@ -6,6 +6,7 @@ import {
getOrchestratorScores
} from "../actions/livepeer";
import Ticket from "../components/TicketViewer";
import { Pagination } from "@mantine/core";
const claimColour = "rgba(25, 158, 29, 0.4)";
const stakeColour = "rgba(25, 158, 147, 0.4)";
@ -18,9 +19,16 @@ const activationColour = "rgba(154, 158, 25, 0.4)";
const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
const greyColour = "rgba(122, 128, 127, 0.4)";
const itemsPerPage = 6;
const WinnerMonth = (obj) => {
const livepeer = useSelector((state) => state.livepeerstate);
const [thisScores, setThisScores] = useState(null);
const [activePage, setPage] = useState(1);
const [activeGraph, setGraph] = useState(1);
let totalGraphs = 0;
useEffect(() => {
const setScore = async () => {
@ -119,6 +127,8 @@ const WinnerMonth = (obj) => {
});
}
totalGraphs++;
stakeObj = <div className="stroke">
<h4>Stake Distribution</h4>
<VictoryPie padding={0} data={pieList} x="address" y="sum"
@ -199,6 +209,8 @@ const WinnerMonth = (obj) => {
});
}
totalGraphs++;
earningsObj = <div className="stroke">
<h4>Earnings Distribution</h4>
<VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
@ -277,6 +289,8 @@ const WinnerMonth = (obj) => {
});
}
totalGraphs++;
broadcasterObj = <div className="stroke">
<h4>Broadcaster Payments</h4>
<VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
@ -389,6 +403,23 @@ const WinnerMonth = (obj) => {
}
}
const totalPages = (sortedList.length + (itemsPerPage - (sortedList.length % itemsPerPage))) / itemsPerPage;
let renderStake = false;
let renderEarnings = false;
let renderBread = false;
let graphIndex = 1;
if (activeGraph == graphIndex && totalGraphs && stakeObj) {
renderStake = true;
}
graphIndex++;
if (activeGraph == graphIndex && totalGraphs && earningsObj) {
renderEarnings = true;
}
graphIndex++;
if (activeGraph == graphIndex && totalGraphs && broadcasterObj) {
renderBread = true;
}
return (
<div className="stroke" key={obj.seed + "strok"}>
{obj.data.reactivationCount ?
@ -510,12 +541,19 @@ const WinnerMonth = (obj) => {
</div> : null
}<div className="halfVerticalDivider" />
<div className="verticalDivider" />
{stakeObj}
{earningsObj}
{broadcasterObj}
{renderStake ? stakeObj : null}
{renderEarnings ? earningsObj : null}
{renderBread ? broadcasterObj : null}
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
{totalGraphs > 1 ?
<Pagination page={activeGraph} onChange={setGraph} total={totalGraphs} siblings={1} initialPage={1} />
: null}
</div>
<div className="flexContainer forceWrap">
{
sortedList.map(function (orch, i) {
const tmp = i - ((activePage - 1) * itemsPerPage);
if (tmp >= 0 && tmp < itemsPerPage) {
let thisCommission = null;
let thisStake = null;
let thisEarnings = null;
@ -555,8 +593,15 @@ const WinnerMonth = (obj) => {
<div className="verticalDivider" />
</div>
)
}
return null;
})
}
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
{totalPages > 1 ?
<Pagination page={activePage} onChange={setPage} total={totalPages} boundaries={2} siblings={2} initialPage={1} />
: null}
</div>
</div>
<div className="verticalDivider" />
</div>