Added filter to hide non-earners for monthly stats

src/components/MonthlyFactoids.js

@@ -27,12 +27,10 @@ const MonthlyFactoids = (obj) => {
   }
 
   return (
-    <div className="stroke insetEffect" key={obj.seed + "factoids"} style={{ height: '70vh' }}>
+    <div className="stroke insetEffect" key={obj.seed + "factoids"}>
-      <div className="content-wrapper" style={{width: "unset"}}>
+      <div className="overflow-content" style={{ cursor: 'grab', width: "unset" }}>
-        <ScrollContainer className="overflow-container" hideScrollbars={false} style={{width: "unset"}}>
-          <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '70vh', width: "unset" }}>
         {obj.data.reactivationCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: activationColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-reactivationCount-"} icon={"🔌"} subtext={obj.data.reactivationCount + " reactivations"} descriptions={[
@@ -43,7 +41,7 @@ const MonthlyFactoids = (obj) => {
         }
 
         {obj.data.activationCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: activationColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"🔧"} subtext={obj.data.activationCount + " new orchestrators"} descriptions={[
@@ -53,7 +51,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {(obj.data.latestCommission && obj.data.latestCommission.length) ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: updateColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"🔗"} subtext={obj.data.latestCommission.length + " orchestrators found"} descriptions={[
@@ -62,7 +60,7 @@ const MonthlyFactoids = (obj) => {
             </div>
           </div> : null}
         {obj.data.bondCount ?
-              <div className="stroke" style={{width: "unset"}}>
+          <div className="stroke" style={{ width: "unset" }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: stakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"📈"} subtext={obj.data.bondCount + " new delegators"} descriptions={[
@@ -72,7 +70,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.unbondCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: unbondColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"📉"} subtext={obj.data.unbondCount + " leaving delegators"} descriptions={[
@@ -82,7 +80,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.rewardCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: rewardColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"⌛"} subtext={obj.data.rewardCount + " reward calls"} descriptions={[
@@ -92,7 +90,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.claimCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: claimColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"🏦"} subtext={obj.data.claimCount + " reward claims"} descriptions={[
@@ -102,7 +100,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.withdrawStakeCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: withdrawStakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"💸"} subtext={obj.data.withdrawStakeCount + " withdraw reward calls"} descriptions={[
@@ -112,7 +110,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.withdrawFeesCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: withdrawStakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"💸"} subtext={obj.data.withdrawFeesCount + " withdraw fee calls"} descriptions={[
@@ -122,7 +120,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.moveStakeCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: stakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"🔄"} subtext={obj.data.moveStakeCount + " stake movements"} descriptions={[
@@ -132,7 +130,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.winningTicketsReceivedCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: ticketTransferColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"🎫"} subtext={obj.data.winningTicketsReceivedCount + " winning tickets"} descriptions={[
@@ -142,7 +140,7 @@ const MonthlyFactoids = (obj) => {
           </div> : null
         }
         {obj.data.winningTicketsRedeemedCount ?
-              <div className="stroke" style={{width: 'unset'}}>
+          <div className="stroke" style={{ width: 'unset' }}>
             <div className="halfVerticalDivider" />
             <div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: ticketRedeemColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
               <Ticket seed={obj.seed + "-neworchs-"} icon={"🎟️"} subtext={obj.data.winningTicketsRedeemedCount + " redeemed tickets"} descriptions={[
@@ -153,8 +151,6 @@ const MonthlyFactoids = (obj) => {
         }
         <div className="halfVerticalDivider" />
       </div>
-        </ScrollContainer>
-      </div>
     </div>
   )
 }

src/components/MonthlyGraphs.js

@@ -53,27 +53,48 @@ const MonthlyGraphs = (obj) => {
 
   // Show all orchs (if latestTotalStake exists) or show only those in winningTicketsReceived
   let orchList;
-  let ticketList = obj.data.winningTicketsReceived || [];
+  if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) {
-  let stakeList = obj.data.latestTotalStake || [];
+    orchList = [...obj.data.latestTotalStake];
+    // Filter out orchestrators who have not earned any fees, to get a more accurate earnings vs stake overview
+    if (obj.showOnlyTranscoders) {
+      if (obj.data.winningTicketsReceived && obj.data.winningTicketsReceived.length) {
+        // For each orchestrator in latestTotalStake, splice it if they are not present in winningTicketsReceived
+        let ticketIdx = obj.data.latestTotalStake.length - 1;
+        while (ticketIdx >= 0) {
+          const thisOrch = obj.data.latestTotalStake[ticketIdx];
+          let found = false;
+          for (const orchWinnings of obj.data.winningTicketsReceived) {
+            if (orchWinnings.address == thisOrch.address) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) {
+            orchList.splice(ticketIdx, 1);
+          }
+          ticketIdx--;
+        }
+      }
+    }
+  }
 
   // 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) {
+  if (orchList && orchList.length) {
-    orchList = [...obj.data.latestTotalStake];
     let pieList = [];
     let otherSum = 0;
-    let ticketIdx = obj.data.latestTotalStake.length - 1;
+    let ticketIdx = orchList.length - 1;
     // Calc total stake at that time
     while (ticketIdx >= 0) {
-      const thisTicket = obj.data.latestTotalStake[ticketIdx];
+      const thisTicket = orchList[ticketIdx];
       ticketIdx -= 1;
       totalStakeSum += thisTicket.totalStake;
     }
-    ticketIdx = obj.data.latestTotalStake.length - 1;
+    ticketIdx = orchList.length - 1;
     // Create pie chart
     while (ticketIdx >= 0) {
-      const thisTicket = obj.data.latestTotalStake[ticketIdx];
+      const thisTicket = orchList[ticketIdx];
       ticketIdx -= 1;
       if ((thisTicket.totalStake / totalStakeSum) < 0.015) {
         otherSum += thisTicket.totalStake;
@@ -143,8 +164,6 @@ const MonthlyGraphs = (obj) => {
         labelPlacement="parallel"
       />
     </div>;
-  } else {
-    orchList = [...obj.data.winningTicketsReceived];
   }
 
   // Pies for earnings overview
@@ -307,66 +326,6 @@ const MonthlyGraphs = (obj) => {
     </div>;
   }
 
-  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 thisColour;
   if (activeGraph == 1) {
     thisColour = "violet";

src/components/MonthlyOrchestrators.js

@@ -29,27 +29,47 @@ const MonthlyOrchestrators = (obj) => {
   }, [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
+
+  // Show all orchs (if latestTotalStake exists) or show only those in winningTicketsReceived
+  let orchList;
   let totalStakeSum = 0;
   if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) {
     orchList = [...obj.data.latestTotalStake];
+    // Filter out orchestrators who have not earned any fees, to get a more accurate earnings vs stake overview
+    if (obj.showOnlyTranscoders) {
+      if (obj.data.winningTicketsReceived && obj.data.winningTicketsReceived.length) {
+        // For each orchestrator in latestTotalStake, splice it if they are not present in winningTicketsReceived
         let ticketIdx = obj.data.latestTotalStake.length - 1;
-    // Calc total stake at that time
         while (ticketIdx >= 0) {
-      const thisTicket = obj.data.latestTotalStake[ticketIdx];
+          const thisOrch = obj.data.latestTotalStake[ticketIdx];
-      ticketIdx -= 1;
+          let found = false;
-      totalStakeSum += thisTicket.totalStake;
+          for (const orchWinnings of obj.data.winningTicketsReceived) {
+            if (orchWinnings.address == thisOrch.address) {
+              found = true;
+              break;
+            }
+          }
+          if (!found) {
+            orchList.splice(ticketIdx, 1);
+          } else {
+            totalStakeSum += thisOrch.totalStake;
+          }
+          ticketIdx--;
+        }
+      }
+    } else {
+      for (const thisOrch of obj.data.latestTotalStake) {
+        totalStakeSum += thisOrch.totalStake;
+      }
     }
   } else {
     orchList = [...obj.data.winningTicketsReceived];
   }
 
-
   let sortedList = [];
   if (orchList.length) {
     // Sort this months data

src/pages/MonthlyStats.js

@@ -111,12 +111,14 @@ const MonthlyStats = (obj) => {
       {
         activePage == 2 ? <MonthlyGraphs
           data={obj.data}
+          showOnlyTranscoders={obj.showOnlyTranscoders}
           seed={"graphs" + obj.data.year + "-" + obj.data.month + "-" + obj.data.total}
         /> : null
       }
       {
         activePage == 3 ? <MonthlyOrchestrators
           data={obj.data}
+          showOnlyTranscoders={obj.showOnlyTranscoders}
           seed={"orchestrators" + obj.data.year + "-" + obj.data.month + "-" + obj.data.total}
         /> : null
       }

src/pages/stats.js

@@ -8,6 +8,7 @@ import MonthlyStats from './MonthlyStats';
 const Stats = (obj) => {
   const livepeer = useSelector((state) => state.livepeerstate);
   const [redirectToHome, setRedirectToHome] = useState(false);
+  const [showOnlyTranscoders, setShowOnlyTranscoders] = useState(true);
 
   console.log("Rendering Stats Viewer");
 
@@ -26,6 +27,14 @@ const Stats = (obj) => {
           </button>
           <h4 className="rowAlignLeft withWrap showNeverOnMobile">Statistics</h4>
         </div>
+        <div className='rowAlignRight'>
+          <p>Hide non-earners</p>
+          <div className="toggle-container" onClick={() => setShowOnlyTranscoders(!showOnlyTranscoders)}>
+            <div className={`dialog-button ${showOnlyTranscoders ? "" : "disabled"}`}>
+              {showOnlyTranscoders ? "Show" : "Hide"}
+            </div>
+          </div>
+        </div>
       </div>
       <div id='bodyContent'>
         <div className="row">
@@ -131,6 +140,7 @@ const Stats = (obj) => {
                               key={"accord" + i + data.year + "-" + data.month + "-" + data.total}>
                               <MonthlyStats
                                 data={data}
+                                showOnlyTranscoders={showOnlyTranscoders}
                                 seed={"win" + i + data.year + "-" + data.month + "-" + data.total}
                               />
                             </Accordion.Item>