stats-js - npm Package Compare versions

Comparing version 1.0.0-alpha1 to 1.0.0

build/stats.min.js

@@ -1,6 +0,1 @@
-// stats.js - http://github.com/mrdoob/stats.js
-var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
-i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div");
-k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display=
-"block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:12,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height=
-a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};"object"===typeof module&&(module.exports=Stats);
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Stats=t()}(this,function(){"use strict";var c=function(){var n=0,l=document.createElement("div");function e(e){return l.appendChild(e.dom),e}function t(e){for(var t=0;t<l.children.length;t++)l.children[t].style.display=t===e?"block":"none";n=e}l.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000",l.addEventListener("click",function(e){e.preventDefault(),t(++n%l.children.length)},!1);var i=(performance||Date).now(),a=i,o=0,f=e(new c.Panel("FPS","#0ff","#002")),r=e(new c.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var d=e(new c.Panel("MB","#f08","#201"));return t(0),{REVISION:16,dom:l,addPanel:e,showPanel:t,begin:function(){i=(performance||Date).now()},end:function(){o++;var e=(performance||Date).now();if(r.update(e-i,200),a+1e3<=e&&(f.update(1e3*o/(e-a),100),a=e,o=0,d)){var t=performance.memory;d.update(t.usedJSHeapSize/1048576,t.jsHeapSizeLimit/1048576)}return e},update:function(){i=this.end()},domElement:l,setMode:t}};return c.Panel=function(n,l,i){var a=1/0,o=0,f=Math.round,r=f(window.devicePixelRatio||1),d=80*r,e=48*r,c=3*r,p=2*r,u=3*r,s=15*r,m=74*r,h=30*r,y=document.createElement("canvas");y.width=d,y.height=e,y.style.cssText="width:80px;height:48px";var v=y.getContext("2d");return v.font="bold "+9*r+"px Helvetica,Arial,sans-serif",v.textBaseline="top",v.fillStyle=i,v.fillRect(0,0,d,e),v.fillStyle=l,v.fillText(n,c,p),v.fillRect(u,s,m,h),v.fillStyle=i,v.globalAlpha=.9,v.fillRect(u,s,m,h),{dom:y,update:function(e,t){a=Math.min(a,e),o=Math.max(o,e),v.fillStyle=i,v.globalAlpha=1,v.fillRect(0,0,d,s),v.fillStyle=l,v.fillText(f(e)+" "+n+" ("+f(a)+"-"+f(o)+")",c,p),v.drawImage(y,u+r,s,m-r,h,u,s,m-r,h),v.fillRect(u+m-r,s,r,h),v.fillStyle=i,v.globalAlpha=.9,v.fillRect(u+m-r,s,r,f((1-e/t)*h))}}},c});

package.json

 {
   "name": "stats-js",
-  "version": "1.0.0-alpha1",
+  "version": "1.0.0",
   "description": "JavaScript Performance Monitor",
@@ -9,5 +9,2 @@ "main": "build/stats.min.js",
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
@@ -26,3 +23,18 @@ "type": "git",
   },
-  "homepage": "https://github.com/Kevnz/stats.js"
+  "homepage": "https://github.com/Kevnz/stats.js",
+  "files": [
+    "build",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build-uglify": "rollup -c && uglifyjs build/stats.js -cm --preamble \"// stats.js - http://github.com/kevnz/stats.js\" > build/stats.min.js",
+    "build-closure": "rollup -c && java -jar utils/compiler/closure-compiler-v20160713.jar --language_in=ECMASCRIPT5_STRICT --js build/stats.js --js_output_file build/stats.min.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "rollup": "^0.36.0",
+    "uglify-js": "^3.4.9",
+    "uglifyjs": "^2.4.10"
+  }
 }

README.md

@@ -10,2 +10,4 @@ stats.js
 * **MS** Milliseconds needed to render a frame. The lower the number the better.
+* **MB** MBytes of allocated memory. (Run Chrome with `--enable-precise-memory-info`)
+* **CUSTOM** User-defined panel support.
 
@@ -15,4 +17,6 @@
 
-![stats_js_fps.png](http://mrdoob.github.com/stats.js/assets/stats_js_fps.png)
-![stats_js_ms.png](http://mrdoob.github.com/stats.js/assets/stats_js_ms.png)
+![fps.png](https://raw.githubusercontent.com/Kevnz/stats.js/master/files/fps.png)
+![ms.png](https://raw.githubusercontent.com/Kevnz/stats.js/master/files/ms.png)
+![mb.png](https://raw.githubusercontent.com/Kevnz/stats.js/master/files/mb.png)
+![custom.png](https://raw.githubusercontent.com/Kevnz/stats.js/master/files/custom.png)
 
@@ -24,20 +28,18 @@
 var stats = new Stats();
-stats.setMode(1); // 0: fps, 1: ms
+stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
+document.body.appendChild( stats.dom );
 
-// Align top-left
-stats.domElement.style.position = 'absolute';
-stats.domElement.style.left = '0px';
-stats.domElement.style.top = '0px';
+function animate() {
 
-document.body.appendChild( stats.domElement );
-
-setInterval( function () {
-
 	stats.begin();
 
-	// your code goes here
+	// monitored code goes here
 
 	stats.end();
 
-}, 1000 / 60 );
+	requestAnimationFrame( animate );
+
+}
+
+requestAnimationFrame( animate );
 ```
@@ -48,80 +50,6 @@
 
-Albeit theorically not as accurate the widget can also be easily inserted to **any site** using a bookmarklet.
-[Follow the instructions](http://ricardocabello.com/blog/post/707).
+You can add this code to any page using the following bookmarklet:
 
-
-### Change Log ###
-
-2014 08 11 - **r12** (2,310 KB, gzip: 1,087 B)
-
-* Browserify support. (@Miha-ha)
-
-
-2012 09 01 - **r11** (2,243 KB, gzip: 903 B)
-
-* Renamed `build/Stats.js` to `build/stats.min.js`.
-
-
-2012 05 10 - **r10** (2,243 KB, gzip: 903 B)
-
-* Changed `.getDomElement()` to `.domElement` back.
-* Removed `.getFps()`, `.getFpsMin()`, `.getFpsMax()`, `.getMs()`, `.getMsMin()`, `.getMsMax()`.
-* Added `.begin()` and `.end()`.
-* Added `.setMode()`.
-* Themeable with CSS.
-
-
-2012 01 18 - **r9** (2,872 KB, gzip: 1,038 KB)
-
-* Changed `.domElement` to `.getDomElement()`
-* Added `.getFps()`, `.getFpsMin()`, `.getFpsMax()`, `.getMs()`, `.getMsMin()`, `.getMsMax()`.
-
-
-2011 10 16 - **r8** (2.670 KB, gzip: 987 B)
-
-* Performance and size optimizations.
-* Removed memory mode.
-
-
-2011 10 13 - **r7** (4.083 KB, gzip: 1.377 KB)
-
-* Replaced `new Date().getTime()` with `Date.now()`.
-
-
-2011 05 28 - **r6** (4.103 KB, gzip: 1.384 KB)
-
-* Updated check for memory accesible browsers.
-* Renamed MEM to MB for consistency reasons.
-
-
-2010 09 21 - **r5** (3.800 KB)
-
-* Different color per mode.
-* Added MEM mode. (Webkit-based browsers only)
-* Force text left aligned.
-
-
-2010 06 11 - **r4** (2.235 KB)
-
-* Added MS mode.
-
-
-2010 05 12 - **r3** (1.241 KB)
-
-* Switched to module pattern code style.
-* Removed `position = 'absolute'`.
-
-
-2010 03 01 - **r2** (2.177 KB)
-
-* Simplified.
-
-
-2010 02 21 - **r1**
-
-* Accurate FPS calculation. (thx @spite!)
-
-
-2009 08 09 - **r0**
-
-* Base code.
+```javascript
+javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//cdn.jsdelivr.net/gh/Kevnz/stats.js/build/stats.min.js';document.head.appendChild(script);})()
+```

src/Stats.js

@@ -7,96 +7,61 @@ /**
 
-	var startTime = Date.now(), prevTime = startTime;
-	var ms = 0, msMin = Infinity, msMax = 0;
-	var fps = 0, fpsMin = Infinity, fpsMax = 0;
-	var frames = 0, mode = 0;
+	var mode = 0;
 
 	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.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
+	container.addEventListener( 'click', function ( event ) {
 
-	var fpsDiv = document.createElement( 'div' );
-	fpsDiv.id = 'fps';
-	fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
-	container.appendChild( fpsDiv );
+		event.preventDefault();
+		showPanel( ++ mode % container.children.length );
 
-	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 );
+	}, false );
 
-	var fpsGraph = document.createElement( 'div' );
-	fpsGraph.id = 'fpsGraph';
-	fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
-	fpsDiv.appendChild( fpsGraph );
+	//
 
-	while ( fpsGraph.children.length < 74 ) {
+	function addPanel( panel ) {
 
-		var bar = document.createElement( 'span' );
-		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
-		fpsGraph.appendChild( bar );
+		container.appendChild( panel.dom );
+		return panel;
 
 	}
 
-	var msDiv = document.createElement( 'div' );
-	msDiv.id = 'ms';
-	msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
-	container.appendChild( msDiv );
+	function showPanel( id ) {
 
-	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 );
+		for ( var i = 0; i < container.children.length; i ++ ) {
 
-	var msGraph = document.createElement( 'div' );
-	msGraph.id = 'msGraph';
-	msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
-	msDiv.appendChild( msGraph );
+			container.children[ i ].style.display = i === id ? 'block' : 'none';
 
-	while ( msGraph.children.length < 74 ) {
+		}
 
-		var bar = document.createElement( 'span' );
-		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
-		msGraph.appendChild( bar );
+		mode = id;
 
 	}
 
-	var setMode = function ( value ) {
+	//
 
-		mode = value;
+	var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
 
-		switch ( mode ) {
+	var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
+	var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
 
-			case 0:
-				fpsDiv.style.display = 'block';
-				msDiv.style.display = 'none';
-				break;
-			case 1:
-				fpsDiv.style.display = 'none';
-				msDiv.style.display = 'block';
-				break;
-		}
+	if ( self.performance && self.performance.memory ) {
 
-	};
+		var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
 
-	var updateGraph = function ( dom, value ) {
+	}
 
-		var child = dom.appendChild( dom.firstChild );
-		child.style.height = value + 'px';
+	showPanel( 0 );
 
-	};
-
 	return {
 
-		REVISION: 12,
+		REVISION: 16,
 
-		domElement: container,
+		dom: container,
 
-		setMode: setMode,
+		addPanel: addPanel,
+		showPanel: showPanel,
 
 		begin: function () {
 
-			startTime = Date.now();
+			beginTime = ( performance || Date ).now();
 
@@ -107,25 +72,22 @@ },
 
-			var time = Date.now();
+			frames ++;
 
-			ms = time - startTime;
-			msMin = Math.min( msMin, ms );
-			msMax = Math.max( msMax, ms );
+			var time = ( performance || Date ).now();
 
-			msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
-			updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
+			msPanel.update( time - beginTime, 200 );
 
-			frames ++;
+			if ( time >= prevTime + 1000 ) {
 
-			if ( time > prevTime + 1000 ) {
+				fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );
 
-				fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
-				fpsMin = Math.min( fpsMin, fps );
-				fpsMax = Math.max( fpsMax, fps );
-
-				fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
-				updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
-
 				prevTime = time;
 				frames = 0;
 
+				if ( memPanel ) {
+
+					var memory = performance.memory;
+					memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
+
+				}
+
 			}
@@ -139,14 +101,74 @@
 
-			startTime = this.end();
+			beginTime = this.end();
 
-		}
+		},
 
-	}
+		// Backwards Compatibility
 
+		domElement: container,
+		setMode: showPanel
+
+	};
+
 };
 
-if ( typeof module === 'object' ) {
+Stats.Panel = function ( name, fg, bg ) {
 
-	module.exports = Stats;
+	var min = Infinity, max = 0, round = Math.round;
+	var PR = round( window.devicePixelRatio || 1 );
 
-}
+	var WIDTH = 80 * PR, HEIGHT = 48 * PR,
+			TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
+			GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
+			GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
+
+	var canvas = document.createElement( 'canvas' );
+	canvas.width = WIDTH;
+	canvas.height = HEIGHT;
+	canvas.style.cssText = 'width:80px;height:48px';
+
+	var context = canvas.getContext( '2d' );
+	context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
+	context.textBaseline = 'top';
+
+	context.fillStyle = bg;
+	context.fillRect( 0, 0, WIDTH, HEIGHT );
+
+	context.fillStyle = fg;
+	context.fillText( name, TEXT_X, TEXT_Y );
+	context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
+
+	context.fillStyle = bg;
+	context.globalAlpha = 0.9;
+	context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
+
+	return {
+
+		dom: canvas,
+
+		update: function ( value, maxValue ) {
+
+			min = Math.min( min, value );
+			max = Math.max( max, value );
+
+			context.fillStyle = bg;
+			context.globalAlpha = 1;
+			context.fillRect( 0, 0, WIDTH, GRAPH_Y );
+			context.fillStyle = fg;
+			context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
+
+			context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
+
+			context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
+
+			context.fillStyle = bg;
+			context.globalAlpha = 0.9;
+			context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
+
+		}
+
+	};
+
+};
+
+export { Stats as default };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Lines of code

218

increased by84.75%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

13041

decreased by-99.76%

Dev dependency count

3

increased byInfinity%

Number of package files

6

decreased by-45.45%

Number of lines in readme file

52

decreased by-58.06%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes