Performance improvements (#6729)

src/elements/element.line.js

@@ -36,7 +36,7 @@ class Line extends Element {
 		var vm = me._view;
 		var ctx = me._ctx;
 		var spanGaps = vm.spanGaps;
-		var points = me._children.slice(); // clone array
+		var points = me._children;
 		var globalDefaults = defaults.global;
 		var globalOptionLineElements = globalDefaults.elements.line;
 		var lastDrawnIndex = -1;
@@ -48,6 +48,7 @@ class Line extends Element {
 		}
 
 		if (me._loop) {
+			points = points.slice(); // clone array
 			for (index = 0; index < points.length; ++index) {
 				previous = helpers.previousItem(points, index);
 				// If the line has an open path, shift the point array

src/elements/element.point.js

@@ -4,8 +4,6 @@ const defaults = require('../core/core.defaults');
 const Element = require('../core/core.element');
 const helpers = require('../helpers/index');
 
-const valueOrDefault = helpers.valueOrDefault;
-
 const defaultColor = defaults.global.defaultColor;
 
 defaults._set('global', {
@@ -31,22 +29,22 @@ class Point extends Element {
 	}
 
 	inRange(mouseX, mouseY) {
-		var vm = this._view;
+		const vm = this._view;
 		return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false;
 	}
 
 	inXRange(mouseX) {
-		var vm = this._view;
+		const vm = this._view;
 		return vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false;
 	}
 
 	inYRange(mouseY) {
-		var vm = this._view;
+		const vm = this._view;
 		return vm ? (Math.abs(mouseY - vm.y) < vm.radius + vm.hitRadius) : false;
 	}
 
 	getCenterPoint() {
-		var vm = this._view;
+		const vm = this._view;
 		return {
 			x: vm.x,
 			y: vm.y
@@ -54,14 +52,14 @@ class Point extends Element {
 	}
 
 	size() {
-		var vm = this._view;
+		const vm = this._view;
-		var radius = vm.radius || 0;
+		const radius = vm.radius || 0;
-		var borderWidth = vm.borderWidth || 0;
+		const borderWidth = vm.borderWidth || 0;
 		return (radius + borderWidth) * 2;
 	}
 
 	tooltipPosition() {
-		var vm = this._view;
+		const vm = this._view;
 		return {
 			x: vm.x,
 			y: vm.y,
@@ -70,25 +68,23 @@ class Point extends Element {
 	}
 
 	draw(chartArea) {
-		var vm = this._view;
+		const vm = this._view;
-		var ctx = this._ctx;
+		const ctx = this._ctx;
-		var pointStyle = vm.pointStyle;
+		const pointStyle = vm.pointStyle;
-		var rotation = vm.rotation;
+		const rotation = vm.rotation;
-		var radius = vm.radius;
+		const radius = vm.radius;
-		var x = vm.x;
+		const x = vm.x;
-		var y = vm.y;
+		const y = vm.y;
-		var globalDefaults = defaults.global;
-		var defaultColor = globalDefaults.defaultColor; // eslint-disable-line no-shadow
 
-		if (vm.skip) {
+		if (vm.skip || radius <= 0) {
 			return;
 		}
 
 		// Clipping for Points.
 		if (chartArea === undefined || helpers.canvas._isPointInArea(vm, chartArea)) {
-			ctx.strokeStyle = vm.borderColor || defaultColor;
+			ctx.strokeStyle = vm.borderColor;
-			ctx.lineWidth = valueOrDefault(vm.borderWidth, globalDefaults.elements.point.borderWidth);
+			ctx.lineWidth = vm.borderWidth;
-			ctx.fillStyle = vm.backgroundColor || defaultColor;
+			ctx.fillStyle = vm.backgroundColor;
 			helpers.canvas.drawPoint(ctx, pointStyle, radius, x, y, rotation);
 		}
 	}

test/specs/element.point.tests.js

@@ -72,52 +72,6 @@ describe('Chart.elements.Point', function() {
 		expect(point.getCenterPoint()).toEqual({x: 10, y: 10});
 	});
 
-	it ('should draw correctly with default settings if necessary', function() {
-		var mockContext = window.createMockContext();
-		var point = new Chart.elements.Point({
-			_datasetIndex: 2,
-			_index: 1,
-			_ctx: mockContext
-		});
-
-		// Attach a view object as if we were the controller
-		point._view = {
-			radius: 2,
-			hitRadius: 3,
-			x: 10,
-			y: 15,
-			ctx: mockContext
-		};
-
-		point.draw();
-
-		expect(mockContext.getCalls()).toEqual([{
-			name: 'setStrokeStyle',
-			args: ['rgba(0,0,0,0.1)']
-		}, {
-			name: 'setLineWidth',
-			args: [1]
-		}, {
-			name: 'setFillStyle',
-			args: ['rgba(0,0,0,0.1)']
-		}, {
-			name: 'beginPath',
-			args: []
-		}, {
-			name: 'arc',
-			args: [10, 15, 2, 0, 2 * Math.PI]
-		}, {
-			name: 'closePath',
-			args: [],
-		}, {
-			name: 'fill',
-			args: [],
-		}, {
-			name: 'stroke',
-			args: []
-		}]);
-	});
-
 	it ('should not draw if skipped', function() {
 		var mockContext = window.createMockContext();
 		var point = new Chart.elements.Point({