From bbcace68cf1065336ee68a987478ed4d4db7ab4e Mon Sep 17 00:00:00 2001 From: Marco van Dijk Date: Fri, 22 Apr 2022 16:03:02 +0200 Subject: [PATCH] Moore pages --- src/components/MonthlyFactoids.js | 162 +++++++ src/components/MonthlyGraphs.js | 419 +++++++++++++++++ src/components/MonthlyOrchestrators.js | 179 +++++++ src/components/OrchAddressViewer.js | 8 +- src/components/WinnerMonth.js | 623 ------------------------- src/components/WinnerStat.js | 8 +- src/pages/MonthlyStats.js | 54 +++ src/pages/paginator.js | 3 +- src/pages/stats.js | 71 +-- src/style.css | 8 + 10 files changed, 872 insertions(+), 663 deletions(-) create mode 100644 src/components/MonthlyFactoids.js create mode 100644 src/components/MonthlyGraphs.js create mode 100644 src/components/MonthlyOrchestrators.js delete mode 100644 src/components/WinnerMonth.js create mode 100644 src/pages/MonthlyStats.js diff --git a/src/components/MonthlyFactoids.js b/src/components/MonthlyFactoids.js new file mode 100644 index 0000000..081b16a --- /dev/null +++ b/src/components/MonthlyFactoids.js @@ -0,0 +1,162 @@ +import React from 'react'; +import Ticket from "../components/TicketViewer"; +import ScrollContainer from 'react-indiana-drag-scroll'; + +const claimColour = "rgba(25, 158, 29, 0.4)"; +const stakeColour = "rgba(25, 158, 147, 0.4)"; +const ticketRedeemColour = "rgba(25, 98, 158, 0.4)"; +const rewardColour = "rgba(25, 27, 158, 0.4)"; +const unbondColour = "rgba(105, 25, 158, 0.4)"; +const updateColour = "rgba(158, 25, 52, 0.4)"; +const withdrawStakeColour = "rgba(158, 98, 25, 0.4)"; +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 MonthlyFactoids = (obj) => { + // Pies for stake overview, if have stake data for that month saved + let totalStakeSum = 0; + if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) { + let ticketIdx = obj.data.latestTotalStake.length - 1; + // Calc total stake at that time + while (ticketIdx >= 0) { + const thisTicket = obj.data.latestTotalStake[ticketIdx]; + ticketIdx -= 1; + totalStakeSum += thisTicket.totalStake; + } + } + + return ( +
+
+ +
+ {obj.data.reactivationCount ? +
+
+
+ +
+
: null + } + + {obj.data.activationCount ? +
+
+
+ +
+
: null + } + {(obj.data.latestCommission && obj.data.latestCommission.length) ? +
+
+
+ +
+
: null} + {obj.data.bondCount ? +
+
+
+ +
+
: null + } + {obj.data.unbondCount ? +
+
+
+ +
+
: null + } + {obj.data.rewardCount ? +
+
+
+ +
+
: null + } + {obj.data.claimCount ? +
+
+
+ +
+
: null + } + {obj.data.withdrawStakeCount ? +
+
+
+ +
+
: null + } + {obj.data.withdrawFeesCount ? +
+
+
+ +
+
: null + } + {obj.data.moveStakeCount ? +
+
+
+ +
+
: null + } + {obj.data.winningTicketsReceivedCount ? +
+
+
+ +
+
: null + } + {obj.data.winningTicketsRedeemedCount ? +
+
+
+ +
+
: null + } +
+
+ +
+
+ ) +} + +export default MonthlyFactoids; \ No newline at end of file diff --git a/src/components/MonthlyGraphs.js b/src/components/MonthlyGraphs.js new file mode 100644 index 0000000..4bb3350 --- /dev/null +++ b/src/components/MonthlyGraphs.js @@ -0,0 +1,419 @@ +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; +import { VictoryPie } from 'victory'; +import { Pagination } from "@mantine/core"; + +const MonthlyGraphs = (obj) => { + const livepeer = useSelector((state) => state.livepeerstate); + const [activeGraph, setGraph] = useState(1); + + let totalGraphs = 0; + + const getName = (address) => { + let thisDomain = null; + // Lookup domain in cache + if (livepeer.ensDomainMapping) { + for (const thisAddr of livepeer.ensDomainMapping) { + if (thisAddr.address === address) { + thisDomain = thisAddr; + break; + } + } + } + // Lookup current info in cache only if this addr has a mapped ENS domain + if (thisDomain && thisDomain.domain) { + for (const thisAddr of livepeer.ensInfoMapping) { + if (thisAddr.domain === thisDomain.domain) { + if (thisAddr.domain.length > 18) { + return (thisAddr.domain.substring(0, 16) + ".."); + } + return thisAddr.domain; + } + } + } + + if (livepeer.threeBoxInfo) { + for (const thisAddr of livepeer.threeBoxInfo) { + if (thisAddr.address === address) { + if (thisAddr.name) { + if (thisAddr.name.length > 18) { + return (thisAddr.name.substring(0, 16) + ".."); + } + return thisAddr.name; + } else { + return (address.substring(0, 16) + ".."); + } + break; + } + } + } + + return (address.substring(0, 16) + ".."); + } + + // Show all orchs (if latestTotalStake exists) or show only those in winningTicketsReceived + let orchList; + let ticketList = obj.data.winningTicketsReceived || []; + let stakeList = obj.data.latestTotalStake || []; + + // Pies for stake overview, if have stake data for that month saved + let stakeObj; + let totalStakeSum = 0; + if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) { + orchList = [...obj.data.latestTotalStake]; + let pieList = []; + let otherSum = 0; + let ticketIdx = obj.data.latestTotalStake.length - 1; + // Calc total stake at that time + while (ticketIdx >= 0) { + const thisTicket = obj.data.latestTotalStake[ticketIdx]; + ticketIdx -= 1; + totalStakeSum += thisTicket.totalStake; + } + ticketIdx = obj.data.latestTotalStake.length - 1; + // Create pie chart + while (ticketIdx >= 0) { + const thisTicket = obj.data.latestTotalStake[ticketIdx]; + ticketIdx -= 1; + if ((thisTicket.totalStake / totalStakeSum) < 0.015) { + otherSum += thisTicket.totalStake; + } else { + pieList.push({ + address: getName(thisTicket.address), + sum: thisTicket.totalStake + }); + } + } + if ((otherSum / totalStakeSum) > 0.01) { + pieList.push({ + address: "Other", + sum: otherSum + }); + } + + totalGraphs++; + + stakeObj =
+

Stake Distribution

+ +
; + } else { + orchList = [...obj.data.winningTicketsReceived]; + } + + // Pies for earnings overview + let earningsObj; + if (obj.data.winningTicketsReceived && obj.data.winningTicketsReceived.length) { + let otherSum = 0; + let pieList = []; + let ticketIdx = obj.data.winningTicketsReceived.length - 1; + // Create pie chart + while (ticketIdx >= 0) { + const thisTicket = obj.data.winningTicketsReceived[ticketIdx]; + ticketIdx -= 1; + if ((thisTicket.sum / obj.data.winningTicketsReceivedSum) < 0.015) { + otherSum += thisTicket.sum; + } else { + pieList.push({ + address: getName(thisTicket.address), + sum: thisTicket.sum + }); + } + } + if ((otherSum / obj.data.winningTicketsReceivedSum) > 0.01) { + pieList.push({ + address: "Other", + sum: otherSum + }); + } + + totalGraphs++; + + earningsObj =
+

Earnings Distribution

+ +
; + } + + // Pies for broadcaster payout + let broadcasterObj; + if (obj.data.winningTicketsSent && obj.data.winningTicketsSent.length) { + let otherSum = 0; + let pieList = []; + let ticketIdx = obj.data.winningTicketsSent.length - 1; + // Create pie chart + while (ticketIdx >= 0) { + const thisTicket = obj.data.winningTicketsSent[ticketIdx]; + ticketIdx -= 1; + if ((thisTicket.sum / obj.data.winningTicketsReceivedSum) < 0.015) { + otherSum += thisTicket.sum; + } else { + pieList.push({ + address: getName(thisTicket.address), + sum: thisTicket.sum + }); + } + } + if ((otherSum / obj.data.winningTicketsReceivedSum) > 0.01) { + pieList.push({ + address: "Other", + sum: otherSum + }); + } + + console.log("+1 for tickets"); + console.log(obj.data.winningTicketsSent); + console.log(obj.data.winningTicketsReceivedSum); + console.log(pieList); + + totalGraphs++; + + broadcasterObj =
+

