Size reduction for elements

diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js
index 34ff8111fae08817798f97bdb3fda5c8d559ac93..7b6d96a8111f5a55391fdd4ac4937254f82cf29d 100644 (file)
--- a/src/elements/element.arc.js
+++ b/src/elements/element.arc.js
@@ -2,10 +2,11 @@
 
 module.exports = function(Chart, moment) {
 
-  var helpers = Chart.helpers;
+  var helpers = Chart.helpers,
+    globalOpts = Chart.defaults.global;
 
-  Chart.defaults.global.elements.arc = {
-    backgroundColor: Chart.defaults.global.defaultColor,
+  globalOpts.elements.arc = {
+    backgroundColor: globalOpts.defaultColor,
     borderColor: "#fff",
     borderWidth: 2
   };
@@ -21,14 +22,15 @@ module.exports = function(Chart, moment) {
       }
     },
     inRange: function(chartX, chartY) {
-
       var vm = this._view;
 
       if (vm) {
         var pointRelativePosition = helpers.getAngleFromPoint(vm, {
-          x: chartX,
-          y: chartY
-        });
+            x: chartX,
+            y: chartY
+          }),
+          angle = pointRelativePosition.angle,
+          distance = pointRelativePosition.distance;
 
         //Sanitise angle range
         var startAngle = vm.startAngle;
@@ -36,16 +38,16 @@ module.exports = function(Chart, moment) {
         while (endAngle < startAngle) {
           endAngle += 2.0 * Math.PI;
         }
-        while (pointRelativePosition.angle > endAngle) {
-          pointRelativePosition.angle -= 2.0 * Math.PI;
+        while (angle > endAngle) {
+          angle -= 2.0 * Math.PI;
         }
-        while (pointRelativePosition.angle < startAngle) {
-          pointRelativePosition.angle += 2.0 * Math.PI;
+        while (angle < startAngle) {
+          angle += 2.0 * Math.PI;
         }
 
         //Check if within the range of the open/close angle
-        var betweenAngles = (pointRelativePosition.angle >= startAngle && pointRelativePosition.angle <= endAngle),
-          withinRadius = (pointRelativePosition.distance >= vm.innerRadius && pointRelativePosition.distance <= vm.outerRadius);
+        var betweenAngles = (angle >= startAngle && angle <= endAngle),
+          withinRadius = (distance >= vm.innerRadius && distance <= vm.outerRadius);
 
         return (betweenAngles && withinRadius);
       } else {
@@ -64,14 +66,15 @@ module.exports = function(Chart, moment) {
     },
     draw: function() {
 
-      var ctx = this._chart.ctx;
-      var vm = this._view;
+      var ctx = this._chart.ctx,
+        vm = this._view,
+        sA = vm.startAngle,
+        eA = vm.endAngle;
 
       ctx.beginPath();
 
-      ctx.arc(vm.x, vm.y, vm.outerRadius, vm.startAngle, vm.endAngle);
-
-      ctx.arc(vm.x, vm.y, vm.innerRadius, vm.endAngle, vm.startAngle, true);
+      ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
+      ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
 
       ctx.closePath();
       ctx.strokeStyle = vm.borderColor;

diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index 90a97ca7bcc005370f0dfbad9b285e56b7761412..e7dac76b4f8dad1131ab658ce28adc5f7319f43d 100644 (file)
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -2,14 +2,15 @@
 
 module.exports = function(Chart) {
 
-       var helpers = Chart.helpers;
+       var helpers = Chart.helpers,
+               globalOpts = Chart.defaults.global;
 
-       Chart.defaults.global.elements.point = {
+       globalOpts.elements.point = {
                radius: 3,
                pointStyle: 'circle',
-               backgroundColor: Chart.defaults.global.defaultColor,
+               backgroundColor: globalOpts.defaultColor,
                borderWidth: 1,
-               borderColor: Chart.defaults.global.defaultColor,
+               borderColor: globalOpts.defaultColor,
                // Hover
                hitRadius: 1,
                hoverRadius: 4,
@@ -20,22 +21,11 @@ module.exports = function(Chart) {
        Chart.elements.Point = Chart.Element.extend({
                inRange: function(mouseX, mouseY) {
                        var vm = this._view;
-
-                       if (vm) {
-                               var hoverRange = vm.hitRadius + vm.radius;
-                               return ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(hoverRange, 2));
-                       } else {
-                               return false;
-                       }
+                       return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false
                },
                inLabelRange: function(mouseX) {
                        var vm = this._view;
-
-                       if (vm) {
-                               return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hitRadius, 2));
-                       } else {
-                               return false;
-                       }
+                       return vm ? (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hitRadius, 2)) : false; 
                },
                tooltipPosition: function() {
                        var vm = this._view;
@@ -46,17 +36,18 @@ module.exports = function(Chart) {
                        };
                },
                draw: function() {
-
-                       var vm = this._view;
+                       var vm = this._view,
+                               x = vm.x,
+                               y = vm.y;
                        var ctx = this._chart.ctx;
 
-
                        if (vm.skip) {
                                return;
                        }
 
-                       if (typeof vm.pointStyle === 'object' && ((vm.pointStyle.toString() === '[object HTMLImageElement]') || (vm.pointStyle.toString() === '[object HTMLCanvasElement]'))) {
-                               ctx.drawImage(vm.pointStyle, vm.x - vm.pointStyle.width / 2, vm.y - vm.pointStyle.height / 2);
+                       var pointStyle = vm.pointStyle;
+                       if (typeof pointStyle === 'object' && ((pointStyle.toString() === '[object HTMLImageElement]') || (pointStyle.toString() === '[object HTMLCanvasElement]'))) {
+                               ctx.drawImage(pointStyle, x - pointStyle.width / 2, y - pointStyle.height / 2);
                                return;
                        }
 
@@ -69,79 +60,80 @@ module.exports = function(Chart) {
 
                                var radius = vm.radius;
 
-                               var xOffset;
-                               var yOffset;
+                               var xOffset,
+                                       yOffset;
 
-                               switch (vm.pointStyle) {
+                               switch (pointStyle) {
                                        // Default includes circle
-                                       default: ctx.beginPath();
-                                       ctx.arc(vm.x, vm.y, radius, 0, Math.PI * 2);
-                                       ctx.closePath();
-                                       ctx.fill();
-                                       break;
+                                       default: 
+                                               ctx.beginPath();
+                                               ctx.arc(x, y, radius, 0, Math.PI * 2);
+                                               ctx.closePath();
+                                               ctx.fill();
+                                               break;
                                        case 'triangle':
-                                                       ctx.beginPath();
+                                               ctx.beginPath();
                                                var edgeLength = 3 * radius / Math.sqrt(3);
                                                var height = edgeLength * Math.sqrt(3) / 2;
-                                               ctx.moveTo(vm.x - edgeLength / 2, vm.y + height / 3);
-                                               ctx.lineTo(vm.x + edgeLength / 2, vm.y + height / 3);
-                                               ctx.lineTo(vm.x, vm.y - 2 * height / 3);
+                                               ctx.moveTo(x - edgeLength / 2, y + height / 3);
+                                               ctx.lineTo(x + edgeLength / 2, y + height / 3);
+                                               ctx.lineTo(x, y - 2 * height / 3);
                                                ctx.closePath();
                                                ctx.fill();
                                                break;
                                        case 'rect':
-                                                       ctx.fillRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
-                                               ctx.strokeRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+                                               ctx.fillRect(x - 1 / Math.SQRT2 * radius, y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+                                               ctx.strokeRect(x - 1 / Math.SQRT2 * radius, y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
                                                break;
                                        case 'rectRot':
-                                                       ctx.translate(vm.x, vm.y);
+                                               ctx.translate(x, y);
                                                ctx.rotate(Math.PI / 4);
                                                ctx.fillRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
                                                ctx.strokeRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
                                                ctx.setTransform(1, 0, 0, 1, 0, 0);
                                                break;
                                        case 'cross':
-                                                       ctx.beginPath();
-                                               ctx.moveTo(vm.x, vm.y + radius);
-                                               ctx.lineTo(vm.x, vm.y - radius);
-                                               ctx.moveTo(vm.x - radius, vm.y);
-                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               ctx.beginPath();
+                                               ctx.moveTo(x, y + radius);
+                                               ctx.lineTo(x, y - radius);
+                                               ctx.moveTo(x - radius, y);
+                                               ctx.lineTo(x + radius, y);
                                                ctx.closePath();
                                                break;
                                        case 'crossRot':
-                                                       ctx.beginPath();
+                                               ctx.beginPath();
                                                xOffset = Math.cos(Math.PI / 4) * radius;
                                                yOffset = Math.sin(Math.PI / 4) * radius;
-                                               ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
-                                               ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
-                                               ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
-                                               ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
+                                               ctx.moveTo(x - xOffset, y - yOffset);
+                                               ctx.lineTo(x + xOffset, y + yOffset);
+                                               ctx.moveTo(x - xOffset, y + yOffset);
+                                               ctx.lineTo(x + xOffset, y - yOffset);
                                                ctx.closePath();
                                                break;
                                        case 'star':
-                                                       ctx.beginPath();
-                                               ctx.moveTo(vm.x, vm.y + radius);
-                                               ctx.lineTo(vm.x, vm.y - radius);
-                                               ctx.moveTo(vm.x - radius, vm.y);
-                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               ctx.beginPath();
+                                               ctx.moveTo(x, y + radius);
+                                               ctx.lineTo(x, y - radius);
+                                               ctx.moveTo(x - radius, y);
+                                               ctx.lineTo(x + radius, y);
                                                xOffset = Math.cos(Math.PI / 4) * radius;
                                                yOffset = Math.sin(Math.PI / 4) * radius;
-                                               ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
-                                               ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
-                                               ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
-                                               ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
+                                               ctx.moveTo(x - xOffset, y - yOffset);
+                                               ctx.lineTo(x + xOffset, y + yOffset);
+                                               ctx.moveTo(x - xOffset, y + yOffset);
+                                               ctx.lineTo(x + xOffset, y - yOffset);
                                                ctx.closePath();
                                                break;
                                        case 'line':
-                                                       ctx.beginPath();
-                                               ctx.moveTo(vm.x - radius, vm.y);
-                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               ctx.beginPath();
+                                               ctx.moveTo(x - radius, y);
+                                               ctx.lineTo(x + radius, y);
                                                ctx.closePath();
                                                break;
                                        case 'dash':
-                                                       ctx.beginPath();
-                                               ctx.moveTo(vm.x, vm.y);
-                                               ctx.lineTo(vm.x + radius, vm.y);
+                                               ctx.beginPath();
+                                               ctx.moveTo(x, y);
+                                               ctx.lineTo(x + radius, y);
                                                ctx.closePath();
                                                break;
                                }

diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js
index 63f426688909cb98b83c3a32f762daf0ecd981c1..944d5e38a25a30aea164dbdd31c75ef83e53fb68 100644 (file)
--- a/src/elements/element.rectangle.js
+++ b/src/elements/element.rectangle.js
@@ -2,18 +2,18 @@
 
 module.exports = function(Chart) {
 
-       var helpers = Chart.helpers;
+       var helpers = Chart.helpers,
+               globalOpts = Chart.defaults.global;
 
-       Chart.defaults.global.elements.rectangle = {
-               backgroundColor: Chart.defaults.global.defaultColor,
+       globalOpts.elements.rectangle = {
+               backgroundColor: globalOpts.defaultColor,
                borderWidth: 0,
-               borderColor: Chart.defaults.global.defaultColor,
+               borderColor: globalOpts.defaultColor,
                borderSkipped: 'bottom'
        };
 
        Chart.elements.Rectangle = Chart.Element.extend({
                draw: function() {
-
                        var ctx = this._chart.ctx;
                        var vm = this._view;
 
@@ -32,7 +32,6 @@ module.exports = function(Chart) {
                        }
 
                        ctx.beginPath();
-
                        ctx.fillStyle = vm.backgroundColor;
                        ctx.strokeStyle = vm.borderColor;
                        ctx.lineWidth = vm.borderWidth;
@@ -73,26 +72,15 @@ module.exports = function(Chart) {
                },
                inRange: function(mouseX, mouseY) {
                        var vm = this._view;
-                       var inRange = false;
-
-                       if (vm) {
-                               if (vm.y < vm.base) {
-                                       inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.y && mouseY <= vm.base);
-                               } else {
-                                       inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y);
-                               }
-                       }
-
-                       return inRange;
+                       return vm ? 
+                                       (vm.y < vm.base ? 
+                                               (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.y && mouseY <= vm.base) :
+                                               (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y)) :
+                                       false;
                },
                inLabelRange: function(mouseX) {
                        var vm = this._view;
-
-                       if (vm) {
-                               return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2);
-                       } else {
-                               return false;
-                       }
+                       return vm ? (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) : false;
                },
                tooltipPosition: function() {
                        var vm = this._view;