<!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>
Codebase Browser
chromium