Merge pull request #37 from chillitom/patch-1

Add optional thousands separators to Gauge control
riemann · Aug 19, 2013 · 3bba31a · 3bba31a
2 parents 9c608f1 + 8e0776b
commit 3bba31a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/lib/riemann/dash/public/format.js b/lib/riemann/dash/public/format.js
@@ -1,9 +1,17 @@
 var format = (function() {
 
-  var formatFloat = function(number, precision) {
+  var formatFloat = function(number, precision, commas) {
     precision = precision || 2;
     var base = Math.pow(10, precision);
-    return Math.round(number * base) / base;
+    var val =  Math.round(number * base) / base;
+
+    if(!commas) {
+      return val;
+    }
+
+    var parts = (val + '').split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return parts.join(".");
   }
 
   var metricTemplate = _.template('<div class="bar {{state}}" style="width: {{percent}}%">{{metric}}</div>'); 

diff --git a/lib/riemann/dash/public/views/gauge.js b/lib/riemann/dash/public/views/gauge.js
@@ -5,6 +5,7 @@
       view.View.call(this, json);
       this.query = json.query;
       this.title = json.title;
+      this.commaSeperateThousands = json.commaSeperateThousands;
       this.clickFocusable = true;
       this.el.addClass('gauge');
       this.el.append(
@@ -23,7 +24,7 @@
         var value = this.el.find('.value');
         this.sub = subs.subscribe(this.query, function(e) {
           me.box.attr('class', 'box state ' + e.state);
-          value.text(format.float(e.metric));
+          value.text(format.float(e.metric, 2, me.commaSeperateThousands));
           value.attr('title', e.description);
 
           // The first time, do a full-height reflow.
@@ -45,15 +46,18 @@
       return $.extend(view.View.prototype.json.call(this), {
         type: 'Gauge',
         title: this.title,
-        query: this.query
+        query: this.query,
+        commaSeperateThousands: this.commaSeperateThousands
       });
     }
 
     var editTemplate = _.template(
         "<label for='title'>Title</label>" +
         "<input type='text' name='title' value='{{title}}' /><br />" +
         "<label for='query'>Query</label>" +
-        '<textarea type="text" name="query" class="query">{{query}}</textarea>'    );
+        '<textarea type="text" name="query" class="query">{{query}}</textarea>' +
+        "<label for='commaSeperateThousands'>Comma Seperate Thousands</label>" +
+        "<input type='checkbox' name='commaSeperateThousands' {% if(commaSeperateThousands)  { %} checked='checked' {% } %} />" );
 
     Gauge.prototype.editForm = function() {
       return editTemplate(this);