Rebuilt project

build/public/assets/css/rStats.css

@@ -1,86 +1,87 @@
-.alarm {
+.alarm{
   color: #b70000;
   text-shadow: 0 0 0 #b70000,
-  0 0 1px #ffffff,
+  0 0 1px #fff,
-  0 0 1px #ffffff,
+  0 0 1px #fff,
-  0 0 2px #ffffff,
+  0 0 2px #fff,
-  0 0 2px #ffffff,
+  0 0 2px #fff,
-  0 0 3px #ffffff,
+  0 0 3px #fff,
-  0 0 3px #ffffff,
+  0 0 3px #fff,
-  0 0 4px #ffffff,
+  0 0 4px #fff,
-  0 0 4px #ffffff;
+  0 0 4px #fff;
 }
 
-.rs-base {
+.rs-base{
   position: absolute;
-  top: 0;
-  left: 0;
   z-index: 10000;
-  overflow: hidden;
   padding: 10px;
-  width: 350px;
+  background-color: #222;
-  background-color: #222222;
   font-size: 10px;
-  font-family: 'Roboto Condensed', tahoma, sans-serif;
   line-height: 1.2em;
+  width: 350px;
+  font-family: 'Roboto Condensed', tahoma, sans-serif;
+  left: 0;
+  top: 0;
+  overflow: hidden;
 }
 
-.rs-base h1 {
+.rs-base h1{
   margin: 0;
-  margin-bottom: 5px;
   padding: 0;
-  color: #ffffff;
   font-size: 1.4em;
+  color: #fff;
+  margin-bottom: 5px;
   cursor: pointer;
 }
 
-.rs-base div.rs-group {
+.rs-base div.rs-group{
   margin-bottom: 10px;
 }
 
-.rs-base div.rs-group.hidden {
+.rs-base div.rs-group.hidden{
   display: none;
 }
 
-.rs-base div.rs-fraction {
+.rs-base div.rs-fraction{
   position: relative;
   margin-bottom: 5px;
 }
 
-.rs-base div.rs-fraction p {
+.rs-base div.rs-fraction p{
-  margin: 0;
-  padding: 0;
   width: 120px;
   text-align: right;
+  margin: 0;
+  padding: 0;
 }
 
-.rs-base div.rs-legend {
+.rs-base div.rs-legend{
   position: absolute;
   line-height: 1em;
 }
 
-.rs-base div.rs-counter-base {
+.rs-base div.rs-counter-base{
   position: relative;
   margin: 2px 0;
   height: 1em;
+  color: white;
 }
 
-.rs-base span.rs-counter-id {
+.rs-base span.rs-counter-id{
   position: absolute;
-  top: 0;
   left: 0;
+  top: 0;
 }
 
-.rs-base div.rs-counter-value {
+.rs-base div.rs-counter-value{
   position: absolute;
-  top: 0;
   left: 90px;
   width: 30px;
   height: 1em;
+  top: 0;
   text-align: right;
 }
 
-.rs-base canvas.rs-canvas {
+.rs-base canvas.rs-canvas{
   position: absolute;
   right: 0;
 }

build/public/assets/js/rStats.js

@@ -32,6 +32,32 @@
 
 } )();
 
+/**
+ * @class rStats
+ * @param {rStats~Settings} [settings] Settings for the rStats instance.
+ */
+
+/**
+ * @typedef {Object} rStats~Settings
+ * @property {Array.<String>} [colours] An array of CSS colour values.
+ * @property {String} [CSSPath=''] Base URL where rStats.css is located.
+ * @property {Array.<String>} [css] URLs of CSS or font files to import.
+ * @property {Object.<String, rStats~CounterProperties>} [values] Properties to use for each counter.
+ * @property {Array.<Object>} [groups] Define groups of counters.
+ * @property {Array.<Object>} [fractions] Define stacked counters.
+ * @property {Array.<Object>} [plugins] Additional plugins.
+ */
+
+/**
+ * @typedef {Object} rStats~CounterProperties
+ * @property {String} [caption] Caption for this counter.
+ * @property {Boolean} [average=false] Whether the values should be averaged.
+ * @property {Number} [avgMs=1000] Duration for which the values should be averaged.
+ * @property {Number} [below] Value below which the graph should be highlighted.
+ * @property {Number} [over] Value over which the graph should be highlighted.
+ * @property {Boolean} [interpolate=true] Whether framerate should be interpolated.
+ */
+
 window.rStats = function rStats ( settings ) {
 
   function iterateKeys ( array, callback ) {
@@ -194,8 +220,6 @@ window.rStats = function rStats ( settings ) {
         _graph = new Graph( _dom, _id, _def ),
         _started = false;
 
-    _dom.className = 'rs-counter-base';
-
     _spanId.className = 'rs-counter-id';
     _spanId.textContent = ( _def && _def.caption ) ? _def.caption : _id;
 
@@ -250,7 +274,8 @@ window.rStats = function rStats ( settings ) {
       _spanValueText.nodeValue = Math.round( v * 100 ) / 100;
       var a = ( _def && ( ( _def.below && _value < _def.below ) || ( _def.over && _value > _def.over ) ) );
       _graph.draw( _value, a );
-      _dom.style.color = a ? '#b70000' : '#ffffff';
+      _dom.className = a ? 'rs-counter-base alarm' : 'rs-counter-base';
+
     }
 
     function _frame () {
@@ -429,10 +454,10 @@ window.rStats = function rStats ( settings ) {
     }
 
     /*if( _height != _div.clientHeight ) {
-     _height = _div.clientHeight;
+        _height = _div.clientHeight;
-     _base.style.height = _height + 2 * _elHeight + 'px';
+        _base.style.height = _height + 2 * _elHeight + 'px';
-     console.log( _base.clientHeight );
+    console.log( _base.clientHeight );
-     }*/
+    }*/
 
   }
 

build/public/index.html

@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8">
-  <title>Three.js Webpack ES6 Boilerplate</title>
+    <title>Three.js Webpack ES6 Boilerplate</title>
 
-  <link rel="stylesheet" type="text/css" href="./assets/css/app.css">
+    <link rel="stylesheet" type="text/css" href="./assets/css/app.css">
-</head>
+  </head>
-<body>
-  <section id="appContainer" class="main">
-    <div id="loading">Loading...</div>
-  </section>
 
-  <script src="./assets/js/rStats.js"></script>
+  <body>
-  <script src="./assets/js/rStats.extras.js"></script>
+    <section id="appContainer" class="main">
-  <script src="./assets/js/dat.gui.min.js"></script>
+      <div id="loading">Loading...</div>
-  <script src="./assets/js/app.js"></script>
+    </section>
-</body>
+
+    <script src="./assets/js/rStats.js"></script>
+    <script src="./assets/js/rStats.extras.js"></script>
+    <script src="./assets/js/dat.gui.min.js"></script>
+    <script src="./assets/js/app.js"></script>
+  </body>
 </html>