From ca371d112a9cb08aa3a2c527e77191a246ea580d Mon Sep 17 00:00:00 2001 From: sudodoki Date: Thu, 24 Oct 2013 23:44:27 +0300 Subject: [PATCH] feature: round-corners for bars in barchart --- lib/morris.bar.coffee | 22 +++++++++++++++++++--- spec/lib/bar/bar_spec.coffee | 23 +++++++++++++++++++++++ 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/lib/morris.bar.coffee b/lib/morris.bar.coffee index 5e6c37a..8f0f49e 100644 --- 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 index cfa2936..0997357 100644 --- 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