From: Christopher Moeller Date: Tue, 25 Oct 2016 21:32:27 +0000 (-0500) Subject: Add rectRounded point style X-Git-Tag: v2.5.0~1^2~42 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=97f6c8f12d75981ace1df5662f544f0758653170;p=thirdparty%2FChart.js.git Add rectRounded point style --- diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md index f62a20879..24b77cfe6 100644 --- a/docs/03-Line-Chart.md +++ b/docs/03-Line-Chart.md @@ -57,7 +57,7 @@ pointHitRadius | `Number or Array` | The pixel size of the non-displayed pointHoverBackgroundColor | `Color or Array` | Point background color when hovered pointHoverBorderColor | `Color or Array` | Point border color when hovered pointHoverBorderWidth | `Number or Array` | Border width of point when hovered -pointStyle | `String, Array, Image, Array` | 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, Image, Array` | 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 index 8fc560b3f..977574faf 100644 --- a/docs/05-Radar-Chart.md +++ b/docs/05-Radar-Chart.md @@ -50,7 +50,7 @@ pointHitRadius | `Number or Array` | The pixel size of the non-displayed pointHoverBackgroundColor | `Color or Array` | Point background color when hovered pointHoverBorderColor | `Color or Array` | Point border color when hovered pointHoverBorderWidth | `Number or Array` | Border width of point when hovered -pointStyle | `String or Array` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash' +pointStyle | `String or Array` | 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 index 439df7dba..42fac5c00 100644 --- 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 index 61fe3d09a..01eba3046 100644 --- 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();