Added filter to hide non-earners for monthly stats

src/components/MonthlyFactoids.js

@@ -27,10 +27,8 @@ 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="halfVerticalDivider" />
@@ -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>