nnnnathann/stats.html

## stats.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script>
</head>
<body>
  <h3>
  <span id="pts"></span> Patients
  </h3>
  <h3>
  <span id="scores"></span> Scored Forms
  </h3>
<script id="jsbin-javascript">
var $pts = document.getElementById('pts');
var $scores = document.getElementById('scores');

function animateStats() {
  function getStartStamp(response, name) {
    var lsv = localStorage.getItem(name);
    var ls = parseInt(lsv, 10);
    if (isNaN(ls)) {
      return response[0];
    } else {
      var later = response.filter(function(r) {
        return r[name] > ls;
      });
      return later[0];
    }
  }
  function animate(name, $div, start, end, timeDiff) {
    var lsv = parseInt(localStorage.getItem(name), 10);
    var next =  Math.max(!isNaN(lsv) && lsv, start);
    var timeBetween =  timeDiff / (end - start);
    var prevOff = null;
    function update() {
      var offset;
      $div.innerHTML = numeral(next).format('0,0');
      localStorage.setItem(name, next.toString());
      next++;
      if (next < end) {
        if (prevOff === null) {
          offset = Math.random();
          prevOff = offset;
        } else {
          offset = 1 - prevOff;
          prevOff = null;
        }
        setTimeout(update, timeBetween * offset);
      } else {
        animateStats();
      }
    }
    setTimeout(update, timeBetween);
    update();
  }
  fetch('https://cpanel.oberd.com/stats.php')
    .then(function(r) { return r.json(); })
    .then(function(r) {
      var a = getStartStamp(r, 'patientCount');
      var b = r[r.length - 1];
      var timeDiff = (new Date(b.timestamp)).getTime() - (new Date(a.timestamp)).getTime();
      animate('patientCount', $pts, a.patientCount, b.patientCount, timeDiff);
      animate('scoreCount', $scores, a.scoreCount, b.scoreCount, timeDiff);
    });
}

animateStats();
</script>


<script id="jsbin-source-javascript" type="text/javascript">var $pts = document.getElementById('pts');
var $scores = document.getElementById('scores');

function animateStats() {
  function getStartStamp(response, name) {
    var lsv = localStorage.getItem(name);
    var ls = parseInt(lsv, 10);
    if (isNaN(ls)) {
      return response[0];
    } else {
      var later = response.filter(function(r) {
        return r[name] > ls;
      });
      return later[0];
    }
  }
  function animate(name, $div, start, end, timeDiff) {
    var next =  Math.max(parseInt(localStorage.getItem(name), 10), start);
    var timeBetween =  timeDiff / (end - start);
    var prevOff = null;
    function update() {
      var offset;
      $div.innerHTML = numeral(next).format('0,0');
      localStorage.setItem(name, next.toString());
      next++;
      if (next < end) {
        if (prevOff === null) {
          offset = Math.random();
          prevOff = offset;
        } else {
          offset = 1 - prevOff;
          prevOff = null;
        }
        setTimeout(update, timeBetween * offset);
      } else {
        animateStats();
      }
    }
    setTimeout(update, timeBetween);
    update();
  }
  fetch('https://cpanel.oberd.com/stats.php')
    .then(function(r) { return r.json(); })
    .then(function(r) {
      var a = getStartStamp(r, 'patientCount');
      var b = r[r.length - 1];
      var timeDiff = (new Date(b.timestamp)).getTime() - (new Date(a.timestamp)).getTime();
      animate('patientCount', $pts, a.patientCount, b.patientCount, timeDiff);
      animate('scoreCount', $scores, a.scoreCount, b.scoreCount, timeDiff);
    });
}

animateStats();</script></body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script>
	</head>
	<body>
	<h3>
	<span id="pts"></span> Patients
	</h3>
	<h3>
	<span id="scores"></span> Scored Forms
	</h3>
	<script id="jsbin-javascript">
	var $pts = document.getElementById('pts');
	var $scores = document.getElementById('scores');

	function animateStats() {
	function getStartStamp(response, name) {
	var lsv = localStorage.getItem(name);
	var ls = parseInt(lsv, 10);
	if (isNaN(ls)) {
	return response[0];
	} else {
	var later = response.filter(function(r) {
	return r[name] > ls;
	});
	return later[0];
	}
	}
	function animate(name, $div, start, end, timeDiff) {
	var lsv = parseInt(localStorage.getItem(name), 10);
	var next = Math.max(!isNaN(lsv) && lsv, start);
	var timeBetween = timeDiff / (end - start);
	var prevOff = null;
	function update() {
	var offset;
	$div.innerHTML = numeral(next).format('0,0');
	localStorage.setItem(name, next.toString());
	next++;
	if (next < end) {
	if (prevOff === null) {
	offset = Math.random();
	prevOff = offset;
	} else {
	offset = 1 - prevOff;
	prevOff = null;
	}
	setTimeout(update, timeBetween * offset);
	} else {
	animateStats();
	}
	}
	setTimeout(update, timeBetween);
	update();
	}
	fetch('https://cpanel.oberd.com/stats.php')
	.then(function(r) { return r.json(); })
	.then(function(r) {
	var a = getStartStamp(r, 'patientCount');
	var b = r[r.length - 1];
	var timeDiff = (new Date(b.timestamp)).getTime() - (new Date(a.timestamp)).getTime();
	animate('patientCount', $pts, a.patientCount, b.patientCount, timeDiff);
	animate('scoreCount', $scores, a.scoreCount, b.scoreCount, timeDiff);
	});
	}

	animateStats();
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var $pts = document.getElementById('pts');
	var $scores = document.getElementById('scores');

	function animateStats() {
	function getStartStamp(response, name) {
	var lsv = localStorage.getItem(name);
	var ls = parseInt(lsv, 10);
	if (isNaN(ls)) {
	return response[0];
	} else {
	var later = response.filter(function(r) {
	return r[name] > ls;
	});
	return later[0];
	}
	}
	function animate(name, $div, start, end, timeDiff) {
	var next = Math.max(parseInt(localStorage.getItem(name), 10), start);
	var timeBetween = timeDiff / (end - start);
	var prevOff = null;
	function update() {
	var offset;
	$div.innerHTML = numeral(next).format('0,0');
	localStorage.setItem(name, next.toString());
	next++;
	if (next < end) {
	if (prevOff === null) {
	offset = Math.random();
	prevOff = offset;
	} else {
	offset = 1 - prevOff;
	prevOff = null;
	}
	setTimeout(update, timeBetween * offset);
	} else {
	animateStats();
	}
	}
	setTimeout(update, timeBetween);
	update();
	}
	fetch('https://cpanel.oberd.com/stats.php')
	.then(function(r) { return r.json(); })
	.then(function(r) {
	var a = getStartStamp(r, 'patientCount');
	var b = r[r.length - 1];
	var timeDiff = (new Date(b.timestamp)).getTime() - (new Date(a.timestamp)).getTime();
	animate('patientCount', $pts, a.patientCount, b.patientCount, timeDiff);
	animate('scoreCount', $scores, a.scoreCount, b.scoreCount, timeDiff);
	});
	}

	animateStats();</script></body>
	</html>