chromium/src/third_party/blink/tools/blinkpy/tool/commands/data/summary.html - manifest_repos/chromium_src - Git at Google

 <!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>
	<!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>