Units labels. Fix commas for negative hundreds.

examples/negative.html

@@ -28,7 +28,8 @@ Morris.Line({
   data: neg_data,
   xkey: 'period',
   ykeys: ['a'],
-  labels: ['Series A']
+  labels: ['Series A'],
+  units: '%'
 });
 </pre>
 </body>

morris.coffee

@@ -59,6 +59,7 @@ class Morris.Line
     smooth: true
     hideHover: false
     parseTime: true
+    units: ''
 
   # Do any necessary pre-processing for a new dataset
   #
@@ -112,8 +113,8 @@ class Morris.Line
 
     # calculate grid dimensions
     maxYLabelWidth = Math.max(
-      @measureText(@options.ymin, @options.gridTextSize).width,
+      @measureText(@options.ymin + @options.units, @options.gridTextSize).width,
-      @measureText(@options.ymax, @options.gridTextSize).width)
+      @measureText(@options.ymax + @options.units, @options.gridTextSize).width)
     left = maxYLabelWidth + @options.marginLeft
     width = @el.width() - left - @options.marginRight
     height = @el.height() - @options.marginTop - @options.marginBottom
@@ -136,7 +137,7 @@ class Morris.Line
     for lineY in [firstY..lastY] by yInterval
       v = Math.floor(lineY)
       y = transY(v)
-      @r.text(left - @options.marginLeft/2, y, v)
+      @r.text(left - @options.marginLeft/2, y, v + @options.units)
         .attr('font-size', @options.gridTextSize)
         .attr('fill', @options.gridTextColor)
         .attr('text-anchor', 'end')
@@ -205,7 +206,7 @@ class Morris.Line
       hoverSet.show()
       xLabel.attr('text', @columnLabels[index])
       for i in [0..@series.length-1]
-        yLabels[i].attr('text', "#{@seriesLabels[i]}: #{@commas(@series[i][index])}")
+        yLabels[i].attr('text', "#{@seriesLabels[i]}: #{@commas(@series[i][index])}#{@options.units}")
       # recalculate hover box width
       maxLabelWidth = Math.max.apply null, $.map yLabels, (l) ->
         l.getBBox().width
@@ -346,7 +347,8 @@ class Morris.Line
   # eg: commas(1234567) -> '1,234,567'
   #
   commas: (num) ->
-      num.toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',')
+    ret = if num < 0 then "-" else ""
+    ret + Math.abs(num).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',')
 
 window.Morris = Morris
 # vim: set et ts=2 sw=2 sts=2

morris.js

@@ -47,7 +47,8 @@
       hoverFontSize: 12,
       smooth: true,
       hideHover: false,
-      parseTime: true
+      parseTime: true,
+      units: ''
     };
 
     Line.prototype.precalc = function() {
@@ -108,7 +109,7 @@
         _this = this;
       this.el.empty();
       this.r = new Raphael(this.el[0]);
-      maxYLabelWidth = Math.max(this.measureText(this.options.ymin, this.options.gridTextSize).width, this.measureText(this.options.ymax, this.options.gridTextSize).width);
+      maxYLabelWidth = Math.max(this.measureText(this.options.ymin + this.options.units, this.options.gridTextSize).width, this.measureText(this.options.ymax + this.options.units, this.options.gridTextSize).width);
       left = maxYLabelWidth + this.options.marginLeft;
       width = this.el.width() - left - this.options.marginRight;
       height = this.el.height() - this.options.marginTop - this.options.marginBottom;
@@ -130,7 +131,7 @@
       for (lineY = firstY; firstY <= lastY ? lineY <= lastY : lineY >= lastY; lineY += yInterval) {
         v = Math.floor(lineY);
         y = transY(v);
-        this.r.text(left - this.options.marginLeft / 2, y, v).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end');
+        this.r.text(left - this.options.marginLeft / 2, y, v + this.options.units).attr('font-size', this.options.gridTextSize).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end');
         this.r.path("M" + left + "," + y + 'H' + (left + width)).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth);
       }
       prevLabelMargin = null;
@@ -206,7 +207,7 @@
         hoverSet.show();
         xLabel.attr('text', _this.columnLabels[index]);
         for (i = 0, _ref8 = _this.series.length - 1; 0 <= _ref8 ? i <= _ref8 : i >= _ref8; 0 <= _ref8 ? i++ : i--) {
-          yLabels[i].attr('text', "" + _this.seriesLabels[i] + ": " + (_this.commas(_this.series[i][index])));
+          yLabels[i].attr('text', "" + _this.seriesLabels[i] + ": " + (_this.commas(_this.series[i][index])) + _this.options.units);
         }
         maxLabelWidth = Math.max.apply(null, $.map(yLabels, function(l) {
           return l.getBBox().width;
@@ -374,7 +375,9 @@
     };
 
     Line.prototype.commas = function(num) {
-      return num.toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',');
+      var ret;
+      ret = num < 0 ? "-" : "";
+      return ret + Math.abs(num).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',');
     };
 
     return Line;