Add the /v1/history/stats endpoint to the API, use it to display the area chart of liquidity-depth-over-time

api/index.js

@@ -36,6 +36,11 @@ thorchain.all('/v1/network', async (req, res) => {
   res.json(data);
 });
 
+thorchain.all('/v1/history/stats', async (req, res) => {
+  const data = await loadCached(`${req.blockchain}::statsHistory`);
+  res.json(data);
+});
+
 thorchain.all('/v1/thorchain/constants', async (req, res) => {
   const data = await loadCached(`${req.blockchain}::constants`);
   res.json(data);

components/Thorchain/AreaChart.vue

@@ -1,13 +1,8 @@
 <template>
-  <div class="coming-soon__parent">
-    <ComingSoon />
-    <div class="coming-soon__target">
-      <AppHighchart
-        :chart-options="chartOptions"
-        :placeholder-height="130"
-      />
-    </div>
-  </div>
+  <AppHighchart
+    :chart-options="chartOptions"
+    :placeholder-height="130"
+  />
 </template>
 
 <script>

lib/api.mjs

@@ -53,6 +53,9 @@ export default (blockchain) => {
     networkUrl() {
       return `${midgardBase}/v1/network`;
     },
+    statsHistoryUrl({interval, from, to}) {
+      return `${midgardBase}/v1/history/stats?interval=${interval}&from=${from}&to=${to}`;
+    },
     constantsUrl() {
       return `${midgardBase}/v1/thorchain/constants`;
     },
@@ -116,6 +119,29 @@ export default (blockchain) => {
       const { data } = await axios.get(url);
       return data;
     },
+    async loadStatsHistory({ axios }) {
+      // NOTE(Pierre): /v1/history/stats is a new endpoint and only available
+      // on the chaosnet IP AFAICT, so we stub it here if on testnet to allow
+      // the page to still load without it. This can be removed once the testnet
+      // IP implements it too.
+      if(blockchain !== "chaosnet")
+        return [
+          {time: fns.getUnixTime(fns.sub(Date.now(), {days: 12})), totalRuneDepth:0},
+          {time: fns.getUnixTime(Date.now()), totalRuneDepth:0},
+        ];
+
+      // NOTE(Pierre): The requested time range has to be set in stone here,
+      // to allow the response data to be stored and referred to under a single
+      // key in the redis cache
+      const url = this.statsHistoryUrl({
+        interval: 'day',
+        from: fns.getUnixTime(fns.sub(Date.now(), {days: 12})),
+        to: fns.getUnixTime(Date.now())
+      });
+
+      const { data } = await axios.get(url);
+      return data;
+    },
 
     // Cache only
 

lib/fetchCommon.mjs

@@ -13,6 +13,7 @@ export default async function (ctx, blockchain) {
     asgardVaults,
     network,
     marketData,
+    statsHistory,
     constants,
     runevaultBalance,
     extra,
@@ -38,6 +39,9 @@ export default async function (ctx, blockchain) {
     api.loadMarketData({
       axios: ctx.$axios,
     }),
+    api.loadStatsHistory({
+      axios: ctx.$axios,
+    }),
     api.loadConstants({
       axios: ctx.$axios,
     }),
@@ -88,6 +92,7 @@ export default async function (ctx, blockchain) {
       poolShareFactor: network.poolShareFactor,
     }),
     ctx.$store.commit('runeMarketData/setData', marketData),
+    ctx.$store.commit('timeSeries/setStatsHistory', statsHistory),
     ctx.$store.commit(
       'nodes/setChurnConstants',
       { rotatePerBlockHeight, rotateRetryBlocks, desireValidatorSet }

scripts/saveApiResponses.mjs

@@ -57,6 +57,7 @@ async function updateBlockchainData(blockchain) {
   const poolAddresses = await api.loadPoolAddresses({ axios });
   const stats = await api.loadStats({ axios });
   const network = await api.loadNetwork({ axios });
+  const statsHistory = await api.loadStatsHistory({ axios });
   const constants = await api.loadConstants({ axios });
   const versionRequest = await axios.get(`${api.nodeUrl()}/thorchain/version`);
 
@@ -123,6 +124,7 @@ async function updateBlockchainData(blockchain) {
   })
   await set('stats', stats);
   await set('network', network);
+  await set('statsHistory', statsHistory);
   await set('constants', constants);
   await set('version', versionRequest.data);
   await set('marketData', { priceUsd: priceUsd.toString(), circulating });

store/timeSeries.js

@@ -9,3 +9,12 @@ export const state = () => ({
   liquidityDepthOverTime: dummyTimeSeriesProgressive(someTimeAgo, today, 10),
   percentageRuneLockedOverTime: dummyTimeSeriesIntervals(someTimeAgo, today, 20, 100),
 });
+
+export const mutations = {
+  setStatsHistory(state, statsHistory) {
+    state.liquidityDepthOverTime = statsHistory.map(e => ({
+      date: e.time * 1000,
+      value: parseInt(e.totalRuneDepth, 10),
+    }));
+  },
+};