Protocol Fees Chart

Trends using ChartJS

Use this repository plot the fees collected by top DeFi protocols in a given timeframe.

• Scrape fees data from cryptofees.infoype some Markdown on the left
• Then plot the scraped data as time series using ChartJS
• ✨Compare tokens values ✨

Components

• ./scraper_input
• ./scraper_output
• ./utils
• ./chartJS_input

Installation

Install the dependencies:

git clone <github url>
npm i

Setup Scraper

Go to ./utils/createScraperInputs.js and in "daylist", enter the time range the scraper should collect data from:

let daylist = getDaysArray(new Date("2021-12-01"), new Date("2021-12-31") );

Then run:

node createScraperInputs.js

This will create two files in ./scraper_input. These files contain the dates the scraper should go through and also a series of random timeouts that the scraper will wait on each page to bypass the server anti-bot logic.

Now let the scraper run:

node scraper.js

Data Transformation

Scraped data will be saved in ./scraper_output as an array. We will have to transform this data into a JSON format that can be consumed by ChartJS.

First, go to ./utils and run:

node getProtocols.js

This will build an array with all the names of the unique protocols saved under ./scraper_output

Do this by going to ./utils and running:

node createConverterComps.js

The line above creates 3 files in ./utils/jsonConverter:

• compJSONoutput.js
• compFunctions.js
• compArrayOfFunctions.js

Use the content of these 3 files to manually assemble a script that converst the scraped Array into a JSON. You can use sampleJSONconverter.js as a model on how the scripts should be assembled.

A sample of the transformed data is in ./chartJS_input/jsonFile.js

Plot Chart

Go to ./utils and run the next command to create two files (compDataMappings.js and compSeriesColors.js) in ./chartJS_input/utils:

node createChartComps.js

Now take the following snippets from ./chartJS_input to create the script that injects the data and config for ChartJS:

• compDataMappings.js
• compSeriesColors.js
• jsonFile.js

That file you create name it "line_script.js" and save it in ./chartJS_input

Now open the file "chart.html" with the OpenLive Server:

License

MIT

Roadmap

• Display data as % of market cap and % of fully diluted valuation
• Toggle to add/remove data series
• Toggle to change time period
• Credit data source (cryptofees.info)
• Display data of scrape and ETH price at scraping date
• Link Github repository
• Link Twitter

WIP

Enhancement	Progress
Series as MktCap %	⣿⣿⣀⣀⣀⣀⣀⣀⣀⣀