{"action":"created","issue":{"url":"https://api.github.com/repos/ipfs/webui/issues/40","labels_url":"https://api.github.com/repos/ipfs/webui/issues/40/labels{/name}","comments_url":"https://api.github.com/repos/ipfs/webui/issues/40/comments","events_url":"https://api.github.com/repos/ipfs/webui/issues/40/events","html_url":"https://github.com/ipfs/webui/pull/40","id":72021950,"number":40,"title":"metrics: pretty ugly d3 plotting","user":{"login":"cryptix","id":111202,"avatar_url":"https://avatars.githubusercontent.com/u/111202?v=3","gravatar_id":"","url":"https://api.github.com/users/cryptix","html_url":"https://github.com/cryptix","followers_url":"https://api.github.com/users/cryptix/followers","following_url":"https://api.github.com/users/cryptix/following{/other_user}","gists_url":"https://api.github.com/users/cryptix/gists{/gist_id}","starred_url":"https://api.github.com/users/cryptix/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cryptix/subscriptions","organizations_url":"https://api.github.com/users/cryptix/orgs","repos_url":"https://api.github.com/users/cryptix/repos","events_url":"https://api.github.com/users/cryptix/events{/privacy}","received_events_url":"https://api.github.com/users/cryptix/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ipfs/webui/labels/backlog","name":"backlog","color":"ededed"},{"url":"https://api.github.com/repos/ipfs/webui/labels/need_feedback","name":"need_feedback","color":"eb6420"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":16,"created_at":"2015-04-30T00:07:33Z","updated_at":"2015-11-19T20:43:11Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/ipfs/webui/pulls/40","html_url":"https://github.com/ipfs/webui/pull/40","diff_url":"https://github.com/ipfs/webui/pull/40.diff","patch_url":"https://github.com/ipfs/webui/pull/40.patch"},"body":"![](http://www.orangedonkey.net/wp-content/uploads/2012/04/I-Have-No-Idea-What-I-am-Doing-5.jpg)\r\n\r\nbare with me, my d3 and react isn't very good.. ipfs/go-ipfs#1163 adds an API endpoint on port 5001 that exposes metrics about the memory consumption of the daemon (`memstats`) and custom metrics about the datastores. ([here](https://gist.githubusercontent.com/cryptix/be8bccb4f0aa414c906c/raw/328354518b1c1b959b6f9d3bf0ab4710a9e0512b/gistfile1.json) is a sample of the JSON)\r\n\r\nI like to visualize those, after some googling I stubmled over some handwoven d3 react magic and finally \r\n[react-d3](https://www.npmjs.com/package/react-d3).\r\n\r\nCurrently it looks like this:\r\n\r\n![stats](https://cloud.githubusercontent.com/assets/111202/7403949/3b212e0a-eedc-11e4-96b8-b44a27dffdf8.png)\r\n\r\nbut after some time the plots stop to update and I get this in the console:\r\n\r\n```\r\nUncaught Error: Invariant Violation: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.\r\n```\r\n\r\nLike I said, my reactjs knowledge isn't very good (this might be my first public commit) and I wanted some feedback (and maybe a better plotting lib suggestion?) on the general approach before I sink more time into this.\r\n\r\nObvious TODOS:\r\n\r\n- [x] time on the x axis\r\n- [ ] formatting the Y axis properly\r\n- [ ] hiding data lines by clicking the legends?\r\n- [ ] the custom metrics also have histogram data in percentiles. Might want another chart type for that.\r\n\r\nps: I needed to add `/debug/` to [ipfs-node-server-static](https://github.com/travisperson/ipfs-node-server-static/blob/master/index.js#L54) so that the requests are proxied properly."},"comment":{"url":"https://api.github.com/repos/ipfs/webui/issues/comments/158192169","html_url":"https://github.com/ipfs/webui/pull/40#issuecomment-158192169","issue_url":"https://api.github.com/repos/ipfs/webui/issues/40","id":158192169,"user":{"login":"Dignifiedquire","id":790842,"avatar_url":"https://avatars.githubusercontent.com/u/790842?v=3","gravatar_id":"","url":"https://api.github.com/users/Dignifiedquire","html_url":"https://github.com/Dignifiedquire","followers_url":"https://api.github.com/users/Dignifiedquire/followers","following_url":"https://api.github.com/users/Dignifiedquire/following{/other_user}","gists_url":"https://api.github.com/users/Dignifiedquire/gists{/gist_id}","starred_url":"https://api.github.com/users/Dignifiedquire/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Dignifiedquire/subscriptions","organizations_url":"https://api.github.com/users/Dignifiedquire/orgs","repos_url":"https://api.github.com/users/Dignifiedquire/repos","events_url":"https://api.github.com/users/Dignifiedquire/events{/privacy}","received_events_url":"https://api.github.com/users/Dignifiedquire/received_events","type":"User","site_admin":false},"created_at":"2015-11-19T20:43:10Z","updated_at":"2015-11-19T20:43:10Z","body":"Thanks @jbenet closing this here. I fully agree that this would be nice and will be adding it to the list of nice visualizations/apps to have :)"}}