Chats

by Aggre _--

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/8.0.2/bignumber.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

CSS

canvas {
  background-color: #eee;
}

JavaScript

// Define `fetchAll` function to fetch all data from TheGraph
const fetchAll = async (endpoint) => new Promise(async (resolve) => {
  let data = []
  const f = async (timestamp = 0) => {
    console.log({
      endpoint,
      timestamp
    })
    const res = await fetch(endpoint, {
      method: 'POST',
      body: JSON.stringify({
        query: `{
			totalLockedAmounts(first: 1000, orderBy: timestamp, orderDirection: asc, where:{timestamp_gt: ${timestamp}}) {
				id
				timestamp
				amount
			}
		}`
      })
    })
    const json = await res.json()
    if (json.data.totalLockedAmounts.length) {
      console.log('respond', json.data.totalLockedAmounts.length)
      const items = json.data.totalLockedAmounts.map(({
        timestamp,
        amount,
        id
      }) => ({
        id,
        timestamp,
        amount: new BigNumber(amount).div(1e18).toNumber()
      }))
      data = [...data, ...items]
      f(items[items.length - 1].timestamp)
    } else {
      console.log('finish', endpoint)
      resolve(data)
    }
  }
  f(0)
})


const dateToKey = (date) => {
  return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDay()+1}`
}

const byDay = R.groupBy((item) => {
  const {
    timestamp
  } = item;
  const date = new Date(Number(timestamp) * 1000)
  return dateToKey(date)
})

const diff = (a, b) => a - b

const pickLasts = (items) => R.keys(items).map(key => {
  const dayItems = R.sort(diff, items[key])
  return ({
    key,
    amount: R.last(dayItems).amount
  })
})

// Run the graphing
;
(async () => {
  const promises = [
    'https://api.thegraph.com/subgraphs/name/dev-protocol/mainnet-v2',
    'https://api.thegraph.com/subgraphs/name/dev-protocol/arbitrum-one-v2',
    'https://api.thegraph.com/subgraphs/name/dev-protocol/polygon-v2'
  ].map(fetchAll)
  const [mainnet, arb, polygon] = await Promise.allSettled(promises)

  const picked = [
    pickLasts(byDay(mainnet.value)),
    pickLasts(byDay(arb.value)),
   ...