[FIX] web: review kanban column progressbar design

Now:
- Animations do not trigger on first rendering
- Fix a bug where 5k was considered smaller than 9 (since 5 < 9)
- Properly animate number when it crosses over multiple thousands levels
- Always preserve at least 3 digits when switching to a thousands level
  and never show a decimal (4500000 is represented as 4500k, not 4.5M)
- Monetary symbol is not bold (and is better integrated)
- Add thousands separators for > 3 digits numbers

2 files changed, 56 insertions, 40 deletions

diff --git a/addons/web/static/src/js/core/utils.js b/addons/web/static/src/js/core/utils.js
index 9eefc12944c..ac9310dce90 100644
--- a/addons/web/static/src/js/core/utils.js
+++ b/addons/web/static/src/js/core/utils.js
@@ -86,23 +86,39 @@ var utils = {
         return "";
     },
     /**
-     * Returns a human readable number
+     * Returns a human readable number (e.g. 34000 -> 34k).
      *
-     * @param {Number} number
+     * @param {number} number
+     * @param {integer} [decimals=0]
+     *        maximum number of decimals to use in human readable representation
+     * @param {integer} [minDigits=1]
+     *        the minimum number of digits to preserve when switching to another
+     *        level of thousands (e.g. with a value of '2', 4321 will still be
+     *        represented as 4321 otherwise it will be down to one digit (4k))
+     * @param {function} [formatterCallback]
+     *        a callback to transform the final number before adding the
+     *        thousands symbol (default to adding thousands separators (useful
+     *        if minDigits > 1))
+     * @returns {string}
      */
-    human_number: function (number, decimals) {
-        decimals = decimals | 0;
+    human_number: function (number, decimals, minDigits, formatterCallback) {
         number = Math.round(number);
+        decimals = decimals | 0;
+        minDigits = minDigits || 1;
+        formatterCallback = formatterCallback || utils.insert_thousand_seps;
+
         var d2 = Math.pow(10, decimals);
-        var val = _t("kMGTPE");
-        var i = val.length-1, s;
-        while( i ) {
-            s = Math.pow(10,i--*3);
-            if( s <= number ) {
-                number = Math.round(number*d2/s)/d2 + val[i];
+        var val = _t('kMGTPE');
+        var symbol = '';
+        for (var i = val.length - 1 ; i > 0 ; i--) {
+            var s = Math.pow(10, i * 3);
+            if (s <= number / Math.pow(10, minDigits - 1)) {
+                number = Math.round(number * d2 / s) / d2;
+                symbol = val[i - 1];
+                break;
             }
         }
-        return number;
+        return formatterCallback('' + number) + symbol;
     },
     /**
      * Returns a human readable size
diff --git a/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js b/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js
index c4a62989b97..3ff5c8edbac 100644
--- a/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js
+++ b/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js
@@ -32,23 +32,18 @@ var KanbanColumnProgressBar = Widget.extend({
 
         // Previous progressBar state
         var state = options.progressBarStates[this.columnID];
-        this.groupCount = state ? state.groupCount : 0;
-        this.subgroupCounts = state ? state.subgroupCounts : {};
-        this.totalCounterValue = state ? state.totalCounterValue : 0;
-        this.activeFilter = state ? state.activeFilter : false;
+        if (state) {
+            this.groupCount = state.groupCount;
+            this.subgroupCounts = state.subgroupCounts;
+            this.totalCounterValue = state.totalCounterValue;
+            this.activeFilter = state.activeFilter;
+        }
 
         // Prepare currency (TODO this should be automatic... use a field ?)
-        this.counterPrefix = '';
-        this.counterSuffix = '';
         var sumFieldInfo = this.sumField && columnState.fieldsInfo.kanban[this.sumField];
         var currencyField = sumFieldInfo && sumFieldInfo.options && sumFieldInfo.options.currency_field;
         if (currencyField && columnState.data.length) {
-            var currency = session.currencies[columnState.data[0].data[currencyField].res_id];
-            if (currency.position === 'before') {
-                this.counterPrefix = currency.symbol + ' ';
-            } else {
-                this.counterSuffix = ' ' + currency.symbol;
-            }
+            this.currency = session.currencies[columnState.data[0].data[currencyField].res_id];
         }
     },
     /**
@@ -62,6 +57,18 @@ var KanbanColumnProgressBar = Widget.extend({
             self.$bars[val] = self.$('.bg-' + val + '-full');
         });
         this.$counter = this.$('.o_kanban_counter_side');
+        this.$number = this.$counter.find('b');
+
+        if (this.currency) {
+            var $currency = $('<span/>', {
+                text: this.currency.symbol,
+            });
+            if (this.currency.position === 'before') {
+                $currency.prependTo(this.$counter);
+            } else {
+                $currency.appendTo(this.$counter);
+            }
+        }
 
         return this._super.apply(this, arguments);
     },
@@ -136,7 +143,7 @@ var KanbanColumnProgressBar = Widget.extend({
         // Display and animate the progress bars
         _.each(self.colors, function (val, key) {
             var $bar = self.$bars[val];
-            var count = self.subgroupCounts[key];
+            var count = self.subgroupCounts && self.subgroupCounts[key] || 0;
 
             if (!$bar) {
                 return;
@@ -165,35 +172,28 @@ var KanbanColumnProgressBar = Widget.extend({
         });
 
         // Display and animate the counter number
-        var humanNumber;
-        var suffix = this.counterSuffix;
+        var start = this.prevTotalCounterValue;
         var end = this.totalCounterValue;
-        if (end >= 10000) {
-            humanNumber = utils.human_number(end, 1);
-            end = parseFloat(humanNumber.substr(0, humanNumber.length - 1));
-            suffix = humanNumber[humanNumber.length - 1] + suffix;
-        }
-        var start = this.prevTotalCounterValue || 0;
-        if (start >= 10000) {
-            humanNumber = utils.human_number(start, 1);
-            start = parseFloat(humanNumber.substr(0, humanNumber.length - 1));
-        }
-        if (end > start && this.ANIMATE) {
+        if (start !== undefined && end > start && this.ANIMATE) {
             $({currentValue: start}).animate({currentValue: end}, {
                 duration: 1000,
                 start: function () {
                     self.$counter.addClass('o_kanban_grow');
                 },
                 step: function () {
-                    self.$counter.html(self.counterPrefix + Math.round(this.currentValue) + suffix);
+                    self.$number.html(_getCounterHTML(this.currentValue));
                 },
                 complete: function () {
-                    self.$counter.html(self.counterPrefix + this.currentValue + suffix);
+                    self.$number.html(_getCounterHTML(this.currentValue));
                     self.$counter.removeClass('o_kanban_grow');
                 },
             });
         } else {
-            this.$counter.html(this.counterPrefix + end + suffix);
+            this.$number.html(_getCounterHTML(end));
+        }
+
+        function _getCounterHTML(value) {
+            return utils.human_number(value, 0, 3);
         }
     },
     /**