Add Launch Capacity Graph

public/_head.html

@@ -20,6 +20,8 @@
 <script defer src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
 <script defer src="https://unpkg.com/[email protected]/build/global/luxon.min.js"></script>
 
+<script src="https://d3js.org/d3.v6.js"></script>
+
 <!-- MISC -->
 <link rel="stylesheet" href="/css/misc.css" />
 

public/home.html

@@ -30,6 +30,11 @@ <h3 class="d-inline-block text-center"><a href="/home">Minipools</a></h3>
   <div id="minipools"><div class="loader">Loading...</div></div>
 </div>
 
+<div class="container w-95 text-center border border-5 rounded mb-4 pb-4">
+  <h3 class="d-inline-block text-center"><a href="/home">Estimated Launch Capacity</a></h3>
+  <div id="launch-capacity"></div>
+</div>
+
 <div class="container w-95 text-center mb-4 pb-4 alert alert-warning">
   ⚠️ These numbers are all estimates of next cycle's rewards, based on the information in the smart contracts, and may
   not be accurate.
@@ -118,6 +123,8 @@ <h3 class="text-center">Contracts</h3>
     tableDashboard.restoreRedraw();
     tableMinipools.restoreRedraw();
     tableStakers.restoreRedraw();
+
+    drawLaunchCapacity();
   });
 
   var valueEl = document.getElementById("filter-value");
@@ -147,6 +154,150 @@ <h3 class="text-center">Contracts</h3>
     valueEl.value = "";
     tableMinipools.clearFilter();
   });