Broadcaster Payments

+ +
; + } + + let sortedList = []; + if (orchList.length) { + // Sort this months data + while (orchList.length) { + let ticketIdx2 = orchList.length - 1; + let largestIdx = 0; + let largestValue = 0; + + // Find current O with most ticket wins in Eth + while (ticketIdx2 >= 0) { + const currentOrch = orchList[ticketIdx2]; + let thisVal; + + for (const obj of ticketList) { + if (obj.address == currentOrch.address) { + thisVal = obj.sum; + } + } + + if (!thisVal) { + ticketIdx2 -= 1; + continue; + } + if (thisVal > largestValue) { + largestIdx = ticketIdx2; + largestValue = thisVal; + } + ticketIdx2 -= 1; + } + // Else try to sort by stake + if (!largestValue) { + ticketIdx2 = orchList.length - 1; + while (ticketIdx2 >= 0) { + const currentOrch = orchList[ticketIdx2]; + let thisVal; + + for (const obj of stakeList) { + if (obj.address == currentOrch.address) { + thisVal = obj.totalStake; + } + } + + if (!thisVal) { + ticketIdx2 -= 1; + continue; + } + if (thisVal > largestValue) { + largestIdx = ticketIdx2; + largestValue = thisVal; + } + ticketIdx2 -= 1; + } + } + // Push current biggest list + sortedList.push(orchList[largestIdx]); + // Remove from list + orchList.splice(largestIdx, 1); + } + } + + let renderStake = false; + let renderEarnings = false; + let renderBread = false; + let graphIndex = activeGraph; + if (totalGraphs && stakeObj) { + if (graphIndex == 1) { + renderStake = true; + 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 ( +
+ {renderStake ? stakeObj : null} + {renderEarnings ? earningsObj : null} + {renderBread ? broadcasterObj : null} +
+ {totalGraphs > 1 ? + + : null} +
+
+ ) +} + +export default MonthlyGraphs; \ No newline at end of file diff --git a/src/components/MonthlyOrchestrators.js b/src/components/MonthlyOrchestrators.js new file mode 100644 index 0000000..a80cb4b --- /dev/null +++ b/src/components/MonthlyOrchestrators.js @@ -0,0 +1,179 @@ +import React, { useState, useEffect } from 'react'; +import { useSelector } from 'react-redux'; +import ScrollContainer from "react-indiana-drag-scroll"; +import Winner from '../components/WinnerStat'; +import { + getOrchestratorScores +} from "../actions/livepeer"; +import { Pagination } from "@mantine/core"; + +const itemsPerPage = 10; + +const MonthlyOrchestrators = (obj) => { + const livepeer = useSelector((state) => state.livepeerstate); + const [thisScores, setThisScores] = useState(null); + const [activePage, setPage] = useState(1); + + useEffect(() => { + const setScore = async () => { + if (!obj.data.testScores) { + const freshScore = await getOrchestratorScores(obj.data.year, obj.data.month); + if (freshScore) { + setThisScores(freshScore); + } + } else { + setThisScores(obj.data.testScores); + } + } + setScore(); + }, [obj.data.testScores]); + + // Show all orchs (if latestTotalStake exists) or show only those in winningTicketsReceived + let orchList; + let ticketList = obj.data.winningTicketsReceived || []; + let commissionList = obj.data.latestCommission || []; + let stakeList = obj.data.latestTotalStake || []; + + // Pies for stake overview, if have stake data for that month saved + let totalStakeSum = 0; + if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) { + orchList = [...obj.data.latestTotalStake]; + let ticketIdx = obj.data.latestTotalStake.length - 1; + // Calc total stake at that time + while (ticketIdx >= 0) { + const thisTicket = obj.data.latestTotalStake[ticketIdx]; + ticketIdx -= 1; + totalStakeSum += thisTicket.totalStake; + } + } else { + orchList = [...obj.data.winningTicketsReceived]; + } + + + let sortedList = []; + if (orchList.length) { + // Sort this months data + while (orchList.length) { + let ticketIdx2 = orchList.length - 1; + let largestIdx = 0; + let largestValue = 0; + + // Find current O with most ticket wins in Eth + while (ticketIdx2 >= 0) { + const currentOrch = orchList[ticketIdx2]; + let thisVal; + + for (const obj of ticketList) { + if (obj.address == currentOrch.address) { + thisVal = obj.sum; + } + } + + if (!thisVal) { + ticketIdx2 -= 1; + continue; + } + if (thisVal > largestValue) { + largestIdx = ticketIdx2; + largestValue = thisVal; + } + ticketIdx2 -= 1; + } + // Else try to sort by stake + if (!largestValue) { + ticketIdx2 = orchList.length - 1; + while (ticketIdx2 >= 0) { + const currentOrch = orchList[ticketIdx2]; + let thisVal; + + for (const obj of stakeList) { + if (obj.address == currentOrch.address) { + thisVal = obj.totalStake; + } + } + + if (!thisVal) { + ticketIdx2 -= 1; + continue; + } + if (thisVal > largestValue) { + largestIdx = ticketIdx2; + largestValue = thisVal; + } + ticketIdx2 -= 1; + } + } + // Push current biggest list + sortedList.push(orchList[largestIdx]); + // Remove from list + orchList.splice(largestIdx, 1); + } + } + + const totalPages = (sortedList.length + (itemsPerPage - (sortedList.length % itemsPerPage))) / itemsPerPage; + + return ( +
+
+ +
+ { + 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; + + for (const obj of ticketList) { + if (obj.address == orch.address) { + thisEarnings = obj; + } + } + for (const obj of commissionList) { + if (obj.address == orch.address) { + thisCommission = obj; + } + } + for (const obj of stakeList) { + if (obj.address == orch.address) { + thisStake = obj; + } + } + let thisScore = null; + if (thisScores && thisScores.scores) { + thisScore = thisScores.scores[orch.address]; + } + return ( +
+ +
+
+ ) + } + return null; + }) + } +
+ +
+
+ {totalPages > 1 ? + + : null} +
+
+ ) +} + +export default MonthlyOrchestrators; \ No newline at end of file diff --git a/src/components/OrchAddressViewer.js b/src/components/OrchAddressViewer.js index 5c00821..c53b3d4 100644 --- a/src/components/OrchAddressViewer.js +++ b/src/components/OrchAddressViewer.js @@ -78,12 +78,12 @@ const Address = (obj) => { if (thisInfo.avatar) { thisIcon = - + } else { thisIcon = - + } } else if (hasThreeBox) { @@ -94,7 +94,7 @@ const Address = (obj) => { } if (thisInfo.image) { thisIcon = - + } else { @@ -111,7 +111,7 @@ const Address = (obj) => { {thisIcon} - {thisName} + {thisName}
) } diff --git a/src/components/WinnerMonth.js b/src/components/WinnerMonth.js deleted file mode 100644 index 0f41dab..0000000 --- a/src/components/WinnerMonth.js +++ /dev/null @@ -1,623 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useSelector } from 'react-redux'; -import { VictoryPie } from 'victory'; -import ScrollContainer from "react-indiana-drag-scroll"; -import Winner from '../components/WinnerStat'; -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)"; -const ticketRedeemColour = "rgba(25, 98, 158, 0.4)"; -const rewardColour = "rgba(25, 27, 158, 0.4)"; -const unbondColour = "rgba(105, 25, 158, 0.4)"; -const updateColour = "rgba(158, 25, 52, 0.4)"; -const withdrawStakeColour = "rgba(158, 98, 25, 0.4)"; -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 = 10; - -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 () => { - if (!obj.data.testScores) { - const freshScore = await getOrchestratorScores(obj.data.year, obj.data.month); - if (freshScore) { - setThisScores(freshScore); - } - } else { - setThisScores(obj.data.testScores); - } - } - setScore(); - }, [obj.data.testScores]); - - const getName = (address) => { - let thisDomain = null; - // Lookup domain in cache - if (livepeer.ensDomainMapping) { - for (const thisAddr of livepeer.ensDomainMapping) { - if (thisAddr.address === address) { - thisDomain = thisAddr; - break; - } - } - } - // Lookup current info in cache only if this addr has a mapped ENS domain - if (thisDomain && thisDomain.domain) { - for (const thisAddr of livepeer.ensInfoMapping) { - if (thisAddr.domain === thisDomain.domain) { - if (thisAddr.domain.length > 18) { - return (thisAddr.domain.substring(0, 16) + ".."); - } - return thisAddr.domain; - } - } - } - - if (livepeer.threeBoxInfo) { - for (const thisAddr of livepeer.threeBoxInfo) { - if (thisAddr.address === address) { - if (thisAddr.name) { - if (thisAddr.name.length > 18) { - return (thisAddr.name.substring(0, 16) + ".."); - } - return thisAddr.name; - } else { - return (address.substring(0, 16) + ".."); - } - break; - } - } - } - - return (address.substring(0, 16) + ".."); - } - - // Show all orchs (if latestTotalStake exists) or show only those in winningTicketsReceived - let orchList; - let ticketList = obj.data.winningTicketsReceived || []; - let commissionList = obj.data.latestCommission || []; - let stakeList = obj.data.latestTotalStake || []; - - // Pies for stake overview, if have stake data for that month saved - let stakeObj; - let totalStakeSum = 0; - if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) { - orchList = [...obj.data.latestTotalStake]; - let pieList = []; - let otherSum = 0; - let ticketIdx = obj.data.latestTotalStake.length - 1; - // Calc total stake at that time - while (ticketIdx >= 0) { - const thisTicket = obj.data.latestTotalStake[ticketIdx]; - ticketIdx -= 1; - totalStakeSum += thisTicket.totalStake; - } - ticketIdx = obj.data.latestTotalStake.length - 1; - // Create pie chart - while (ticketIdx >= 0) { - const thisTicket = obj.data.latestTotalStake[ticketIdx]; - ticketIdx -= 1; - if ((thisTicket.totalStake / totalStakeSum) < 0.015) { - otherSum += thisTicket.totalStake; - } else { - pieList.push({ - address: getName(thisTicket.address), - sum: thisTicket.totalStake - }); - } - } - if ((otherSum / totalStakeSum) > 0.01) { - pieList.push({ - address: "Other", - sum: otherSum - }); - } - - totalGraphs++; - - stakeObj =
-

