Add analytics page

[tiagofilipenunes]

Overview

Functionality

The analytics page allows the user to control what information is displayed by selecting:

• Metric: TVL (default), TVL Change, Volume, Fees
• Numéraire: USD (default), Token
• Token: Filter by selecting from a list of unique tokens in token column obtained from retrieved information. Default: no filtering
• Date Range. Default: 1 year
• Resolution: Block Precision, 1m, 5m, 15m, 30m, 1h, 4h, 1D (default), 1W, 1M
• TA Indicators: SMA20, EWMA30, CMA. Default: no indicator
• Download CSV

The README.md and controls.py in the analytics repo are useful to understand the available functionality.

Charting library

• The current analytics page uses plotly.js which is based in d3.js. A decision must be made on what graphing library to use, with the currently presented options being:
• Highcharts - already used in the app for the portfolio page
• d3.js - already used in the app for the price charts
• plotly.js - not available, less preferred option

The charts must have the following functionality:

• Allow for a left and right y-axis to be displayed with corresponding labels and values with prefixes
• x-axis displaying formatted timestamps
• Hover tooltip
• Chart labels: used for metrics with more than one chart available

Metrics and token numéraire

Four metrics must be made available with information retrieved from the carbon backend.
Each metric can be expressed in token numéraire or in USD price. If expressed in the former, only one token must be selected. A description of how to calculate and display each pair metric/numéraire is shown below.

• TVL: https://api.carbondefi.xyz/v1/analytics/tvl
  • Chart:
    • Type: Area, Scatter with fill to zero
    • Title: "TVL"
    • Fill zeroes with previously available point
  • x axis: timestamp
  • y axis:
    • Title:
      • USD: "TVL (USD)"
      • Token: "TVL (Token)"
    • Prefix with $ for USD numéraire, no prefix otherwise
    • non-negative
    • left axis:
      • USD: Cumulative sum of delta_liquidity_usd
      • Token: Cumulative sum of delta_liquidity
  • Resolution aggregation function: last value for each resolution period (x minutes, hours, days, weeks, months)
  • Token column: symbol
  • On hovering the chart, show:
    • USD: "TVL: ${yColumnValue} | date"
    • Token: "TVL: {yColumnValue} | date"
• TVL Change: https://api.carbondefi.xyz/v1/analytics/tvl
  • Chart:
    • Type: Bar chart
    • Title: "TVL Change"
    • Normal, do not fill zeroes
  • x axis: timestamp
  • y axis:
    • Title:
      • USD: "TVL change (USD)"
      • Token: "TVL Change (Token)"
    • Prefix with $ for USD numéraire, no prefix otherwise
    • Can be negative
    • left axis:
      • USD: delta_liquidity_usd
      • Token: delta_liquidity
  • Resolution aggregation function: sum value for each resolution period (x minutes, hours, days, weeks, months)
  • Token column: symbol
  • On hovering the chart, show:
    • USD: "TVL Change: ${yColumnValue} | date"
    • Token: "TVL Change: {yColumnValue} | date"
• Volume: https://api.carbondefi.xyz/v1//analytics/volume
  • Chart:
    • Type:
      • left y axis: Area, Scatter without fill
      • right y axis: Area, Scatter with fill to zero
    • Title: "Volume"
    • left axis: Normal, do not fill zeroes
    • right axis: fill zeroes with previous value
  • x axis: timestamp
  • y axis:
    • Prefix with $ for USD numéraire, no prefix otherwise
    • Non-negative
    • Title:
      • left axis
        • USD: "Volume (USD)"
        • Token: "Volume (Token)"
      • right axis
        • USD: "Cumulative Volume (USD)"
        • Token: "Cumulative Volume (Token)"
    • left axis:
      • USD: targetamount_usd
      • Token: targetamount_real
    • right axis:
      • USD: Cumulative sum of targetamount_usd
      • Token: Cumulative sum of targetamount_real
  • Resolution aggregation function:
    • left axis:
      • last value for each resolution period (x minutes, hours, days, weeks, months)
    • right axis:
      • sum value for each resolution period (x minutes, hours, days, weeks, months)
  • Token column: targetsymbol
  • On hovering the chart, show:
    • left axis:
      • USD: "Volume: ${yColumnValue} | date"
      • Token: "Volume: {yColumnValue} | date"
    • right axis:
      • USD: "Cumulative Volume: ${yColumnValue} | date"
      • Token: "Cumulative Volume: {yColumnValue} | date"
• Fees: https://api.carbondefi.xyz/v1//analytics/volume
  • Chart:
    • Type:
      • left y axis: Area, Scatter without fill
      • right y axis: Area, Scatter with fill to zero
    • Title: "Fees"
    • left axis: Normal, do not fill zeroes
    • right axis: fill zeroes with previous value
  • x axis: timestamp
  • y axis:
    • Prefix with $ for USD numéraire, no prefix otherwise
    • Non-negative
    • Title:
      • left axis
        • USD: "Fees (USD)"
        • Token: "Fees"
      • right axis
        • USD: "Cumulative Fees (USD)"
        • Token: "Cumulative Fees"
    • left axis:
      • USD: tradingfeeamount_usd
      • Token: tradingfeeamount_real
    • right axis:
      • USD: Cumulative sum of tradingfeeamount_usd
      • Token: Cumulative sum of tradingfeeamount_real
  • Resolution aggregation function:
    • left axis:
      • last value for each resolution period (x minutes, hours, days, weeks, months)
    • right axis:
      • sum value for each resolution period (x minutes, hours, days, weeks, months)
  • Token column: feesymbol
  • On hovering the chart, show:
    • left axis:
      • USD: "Fees: ${yColumnValue} | date"
      • Token: "Fees: {yColumnValue} | date"
    • right axis:
      • USD: "Cumulative Fees: ${yColumnValue} | date"
      • Token: "Cumulative Fees: {yColumnValue} | date"

CSV Download

Preferably allows download of the filtered data and not all data retrieved.

Resolution

The available values for resolution are:

• Block Precision: no resampling
• 1m/5m/15m/30m: 1/5/15/30 minute(s)
• 1h/4h: 1/4 hour(s)
• 1D: 1 day (default)
• 1W: 1 week
• 1M: 1 month

Resolution involves using an aggregation function for each resolution period. Used functions are:

• last: last value in the resampled period
• sum: sum of all values for the resampled period

To prevent too many available points in the chart, there are some limitations on the possible selected resolutions:

• Hourly resolution requires a date range duration <= 15 days
• Block and minute resolution requires a date range duration < 2 days

TA Indicators

The available indicators are:

• SMA20
• EWMA30
• CMA

Process/resampling/filtering

1. Get data from carbon backend based on selected metric
2. Get relevant data used for the left y axis, right y axis, x axis and token
3. Filter by token (if available)
4. If metric involves a cumulative sum or other functions, apply it
5. Resample the data based on the selected resolution
6. Filter by date
7. Add TA indicators