Added filter to hide non-earners for monthly stats

2025-07-05 10:45:10 +02:00 · 2022-04-28 11:23:53 +02:00 · 2022-04-28 11:23:53 +02:00 · d513bb9427
commit d513bb9427
parent db8b2b6830
5 changed files with 193 additions and 206 deletions
--- a/src/components/MonthlyFactoids.js
+++ b/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="content-wrapper" style={{width: "unset"}}>
-        <ScrollContainer className="overflow-container" hideScrollbars={false} style={{width: "unset"}}>
-          <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '70vh', width: "unset" }}>
+    <div className="stroke insetEffect" key={obj.seed + "factoids"}>
+      <div className="overflow-content" style={{ cursor: 'grab', 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>
  )
 }
--- a/src/components/MonthlyGraphs.js
+++ b/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 || [];
-  let stakeList = obj.data.latestTotalStake || [];
+  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;
+        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) {
-    orchList = [...obj.data.latestTotalStake];
+  if (orchList && orchList.length) {
    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";
--- a/src/components/MonthlyOrchestrators.js
+++ b/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];
-      ticketIdx -= 1;
-      totalStakeSum += thisTicket.totalStake;
+          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);
+          } 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
--- a/src/pages/MonthlyStats.js
+++ b/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
      }
--- a/src/pages/stats.js
+++ b/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>