Skip to content

Commit ca371d1

Browse files
committed
feature: round-corners for bars in barchart
1 parent a738317 commit ca371d1

File tree

2 files changed

+42
-3
lines changed

2 files changed

+42
-3
lines changed

lib/morris.bar.coffee

+19-3
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ class Morris.Bar extends Morris.Grid
108108
size = bottom - top
109109

110110
top -= lastTop if @options.stacked
111-
@drawBar(left, top, barWidth, size, @colorFor(row, sidx, 'bar'))
111+
@drawBar(left, top, barWidth, size, @colorFor(row, sidx, 'bar'), @options.barStyle?.opacity, @options.barStyle?.radius)
112112

113113
lastTop += size
114114
else
@@ -181,7 +181,23 @@ class Morris.Bar extends Morris.Grid
181181
.attr('font-weight', @options.gridTextWeight)
182182
.attr('fill', @options.gridTextColor)
183183

184-
drawBar: (xPos, yPos, width, height, barColor) ->
185-
@raphael.rect(xPos, yPos, width, height)
184+
185+
drawBar: (xPos, yPos, width, height, barColor, opacity = '1', radius = [0,0,0,0]) ->
186+
if Math.max(radius...) > height or (r for r in radius when r is 0).length is 4
187+
path = @raphael.rect(xPos, yPos, width, height)
188+
else
189+
path = @raphael.path @roundedRect(xPos, yPos, width, height, radius)
190+
191+
192+
path
186193
.attr('fill', barColor)
187194
.attr('stroke-width', 0)
195+
.attr('fill-opacity', opacity)
196+
197+
roundedRect: (x, y, w, h, r = [0,0,0,0]) ->
198+
[].
199+
concat(["M", x, r[0] + y, "Q", x, y, x + r[0], y]).
200+
concat(["L", x + w - r[1], y, "Q", x + w, y, x + w, y + r[1]]).
201+
concat(["L", x + w, y + h - r[2], "Q", x + w, y + h, x + w - r[2], y + h]).
202+
concat(["L", x + r[3], y + h, "Q", x, y + h, x, y + h - r[3], "Z"])
203+

spec/lib/bar/bar_spec.coffee

+23
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,26 @@ describe 'Morris.Bar', ->
4848
it 'should have text with configured font size', ->
4949
chart = Morris.Bar $.extend {}, defaults
5050
$('#graph').find("text[font-size='12px']").size().should.equal 7
51+
52+
describe 'when setting bar radius', ->
53+
describe 'svg structure', ->
54+
defaults =
55+
element: 'graph'
56+
data: [{x: 'foo', y: 2, z: 3}, {x: 'bar', y: 4, z: 6}]
57+
xkey: 'x'
58+
ykeys: ['y', 'z']
59+
labels: ['Y', 'Z']
60+
barStyle: {
61+
radius: [5, 5, 0, 0]
62+
}
63+
it 'should contain a path for each bar', ->
64+
chart = Morris.Bar $.extend {}, defaults
65+
$('#graph').find("path").size().should.equal 9
66+
67+
it 'should use rects if radius is too big', ->
68+
delete defaults.barStyle
69+
chart = Morris.Bar $.extend {
70+
barStyle:
71+
radius: [300, 300, 0, 0]
72+
}, defaults
73+
$('#graph').find("rect").size().should.equal 4

0 commit comments

Comments
 (0)