Add rectRounded point style

chargify · Oct 25, 2016 · 4c992c8 · 4c992c8
1 parent 99041de
commit 4c992c8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md
@@ -57,7 +57,7 @@ pointHitRadius | `Number or Array<Number>` | The pixel size of the non-displayed
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
-pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`. 
+pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`.
 showLine | `Boolean` | If false, the line is not drawn for this dataset
 spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data
 steppedLine | `Boolean` | If true, the line is shown as a stepped line and 'lineTension' will be ignored

diff --git a/docs/05-Radar-Chart.md b/docs/05-Radar-Chart.md
@@ -50,7 +50,7 @@ hitRadius | `Number or Array<Number>` | The pixel size of the non-displayed poin
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
-pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
+pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
 
 An example data object using these attributes is shown below.
 

diff --git a/src/core/core.canvasHelpers.js b/src/core/core.canvasHelpers.js
@@ -43,6 +43,14 @@ module.exports = function(Chart) {
 			ctx.fillRect(x - size, y - size, 2 * size, 2 * size);
 			ctx.strokeRect(x - size, y - size, 2 * size, 2 * size);
 			break;
+		case 'rectRounded':
+			var offset = radius / Math.SQRT2;
+			var leftX = x - offset;
+			var topY = y - offset;
+			var sideSize = Math.SQRT2 * radius;
+			Chart.helpers.drawRoundedRectangle(ctx, leftX, topY, sideSize, sideSize, radius / 2);
+			ctx.fill();
+			break;
 		case 'rectRot':
 			size = 1 / Math.SQRT2 * radius;
 			ctx.beginPath();

diff --git a/test/element.point.tests.js b/test/element.point.tests.js
@@ -208,6 +208,30 @@ describe('Point element tests', function() {
 			args: []
 		}]);
 
+		var drawRoundedRectangleSpy = jasmine.createSpy('drawRoundedRectangle');
+		var drawRoundedRectangle = Chart.helpers.drawRoundedRectangle;
+		var offset = point._view.radius / Math.SQRT2;
+		Chart.helpers.drawRoundedRectangle = drawRoundedRectangleSpy;
+		mockContext.resetCalls();
+		point._view.pointStyle = 'rectRounded';
+		point.draw();
+
+		expect(drawRoundedRectangleSpy).toHaveBeenCalledWith(
+			mockContext,
+			10 - offset,
+			15 - offset,
+			Math.SQRT2 * 2,
+			Math.SQRT2 * 2,
+			2 / 2
+		);
+		expect(mockContext.getCalls()).toContain(
+			jasmine.objectContaining({
+				name: 'fill',
+				args: [],
+			})
+		);
+
+		Chart.helpers.drawRoundedRectangle = drawRoundedRectangle;
 		mockContext.resetCalls();
 		point._view.pointStyle = 'rectRot';
 		point.draw();