Skip to content

noryev/ipfsStatViewer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

ipfsStatViewer

made-with-javascript Chrome Web Store

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-

Screen Shot 2022-05-03 at 6 00 04 PM

  • 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

About

A Chrome Extension to visualize the stats associated with your IPFS node using D3.js.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 79.3%
  • HTML 17.1%
  • CSS 3.6%