arbitrary width and height of stats via options object

Author: ccoenen

src/Stats.js

@@ -2,7 +2,12 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-var Stats = function () {
+var Stats = function (options) {
+
+	options = options || {};
+
+	var barHeight = options.barHeight || 30;
+	var bars = options.bars || 74;
 
 	var startTime = Date.now(), prevTime = startTime;
 	var ms = 0, msMin = Infinity, msMax = 0;
@@ -11,53 +16,51 @@ var Stats = function () {
 
 	var container = document.createElement( 'div' );
 	container.id = 'stats';
-	container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
-	container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
+	container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ); }, false );
+	container.style.cssText = 'width:' + (bars + 6) + 'px;opacity:0.9;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px;text-align:left';
 
 	var fpsDiv = document.createElement( 'div' );
 	fpsDiv.id = 'fps';
-	fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
+	fpsDiv.style.cssText = 'padding:0 0 3px 3px;background-color:#002;color:#0ff';
 	container.appendChild( fpsDiv );
 
 	var fpsText = document.createElement( 'div' );
 	fpsText.id = 'fpsText';
-	fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
 	fpsText.innerHTML = 'FPS';
 	fpsDiv.appendChild( fpsText );
 
 	var fpsGraph = document.createElement( 'div' );
 	fpsGraph.id = 'fpsGraph';
-	fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
+	fpsGraph.style.cssText = 'position:relative;width:' + bars + 'px;height:' + barHeight + 'px;background-color:#0ff';
 	fpsDiv.appendChild( fpsGraph );
 
-	while ( fpsGraph.children.length < 74 ) {
+	while ( fpsGraph.children.length < bars ) {
 
 		var bar = document.createElement( 'span' );
-		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
+		bar.style.cssText = 'width:1px;height:' + barHeight + 'px;float:left;background-color:#113';
 		fpsGraph.appendChild( bar );
 
 	}
 
 	var msDiv = document.createElement( 'div' );
 	msDiv.id = 'ms';
-	msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
+	msDiv.style.cssText = 'padding:0 0 3px 3px;background-color:#020;display:none;color:#0f0;';
 	container.appendChild( msDiv );
 
 	var msText = document.createElement( 'div' );
 	msText.id = 'msText';
-	msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
 	msText.innerHTML = 'MS';
 	msDiv.appendChild( msText );
 
 	var msGraph = document.createElement( 'div' );
 	msGraph.id = 'msGraph';
-	msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
+	msGraph.style.cssText = 'position:relative;width:' + bars + 'px;height:' + barHeight + 'px;background-color:#0f0';
 	msDiv.appendChild( msGraph );
 
-	while ( msGraph.children.length < 74 ) {
+	while ( msGraph.children.length < bars ) {
 
 		var bar = document.createElement( 'span' );
-		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
+		bar.style.cssText = 'width:1px;height: ' + barHeight + 'px;float:left;background-color:#131';
 		msGraph.appendChild( bar );
 
 	}
@@ -110,7 +113,7 @@ var Stats = function () {
 			msMax = Math.max( msMax, ms );
 
 			msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
-			updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
+			updateGraph( msGraph, Math.min( barHeight, barHeight - ( ms / 200 ) * barHeight ) );
 
 			frames ++;
 
@@ -121,7 +124,7 @@ var Stats = function () {
 				fpsMax = Math.max( fpsMax, fps );
 
 				fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
-				updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
+				updateGraph( fpsGraph, Math.min( barHeight, barHeight - ( fps / 100 ) * barHeight ) );
 
 				prevTime = time;
 				frames = 0;
@@ -138,7 +141,7 @@ var Stats = function () {
 
 		}
 
-	}
+	};
 
 };