From 10475a3bf38f74c4ec2fda2f752462581e074047 Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Fri, 23 Mar 2018 11:19:00 +0200 Subject: [PATCH 1/9] gives you the option of having some rounded corners instead of all of them been round Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.js | 74 +++++++++++++++++++++++--- Chart.roundedBarCharts.min.js | 2 +- README.md | 6 ++- demo/index.html | 99 +++++++++++++---------------------- demo/script.js | 78 +++++++++++++++++++++++++++ 5 files changed, 188 insertions(+), 71 deletions(-) create mode 100644 demo/script.js diff --git a/Chart.roundedBarCharts.js b/Chart.roundedBarCharts.js index efbbeca..7e7ae63 100644 --- a/Chart.roundedBarCharts.js +++ b/Chart.roundedBarCharts.js @@ -1,6 +1,7 @@ /* * Rounded Rectangle Extension for Bar Charts and Horizontal Bar Charts * Tested with Charts.js 2.7.0 +* Mod by anthony0030 */ Chart.elements.Rectangle.prototype.draw = function() { @@ -12,8 +13,12 @@ Chart.elements.Rectangle.prototype.draw = function() { // If radius is less than 0 or is large enough to cause drawing errors a max // radius is imposed. If cornerRadius is not defined set it to 0. var cornerRadius = this._chart.config.options.cornerRadius; + var fullCornerRadius = this._chart.config.options.fullCornerRadius; + var typeOfChart = this._chart.config.type; + if(cornerRadius < 0){ cornerRadius = 0; } if(typeof cornerRadius == 'undefined'){ cornerRadius = 0; } + if(typeof fullCornerRadius == 'undefined'){ fullCornerRadius = false; } if (!vm.horizontal) { // bar @@ -89,6 +94,7 @@ Chart.elements.Rectangle.prototype.draw = function() { var corner = cornerAt(0); ctx.moveTo(corner[0], corner[1]); + var nextCornerId, nextCorner, width, height, x, y; for (var i = 1; i < 4; i++) { corner = cornerAt(i); nextCornerId = i+1; @@ -112,6 +118,7 @@ Chart.elements.Rectangle.prototype.draw = function() { radius = Math.floor(Math.abs(width)/2); } + var x_tl, x_tr, y_tl, y_tr, x_bl, x_br, y_bl, y_br; if(height < 0){ // Negative values in a standard bar chart x_tl = x; x_tr = x+width; @@ -122,13 +129,28 @@ Chart.elements.Rectangle.prototype.draw = function() { // Draw ctx.moveTo(x_bl+radius, y_bl); + ctx.lineTo(x_br-radius, y_br); + + // bottom right ctx.quadraticCurveTo(x_br, y_br, x_br, y_br-radius); + + ctx.lineTo(x_tr, y_tr+radius); - ctx.quadraticCurveTo(x_tr, y_tr, x_tr-radius, y_tr); + + // top right + fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr-radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr-radius, y_tr); + + ctx.lineTo(x_tl+radius, y_tl); - ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl+radius); + + // top left + fullCornerRadius ? ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl+radius) : ctx.lineTo(x_tl, y_tl, x_tl, y_tl+radius); + + ctx.lineTo(x_bl, y_bl-radius); + + // bottom left ctx.quadraticCurveTo(x_bl, y_bl, x_bl+radius, y_bl); }else if(width < 0){ @@ -141,26 +163,64 @@ Chart.elements.Rectangle.prototype.draw = function() { // Draw ctx.moveTo(x_bl+radius, y_bl); + ctx.lineTo(x_br-radius, y_br); - ctx.quadraticCurveTo(x_br, y_br, x_br, y_br-radius); + + // Bottom right corner + fullCornerRadius ? ctx.quadraticCurveTo(x_br, y_br, x_br, y_br-radius) : ctx.lineTo(x_br, y_br, x_br, y_br-radius); + ctx.lineTo(x_tr, y_tr+radius); - ctx.quadraticCurveTo(x_tr, y_tr, x_tr-radius, y_tr); + + // top right Corner + fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr-radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr-radius, y_tr); + ctx.lineTo(x_tl+radius, y_tl); + + // top left corner ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl+radius); + ctx.lineTo(x_bl, y_bl-radius); + + // bttom left corner ctx.quadraticCurveTo(x_bl, y_bl, x_bl+radius, y_bl); }else{ //Positive Value ctx.moveTo(x + radius, y); + + + ctx.lineTo(x + width - radius, y); + + // top right ctx.quadraticCurveTo(x + width, y, x + width, y + radius); + + ctx.lineTo(x + width, y + height - radius); - ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); + + // bottom right + if(fullCornerRadius || typeOfChart == 'horizontalBar') + ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); + else + ctx.lineTo(x + width, y + height, x + width - radius, y + height); + + ctx.lineTo(x + radius, y + height); - ctx.quadraticCurveTo(x, y + height, x, y + height - radius); + + // bottom left + if(fullCornerRadius) + ctx.quadraticCurveTo(x, y + height, x, y + height - radius); + else + ctx.lineTo(x, y + height, x, y + height - radius); + + ctx.lineTo(x, y + radius); - ctx.quadraticCurveTo(x, y, x + radius, y); + + // top left + if(fullCornerRadius || typeOfChart == 'bar') + ctx.quadraticCurveTo(x, y, x + radius, y); + else + ctx.lineTo(x, y, x + radius, y); } } diff --git a/Chart.roundedBarCharts.min.js b/Chart.roundedBarCharts.min.js index 7d5f62c..7fcd109 100644 --- a/Chart.roundedBarCharts.min.js +++ b/Chart.roundedBarCharts.min.js @@ -1 +1 @@ -Chart.elements.Rectangle.prototype.draw=function(){function t(t){return s[(f+t)%4]}var r,e,i,o,_,h,l,a,b=this._chart.ctx,d=this._view,n=d.borderWidth,u=this._chart.config.options.cornerRadius;if(u<0&&(u=0),void 0===u&&(u=0),d.horizontal?(r=d.base,e=d.x,i=d.y-d.height/2,o=d.y+d.height/2,_=e>r?1:-1,h=1,l=d.borderSkipped||"left"):(r=d.x-d.width/2,e=d.x+d.width/2,i=d.y,_=1,h=(o=d.base)>i?1:-1,l=d.borderSkipped||"bottom"),n){var T=Math.min(Math.abs(r-e),Math.abs(i-o)),v=(n=n>T?T:n)/2,g=r+("left"!==l?v*_:0),c=e+("right"!==l?-v*_:0),C=i+("top"!==l?v*h:0),w=o+("bottom"!==l?-v*h:0);g!==c&&(i=C,o=w),C!==w&&(r=g,e=c)}b.beginPath(),b.fillStyle=d.backgroundColor,b.strokeStyle=d.borderColor,b.lineWidth=n;var s=[[r,o],[r,i],[e,i],[e,o]],f=["bottom","left","top","right"].indexOf(l,0);-1===f&&(f=0);var q=t(0);b.moveTo(q[0],q[1]);for(var m=1;m<4;m++)q=t(m),nextCornerId=m+1,4==nextCornerId&&(nextCornerId=0),nextCorner=t(nextCornerId),width=s[2][0]-s[1][0],height=s[0][1]-s[1][1],x=s[1][0],y=s[1][1],(a=u)>Math.abs(height)/2&&(a=Math.floor(Math.abs(height)/2)),a>Math.abs(width)/2&&(a=Math.floor(Math.abs(width)/2)),height<0?(x_tl=x,x_tr=x+width,y_tl=y+height,y_tr=y+height,x_bl=x,x_br=x+width,y_bl=y,y_br=y,b.moveTo(x_bl+a,y_bl),b.lineTo(x_br-a,y_br),b.quadraticCurveTo(x_br,y_br,x_br,y_br-a),b.lineTo(x_tr,y_tr+a),b.quadraticCurveTo(x_tr,y_tr,x_tr-a,y_tr),b.lineTo(x_tl+a,y_tl),b.quadraticCurveTo(x_tl,y_tl,x_tl,y_tl+a),b.lineTo(x_bl,y_bl-a),b.quadraticCurveTo(x_bl,y_bl,x_bl+a,y_bl)):width<0?(x_tl=x+width,x_tr=x,y_tl=y,y_tr=y,x_bl=x+width,x_br=x,y_bl=y+height,y_br=y+height,b.moveTo(x_bl+a,y_bl),b.lineTo(x_br-a,y_br),b.quadraticCurveTo(x_br,y_br,x_br,y_br-a),b.lineTo(x_tr,y_tr+a),b.quadraticCurveTo(x_tr,y_tr,x_tr-a,y_tr),b.lineTo(x_tl+a,y_tl),b.quadraticCurveTo(x_tl,y_tl,x_tl,y_tl+a),b.lineTo(x_bl,y_bl-a),b.quadraticCurveTo(x_bl,y_bl,x_bl+a,y_bl)):(b.moveTo(x+a,y),b.lineTo(x+width-a,y),b.quadraticCurveTo(x+width,y,x+width,y+a),b.lineTo(x+width,y+height-a),b.quadraticCurveTo(x+width,y+height,x+width-a,y+height),b.lineTo(x+a,y+height),b.quadraticCurveTo(x,y+height,x,y+height-a),b.lineTo(x,y+a),b.quadraticCurveTo(x,y,x+a,y));b.fill(),n&&b.stroke()}; +Chart.elements.Rectangle.prototype.draw=function(){var t,r,i,e,o,_,h,l=this._chart.ctx,a=this._view,b=a.borderWidth,n=this._chart.config.options.cornerRadius,d=this._chart.config.options.fullCornerRadius,T=this._chart.config.type;if(console.log(T),n<0&&(n=0),void 0===n&&(n=0),a.horizontal?(t=a.base,r=a.x,i=a.y-a.height/2,e=a.y+a.height/2,o=r>t?1:-1,_=1,h=a.borderSkipped||"left"):(t=a.x-a.width/2,r=a.x+a.width/2,i=a.y,o=1,_=(e=a.base)>i?1:-1,h=a.borderSkipped||"bottom"),b){var u=Math.min(Math.abs(t-r),Math.abs(i-e)),g=(b=b>u?u:b)/2,c=t+("left"!==h?g*o:0),v=r+("right"!==h?-g*o:0),s=i+("top"!==h?g*_:0),C=e+("bottom"!==h?-g*_:0);c!==v&&(i=s,e=C),s!==C&&(t=c,r=v)}l.beginPath(),l.fillStyle=a.backgroundColor,l.strokeStyle=a.borderColor,l.lineWidth=b;var w=[[t,e],[t,i],[r,i],[r,e]],f=["bottom","left","top","right"].indexOf(h,0);function q(t){return w[(f+t)%4]}-1===f&&(f=0);var p=q(0);l.moveTo(p[0],p[1]);for(var m=1;m<4;m++){var M;p=q(m),nextCornerId=m+1,4==nextCornerId&&(nextCornerId=0),nextCorner=q(nextCornerId),width=w[2][0]-w[1][0],height=w[0][1]-w[1][1],x=w[1][0],y=w[1][1],(M=n)>Math.abs(height)/2&&(M=Math.floor(Math.abs(height)/2)),M>Math.abs(width)/2&&(M=Math.floor(Math.abs(width)/2)),height<0?(x_tl=x,x_tr=x+width,y_tl=y+height,y_tr=y+height,x_bl=x,x_br=x+width,y_bl=y,y_br=y,l.moveTo(x_bl+M,y_bl),l.lineTo(x_br-M,y_br),l.quadraticCurveTo(x_br,y_br,x_br,y_br-M),l.lineTo(x_tr,y_tr+M),d?l.quadraticCurveTo(x_tr,y_tr,x_tr-M,y_tr):l.lineTo(x_tr,y_tr,x_tr-M,y_tr),l.lineTo(x_tl+M,y_tl),d?l.quadraticCurveTo(x_tl,y_tl,x_tl,y_tl+M):l.lineTo(x_tl,y_tl,x_tl,y_tl+M),l.lineTo(x_bl,y_bl-M),l.quadraticCurveTo(x_bl,y_bl,x_bl+M,y_bl)):width<0?(x_tl=x+width,x_tr=x,y_tl=y,y_tr=y,x_bl=x+width,x_br=x,y_bl=y+height,y_br=y+height,l.moveTo(x_bl+M,y_bl),l.lineTo(x_br-M,y_br),d?l.quadraticCurveTo(x_br,y_br,x_br,y_br-M):l.lineTo(x_br,y_br,x_br,y_br-M),l.lineTo(x_tr,y_tr+M),d?l.quadraticCurveTo(x_tr,y_tr,x_tr-M,y_tr):l.lineTo(x_tr,y_tr,x_tr-M,y_tr),l.lineTo(x_tl+M,y_tl),l.quadraticCurveTo(x_tl,y_tl,x_tl,y_tl+M),l.lineTo(x_bl,y_bl-M),l.quadraticCurveTo(x_bl,y_bl,x_bl+M,y_bl)):(l.moveTo(x+M,y),l.lineTo(x+width-M,y),l.quadraticCurveTo(x+width,y,x+width,y+M),l.lineTo(x+width,y+height-M),d||"horizontalBar"==T?l.quadraticCurveTo(x+width,y+height,x+width-M,y+height):l.lineTo(x+width,y+height,x+width-M,y+height),l.lineTo(x+M,y+height),d&&"horizontalBar"==T?l.quadraticCurveTo(x,y+height,x,y+height-M):l.lineTo(x,y+height,x,y+height-M),l.lineTo(x,y+M),d||"bar"==T?l.quadraticCurveTo(x,y,x+M,y):l.lineTo(x,y,x+M,y))}l.fill(),b&&l.stroke()}; \ No newline at end of file diff --git a/README.md b/README.md index cd616a3..67a461d 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,10 @@ To use include the following: Then set the radius in the options e.g. ```javascript var options = { - cornerRadius: 20, + cornerRadius: number, + fullCornerRadius: boolean, }; ``` + +"cornerRadius" option will define how much of a curve you whant your bars to have. +"fullCornerRadius" option will make all the corners in the chart round and is a boolean; true or false. \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index adc0d1c..91e887a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,66 +1,41 @@ - - Chart.js Rounded Bar Charts Demo - - - - -
- -
-
- -
- + + + - function onLoad(){ - // Standard Bar Chart - var ctxBar = document.getElementById("bar_chart"); - var myBarChart = new Chart(ctxBar, { - type: 'bar', - data: data, - options: options - }); - // Horizontal Bar Chart - var ctxHBar = document.getElementById("horizontal_bar_chart"); - var myHorizBarChart = new Chart(ctxHBar, { - type: 'horizontalBar', - data: data, - options: options - }); - } - - - +

Bar chart

+ +

With rounded coreners

+
+ +
+ +

With all rounded corener

+
+ +
+ + + + +

Horizontal Bar chart

+ +

With rounded corener

+
+ +
+ + +

With all rounded corener

+
+ +
+ + + + \ No newline at end of file diff --git a/demo/script.js b/demo/script.js new file mode 100644 index 0000000..522070d --- /dev/null +++ b/demo/script.js @@ -0,0 +1,78 @@ +var data = { + labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], + datasets: [{ + label: '% change in support', + data: [12, -19, -3, 5, 2, 3], + backgroundColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 0 + }] +}; + + +var options = { + cornerRadius: 20, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + } + }] + } +}; + +var fullCornerRadiusOptions = { + cornerRadius: 20, + fullCornerRadius: true, + scales: { + yAxes: [{ + ticks: { + beginAtZero: true, + } + }] + } +}; + + +function onLoad() { + + // Standard Bar Chart + var ctxBar = document.getElementById("bar_chart"); + var myBarChart = new Chart(ctxBar, { + type: 'bar', + data: data, + options: options + }); + + // Horizontal Bar Chart + var ctxHBar = document.getElementById("horizontal_bar_chart"); + var myHorizBarChart = new Chart(ctxHBar, { + type: 'horizontalBar', + data: data, + options: options + }); + + + // Standard Bar Chart with all corners round + var ctxBarF = document.getElementById("bar_chart_fullCornerRadius"); + var myBarChartF = new Chart(ctxBarF, { + type: 'bar', + data: data, + options: fullCornerRadiusOptions + }); + + // Horizontal Bar Chart with all corners round + var ctxHBarF = document.getElementById("horizontal_bar_chart_fullCornerRadius"); + var myHorizBarChartF = new Chart(ctxHBarF, { + type: 'horizontalBar', + data: data, + options: fullCornerRadiusOptions + }); + +} \ No newline at end of file From 172139f4838e35202f94350c69885be4b78d3d12 Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Fri, 23 Mar 2018 11:22:40 +0200 Subject: [PATCH 2/9] changes the default action to make all the corners round by default as the author made it Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.js | 2 +- README.md | 2 +- demo/script.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Chart.roundedBarCharts.js b/Chart.roundedBarCharts.js index 7e7ae63..b3b1117 100644 --- a/Chart.roundedBarCharts.js +++ b/Chart.roundedBarCharts.js @@ -18,7 +18,7 @@ Chart.elements.Rectangle.prototype.draw = function() { if(cornerRadius < 0){ cornerRadius = 0; } if(typeof cornerRadius == 'undefined'){ cornerRadius = 0; } - if(typeof fullCornerRadius == 'undefined'){ fullCornerRadius = false; } + if(typeof fullCornerRadius == 'undefined'){ fullCornerRadius = true; } if (!vm.horizontal) { // bar diff --git a/README.md b/README.md index 67a461d..95823c5 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Then set the radius in the options e.g. ```javascript var options = { cornerRadius: number, - fullCornerRadius: boolean, + fullCornerRadius: boolean, (default is true) }; ``` diff --git a/demo/script.js b/demo/script.js index 522070d..b9d1138 100644 --- a/demo/script.js +++ b/demo/script.js @@ -18,6 +18,7 @@ var data = { var options = { cornerRadius: 20, + fullCornerRadius: false, scales: { yAxes: [{ ticks: { @@ -29,7 +30,6 @@ var options = { var fullCornerRadiusOptions = { cornerRadius: 20, - fullCornerRadius: true, scales: { yAxes: [{ ticks: { From d944ba3d553b8048e1e64fbceddd75422cc77ba0 Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Fri, 23 Mar 2018 11:25:44 +0200 Subject: [PATCH 3/9] clean up whitespace Signed-off-by: Anthony Veaudry --- demo/index.html | 2 -- demo/script.js | 4 +--- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/demo/index.html b/demo/index.html index 91e887a..f3c9cf6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -21,8 +21,6 @@

With all rounded corener

- -

Horizontal Bar chart

With rounded corener

diff --git a/demo/script.js b/demo/script.js index b9d1138..93beab0 100644 --- a/demo/script.js +++ b/demo/script.js @@ -15,7 +15,6 @@ var data = { }] }; - var options = { cornerRadius: 20, fullCornerRadius: false, @@ -39,9 +38,8 @@ var fullCornerRadiusOptions = { } }; - function onLoad() { - + // Standard Bar Chart var ctxBar = document.getElementById("bar_chart"); var myBarChart = new Chart(ctxBar, { From 35e399e0a46abb112051a5e2c1b145399104e4ef Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Fri, 23 Mar 2018 11:25:54 +0200 Subject: [PATCH 4/9] fix signature Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Chart.roundedBarCharts.js b/Chart.roundedBarCharts.js index b3b1117..340d729 100644 --- a/Chart.roundedBarCharts.js +++ b/Chart.roundedBarCharts.js @@ -1,7 +1,7 @@ /* * Rounded Rectangle Extension for Bar Charts and Horizontal Bar Charts * Tested with Charts.js 2.7.0 -* Mod by anthony0030 +* Modified by anthony0030 */ Chart.elements.Rectangle.prototype.draw = function() { From 23beaa915799629d112396c0d730fc180f49b6c0 Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Fri, 23 Mar 2018 11:26:22 +0200 Subject: [PATCH 5/9] update the compressed script Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Chart.roundedBarCharts.min.js b/Chart.roundedBarCharts.min.js index 7fcd109..debe851 100644 --- a/Chart.roundedBarCharts.min.js +++ b/Chart.roundedBarCharts.min.js @@ -1 +1 @@ -Chart.elements.Rectangle.prototype.draw=function(){var t,r,i,e,o,_,h,l=this._chart.ctx,a=this._view,b=a.borderWidth,n=this._chart.config.options.cornerRadius,d=this._chart.config.options.fullCornerRadius,T=this._chart.config.type;if(console.log(T),n<0&&(n=0),void 0===n&&(n=0),a.horizontal?(t=a.base,r=a.x,i=a.y-a.height/2,e=a.y+a.height/2,o=r>t?1:-1,_=1,h=a.borderSkipped||"left"):(t=a.x-a.width/2,r=a.x+a.width/2,i=a.y,o=1,_=(e=a.base)>i?1:-1,h=a.borderSkipped||"bottom"),b){var u=Math.min(Math.abs(t-r),Math.abs(i-e)),g=(b=b>u?u:b)/2,c=t+("left"!==h?g*o:0),v=r+("right"!==h?-g*o:0),s=i+("top"!==h?g*_:0),C=e+("bottom"!==h?-g*_:0);c!==v&&(i=s,e=C),s!==C&&(t=c,r=v)}l.beginPath(),l.fillStyle=a.backgroundColor,l.strokeStyle=a.borderColor,l.lineWidth=b;var w=[[t,e],[t,i],[r,i],[r,e]],f=["bottom","left","top","right"].indexOf(h,0);function q(t){return w[(f+t)%4]}-1===f&&(f=0);var p=q(0);l.moveTo(p[0],p[1]);for(var m=1;m<4;m++){var M;p=q(m),nextCornerId=m+1,4==nextCornerId&&(nextCornerId=0),nextCorner=q(nextCornerId),width=w[2][0]-w[1][0],height=w[0][1]-w[1][1],x=w[1][0],y=w[1][1],(M=n)>Math.abs(height)/2&&(M=Math.floor(Math.abs(height)/2)),M>Math.abs(width)/2&&(M=Math.floor(Math.abs(width)/2)),height<0?(x_tl=x,x_tr=x+width,y_tl=y+height,y_tr=y+height,x_bl=x,x_br=x+width,y_bl=y,y_br=y,l.moveTo(x_bl+M,y_bl),l.lineTo(x_br-M,y_br),l.quadraticCurveTo(x_br,y_br,x_br,y_br-M),l.lineTo(x_tr,y_tr+M),d?l.quadraticCurveTo(x_tr,y_tr,x_tr-M,y_tr):l.lineTo(x_tr,y_tr,x_tr-M,y_tr),l.lineTo(x_tl+M,y_tl),d?l.quadraticCurveTo(x_tl,y_tl,x_tl,y_tl+M):l.lineTo(x_tl,y_tl,x_tl,y_tl+M),l.lineTo(x_bl,y_bl-M),l.quadraticCurveTo(x_bl,y_bl,x_bl+M,y_bl)):width<0?(x_tl=x+width,x_tr=x,y_tl=y,y_tr=y,x_bl=x+width,x_br=x,y_bl=y+height,y_br=y+height,l.moveTo(x_bl+M,y_bl),l.lineTo(x_br-M,y_br),d?l.quadraticCurveTo(x_br,y_br,x_br,y_br-M):l.lineTo(x_br,y_br,x_br,y_br-M),l.lineTo(x_tr,y_tr+M),d?l.quadraticCurveTo(x_tr,y_tr,x_tr-M,y_tr):l.lineTo(x_tr,y_tr,x_tr-M,y_tr),l.lineTo(x_tl+M,y_tl),l.quadraticCurveTo(x_tl,y_tl,x_tl,y_tl+M),l.lineTo(x_bl,y_bl-M),l.quadraticCurveTo(x_bl,y_bl,x_bl+M,y_bl)):(l.moveTo(x+M,y),l.lineTo(x+width-M,y),l.quadraticCurveTo(x+width,y,x+width,y+M),l.lineTo(x+width,y+height-M),d||"horizontalBar"==T?l.quadraticCurveTo(x+width,y+height,x+width-M,y+height):l.lineTo(x+width,y+height,x+width-M,y+height),l.lineTo(x+M,y+height),d&&"horizontalBar"==T?l.quadraticCurveTo(x,y+height,x,y+height-M):l.lineTo(x,y+height,x,y+height-M),l.lineTo(x,y+M),d||"bar"==T?l.quadraticCurveTo(x,y,x+M,y):l.lineTo(x,y,x+M,y))}l.fill(),b&&l.stroke()}; \ No newline at end of file +Chart.elements.Rectangle.prototype.draw=function(){var o,t,i,e,r,a,n,l=this._chart.ctx,T=this._view,h=T.borderWidth,u=this._chart.config.options.cornerRadius,d=this._chart.config.options.fullCornerRadius,c=this._chart.config.type;if(u<0&&(u=0),void 0===u&&(u=0),void 0===d&&(d=!0),T.horizontal?(o=T.base,t=T.x,i=T.y-T.height/2,e=T.y+T.height/2,r=t>o?1:-1,a=1,n=T.borderSkipped||"left"):(o=T.x-T.width/2,t=T.x+T.width/2,i=T.y,r=1,a=(e=T.base)>i?1:-1,n=T.borderSkipped||"bottom"),h){var v=Math.min(Math.abs(o-t),Math.abs(i-e)),s=(h=h>v?v:h)/2,b=o+("left"!==n?s*r:0),f=t+("right"!==n?-s*r:0),C=i+("top"!==n?s*a:0),q=e+("bottom"!==n?-s*a:0);b!==f&&(i=C,e=q),C!==q&&(o=b,t=f)}l.beginPath(),l.fillStyle=T.backgroundColor,l.strokeStyle=T.borderColor,l.lineWidth=h;var p=[[o,e],[o,i],[t,i],[t,e]],g=["bottom","left","top","right"].indexOf(n,0);function m(o){return p[(g+o)%4]}-1===g&&(g=0);var M,y,k,x,_,w=m(0);l.moveTo(w[0],w[1]);for(var S=1;S<4;S++){var R,z,W,B,O,P,j,A,D;w=m(S),4==(M=S+1)&&(M=0),m(M),y=p[2][0]-p[1][0],k=p[0][1]-p[1][1],x=p[1][0],_=p[1][1],(R=u)>Math.abs(k)/2&&(R=Math.floor(Math.abs(k)/2)),R>Math.abs(y)/2&&(R=Math.floor(Math.abs(y)/2)),k<0?(z=x,W=x+y,B=_+k,O=_+k,P=x,j=x+y,A=_,D=_,l.moveTo(P+R,A),l.lineTo(j-R,D),l.quadraticCurveTo(j,D,j,D-R),l.lineTo(W,O+R),d?l.quadraticCurveTo(W,O,W-R,O):l.lineTo(W,O,W-R,O),l.lineTo(z+R,B),d?l.quadraticCurveTo(z,B,z,B+R):l.lineTo(z,B,z,B+R),l.lineTo(P,A-R),l.quadraticCurveTo(P,A,P+R,A)):y<0?(z=x+y,W=x,B=_,O=_,P=x+y,j=x,A=_+k,D=_+k,l.moveTo(P+R,A),l.lineTo(j-R,D),d?l.quadraticCurveTo(j,D,j,D-R):l.lineTo(j,D,j,D-R),l.lineTo(W,O+R),d?l.quadraticCurveTo(W,O,W-R,O):l.lineTo(W,O,W-R,O),l.lineTo(z+R,B),l.quadraticCurveTo(z,B,z,B+R),l.lineTo(P,A-R),l.quadraticCurveTo(P,A,P+R,A)):(l.moveTo(x+R,_),l.lineTo(x+y-R,_),l.quadraticCurveTo(x+y,_,x+y,_+R),l.lineTo(x+y,_+k-R),d||"horizontalBar"==c?l.quadraticCurveTo(x+y,_+k,x+y-R,_+k):l.lineTo(x+y,_+k,x+y-R,_+k),l.lineTo(x+R,_+k),d?l.quadraticCurveTo(x,_+k,x,_+k-R):l.lineTo(x,_+k,x,_+k-R),l.lineTo(x,_+R),d||"bar"==c?l.quadraticCurveTo(x,_,x+R,_):l.lineTo(x,_,x+R,_))}l.fill(),h&&l.stroke()}; \ No newline at end of file From 78a0bbbd895ffc4b673785b5fcf1d06753936bf3 Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Wed, 4 Apr 2018 19:28:31 +0300 Subject: [PATCH 6/9] convert single quotes into duble quotes Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/Chart.roundedBarCharts.js b/Chart.roundedBarCharts.js index 340d729..ee58475 100644 --- a/Chart.roundedBarCharts.js +++ b/Chart.roundedBarCharts.js @@ -17,8 +17,8 @@ Chart.elements.Rectangle.prototype.draw = function() { var typeOfChart = this._chart.config.type; if(cornerRadius < 0){ cornerRadius = 0; } - if(typeof cornerRadius == 'undefined'){ cornerRadius = 0; } - if(typeof fullCornerRadius == 'undefined'){ fullCornerRadius = true; } + if(typeof cornerRadius == "undefined"){ cornerRadius = 0; } + if(typeof fullCornerRadius == "undefined"){ fullCornerRadius = true; } if (!vm.horizontal) { // bar @@ -28,7 +28,7 @@ Chart.elements.Rectangle.prototype.draw = function() { bottom = vm.base; signX = 1; signY = bottom > top? 1: -1; - borderSkipped = vm.borderSkipped || 'bottom'; + borderSkipped = vm.borderSkipped || "bottom"; } else { // horizontal bar left = vm.base; @@ -37,7 +37,7 @@ Chart.elements.Rectangle.prototype.draw = function() { bottom = vm.y + vm.height / 2; signX = right > left? 1: -1; signY = 1; - borderSkipped = vm.borderSkipped || 'left'; + borderSkipped = vm.borderSkipped || "left"; } // Canvas doesn't allow us to stroke inside the width so we can @@ -48,10 +48,10 @@ Chart.elements.Rectangle.prototype.draw = function() { borderWidth = borderWidth > barSize? barSize: borderWidth; var halfStroke = borderWidth / 2; // Adjust borderWidth when bar top position is near vm.base(zero). - var borderLeft = left + (borderSkipped !== 'left'? halfStroke * signX: 0); - var borderRight = right + (borderSkipped !== 'right'? -halfStroke * signX: 0); - var borderTop = top + (borderSkipped !== 'top'? halfStroke * signY: 0); - var borderBottom = bottom + (borderSkipped !== 'bottom'? -halfStroke * signY: 0); + var borderLeft = left + (borderSkipped !== "left"? halfStroke * signX: 0); + var borderRight = right + (borderSkipped !== "right"? -halfStroke * signX: 0); + var borderTop = top + (borderSkipped !== "top"? halfStroke * signY: 0); + var borderBottom = bottom + (borderSkipped !== "bottom"? -halfStroke * signY: 0); // not become a vertical line? if (borderLeft !== borderRight) { top = borderTop; @@ -80,7 +80,7 @@ Chart.elements.Rectangle.prototype.draw = function() { ]; // Find first (starting) corner with fallback to 'bottom' - var borders = ['bottom', 'left', 'top', 'right']; + var borders = ["bottom", "left", "top", "right"]; var startCorner = borders.indexOf(borderSkipped, 0); if (startCorner === -1) { startCorner = 0; @@ -199,7 +199,7 @@ Chart.elements.Rectangle.prototype.draw = function() { ctx.lineTo(x + width, y + height - radius); // bottom right - if(fullCornerRadius || typeOfChart == 'horizontalBar') + if(fullCornerRadius || typeOfChart == "horizontalBar") ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); else ctx.lineTo(x + width, y + height, x + width - radius, y + height); @@ -217,7 +217,7 @@ Chart.elements.Rectangle.prototype.draw = function() { ctx.lineTo(x, y + radius); // top left - if(fullCornerRadius || typeOfChart == 'bar') + if(fullCornerRadius || typeOfChart == "bar") ctx.quadraticCurveTo(x, y, x + radius, y); else ctx.lineTo(x, y, x + radius, y); From 7df6c93c7d9922cc1bfe461c42e692f5774868c5 Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Wed, 4 Apr 2018 19:50:02 +0300 Subject: [PATCH 7/9] fix double decleration of radius Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.js | 2 +- Chart.roundedBarCharts.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Chart.roundedBarCharts.js b/Chart.roundedBarCharts.js index ee58475..8898b57 100644 --- a/Chart.roundedBarCharts.js +++ b/Chart.roundedBarCharts.js @@ -109,7 +109,7 @@ Chart.elements.Rectangle.prototype.draw = function() { x = corners[1][0]; y = corners[1][1]; - var radius = cornerRadius; + radius = cornerRadius; // Fix radius being too large if(radius > Math.abs(height)/2){ radius = Math.floor(Math.abs(height)/2); diff --git a/Chart.roundedBarCharts.min.js b/Chart.roundedBarCharts.min.js index debe851..91dbceb 100644 --- a/Chart.roundedBarCharts.min.js +++ b/Chart.roundedBarCharts.min.js @@ -1 +1 @@ -Chart.elements.Rectangle.prototype.draw=function(){var o,t,i,e,r,a,n,l=this._chart.ctx,T=this._view,h=T.borderWidth,u=this._chart.config.options.cornerRadius,d=this._chart.config.options.fullCornerRadius,c=this._chart.config.type;if(u<0&&(u=0),void 0===u&&(u=0),void 0===d&&(d=!0),T.horizontal?(o=T.base,t=T.x,i=T.y-T.height/2,e=T.y+T.height/2,r=t>o?1:-1,a=1,n=T.borderSkipped||"left"):(o=T.x-T.width/2,t=T.x+T.width/2,i=T.y,r=1,a=(e=T.base)>i?1:-1,n=T.borderSkipped||"bottom"),h){var v=Math.min(Math.abs(o-t),Math.abs(i-e)),s=(h=h>v?v:h)/2,b=o+("left"!==n?s*r:0),f=t+("right"!==n?-s*r:0),C=i+("top"!==n?s*a:0),q=e+("bottom"!==n?-s*a:0);b!==f&&(i=C,e=q),C!==q&&(o=b,t=f)}l.beginPath(),l.fillStyle=T.backgroundColor,l.strokeStyle=T.borderColor,l.lineWidth=h;var p=[[o,e],[o,i],[t,i],[t,e]],g=["bottom","left","top","right"].indexOf(n,0);function m(o){return p[(g+o)%4]}-1===g&&(g=0);var M,y,k,x,_,w=m(0);l.moveTo(w[0],w[1]);for(var S=1;S<4;S++){var R,z,W,B,O,P,j,A,D;w=m(S),4==(M=S+1)&&(M=0),m(M),y=p[2][0]-p[1][0],k=p[0][1]-p[1][1],x=p[1][0],_=p[1][1],(R=u)>Math.abs(k)/2&&(R=Math.floor(Math.abs(k)/2)),R>Math.abs(y)/2&&(R=Math.floor(Math.abs(y)/2)),k<0?(z=x,W=x+y,B=_+k,O=_+k,P=x,j=x+y,A=_,D=_,l.moveTo(P+R,A),l.lineTo(j-R,D),l.quadraticCurveTo(j,D,j,D-R),l.lineTo(W,O+R),d?l.quadraticCurveTo(W,O,W-R,O):l.lineTo(W,O,W-R,O),l.lineTo(z+R,B),d?l.quadraticCurveTo(z,B,z,B+R):l.lineTo(z,B,z,B+R),l.lineTo(P,A-R),l.quadraticCurveTo(P,A,P+R,A)):y<0?(z=x+y,W=x,B=_,O=_,P=x+y,j=x,A=_+k,D=_+k,l.moveTo(P+R,A),l.lineTo(j-R,D),d?l.quadraticCurveTo(j,D,j,D-R):l.lineTo(j,D,j,D-R),l.lineTo(W,O+R),d?l.quadraticCurveTo(W,O,W-R,O):l.lineTo(W,O,W-R,O),l.lineTo(z+R,B),l.quadraticCurveTo(z,B,z,B+R),l.lineTo(P,A-R),l.quadraticCurveTo(P,A,P+R,A)):(l.moveTo(x+R,_),l.lineTo(x+y-R,_),l.quadraticCurveTo(x+y,_,x+y,_+R),l.lineTo(x+y,_+k-R),d||"horizontalBar"==c?l.quadraticCurveTo(x+y,_+k,x+y-R,_+k):l.lineTo(x+y,_+k,x+y-R,_+k),l.lineTo(x+R,_+k),d?l.quadraticCurveTo(x,_+k,x,_+k-R):l.lineTo(x,_+k,x,_+k-R),l.lineTo(x,_+R),d||"bar"==c?l.quadraticCurveTo(x,_,x+R,_):l.lineTo(x,_,x+R,_))}l.fill(),h&&l.stroke()}; \ No newline at end of file +Chart.elements.Rectangle.prototype.draw=function(){var o,t,i,e,r,a,n,l,T=this._chart.ctx,h=this._view,u=h.borderWidth,d=this._chart.config.options.cornerRadius,c=this._chart.config.options.fullCornerRadius,v=this._chart.config.type;if(d<0&&(d=0),void 0===d&&(d=0),void 0===c&&(c=!0),h.horizontal?(o=h.base,t=h.x,i=h.y-h.height/2,e=h.y+h.height/2,r=t>o?1:-1,a=1,n=h.borderSkipped||"left"):(o=h.x-h.width/2,t=h.x+h.width/2,i=h.y,r=1,a=(e=h.base)>i?1:-1,n=h.borderSkipped||"bottom"),u){var s=Math.min(Math.abs(o-t),Math.abs(i-e)),b=(u=u>s?s:u)/2,f=o+("left"!==n?b*r:0),C=t+("right"!==n?-b*r:0),q=i+("top"!==n?b*a:0),p=e+("bottom"!==n?-b*a:0);f!==C&&(i=q,e=p),q!==p&&(o=f,t=C)}T.beginPath(),T.fillStyle=h.backgroundColor,T.strokeStyle=h.borderColor,T.lineWidth=u;var g=[[o,e],[o,i],[t,i],[t,e]],m=["bottom","left","top","right"].indexOf(n,0);function M(o){return g[(m+o)%4]}-1===m&&(m=0);var y,k,x,_,w,S=M(0);T.moveTo(S[0],S[1]);for(var R=1;R<4;R++){var z,W,B,O,P,j,A,D;S=M(R),4==(y=R+1)&&(y=0),M(y),k=g[2][0]-g[1][0],x=g[0][1]-g[1][1],_=g[1][0],w=g[1][1],(l=d)>Math.abs(x)/2&&(l=Math.floor(Math.abs(x)/2)),l>Math.abs(k)/2&&(l=Math.floor(Math.abs(k)/2)),x<0?(z=_,W=_+k,B=w+x,O=w+x,P=_,j=_+k,A=w,D=w,T.moveTo(P+l,A),T.lineTo(j-l,D),T.quadraticCurveTo(j,D,j,D-l),T.lineTo(W,O+l),c?T.quadraticCurveTo(W,O,W-l,O):T.lineTo(W,O,W-l,O),T.lineTo(z+l,B),c?T.quadraticCurveTo(z,B,z,B+l):T.lineTo(z,B,z,B+l),T.lineTo(P,A-l),T.quadraticCurveTo(P,A,P+l,A)):k<0?(z=_+k,W=_,B=w,O=w,P=_+k,j=_,A=w+x,D=w+x,T.moveTo(P+l,A),T.lineTo(j-l,D),c?T.quadraticCurveTo(j,D,j,D-l):T.lineTo(j,D,j,D-l),T.lineTo(W,O+l),c?T.quadraticCurveTo(W,O,W-l,O):T.lineTo(W,O,W-l,O),T.lineTo(z+l,B),T.quadraticCurveTo(z,B,z,B+l),T.lineTo(P,A-l),T.quadraticCurveTo(P,A,P+l,A)):(T.moveTo(_+l,w),T.lineTo(_+k-l,w),T.quadraticCurveTo(_+k,w,_+k,w+l),T.lineTo(_+k,w+x-l),c||"horizontalBar"==v?T.quadraticCurveTo(_+k,w+x,_+k-l,w+x):T.lineTo(_+k,w+x,_+k-l,w+x),T.lineTo(_+l,w+x),c?T.quadraticCurveTo(_,w+x,_,w+x-l):T.lineTo(_,w+x,_,w+x-l),T.lineTo(_,w+l),c||"bar"==v?T.quadraticCurveTo(_,w,_+l,w):T.lineTo(_,w,_+l,w))}T.fill(),u&&T.stroke()}; \ No newline at end of file From 8c12cd341f224cf3cf4c18663323c04f30fdd2d6 Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Wed, 4 Apr 2018 20:05:27 +0300 Subject: [PATCH 8/9] change code styling Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/Chart.roundedBarCharts.js b/Chart.roundedBarCharts.js index 8898b57..59e66de 100644 --- a/Chart.roundedBarCharts.js +++ b/Chart.roundedBarCharts.js @@ -17,8 +17,8 @@ Chart.elements.Rectangle.prototype.draw = function() { var typeOfChart = this._chart.config.type; if(cornerRadius < 0){ cornerRadius = 0; } - if(typeof cornerRadius == "undefined"){ cornerRadius = 0; } - if(typeof fullCornerRadius == "undefined"){ fullCornerRadius = true; } + if(typeof cornerRadius === "undefined"){ cornerRadius = 0; } + if(typeof fullCornerRadius === "undefined"){ fullCornerRadius = true; } if (!vm.horizontal) { // bar @@ -98,8 +98,8 @@ Chart.elements.Rectangle.prototype.draw = function() { for (var i = 1; i < 4; i++) { corner = cornerAt(i); nextCornerId = i+1; - if(nextCornerId == 4){ - nextCornerId = 0 + if(nextCornerId === 4){ + nextCornerId = 0; } nextCorner = cornerAt(nextCornerId); @@ -199,28 +199,34 @@ Chart.elements.Rectangle.prototype.draw = function() { ctx.lineTo(x + width, y + height - radius); // bottom right - if(fullCornerRadius || typeOfChart == "horizontalBar") + if(fullCornerRadius || typeOfChart === "horizontalBar"){ ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); - else + } + else{ ctx.lineTo(x + width, y + height, x + width - radius, y + height); + } ctx.lineTo(x + radius, y + height); // bottom left - if(fullCornerRadius) + if(fullCornerRadius){ ctx.quadraticCurveTo(x, y + height, x, y + height - radius); - else + } + else{ ctx.lineTo(x, y + height, x, y + height - radius); + } ctx.lineTo(x, y + radius); // top left - if(fullCornerRadius || typeOfChart == "bar") + if(fullCornerRadius || typeOfChart === "bar"){ ctx.quadraticCurveTo(x, y, x + radius, y); - else + } + else{ ctx.lineTo(x, y, x + radius, y); + } } } From 7145a29c43e037cd22bbad53c3f188b357d39c8c Mon Sep 17 00:00:00 2001 From: Anthony Veaudry Date: Wed, 4 Apr 2018 20:08:48 +0300 Subject: [PATCH 9/9] compress the script with the previus changes Signed-off-by: Anthony Veaudry --- Chart.roundedBarCharts.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Chart.roundedBarCharts.min.js b/Chart.roundedBarCharts.min.js index 91dbceb..abedbb4 100644 --- a/Chart.roundedBarCharts.min.js +++ b/Chart.roundedBarCharts.min.js @@ -1 +1 @@ -Chart.elements.Rectangle.prototype.draw=function(){var o,t,i,e,r,a,n,l,T=this._chart.ctx,h=this._view,u=h.borderWidth,d=this._chart.config.options.cornerRadius,c=this._chart.config.options.fullCornerRadius,v=this._chart.config.type;if(d<0&&(d=0),void 0===d&&(d=0),void 0===c&&(c=!0),h.horizontal?(o=h.base,t=h.x,i=h.y-h.height/2,e=h.y+h.height/2,r=t>o?1:-1,a=1,n=h.borderSkipped||"left"):(o=h.x-h.width/2,t=h.x+h.width/2,i=h.y,r=1,a=(e=h.base)>i?1:-1,n=h.borderSkipped||"bottom"),u){var s=Math.min(Math.abs(o-t),Math.abs(i-e)),b=(u=u>s?s:u)/2,f=o+("left"!==n?b*r:0),C=t+("right"!==n?-b*r:0),q=i+("top"!==n?b*a:0),p=e+("bottom"!==n?-b*a:0);f!==C&&(i=q,e=p),q!==p&&(o=f,t=C)}T.beginPath(),T.fillStyle=h.backgroundColor,T.strokeStyle=h.borderColor,T.lineWidth=u;var g=[[o,e],[o,i],[t,i],[t,e]],m=["bottom","left","top","right"].indexOf(n,0);function M(o){return g[(m+o)%4]}-1===m&&(m=0);var y,k,x,_,w,S=M(0);T.moveTo(S[0],S[1]);for(var R=1;R<4;R++){var z,W,B,O,P,j,A,D;S=M(R),4==(y=R+1)&&(y=0),M(y),k=g[2][0]-g[1][0],x=g[0][1]-g[1][1],_=g[1][0],w=g[1][1],(l=d)>Math.abs(x)/2&&(l=Math.floor(Math.abs(x)/2)),l>Math.abs(k)/2&&(l=Math.floor(Math.abs(k)/2)),x<0?(z=_,W=_+k,B=w+x,O=w+x,P=_,j=_+k,A=w,D=w,T.moveTo(P+l,A),T.lineTo(j-l,D),T.quadraticCurveTo(j,D,j,D-l),T.lineTo(W,O+l),c?T.quadraticCurveTo(W,O,W-l,O):T.lineTo(W,O,W-l,O),T.lineTo(z+l,B),c?T.quadraticCurveTo(z,B,z,B+l):T.lineTo(z,B,z,B+l),T.lineTo(P,A-l),T.quadraticCurveTo(P,A,P+l,A)):k<0?(z=_+k,W=_,B=w,O=w,P=_+k,j=_,A=w+x,D=w+x,T.moveTo(P+l,A),T.lineTo(j-l,D),c?T.quadraticCurveTo(j,D,j,D-l):T.lineTo(j,D,j,D-l),T.lineTo(W,O+l),c?T.quadraticCurveTo(W,O,W-l,O):T.lineTo(W,O,W-l,O),T.lineTo(z+l,B),T.quadraticCurveTo(z,B,z,B+l),T.lineTo(P,A-l),T.quadraticCurveTo(P,A,P+l,A)):(T.moveTo(_+l,w),T.lineTo(_+k-l,w),T.quadraticCurveTo(_+k,w,_+k,w+l),T.lineTo(_+k,w+x-l),c||"horizontalBar"==v?T.quadraticCurveTo(_+k,w+x,_+k-l,w+x):T.lineTo(_+k,w+x,_+k-l,w+x),T.lineTo(_+l,w+x),c?T.quadraticCurveTo(_,w+x,_,w+x-l):T.lineTo(_,w+x,_,w+x-l),T.lineTo(_,w+l),c||"bar"==v?T.quadraticCurveTo(_,w,_+l,w):T.lineTo(_,w,_+l,w))}T.fill(),u&&T.stroke()}; \ No newline at end of file +Chart.elements.Rectangle.prototype.draw=function(){var o,t,i,e,r,a,n,l,T=this._chart.ctx,h=this._view,u=h.borderWidth,d=this._chart.config.options.cornerRadius,c=this._chart.config.options.fullCornerRadius,v=this._chart.config.type;if(d<0&&(d=0),void 0===d&&(d=0),void 0===c&&(c=!0),h.horizontal?(o=h.base,t=h.x,i=h.y-h.height/2,e=h.y+h.height/2,r=t>o?1:-1,a=1,n=h.borderSkipped||"left"):(o=h.x-h.width/2,t=h.x+h.width/2,i=h.y,r=1,a=(e=h.base)>i?1:-1,n=h.borderSkipped||"bottom"),u){var s=Math.min(Math.abs(o-t),Math.abs(i-e)),b=(u=u>s?s:u)/2,f=o+("left"!==n?b*r:0),C=t+("right"!==n?-b*r:0),q=i+("top"!==n?b*a:0),p=e+("bottom"!==n?-b*a:0);f!==C&&(i=q,e=p),q!==p&&(o=f,t=C)}T.beginPath(),T.fillStyle=h.backgroundColor,T.strokeStyle=h.borderColor,T.lineWidth=u;var g=[[o,e],[o,i],[t,i],[t,e]],m=["bottom","left","top","right"].indexOf(n,0);function M(o){return g[(m+o)%4]}-1===m&&(m=0);var y,k,x,_,w,S=M(0);T.moveTo(S[0],S[1]);for(var R=1;R<4;R++){var z,W,B,O,P,j,A,D;S=M(R),4===(y=R+1)&&(y=0),M(y),k=g[2][0]-g[1][0],x=g[0][1]-g[1][1],_=g[1][0],w=g[1][1],(l=d)>Math.abs(x)/2&&(l=Math.floor(Math.abs(x)/2)),l>Math.abs(k)/2&&(l=Math.floor(Math.abs(k)/2)),x<0?(z=_,W=_+k,B=w+x,O=w+x,P=_,j=_+k,A=w,D=w,T.moveTo(P+l,A),T.lineTo(j-l,D),T.quadraticCurveTo(j,D,j,D-l),T.lineTo(W,O+l),c?T.quadraticCurveTo(W,O,W-l,O):T.lineTo(W,O,W-l,O),T.lineTo(z+l,B),c?T.quadraticCurveTo(z,B,z,B+l):T.lineTo(z,B,z,B+l),T.lineTo(P,A-l),T.quadraticCurveTo(P,A,P+l,A)):k<0?(z=_+k,W=_,B=w,O=w,P=_+k,j=_,A=w+x,D=w+x,T.moveTo(P+l,A),T.lineTo(j-l,D),c?T.quadraticCurveTo(j,D,j,D-l):T.lineTo(j,D,j,D-l),T.lineTo(W,O+l),c?T.quadraticCurveTo(W,O,W-l,O):T.lineTo(W,O,W-l,O),T.lineTo(z+l,B),T.quadraticCurveTo(z,B,z,B+l),T.lineTo(P,A-l),T.quadraticCurveTo(P,A,P+l,A)):(T.moveTo(_+l,w),T.lineTo(_+k-l,w),T.quadraticCurveTo(_+k,w,_+k,w+l),T.lineTo(_+k,w+x-l),c||"horizontalBar"===v?T.quadraticCurveTo(_+k,w+x,_+k-l,w+x):T.lineTo(_+k,w+x,_+k-l,w+x),T.lineTo(_+l,w+x),c?T.quadraticCurveTo(_,w+x,_,w+x-l):T.lineTo(_,w+x,_,w+x-l),T.lineTo(_,w+l),c||"bar"===v?T.quadraticCurveTo(_,w,_+l,w):T.lineTo(_,w,_+l,w))}T.fill(),u&&T.stroke()}; \ No newline at end of file