Stake Distribution

- -
; - } else { - orchList = [...obj.data.winningTicketsReceived]; - } - - // Pies for earnings overview - let earningsObj; - if (obj.data.winningTicketsReceived && obj.data.winningTicketsReceived.length) { - let otherSum = 0; - let pieList = []; - let ticketIdx = obj.data.winningTicketsReceived.length - 1; - // Create pie chart - while (ticketIdx >= 0) { - const thisTicket = obj.data.winningTicketsReceived[ticketIdx]; - ticketIdx -= 1; - if ((thisTicket.sum / obj.data.winningTicketsReceivedSum) < 0.015) { - otherSum += thisTicket.sum; - } else { - pieList.push({ - address: getName(thisTicket.address), - sum: thisTicket.sum - }); - } - } - if ((otherSum / obj.data.winningTicketsReceivedSum) > 0.01) { - pieList.push({ - address: "Other", - sum: otherSum - }); - } - - totalGraphs++; - - earningsObj =
-

Earnings Distribution

- -
; - } - - // Pies for broadcaster payout - let broadcasterObj; - if (obj.data.winningTicketsSent && obj.data.winningTicketsSent.length) { - let otherSum = 0; - let pieList = []; - let ticketIdx = obj.data.winningTicketsSent.length - 1; - // Create pie chart - while (ticketIdx >= 0) { - const thisTicket = obj.data.winningTicketsSent[ticketIdx]; - ticketIdx -= 1; - if ((thisTicket.sum / obj.data.winningTicketsReceivedSum) < 0.015) { - otherSum += thisTicket.sum; - } else { - pieList.push({ - address: getName(thisTicket.address), - sum: thisTicket.sum - }); - } - } - if ((otherSum / obj.data.winningTicketsReceivedSum) > 0.01) { - pieList.push({ - address: "Other", - sum: otherSum - }); - } - - totalGraphs++; - - broadcasterObj =
-

