| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>ChangeLog Analysis</title> |
| <style type="text/css"> |
| |
| body { |
| font-family: 'Helvetica' 'Segoe UI Light' sans-serif; |
| font-weight: 200; |
| padding: 20px; |
| min-width: 1200px; |
| } |
| |
| * { |
| padding: 0px; |
| margin: 0px; |
| border: 0px; |
| } |
| |
| h1, h2, h3 { |
| font-weight: 200; |
| } |
| |
| h1 { |
| margin: 0 0 1em 0; |
| } |
| |
| h2 { |
| font-size: 1.2em; |
| text-align: center; |
| margin-bottom: 1em; |
| } |
| |
| h3 { |
| font-size: 1em; |
| } |
| |
| .view { |
| margin: 0px; |
| width: 600px; |
| float: left; |
| } |
| |
| .graph-container p { |
| width: 200px; |
| text-align: right; |
| margin: 20px 0 20px 0; |
| padding: 5px; |
| border-right: solid 1px black; |
| } |
| |
| .graph-container table { |
| width: 100%; |
| } |
| |
| .graph-container table, .graph-container td { |
| border-collapse: collapse; |
| border: none; |
| } |
| |
| .graph-container td { |
| padding: 5px; |
| vertical-align: center; |
| } |
| |
| .graph-container td:first-child { |
| width: 200px; |
| text-align: right; |
| border-right: solid 1px black; |
| } |
| |
| .graph-container .selected { |
| background: #eee; |
| } |
| |
| #reviewers .selected td:first-child { |
| border-radius: 10px 0px 0px 10px; |
| } |
| |
| #areas .selected td:last-child { |
| border-radius: 0px 10px 10px 0px; |
| } |
| |
| .graph-container .bar { |
| display: inline-block; |
| min-height: 1em; |
| background: #9f6; |
| margin-right: 0.4ex; |
| } |
| |
| .graph-container .reviewed-patches { |
| background: #3cf; |
| margin-right: 1px; |
| } |
| |
| .graph-container .unreviewed-patches { |
| background: #f99; |
| } |
| |
| .constrained { |
| background: #eee; |
| border-radius: 10px; |
| } |
| |
| .constrained .vertical-bar { |
| border-right: solid 1px #eee; |
| } |
| |
| #header { |
| border-spacing: 5px; |
| } |
| |
| #header section { |
| display: table-cell; |
| width: 200px; |
| vertical-align: top; |
| border: solid 2px #ccc; |
| border-collapse: collapse; |
| padding: 5px; |
| font-size: 0.8em; |
| } |
| |
| #header dt { |
| float: left; |
| } |
| |
| #header dt:after { |
| content: ': '; |
| } |
| |
| #header .legend { |
| width: 600px; |
| } |
| |
| .legend .bar { |
| width: 15ex; |
| padding: 2px; |
| } |
| |
| .legend .reviews { |
| width: 25ex; |
| } |
| |
| .legend td:first-child { |
| width: 18ex; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <h1>ChangeLog Analysis</h1> |
| |
| <section id="header"> |
| <section id="summary"> |
| <h2>Summary</h2> |
| </section> |
| |
| <section class="legend"> |
| <h2>Legend</h2> |
| <div class="graph-container"> |
| <table> |
| <tbody> |
| <tr><td>Contributor's name</td> |
| <td><span class="bar reviews">Reviews</span> <span class="value-container">(# of reviews)</span><br> |
| <span class="bar reviewed-patches">Reviewed</span><span class="bar unreviewed-patches">Unreviewed</span> |
| <span class="value-container">(# of reviewed):(# of unreviewed)</span></td></tr> |
| </tbody> |
| </table> |
| </div> |
| </section> |
| </section> |
| |
| <section id="contributors" class="view"> |
| <h2 id="contributors-title">Contributors</h2> |
| <div class="graph-container"></div> |
| </section> |
| |
| <section id="areas" class="view"> |
| <h2 id="areas-title">Areas of contributions</h2> |
| <div class="graph-container"></div> |
| </section> |
| |
| <script> |
| |
| // Naive implementation of element extensions discussed on public-webapps |
| |
| if (!Element.prototype.append) { |
| Element.prototype.append = function () { |
| for (var i = 0; i < arguments.length; i++) { |
| // FIXME: Take care of other node types |
| if (arguments[i] instanceof Element || arguments[i] instanceof CharacterData) |
| this.appendChild(arguments[i]); |
| else |
| this.appendChild(document.createTextNode(arguments[i])); |
| } |
| return this; |
| } |
| } |
| |
| if (!Node.prototype.remove) { |
| Node.prototype.remove = function () { |
| this.parentNode.removeChild(this); |
| return this; |
| } |
| } |
| |
| if (!Element.create) { |
| Element.create = function () { |
| if (arguments.length < 1) |
| return null; |
| var element = document.createElement(arguments[0]); |
| if (arguments.length == 1) |
| return element; |
| |
| // FIXME: the second argument can be content or IDL attributes |
| var attributes = arguments[1]; |
| for (attribute in attributes) |
| element.setAttribute(attribute, attributes[attribute]); |
| |
| if (arguments.length >= 3) |
| element.append.apply(element, arguments[2]); |
| |
| return element; |
| } |
| } |
| |
| if (!Node.prototype.removeAllChildren) { |
| Node.prototype.removeAllChildren = function () { |
| while (this.firstChild) |
| this.firstChild.remove(); |
| return this; |
| } |
| } |
| |
| Element.prototype.removeClassNameFromAllElements = function (className) { |
| var elements = this.getElementsByClassName(className); |
| for (var i = 0; i < elements.length; i++) |
| elements[i].classList.remove(className); |
| } |
| |
| function getJSON(url, callback) { |
| var xhr = new XMLHttpRequest(); |
| xhr.open('GET', url, true); |
| xhr.onreadystatechange = function () { |
| if (this.readyState == 4) |
| callback(JSON.parse(xhr.responseText)); |
| } |
| xhr.send(); |
| } |
| |
| function GraphView(container) { |
| this._container = container; |
| this._defaultData = null; |
| } |
| |
| GraphView.prototype.setData = function(data, constrained) { |
| if (constrained) |
| this._container.classList.add('constrained'); |
| else |
| this._container.classList.remove('constrained'); |
| this._clearGraph(); |
| this._constructGraph(data); |
| } |
| |
| GraphView.prototype.setDefaultData = function(data) { |
| this._defaultData = data; |
| this.setData(data); |
| } |
| |
| GraphView.prototype.reset = function () { |
| this.setMarginTop(); |
| this.setData(this._defaultData); |
| } |
| |
| GraphView.prototype.isConstrained = function () { return this._container.classList.contains('constrained'); } |
| |
| GraphView.prototype.targetRow = function (node) { |
| var target = null; |
| |
| while (node && node != this._container) { |
| if (node.localName == 'tr') |
| target = node; |
| node = node.parentNode; |
| } |
| |
| return node && target; |
| } |
| |
| GraphView.prototype.selectRow = function (row) { |
| this._container.removeClassNameFromAllElements('selected'); |
| row.classList.add('selected'); |
| } |
| |
| GraphView.prototype.setMarginTop = function (y) { this._container.style.marginTop = y ? y + 'px' : null; } |
| GraphView.prototype._graphContainer = function () { return this._container.getElementsByClassName('graph-container')[0]; } |
| GraphView.prototype._clearGraph = function () { return this._graphContainer().removeAllChildren(); } |
| |
| GraphView.prototype._numberOfPatches = function (dataItem) { |
| return dataItem.numberOfReviewedPatches + (dataItem.numberOfUnreviewedPatches !== undefined ? dataItem.numberOfUnreviewedPatches : 0); |
| } |
| |
| GraphView.prototype._maximumValue = function (labels, data) { |
| var numberOfPatches = this._numberOfPatches; |
| return Math.max.apply(null, labels.map(function (label) { |
| return Math.max(numberOfPatches(data[label]), data[label].numberOfReviews !== undefined ? data[label].numberOfReviews : 0); |
| })); |
| } |
| |
| GraphView.prototype._sortLabelsByNumberOfReviwsAndReviewedPatches = function(data) { |
| var labels = Object.keys(data); |
| if (!labels.length) |
| return null; |
| var numberOfPatches = this._numberOfPatches; |
| var computeValue = function (dataItem) { |
| return numberOfPatches(dataItem) + (dataItem.numberOfReviews !== undefined ? dataItem.numberOfReviews : 0); |
| } |
| labels.sort(function (a, b) { return computeValue(data[b]) - computeValue(data[a]); }); |
| return labels; |
| } |
| |
| GraphView.prototype._constructGraph = function (data) { |
| var element = this._graphContainer(); |
| var labels = this._sortLabelsByNumberOfReviwsAndReviewedPatches(data); |
| if (!labels) { |
| element.append(Element.create('p', {}, ['None'])); |
| return; |
| } |
| |
| var maxValue = this._maximumValue(labels, data); |
| var computeStyleForBar = function (value) { return 'width:' + (value * 85.0 / maxValue) + '%' } |
| |
| var table = Element.create('table', {}, [Element.create('tbody')]); |
| for (var i = 0; i < labels.length; i++) { |
| var label = labels[i]; |
| var item = data[label]; |
| var row = Element.create('tr', {}, [Element.create('td', {}, [label]), Element.create('td', {})]); |
| var valueCell = row.lastChild; |
| |
| if (item.numberOfReviews != undefined) { |
| valueCell.append( |
| Element.create('span', {'class': 'bar reviews', 'style': computeStyleForBar(item.numberOfReviews) }), |
| Element.create('span', {'class': 'value-container'}, [item.numberOfReviews]), |
| Element.create('br') |
| ); |
| } |
| |
| valueCell.append(Element.create('span', {'class': 'bar reviewed-patches', 'style': computeStyleForBar(item.numberOfReviewedPatches) })); |
| if (item.numberOfUnreviewedPatches !== undefined) |
| valueCell.append(Element.create('span', {'class': 'bar unreviewed-patches', 'style': computeStyleForBar(item.numberOfUnreviewedPatches) })); |
| |
| valueCell.append(Element.create('span', {'class': 'value-container'}, |
| [item.numberOfReviewedPatches + (item.numberOfUnreviewedPatches !== undefined ? ':' + item.numberOfUnreviewedPatches : '')])); |
| |
| table.firstChild.append(row); |
| row.label = label; |
| row.data = item; |
| } |
| element.append(table); |
| } |
| |
| var contributorsView = new GraphView(document.querySelector('#contributors')); |
| var areasView = new GraphView(document.querySelector('#areas')); |
| |
| getJSON('summary.json', |
| function (summary) { |
| var summaryContainer = document.querySelector('#summary'); |
| summaryContainer.append(Element.create('dl', {}, [ |
| Element.create('dt', {}, ['Total entries (reviewed)']), |
| Element.create('dd', {}, [(summary['reviewed'] + summary['unreviewed']) + ' (' + summary['reviewed'] + ')']), |
| Element.create('dt', {}, ['Total contributors']), |
| Element.create('dd', {}, [summary['contributors']]), |
| Element.create('dt', {}, ['Contributors who reviewed']), |
| Element.create('dd', {}, [summary['contributors_with_reviews']]), |
| ])); |
| }); |
| |
| getJSON('contributors.json', |
| function (contributors) { |
| for (var contributor in contributors) { |
| contributor = contributors[contributor]; |
| contributor.numberOfReviews = contributor.reviews ? contributor.reviews.total : 0; |
| contributor.numberOfReviewedPatches = contributor.patches ? contributor.patches.reviewed : 0; |
| contributor.numberOfUnreviewedPatches = contributor.patches ? contributor.patches.unreviewed : 0; |
| } |
| contributorsView.setDefaultData(contributors); |
| }); |
| |
| getJSON('areas.json', |
| function (areas) { |
| for (var area in areas) { |
| areas[area].numberOfReviewedPatches = areas[area].reviewed; |
| areas[area].numberOfUnreviewedPatches = areas[area].unreviewed; |
| } |
| areasView.setDefaultData(areas); |
| }); |
| |
| function contributorAreas(contributorData) { |
| var areas = new Object; |
| for (var area in contributorData.reviews.areas) { |
| if (!areas[area]) |
| areas[area] = {'numberOfReviewedPatches': 0}; |
| areas[area].numberOfReviews = contributorData.reviews.areas[area]; |
| } |
| for (var area in contributorData.patches.areas) { |
| if (!areas[area]) |
| areas[area] = {'numberOfReviews': 0}; |
| areas[area].numberOfReviewedPatches = contributorData.patches.areas[area]; |
| } |
| return areas; |
| } |
| |
| function areaContributors(areaData) { |
| var contributors = areaData['contributors']; |
| for (var contributor in contributors) { |
| contributor = contributors[contributor]; |
| contributor.numberOfReviews = contributor.reviews; |
| contributor.numberOfReviewedPatches = contributor.reviewed; |
| contributor.numberOfUnreviewedPatches = contributor.unreviewed; |
| } |
| return contributors; |
| } |
| |
| var mouseTimer = 0; |
| window.onmouseover = function (event) { |
| clearTimeout(mouseTimer); |
| |
| var row = contributorsView.targetRow(event.target); |
| if (row) { |
| if (!contributorsView.isConstrained()) { |
| contributorsView.selectRow(row); |
| areasView.setMarginTop(row.firstChild.offsetTop); |
| areasView.setData(contributorAreas(row.data), 'constrained'); |
| } |
| return; |
| } |
| |
| row = areasView.targetRow(event.target); |
| if (row) { |
| if (!areasView.isConstrained()) { |
| areasView.selectRow(row); |
| contributorsView.setMarginTop(row.firstChild.offsetTop); |
| contributorsView.setData(areaContributors(row.data), 'constrained'); |
| } |
| return; |
| } |
| |
| mouseTimer = setTimeout(function () { |
| contributorsView.reset(); |
| areasView.reset(); |
| }, 500); |
| } |
| |
| </script> |
| </body> |
| </html> |
