Added 'borderSkipped' parameter to Rectangle.

diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md
index c9101b828e98a0036d213510fad5f2e6d5f78166..62f98be2ebb7a13bed6dd36bf0ca74d4cc7e5bed 100644 (file)
--- a/docs/00-Getting-Started.md
+++ b/docs/00-Getting-Started.md
@@ -236,6 +236,7 @@ rectangle | - | - | -
 *rectangle*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default bar fill color
 *rectangle*.borderWidth | Number | 0 | Default bar stroke width
 *rectangle*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default bar stroke color
+*rectangle*.borderSkipped | String | 'bottom' | Default skipped (excluded) border for rectangle. Can be one of `bottom`, `left`, `top`, `right`
 
 If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:
 

diff --git a/samples/bar.html b/samples/bar.html
index 9bdb366ac4e31a025e43c98f497d9ba6296a0650..d595bae49d98726d77997ad2307f10989890f8b6 100644 (file)
--- a/samples/bar.html
+++ b/samples/bar.html
@@ -66,7 +66,8 @@
                     elements: {
                         rectangle: {
                             borderWidth: 2,
-                            borderColor: 'rgb(0, 255, 0)'
+                            borderColor: 'rgb(0, 255, 0)',
+                            borderSkipped: 'bottom'
                         }
                     },
                     responsive: true,

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index 094292b53b0f5219f453ec3c0772288e54766064..9574ed2e37d9643238adc910d9446413b743f64a 100644 (file)
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -116,6 +116,7 @@ module.exports = function(Chart) {
                                        base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
                                        width: this.calculateBarWidth(numBars),
                                        backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
+                                       borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped,
                                        borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
                                        borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth)
                                }

diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js
index e3db40fb4a6debdeef2442742f8031f4d78e1422..63f426688909cb98b83c3a32f762daf0ecd981c1 100644 (file)
--- a/src/elements/element.rectangle.js
+++ b/src/elements/element.rectangle.js
@@ -7,7 +7,8 @@ module.exports = function(Chart) {
        Chart.defaults.global.elements.rectangle = {
                backgroundColor: Chart.defaults.global.defaultColor,
                borderWidth: 0,
-               borderColor: Chart.defaults.global.defaultColor
+               borderColor: Chart.defaults.global.defaultColor,
+               borderSkipped: 'bottom'
        };
 
        Chart.elements.Rectangle = Chart.Element.extend({
@@ -36,12 +37,31 @@ module.exports = function(Chart) {
                        ctx.strokeStyle = vm.borderColor;
                        ctx.lineWidth = vm.borderWidth;
 
-                       // It'd be nice to keep this class totally generic to any rectangle
-                       // and simply specify which border to miss out.
-                       ctx.moveTo(leftX, vm.base);
-                       ctx.lineTo(leftX, top);
-                       ctx.lineTo(rightX, top);
-                       ctx.lineTo(rightX, vm.base);
+                       // Corner points, from bottom-left to bottom-right clockwise
+                       // | 1 2 |
+                       // | 0 3 |
+                       var corners = [
+                               [leftX, vm.base],
+                               [leftX, top],
+                               [rightX, top],
+                               [rightX, vm.base]
+                       ];
+
+                       // Find first (starting) corner with fallback to 'bottom' 
+                       var borders = ['bottom', 'left', 'top', 'right'];
+                       var startCorner = borders.indexOf(vm.borderSkipped, 0);
+                       if (startCorner === -1)
+                               startCorner = 0;
+
+                       function cornerAt(index) {
+                               return corners[(startCorner + index) % 4];
+                       }
+
+                       // Draw rectangle from 'startCorner'
+                       ctx.moveTo.apply(ctx, cornerAt(0));
+                       for (var i = 1; i < 4; i++)
+                               ctx.lineTo.apply(ctx, cornerAt(i));
+
                        ctx.fill();
                        if (vm.borderWidth) {
                                ctx.stroke();

diff --git a/test/element.rectangle.tests.js b/test/element.rectangle.tests.js
index cb1959b04550535012504ca2465db7d0f94f8fb8..8c28970b1c3008826317297e0039111b1483d2e9 100644 (file)
--- a/test/element.rectangle.tests.js
+++ b/test/element.rectangle.tests.js
@@ -242,5 +242,62 @@ describe('Rectangle element tests', function() {
                }]);
        });
 
+       function testBorderSkipped (borderSkipped, expectedDrawCalls) {
+               var mockContext = window.createMockContext();
+               var rectangle = new Chart.elements.Rectangle({
+                       _chart: { ctx: mockContext }
+               });
+
+               // Attach a view object as if we were the controller
+               rectangle._view = {
+                       borderSkipped: borderSkipped, // set tested 'borderSkipped' parameter
+                       ctx: mockContext,
+                       base: 0,
+                       width: 4,
+                       x: 10,
+                       y: 15,
+               };
+               
+               rectangle.draw();
+
+               var drawCalls = rectangle._view.ctx.getCalls().splice(4, 4);  
+               expect(drawCalls).toEqual(expectedDrawCalls);
+       }
+       
+       it ('should draw correctly respecting "borderSkipped" == "bottom"', function() {
+               testBorderSkipped ('bottom', [
+                       { name: 'moveTo', args: [8, 0] },
+                       { name: 'lineTo', args: [8, 15] },
+                       { name: 'lineTo', args: [12, 15] },
+                       { name: 'lineTo', args: [12, 0] },
+               ]);
+       });
+
+       it ('should draw correctly respecting "borderSkipped" == "left"', function() {
+               testBorderSkipped ('left', [
+                       { name: 'moveTo', args: [8, 15] },
+                       { name: 'lineTo', args: [12, 15] },
+                       { name: 'lineTo', args: [12, 0] },
+                       { name: 'lineTo', args: [8, 0] },
+               ]);
+       });
+
+       it ('should draw correctly respecting "borderSkipped" == "top"', function() {
+               testBorderSkipped ('top', [
+                       { name: 'moveTo', args: [12, 15] },
+                       { name: 'lineTo', args: [12, 0] },
+                       { name: 'lineTo', args: [8, 0] },
+                       { name: 'lineTo', args: [8, 15] },
+               ]);
+       });
+
+       it ('should draw correctly respecting "borderSkipped" == "right"', function() {
+               testBorderSkipped ('right', [
+                       { name: 'moveTo', args: [12, 0] },
+                       { name: 'lineTo', args: [8, 0] },
+                       { name: 'lineTo', args: [8, 15] },
+                       { name: 'lineTo', args: [12, 15] },
+               ]);
+       });
 
 });
\ No newline at end of file