+
+  function drawLaunchCapacityz() {
+    const data = GGP.launchCapacityData();
+
+    // Process data to count occurrences per date
+    const dataCount = d3
+      .rollups(
+        data,
+        (v) => v.length,
+        (d) => d.date
+      )
+      .map(([date, count]) => ({ date, count }));
+
+    // Set up SVG dimensions
+    const margin = { top: 20, right: 20, bottom: 30, left: 40 },
+      width = 960 - margin.left - margin.right,
+      height = 500 - margin.top - margin.bottom;
+
+    // Append SVG object to the body of the page
+    const svg = d3
+      .select("#launch-capacity")
+      .append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    // Set up X scale
+    const x = d3.scaleBand().range([0, width]).padding(0.1);
+    x.domain(dataCount.map((d) => d.date));
+
+    // Set up Y scale
+    const y = d3.scaleLinear().range([height, 0]);
+    y.domain([0, d3.max(dataCount, (d) => d.count)]);
+
+    // Add X axis
+    svg
+      .append("g")
+      .attr("transform", `translate(0,${height})`)
+      .call(d3.axisBottom(x))
+      .selectAll("text")
+      .style("text-anchor", "end")
+      .attr("dx", "-.8em")
+      .attr("dy", ".15em")
+      .attr("transform", "rotate(-65)");
+
+    // Add Y axis
+    svg.append("g").call(d3.axisLeft(y));
+
+    // Draw bars
+    svg
+      .selectAll(".bar")
+      .data(dataCount)
+      .enter()
+      .append("rect")
+      .attr("class", "bar")
+      .attr("x", (d) => x(d.date))
+      .attr("width", x.bandwidth())
+      .attr("y", (d) => y(d.count))
+      .attr("height", (d) => height - y(d.count));
+  }
+
+  function drawLaunchCapacity() {
+    const margin = { top: 10, right: 30, bottom: 30, left: 40 };
+    const width = 600 - margin.left - margin.right;
+    const height = 400 - margin.top - margin.bottom;
+
+    document.getElementById("launch-capacity").innerHTML = "";
+
+    const svg = d3
+      .select("#launch-capacity")
+      .append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const data = GGP.launchCapacityData();
+    const dateTimeExtent = d3.extent(data, (d) => d.date);
+    const now = luxon.DateTime.now().startOf("day");
+    dateTimeExtent[0] = now;
+    const thresholds = d3.timeHour.every(24).range(...dateTimeExtent);
+
+    const x = d3.scaleTime().domain(dateTimeExtent).rangeRound([0, width]);
+
+    const y = d3.scaleLinear().range([height, 0]);
+
+    const bins = d3
+      .histogram()
+      .domain(dateTimeExtent)
+      .thresholds(thresholds)
+      .value((d) => d.date)(data);
+
+    y.domain([
+      0,
+      d3.max(bins, function (d) {
+        return d.length;
+      }),
+    ]);
+
+    svg
+      .selectAll("rect")
+      .data(bins)
+      .enter()
+      .append("rect")
+      .attr("class", "bar")
+      .attr("x", 1)
+      .attr("fill", "#141168")
+      .attr("transform", function (d) {
+        return "translate(" + x(d.x0) + "," + y(d.length) + ")";
+      })
+      .attr("width", function (d) {
+        return x(d.x1) - x(d.x0) - 1;
+      })
+      .attr("height", function (d) {
+        return height - y(d.length);
+      });
+
+    const xAxis = d3.axisBottom(x).tickArguments([d3.timeDay.every(1)]);
+
+    // Add the x axis
+    svg
+      .append("g")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis);
+
+    // Add the y axis
+    svg
+      .append("g")
+      .call(
+        d3.axisLeft(y).ticks(
+          d3.max(bins, function (d) {
+            return d.length;
+          })
+        )
+      )
+      .append("text")
+      .attr("fill", "#795ae1")
+      .attr("transform", "rotate(-90)")
+      .attr("y", -40)
+      .attr("dy", "0.71em")
+      .style("text-anchor", "end")
+      .text("Minipools Available");
+  }
 </script>
 <style>
   .copyable {

public/js/gogopool.js

@@ -4,6 +4,7 @@ import { utils as ethersUtils, providers, Contract, constants, BigNumber } from
 import { Contract as MCContract, Provider as MCProvider } from "https://esm.sh/[email protected]";
 import { MINIPOOL_STATUS_MAP, formatters, transformerFns, unfuckEthersObj } from "/js/utils.js";
 import { minipoolsTransformer } from "/js/transformers.js";
+import { DateTime } from "https://esm.sh/[email protected]";
 
 // Hard-code reward cycle amounts
 // Note we show the rewards for the *next* cycle amount
@@ -274,6 +275,43 @@ class GoGoPool {
     return this.minipoolsData;
   }
 
+  launchCapacityData() {
+    const ignoreNodes = {
+      "NodeID-2wWroHMggzJvKh6t3tdPtJTTP9DNmdc4K": true,
+      "NodeID-LUhB7mVaTMnkYLQsqf2RV2PUerJfsq2wW": true,
+      "NodeID-LXpULpbU1A4AobEzCSBy6wYLEbogwsMK1": true,
+      "NodeID-GpDhyVHYVaL8qXFB2a1QPBsXyUMZjiXLF": true,
+    };
+    const now = DateTime.now().startOf("day") / 1000;
+    let stakingMPs = this.minipoolsData.filter(
+      (mp) =>
+        !ignoreNodes[mp.nodeID] && mp.status === "Staking" && mp.endTime > now && mp.endTime < now + 60 * 60 * 24 * 7
+    );
+    stakingMPs = stakingMPs.map((mp) => {
+      return {
+        date: DateTime.fromSeconds(mp.endTime),
+        value: 1,
+      };
+    });
+
+    // Add an element for each mp we could launch right now
+    const amtAvail = parseFloat(
+      this.dashboardAsTabulatorData().filter(
+        (obj) => obj.contract === "TokenggAVAX" && obj.title === "amountAvailableForStaking"
+      )[0].value
+    );
+    const mpAvail = Math.floor(amtAvail / 1000);
+    // console.log(mpAvail);
+    for (let i = 0; i < mpAvail; i++) {
+      stakingMPs.push({
+        date: DateTime.fromSeconds(now),
+        value: 1,
+      });
+    }
+    // console.log(stakingMPs);
+    return stakingMPs;
+  }
+
   async fetchStakers({ status } = { status: Object.keys(MINIPOOL_STATUS_MAP) }) {
     await this.until((_) => this.isLoaded);
 

public/js/orc.js

@@ -55,7 +55,7 @@ class Orc {
   }
 
   async fetchTxLogs() {
-    const response = await fetch(`${this.orcURL}/all_tx_logs?limit=100`, {
+    const response = await fetch(`${this.orcURL}/all_tx_logs?limit=300`, {
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",