fix rounding issue for percentage values

assets/js/components/CountWidget.js

@@ -5,22 +5,14 @@ import * as numbers from '../lib/numbers.js';
 import Client from '../lib/client.js';
 import { bind } from 'decko';
 
-function getSundayOfCurrentWeek(d){
-  var day = d.getDay();
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + (day == 0?0:7)-day );
-}
-
-const dayInSeconds = 60 * 60 * 24;
 
 class CountWidget extends Component {
   constructor(props) {
     super(props)
 
     this.state = {
-      value: 0.00,
+      value: "-",
       loading: false,
-      before: props.before,
-      after: props.after,
     }
   }
 
@@ -29,26 +21,23 @@ class CountWidget extends Component {
       return;
     }
 
-    this.setState({
-      before: newProps.before,
-      after: newProps.after,
-    });
-    this.fetchData();
+    this.fetchData(newProps.before, newProps.after);
   }
 
+  // TODO: Move to component of its own
   @bind 
-  countUp(toValue) {
+  countUp(toValue) { 
     const duration = 1000;
     const easeOutQuint = function (t) { return 1+(--t)*t*t*t*t };
     const setState = this.setState.bind(this);
-    const startValue = this.state.value;
+    const startValue = isFinite(this.state.value) ? this.state.value : 0;
     const diff = toValue - startValue;
     let startTime;
 
     const tick = function(t) {
       if(!startTime) { startTime = t; }
       let progress = ( t - startTime ) / duration;
-      let newValue = Math.round(startValue + (easeOutQuint(progress) * diff));
+      let newValue = startValue + (easeOutQuint(progress) * diff);
       setState({
         value: newValue,
       })
@@ -62,15 +51,13 @@ class CountWidget extends Component {
   }
 
   @bind
-  fetchData() {
+  fetchData(before, after) {
     this.setState({ loading: true })
-    let before = this.state.before;
-    let after = this.state.after;
 
     Client.request(`${this.props.endpoint}?before=${before}&after=${after}`)
       .then((d) => { 
         // request finished; check if timestamp range is still the one user wants to see
-        if( this.state.before != before || this.state.after != after ) {
+        if( this.props.before != before || this.props.after != after ) {
           return;
         }
 
@@ -84,7 +71,7 @@ class CountWidget extends Component {
   render(props, state) {
     let formattedValue = "-";
 
-    if(state.value > 0) {
+    if(isFinite(state.value)) {
       switch(props.format) {
         case "percentage":
           formattedValue = numbers.formatPercentage(state.value)
@@ -92,7 +79,7 @@ class CountWidget extends Component {
 
         default:
         case "number":
-            formattedValue = numbers.formatWithComma(state.value)
+            formattedValue = numbers.formatWithComma(Math.round(state.value))
         break;
 
         case "duration":

assets/js/lib/numbers.js

@@ -18,6 +18,7 @@ function formatWithComma(nStr) {
 }
 
 function formatDuration(seconds) {
+  seconds = Math.round(seconds);
    var date = new Date(null);
    date.setSeconds(seconds); // specify value for SECONDS here
    return date.toISOString().substr(14, 5);