feature: round-corners for bars in barchart

morrisjs · Oct 25, 2013 · ca371d1 · ca371d1
1 parent a738317
commit ca371d1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/lib/morris.bar.coffee b/lib/morris.bar.coffee
@@ -108,7 +108,7 @@ class Morris.Bar extends Morris.Grid
           size = bottom - top
 
           top -= lastTop if @options.stacked
-          @drawBar(left, top, barWidth, size, @colorFor(row, sidx, 'bar'))
+          @drawBar(left, top, barWidth, size, @colorFor(row, sidx, 'bar'), @options.barStyle?.opacity, @options.barStyle?.radius)
 
           lastTop += size
         else
@@ -181,7 +181,23 @@ class Morris.Bar extends Morris.Grid
       .attr('font-weight', @options.gridTextWeight)
       .attr('fill', @options.gridTextColor)
 
-  drawBar: (xPos, yPos, width, height, barColor) ->
-    @raphael.rect(xPos, yPos, width, height)
+
+  drawBar: (xPos, yPos, width, height, barColor, opacity = '1', radius = [0,0,0,0]) ->
+    if Math.max(radius...) > height or (r for r in radius when r is 0).length is 4
+      path = @raphael.rect(xPos, yPos, width, height)
+    else
+      path = @raphael.path @roundedRect(xPos, yPos, width, height, radius)
+
+
+    path
       .attr('fill', barColor)
       .attr('stroke-width', 0)
+      .attr('fill-opacity', opacity)
+
+  roundedRect: (x, y, w, h, r = [0,0,0,0]) ->
+    [].
+    concat(["M", x, r[0] + y, "Q", x, y, x + r[0], y]).
+    concat(["L", x + w - r[1], y, "Q", x + w, y, x + w, y + r[1]]).
+    concat(["L", x + w, y + h - r[2], "Q", x + w, y + h, x + w - r[2], y + h]).
+    concat(["L", x + r[3], y + h, "Q", x, y + h, x, y + h - r[3], "Z"])
+
diff --git a/spec/lib/bar/bar_spec.coffee b/spec/lib/bar/bar_spec.coffee
@@ -48,3 +48,26 @@ describe 'Morris.Bar', ->
     it 'should have text with configured font size', ->
       chart = Morris.Bar $.extend {}, defaults
       $('#graph').find("text[font-size='12px']").size().should.equal 7
+
+  describe 'when setting bar radius', ->
+    describe 'svg structure', ->
+    defaults =
+      element: 'graph'
+      data: [{x: 'foo', y: 2, z: 3}, {x: 'bar', y: 4, z: 6}]
+      xkey: 'x'
+      ykeys: ['y', 'z']
+      labels: ['Y', 'Z']
+      barStyle: {
+        radius: [5, 5, 0, 0]
+      }
+    it 'should contain a path for each bar', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("path").size().should.equal 9
+
+    it 'should use rects if radius is too big', ->
+      delete defaults.barStyle
+      chart = Morris.Bar $.extend {
+        barStyle: 
+          radius: [300, 300, 0, 0]
+        }, defaults
+      $('#graph').find("rect").size().should.equal 4