{"action":"created","issue":{"url":"https://api.github.com/repos/gotwarlost/istanbul/issues/338","labels_url":"https://api.github.com/repos/gotwarlost/istanbul/issues/338/labels{/name}","comments_url":"https://api.github.com/repos/gotwarlost/istanbul/issues/338/comments","events_url":"https://api.github.com/repos/gotwarlost/istanbul/issues/338/events","html_url":"https://github.com/gotwarlost/istanbul/issues/338","id":64623025,"number":338,"title":"The HTML reporter is misleading. Here's a simple fix.","user":{"login":"pmcelhaney","id":51504,"avatar_url":"https://avatars.githubusercontent.com/u/51504?v=3","gravatar_id":"","url":"https://api.github.com/users/pmcelhaney","html_url":"https://github.com/pmcelhaney","followers_url":"https://api.github.com/users/pmcelhaney/followers","following_url":"https://api.github.com/users/pmcelhaney/following{/other_user}","gists_url":"https://api.github.com/users/pmcelhaney/gists{/gist_id}","starred_url":"https://api.github.com/users/pmcelhaney/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pmcelhaney/subscriptions","organizations_url":"https://api.github.com/users/pmcelhaney/orgs","repos_url":"https://api.github.com/users/pmcelhaney/repos","events_url":"https://api.github.com/users/pmcelhaney/events{/privacy}","received_events_url":"https://api.github.com/users/pmcelhaney/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/gotwarlost/istanbul/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-03-26T20:17:23Z","updated_at":"2015-08-05T14:45:58Z","closed_at":null,"body":"The HTML reporter shows how well each component is covered by percentage. But it doesn't take into account the fact that some components are much larger than others. At least not visually. For example, can you tell from a glance which component has the greatest number of untested branches? (Hint: it's not the one highlighted in yellow.)\r\n\r\n![screen shot 2015-03-26 at 4 03 47 pm](https://cloud.githubusercontent.com/assets/51504/6855825/fa4e93ec-d3d1-11e4-922e-bb32391bbb87.png)\r\n\r\nHere's a simple fix. Instead of the raw numbers, show a dot for each uncovered item.\r\n\r\n![screen shot 2015-03-26 at 4 13 38 pm](https://cloud.githubusercontent.com/assets/51504/6855975/26de5162-d3d3-11e4-9770-c9a004bdb543.png)\r\n\r\nI've created a [bookmarklet](http://mrcoles.com/bookmarklet/) to test out the idea.\r\n\r\n    javascript:(function()%7Bvar%20cells%20%3D%20document.querySelectorAll('td.abs')%3B%20for(var%20i%3D0%3B%20i%3Ccells.length%3B%20i%2B%2B)%20%7B%20%20var%20tokens%20%3D%20cells%5Bi%5D.innerText.split(%2F%5C(%7C%5Cs%7C%5C)%2Fg)%3B%20var%20count%20%3D%20tokens%5B3%5D%20-%20tokens%5B1%5D%3B%20var%20markers%20%3D%20new%20Array(count).join('.')%3B%20cells%5Bi%5D.title%20%3D%20cells%5Bi%5D.innerText%3B%20cells%5Bi%5D.innerHTML%20%3D%20markers%3B%20%7D%7D)()\r\n\r\nHere's the raw code. \r\n\r\n    var cells = document.querySelectorAll('td.abs');\r\n    for (var i = 0; i < cells.length; i++) {\r\n    \tvar tokens = cells[i].innerText.split(/\\(|\\s|\\)/g);\r\n    \tvar count = tokens[3] - tokens[1];\r\n    \tvar markers = new Array(count).join('.');\r\n    \tcells[i].title = cells[i].innerText;\r\n    \tcells[i].innerHTML = markers;\r\n    }\r\n\r\nTry it out. If you're interested I'm happy to submit a patch. Thanks for creating and sharing this very useful tool!\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/gotwarlost/istanbul/issues/comments/128021984","html_url":"https://github.com/gotwarlost/istanbul/issues/338#issuecomment-128021984","issue_url":"https://api.github.com/repos/gotwarlost/istanbul/issues/338","id":128021984,"user":{"login":"technicallyfeasible","id":5169186,"avatar_url":"https://avatars.githubusercontent.com/u/5169186?v=3","gravatar_id":"","url":"https://api.github.com/users/technicallyfeasible","html_url":"https://github.com/technicallyfeasible","followers_url":"https://api.github.com/users/technicallyfeasible/followers","following_url":"https://api.github.com/users/technicallyfeasible/following{/other_user}","gists_url":"https://api.github.com/users/technicallyfeasible/gists{/gist_id}","starred_url":"https://api.github.com/users/technicallyfeasible/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/technicallyfeasible/subscriptions","organizations_url":"https://api.github.com/users/technicallyfeasible/orgs","repos_url":"https://api.github.com/users/technicallyfeasible/repos","events_url":"https://api.github.com/users/technicallyfeasible/events{/privacy}","received_events_url":"https://api.github.com/users/technicallyfeasible/received_events","type":"User","site_admin":false},"created_at":"2015-08-05T14:45:58Z","updated_at":"2015-08-05T14:45:58Z","body":"@guyellis I like this idea. Much better than the bars and gives a nice sortable extra column for this info."}}