Broadcaster Payments

- -
; - } - - let sortedList = []; - if (orchList.length) { - // Sort this months data - while (orchList.length) { - let ticketIdx2 = orchList.length - 1; - let largestIdx = 0; - let largestValue = 0; - - // Find current O with most ticket wins in Eth - while (ticketIdx2 >= 0) { - const currentOrch = orchList[ticketIdx2]; - let thisVal; - - for (const obj of ticketList) { - if (obj.address == currentOrch.address) { - thisVal = obj.sum; - } - } - - if (!thisVal) { - ticketIdx2 -= 1; - continue; - } - if (thisVal > largestValue) { - largestIdx = ticketIdx2; - largestValue = thisVal; - } - ticketIdx2 -= 1; - } - // Else try to sort by stake - if (!largestValue) { - ticketIdx2 = orchList.length - 1; - while (ticketIdx2 >= 0) { - const currentOrch = orchList[ticketIdx2]; - let thisVal; - - for (const obj of stakeList) { - if (obj.address == currentOrch.address) { - thisVal = obj.totalStake; - } - } - - if (!thisVal) { - ticketIdx2 -= 1; - continue; - } - if (thisVal > largestValue) { - largestIdx = ticketIdx2; - largestValue = thisVal; - } - ticketIdx2 -= 1; - } - } - // Push current biggest list - sortedList.push(orchList[largestIdx]); - // Remove from list - orchList.splice(largestIdx, 1); - } - } - - 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 ( -
- {obj.data.reactivationCount ? -
-
- -
-
: null - } -
- {obj.data.activationCount ? -
-
- -
-
: null - } -
- {(obj.data.latestCommission && obj.data.latestCommission.length) ? -
-
- -
-
: null} -
- {obj.data.bondCount ? -
-
- -
-
: null - } -
- {obj.data.unbondCount ? -
-
- -
-
: null - } -
- {obj.data.rewardCount ? -
-
- -
-
: null - } -
- {obj.data.claimCount ? -
-
- -
-
: null - } -
- {obj.data.withdrawStakeCount ? -
-
- -
-
: null - } -
- {obj.data.withdrawFeesCount ? -
-
- -
-
: null - } -
- {obj.data.moveStakeCount ? -
-
- -
-
: null - } -
- {obj.data.winningTicketsReceivedCount ? -
-
- -
-
: null - } -
- {obj.data.winningTicketsRedeemedCount ? -
-
- -
-
: null - }
-
- {renderStake ? stakeObj : null} - {renderEarnings ? earningsObj : null} - {renderBread ? broadcasterObj : null} -
- {totalGraphs > 1 ? - - : null} -
-
-
-
-

{sortedList.length} Delegators

-
-
- -
- { - 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; - - for (const obj of ticketList) { - if (obj.address == orch.address) { - thisEarnings = obj; - } - } - for (const obj of commissionList) { - if (obj.address == orch.address) { - thisCommission = obj; - } - } - for (const obj of stakeList) { - if (obj.address == orch.address) { - thisStake = obj; - } - } - let thisScore = null; - if (thisScores && thisScores.scores) { - thisScore = thisScores.scores[orch.address]; - } - return ( -
- -
-
- ) - } - return null; - }) - } -
- -
-
- {totalPages > 1 ? - - : null} -
-
-
-
-
- ) -} - -export default WinnerMonth; \ No newline at end of file diff --git a/src/components/WinnerStat.js b/src/components/WinnerStat.js index b96191e..50d61bc 100644 --- a/src/components/WinnerStat.js +++ b/src/components/WinnerStat.js @@ -91,7 +91,7 @@ const Winner = (obj) => { return (
-
+

{obj.thisIndex}

@@ -110,7 +110,7 @@ const Winner = (obj) => {
({((obj.thisEarnings.sum / obj.totalEarnings) * 100).toFixed(2)} %)
-
: null +
:
} {obj.thisStake ?
@@ -123,7 +123,7 @@ const Winner = (obj) => {
({((obj.thisStake.totalStake / obj.totalStake) * 100).toFixed(2)} %)
-
: null +
:
} {obj.thisCommission ?
@@ -136,7 +136,7 @@ const Winner = (obj) => {
{obj.thisCommission.feeCommission.toFixed(2)}% Fee
-
: null +
:
}
diff --git a/src/pages/MonthlyStats.js b/src/pages/MonthlyStats.js new file mode 100644 index 0000000..631885e --- /dev/null +++ b/src/pages/MonthlyStats.js @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; +import MonthlyFactoids from '../components/MonthlyFactoids'; +import MonthlyGraphs from '../components/MonthlyGraphs'; +import MonthlyOrchestrators from '../components/MonthlyOrchestrators'; + +import { Pagination } from "@mantine/core"; + +const MonthlyStats = (obj) => { + const [activePage, setPage] = useState(1); + const totalPages = 3; + + return ( +
+
+
+ { + activePage == 1 ?

Summary

: null + } + { + activePage == 2 ?

Graphs

: null + } + { + activePage == 3 ?

orchestrators

: null + } +
+
+ { + activePage == 1 ? : null + } + { + activePage == 2 ? : null + } + { + activePage == 3 ? : null + } +
+
+ +
+
+
+ ) +} + +export default MonthlyStats; \ No newline at end of file diff --git a/src/pages/paginator.js b/src/pages/paginator.js index ee34a91..14a62c8 100644 --- a/src/pages/paginator.js +++ b/src/pages/paginator.js @@ -1,6 +1,5 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, } from 'react'; import ScrollContainer from "react-indiana-drag-scroll"; -import Address from "./OrchAddressViewer"; import { Pagination } from "@mantine/core"; const itemsPerPage = 10; diff --git a/src/pages/stats.js b/src/pages/stats.js index fce1944..ea3947e 100644 --- a/src/pages/stats.js +++ b/src/pages/stats.js @@ -1,16 +1,13 @@ -import React, { useState, useEffect } from 'react' +import React, { useState } from 'react' import '../style.css'; import { Navigate } from "react-router-dom"; -import { useSelector, useDispatch } from 'react-redux'; +import { useSelector } from 'react-redux'; import { Accordion } from '@mantine/core'; -import ScrollContainer from 'react-indiana-drag-scroll'; -import WinnerMonth from '../components/WinnerMonth'; -// import Graphs from '../components/Graphs'; +import MonthlyStats from './MonthlyStats'; const Stats = (obj) => { const livepeer = useSelector((state) => state.livepeerstate); const [redirectToHome, setRedirectToHome] = useState(false); - const [removeOnlyStakers, setRemoveOnlyStakers] = useState(false); console.log("Rendering Stats Viewer"); @@ -29,14 +26,6 @@ const Stats = (obj) => {

Statistics

- {/*
-

Filter

-
setRemoveOnlyStakers(!removeOnlyStakers)}> -
- {removeOnlyStakers ? "Show" : "Hide"} -
-
-
*/}
@@ -44,21 +33,40 @@ const Stats = (obj) => {
- -
+
+
- {/* */} { livepeer.monthlyStats.slice(0).reverse().map(function (data, i) { let thisMonth = ""; @@ -89,14 +97,17 @@ const Stats = (obj) => { thisMonth = "December";; } + const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth"; + return ( - @@ -106,13 +117,13 @@ const Stats = (obj) => {
- +
-
+
); } diff --git a/src/style.css b/src/style.css index 10d8b33..30a63ba 100644 --- a/src/style.css +++ b/src/style.css @@ -228,6 +228,14 @@ svg { border-radius: 1em; } +.insetEffect { + background-color: rgba(206, 206, 206, 0.26); + -webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05); + -moz-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05); + box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05); + width: 100%; +} + .smallTxt { font-size: small; }