ipfsStatViewer

A simple chrome extension for users to that visualizes your local IPFS Node with D3.js using the file_type and file_size as the sources of data to create a treemap

Install Extension

Download in the Google Chrome Store

(ignore) Add updated information about Brave Browser Integration

Important Note: You need to make sure you have cross origin requests allowed. You can use the following ipfs cli-commands to enable cross origin access.

If If you want to install from source via this repo, do the following-

• Download the build file and load it as unpacked in Chrome Extension Manager
• Open extension with your IPFS Daemon running

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["GET", "POST"]'

As as you have IPFS running, it should work without issue-

• You should see something that looks like this depending on what you have pinned in IPFS

Features

• Colors of boxes in treemap correlate to a file type- supporting music, photos, video, and more.
• Box size correlates to amount of data in the file

In specific cases, this command is needed to get the treemap to function correctly-

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://webui.ipfs.io.ipns.localhost:48084", "http://localhost:3000", "http://127.0.0.1:5001", "https://webui.ipfs.io", "chrome-extension://leoogniilogpecgamlbafoajfcaoddja"]'

Working on currently

• Improved UI

Tech

A users IPFS data is visualized using organized colorful graphics similar to apps like Windirstat, or Disk Recon. Each file type (MP3, ZIP, EXE, JPEG, etc.) is assigned a color in a collage of rectangles that are sized depending on how much space that file type is using. Treemap function provided by D3.js.

• IPFS - Peer-to-peer hypermedia protocol
• D3 - A Javascript library for visualizing data using web standards-
• markdown-it - Markdown parser done right. Fast and easy to extend.
• node.js - evented I/O for the backend
• Express - fast node.js network app framework [@tjholowaychuk]

Future

• Working on now: Add more visualizations (pie chart and more)
• Improved CORS Allow Prompt- pop-up that asks user to enable/update cors

License

MIT