chart.js - npm Package Compare versions

Comparing version 2.2.0-rc.2 to 2.2.0

docs/02-Scales.md

@@ -139,3 +139,3 @@ ---
 --- | --- | --- | ---
-beginAtZero | Boolean | - | if true, scale will inclulde 0 if it is not already included.
+beginAtZero | Boolean | - | if true, scale will include 0 if it is not already included.
 min | Number | - | User defined minimum number for the scale, overrides minimum value from data.
@@ -213,3 +213,3 @@ max | Number | - | User defined maximum number for the scale, overrides maximum value from data.
 
-The following options are provided by the logarithmic scale. They are all located in the `time` sub options.
+The following options are provided by the time scale. They are all located in the `time` sub options.
 
@@ -346,3 +346,3 @@ Name | Type | Default | Description
 backdropPaddingY | Number | 2 | Vertical padding of label backdrop
-beginAtZero | Boolean | - | if true, scale will inclulde 0 if it is not already included.
+beginAtZero | Boolean | - | if true, scale will include 0 if it is not already included.
 min | Number | - | User defined minimum number for the scale, overrides minimum value from data.
@@ -352,3 +352,3 @@ max | Number | - | User defined maximum number for the scale, overrides maximum value from data.
 showLabelBackdrop | Boolean | true | If true, draw a background behind the tick labels
-stepSize | Number | - | User defined fixed step size for the scale. If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
+fixedStepSize | Number | - | User defined fixed step size for the scale. If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
 stepSize | Number | - | if defined, it can be used along with the min and the max to give a custom number of steps. See the example below.
@@ -355,0 +355,0 @@ suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value.

package.json

@@ -5,3 +5,3 @@ {
   "description": "Simple HTML5 charts using the canvas element.",
-  "version": "2.2.0-rc.2",
+  "version": "2.2.0",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "src/chart.js",

src/controllers/controller.line.js

@@ -225,3 +225,3 @@ "use strict";
 					dsMeta = chart.getDatasetMeta(i);
-					if (dsMeta.type === 'line' && chart.isDatasetVisible(i)) {
+					if (dsMeta.type === 'line' && dsMeta.yAxisID === yScale.id && chart.isDatasetVisible(i)) {
 						var stackedRightValue = Number(yScale.getRightValue(ds.data[index]));
@@ -251,3 +251,5 @@ if (stackedRightValue < 0) {
 			var area = me.chart.chartArea;
-			var points = meta.data || [];
+
+			// only consider points that are drawn in case the spanGaps option is ued
+			var points = (meta.data || []).filter(function(pt) { return !pt._model.skip; });
 			var i, ilen, point, model, controlPoints;
@@ -254,0 +256,0 @@

src/core/core.controller.js

@@ -387,3 +387,3 @@ "use strict";
 
-			return elementsArray;
+			return elementsArray.slice(0, 1);
 		},
@@ -428,37 +428,40 @@
 
-        getElementsAtXAxis: function(e){
-            var me = this;
-            var eventPosition = helpers.getRelativePosition(e, me.chart);
-            var elementsArray = [];
+		getElementsAtXAxis: function(e) {
+			var me = this;
+			var eventPosition = helpers.getRelativePosition(e, me.chart);
+			var elementsArray = [];
 
-            var found = (function() {
-                if (me.data.datasets) {
-                    for (var i = 0; i < me.data.datasets.length; i++) {
-                        var meta = me.getDatasetMeta(i);
-                        if (me.isDatasetVisible(i)) {
-                            for (var j = 0; j < meta.data.length; j++) {
-                                if (meta.data[j].inLabelRange(eventPosition.x, eventPosition.y)) {
-                                    return meta.data[j];
-                                }
-                            }
-                        }
-                    }
-                }
-            }).call(me);
+			var found = (function() {
+				if (me.data.datasets) {
+					for (var i = 0; i < me.data.datasets.length; i++) {
+						var meta = me.getDatasetMeta(i);
+						if (me.isDatasetVisible(i)) {
+							for (var j = 0; j < meta.data.length; j++) {
+								if (meta.data[j].inLabelRange(eventPosition.x, eventPosition.y)) {
+									return meta.data[j];
+								}
+							}
+						}
+					}
+				}
+			}).call(me);
 
-            if (!found) {
-                return elementsArray;
-            }
+			if (!found) {
+				return elementsArray;
+			}
 
-            helpers.each(me.data.datasets, function(dataset, datasetIndex) {
-                if (me.isDatasetVisible(datasetIndex)) {
-                    var meta = me.getDatasetMeta(datasetIndex);
-                    if(!meta.data[found._index]._view.skip){
-                    	elementsArray.push(meta.data[found._index]);
-                    }
-                }
-            }, me);
+			helpers.each(me.data.datasets, function(dataset, datasetIndex) {
+				if (me.isDatasetVisible(datasetIndex)) {
+					var meta = me.getDatasetMeta(datasetIndex);
+					var index = helpers.findIndex(meta.data, function (it) {
+						return found._model.x === it._model.x;
+					});
+					if(index !== -1 && !meta.data[index]._view.skip) {
+						elementsArray.push(meta.data[index]);
+					}
+				}
+			}, me);
 
-            return elementsArray;
-        },		
+			return elementsArray;
+		},		
 
@@ -465,0 +468,0 @@ getElementsAtEventForMode: function(e, mode) {

src/elements/element.line.js

@@ -22,103 +22,101 @@ "use strict";
 	Chart.elements.Line = Chart.Element.extend({
-		lineToNextPoint: function(previousPoint, point, nextPoint, skipHandler, previousSkipHandler) {
-			var me = this;
-			var ctx = me._chart.ctx;
-			var spanGaps = me._view ? me._view.spanGaps : false;
-
-			if (point._view.skip && !spanGaps) {
-				skipHandler.call(me, previousPoint, point, nextPoint);
-			} else if (previousPoint._view.skip && !spanGaps) {
-				previousSkipHandler.call(me, previousPoint, point, nextPoint);
-			} else if (point._view.steppedLine === true) {
-				ctx.lineTo(point._view.x, previousPoint._view.y);
-				ctx.lineTo(point._view.x, point._view.y);				
-			} else if (point._view.tension === 0) {
-				ctx.lineTo(point._view.x, point._view.y);
-			} else {
-				// Line between points
-				ctx.bezierCurveTo(
-					previousPoint._view.controlPointNextX,
-					previousPoint._view.controlPointNextY,
-					point._view.controlPointPreviousX,
-					point._view.controlPointPreviousY,
-					point._view.x,
-					point._view.y
-				);
-			}
-		},
-
 		draw: function() {
 			var me = this;
+			var vm = me._view;
+			var spanGaps = vm.spanGaps;
+			var scaleZero = vm.scaleZero;
+			var loop = me._loop;
 
-			var vm = me._view;
 			var ctx = me._chart.ctx;
-			var first = me._children[0];
-			var last = me._children[me._children.length - 1];
+			ctx.save();
 
-			function loopBackToStart(drawLineToCenter) {
-				if (!first._view.skip && !last._view.skip) {
-					// Draw a bezier line from last to first
+			// Helper function to draw a line to a point
+			function lineToPoint(previousPoint, point) {
+				var vm = point._view;
+				if (point._view.steppedLine === true) {
+					ctx.lineTo(point._view.x, previousPoint._view.y);
+					ctx.lineTo(point._view.x, point._view.y);				
+				} else if (point._view.tension === 0) {
+					ctx.lineTo(vm.x, vm.y);
+				} else {
 					ctx.bezierCurveTo(
-						last._view.controlPointNextX,
-						last._view.controlPointNextY,
-						first._view.controlPointPreviousX,
-						first._view.controlPointPreviousY,
-						first._view.x,
-						first._view.y
+						previousPoint._view.controlPointNextX,
+						previousPoint._view.controlPointNextY,
+						vm.controlPointPreviousX,
+						vm.controlPointPreviousY,
+						vm.x,
+						vm.y
 					);
-				} else if (drawLineToCenter) {
-					// Go to center
-					ctx.lineTo(me._view.scaleZero.x, me._view.scaleZero.y);
 				}
 			}
 
-			ctx.save();
+			var points = me._children.slice(); // clone array
+			var lastDrawnIndex = -1;
 
-			// If we had points and want to fill this line, do so.
-			if (me._children.length > 0 && vm.fill) {
-				// Draw the background first (so the border is always on top)
+			// If we are looping, adding the first point again
+			if (loop && points.length) {
+				points.push(points[0]);
+			}
+
+			var index, current, previous, currentVM;
+
+			// Fill Line
+			if (points.length && vm.fill) {
 				ctx.beginPath();
 
-				helpers.each(me._children, function(point, index) {
-					var previous = helpers.previousItem(me._children, index);
-					var next = helpers.nextItem(me._children, index);
+				for (index = 0; index < points.length; ++index) {
+					current = points[index];
+					previous = helpers.previousItem(points, index);
+					currentVM = current._view;
 
 					// First point moves to it's starting position no matter what
 					if (index === 0) {
-						if (me._loop) {
-							ctx.moveTo(vm.scaleZero.x, vm.scaleZero.y);
+						if (loop) {
+							ctx.moveTo(scaleZero.x, scaleZero.y);
 						} else {
-							ctx.moveTo(point._view.x, vm.scaleZero);
+							ctx.moveTo(currentVM.x, scaleZero);
 						}
 
-						if (point._view.skip) {
-							if (!me._loop) {
-								ctx.moveTo(next._view.x, me._view.scaleZero);
+						if (!currentVM.skip) {
+							lastDrawnIndex = index;
+							ctx.lineTo(currentVM.x, currentVM.y);
+						}
+					} else {
+						previous = lastDrawnIndex === -1 ? previous : points[lastDrawnIndex];
+
+						if (currentVM.skip) {
+							// Only do this if this is the first point that is skipped
+							if (!spanGaps && lastDrawnIndex === (index - 1)) {
+								if (loop) {
+									ctx.lineTo(scaleZero.x, scaleZero.y);
+								} else {
+									ctx.lineTo(previous._view.x, scaleZero);
+								}
 							}
 						} else {
-							ctx.lineTo(point._view.x, point._view.y);
-						}
-					} else {
-						me.lineToNextPoint(previous, point, next, function(previousPoint, point, nextPoint) {
-							if (me._loop) {
-								// Go to center
-								ctx.lineTo(me._view.scaleZero.x, me._view.scaleZero.y);
+							if (lastDrawnIndex !== (index - 1)) {
+								// There was a gap and this is the first point after the gap. If we've never drawn a point, this is a special case. 
+								// If the first data point is NaN, then there is no real gap to skip
+								if (spanGaps && lastDrawnIndex !== -1) {
+									// We are spanning the gap, so simple draw a line to this point
+									lineToPoint(previous, current);
+								} else {
+									if (loop) {
+										ctx.lineTo(currentVM.x, currentVM.y);
+									} else {
+										ctx.lineTo(currentVM.x, scaleZero);
+										ctx.lineTo(currentVM.x, currentVM.y);
+									}
+								}
 							} else {
-								ctx.lineTo(previousPoint._view.x, me._view.scaleZero);
-								ctx.moveTo(nextPoint._view.x, me._view.scaleZero);
+								// Line to next point
+								lineToPoint(previous, current);
 							}
-						}, function(previousPoint, point) {
-							// If we skipped the last point, draw a line to ourselves so that the fill is nice
-							ctx.lineTo(point._view.x, point._view.y);
-						});
+							lastDrawnIndex = index;
+						}
 					}
-				}, me);
+				}
 
-				// For radial scales, loop back around to the first point
-				if (me._loop) {
-					loopBackToStart(true);
-				} else {
-					//Round off the line by going to the base of the chart, back to the start, then fill.
-					ctx.lineTo(me._children[me._children.length - 1]._view.x, vm.scaleZero);
-					ctx.lineTo(me._children[0]._view.x, vm.scaleZero);
+				if (!loop) {
+					ctx.lineTo(points[points.length - 1]._view.x, scaleZero);
 				}
@@ -131,4 +129,4 @@
 
+			// Stroke Line Options
 			var globalOptionLineElements = globalDefaults.elements.line;
-			// Now draw the line between all the points with any borders
 			ctx.lineCap = vm.borderCapStyle || globalOptionLineElements.borderCapStyle;
@@ -145,22 +143,34 @@
 			ctx.strokeStyle = vm.borderColor || globalDefaults.defaultColor;
+
+			// Stroke Line
 			ctx.beginPath();
+			lastDrawnIndex = -1;
 
-			helpers.each(me._children, function(point, index) {
-				var previous = helpers.previousItem(me._children, index);
-				var next = helpers.nextItem(me._children, index);
+			for (index = 0; index < points.length; ++index) {
+				current = points[index];
+				previous = helpers.previousItem(points, index);
+				currentVM = current._view;
 
+				// First point moves to it's starting position no matter what
 				if (index === 0) {
-					ctx.moveTo(point._view.x, point._view.y);
+					if (currentVM.skip) {
+						
+					} else {
+						ctx.moveTo(currentVM.x, currentVM.y);
+						lastDrawnIndex = index;
+					}
 				} else {
-					me.lineToNextPoint(previous, point, next, function(previousPoint, point, nextPoint) {
-						ctx.moveTo(nextPoint._view.x, nextPoint._view.y);
-					}, function(previousPoint, point) {
-						// If we skipped the last point, move up to our point preventing a line from being drawn
-						ctx.moveTo(point._view.x, point._view.y);
-					});
+					previous = lastDrawnIndex === -1 ? previous : points[lastDrawnIndex];
+
+					if (!currentVM.skip) {
+						if (lastDrawnIndex !== (index - 1) && !spanGaps) {
+							// There was a gap and this is the first point after the gap
+							ctx.moveTo(currentVM.x, currentVM.y);
+						} else {
+							// Line to next point
+							lineToPoint(previous, current);
+						}
+						lastDrawnIndex = index;
+					}
 				}
-			}, me);
-
-			if (me._loop && me._children.length > 0) {
-				loopBackToStart();
 			}
@@ -167,0 +177,0 @@

src/scales/scale.time.js

@@ -79,3 +79,7 @@ /*global window: false */
 		getLabelMoment: function(datasetIndex, index) {
-			return this.labelMoments[datasetIndex][index];
+			if (typeof this.labelMoments[datasetIndex] != 'undefined') {
+				return this.labelMoments[datasetIndex][index];
+			}
+
+			return null;
 		},
@@ -82,0 +86,0 @@ getMomentStartOf: function(tick) {

test/controller.line.tests.js

@@ -281,2 +281,55 @@ // Test the line controller
 
+	it('should update elements when the y scale is stacked with multiple axes', function() {
+		var chart = window.acquireChart({
+			type: 'line',
+			data: {
+				datasets: [{
+					data: [10, -10, 10, -10],
+					label: 'dataset1'
+				}, {
+					data: [10, 15, 0, -4],
+					label: 'dataset2'
+				}, {
+					data: [10, 10, -10, -10],
+					label: 'dataset3',
+					yAxisID: 'secondAxis'
+				}],
+				labels: ['label1', 'label2', 'label3', 'label4']
+			},
+			options: {
+				scales: {
+					yAxes: [{
+						stacked: true
+					}, {
+						type: 'linear',
+						id: 'secondAxis'
+					}]
+				}
+			}
+		});
+		
+		var meta0 = chart.getDatasetMeta(0);
+
+		[	{ x:  76, y: 161 },
+			{ x: 215, y: 419 },
+			{ x: 353, y: 161 },
+			{ x: 492, y: 419 }
+		].forEach(function(values, i) {
+				expect(meta0.data[i]._model.x).toBeCloseToPixel(values.x);
+				expect(meta0.data[i]._model.y).toBeCloseToPixel(values.y);
+		});
+
+		var meta1 = chart.getDatasetMeta(1);
+
+		[	{ x:  76, y:  32 },
+			{ x: 215, y:  97 },
+			{ x: 353, y: 161 },
+			{ x: 492, y: 471 }
+		].forEach(function(values, i) {
+				expect(meta1.data[i]._model.x).toBeCloseToPixel(values.x);
+				expect(meta1.data[i]._model.y).toBeCloseToPixel(values.y);
+		});
+		
+	});
+
 	it('should update elements when the y scale is stacked and datasets is scatter data', function() {
@@ -283,0 +336,0 @@ var chart = window.acquireChart({

test/element.line.tests.js

@@ -129,2 +129,249 @@ // Tests for the line element
 
+	it('should draw with straight lines for a tension of 0', function() {
+		var mockContext = window.createMockContext();
+
+		// Create our points
+		var points = [];
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 0,
+			_view: {
+				x: 0,
+				y: 10,
+				controlPointNextX: 0,
+				controlPointNextY: 10,
+				tension: 0
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 1,
+			_view: {
+				x: 5,
+				y: 0,
+				controlPointPreviousX: 5,
+				controlPointPreviousY: 0,
+				controlPointNextX: 5,
+				controlPointNextY: 0,
+				tension: 0
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 2,
+			_view: {
+				x: 15,
+				y: -10,
+				controlPointPreviousX: 15,
+				controlPointPreviousY: -10,
+				controlPointNextX: 15,
+				controlPointNextY: -10,
+				tension: 0
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 3,
+			_view: {
+				x: 19,
+				y: -5,
+				controlPointPreviousX: 19,
+				controlPointPreviousY: -5,
+				controlPointNextX: 19,
+				controlPointNextY: -5,
+				tension: 0
+			}
+		}));
+
+		var line = new Chart.elements.Line({
+			_datasetindex: 2,
+			_chart: {
+				ctx: mockContext,
+			},
+			_children: points,
+			// Need to provide some settings
+			_view: {
+				fill: false, // don't want to fill
+				tension: 0.0, // no bezier curve for now
+				scaleZero: 0
+			}
+		});
+
+		line.draw();
+
+		expect(mockContext.getCalls()).toEqual([{
+			name: 'save',
+			args: [],
+		}, {
+			name: 'setLineCap',
+			args: ['butt']
+		}, {
+			name: 'setLineDash',
+			args: [
+				[]
+			]
+		}, {
+			name: 'setLineDashOffset',
+			args: [0.0]
+		}, {
+			name: 'setLineJoin',
+			args: ['miter']
+		}, {
+			name: 'setLineWidth',
+			args: [3]
+		}, {
+			name: 'setStrokeStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
+			args: [0, 10]
+		}, {
+			name: 'lineTo',
+			args: [5, 0]
+		}, {
+			name: 'lineTo',
+			args: [15, -10]
+		}, {
+			name: 'lineTo',
+			args: [19, -5]
+		}, {
+			name: 'stroke',
+			args: [],
+		}, {
+			name: 'restore',
+			args: []
+		}]);
+	});
+
+	it('should draw stepped lines', function() {
+		var mockContext = window.createMockContext();
+
+		// Create our points
+		var points = [];
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 0,
+			_view: {
+				x: 0,
+				y: 10,
+				controlPointNextX: 0,
+				controlPointNextY: 10,
+				steppedLine: true
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 1,
+			_view: {
+				x: 5,
+				y: 0,
+				controlPointPreviousX: 5,
+				controlPointPreviousY: 0,
+				controlPointNextX: 5,
+				controlPointNextY: 0,
+				steppedLine: true
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 2,
+			_view: {
+				x: 15,
+				y: -10,
+				controlPointPreviousX: 15,
+				controlPointPreviousY: -10,
+				controlPointNextX: 15,
+				controlPointNextY: -10,
+				steppedLine: true
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 3,
+			_view: {
+				x: 19,
+				y: -5,
+				controlPointPreviousX: 19,
+				controlPointPreviousY: -5,
+				controlPointNextX: 19,
+				controlPointNextY: -5,
+				steppedLine: true
+			}
+		}));
+
+		var line = new Chart.elements.Line({
+			_datasetindex: 2,
+			_chart: {
+				ctx: mockContext,
+			},
+			_children: points,
+			// Need to provide some settings
+			_view: {
+				fill: false, // don't want to fill
+				tension: 0.0, // no bezier curve for now
+				scaleZero: 0
+			}
+		});
+
+		line.draw();
+
+		expect(mockContext.getCalls()).toEqual([{
+			name: 'save',
+			args: [],
+		}, {
+			name: 'setLineCap',
+			args: ['butt']
+		}, {
+			name: 'setLineDash',
+			args: [
+				[]
+			]
+		}, {
+			name: 'setLineDashOffset',
+			args: [0.0]
+		}, {
+			name: 'setLineJoin',
+			args: ['miter']
+		}, {
+			name: 'setLineWidth',
+			args: [3]
+		}, {
+			name: 'setStrokeStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
+			args: [0, 10]
+		}, {
+			name: 'lineTo',
+			args: [5, 10]
+		}, {
+			name: 'lineTo',
+			args: [5, 0]
+		}, {
+			name: 'lineTo',
+			args: [15, 0]
+		}, {
+			name: 'lineTo',
+			args: [15, -10]
+		}, {
+			name: 'lineTo',
+			args: [19, -10]
+		}, {
+			name: 'lineTo',
+			args: [19, -5]
+		}, {
+			name: 'stroke',
+			args: [],
+		}, {
+			name: 'restore',
+			args: []
+		}]);
+	});
+
 	it('should draw with custom settings', function() {
@@ -208,3 +455,3 @@ var mockContext = window.createMockContext();
 			name: 'save',
-			args: [],
+			args: []
 		}, {
@@ -232,5 +479,2 @@ name: 'beginPath',
 		}, {
-			name: 'lineTo',
-			args: [0, 2]
-		}, {
 			name: 'setFillStyle',
@@ -281,3 +525,3 @@ args: ['rgb(0, 0, 0)']
 			name: 'stroke',
-			args: [],
+			args: []
 		}, {
@@ -290,3 +534,3 @@ name: 'restore',
 
-	it ('should skip points correctly', function() {
+	it('should skip points correctly', function() {
 		var mockContext = window.createMockContext();
@@ -376,17 +620,444 @@
 		}, {
- 			name: 'lineTo',
- 			args: [5, 2]
+			name: 'lineTo',
+			args: [5, 2]
 		}, {
+			name: 'lineTo',
+			args: [19, 2]
+		}, {
+			name: 'lineTo',
+			args: [19, -5]
+		}, {
+			name: 'lineTo',
+			args: [19, 2]
+		}, {
+			name: 'setFillStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'closePath',
+			args: []
+		}, {
+			name: 'fill',
+			args: []
+		}, {
+			name: 'setLineCap',
+			args: ['butt']
+		}, {
+			name: 'setLineDash',
+			args: [
+				[]
+			]
+		}, {
+			name: 'setLineDashOffset',
+			args: [0]
+		}, {
+			name: 'setLineJoin',
+			args: ['miter']
+		}, {
+			name: 'setLineWidth',
+			args: [3]
+		}, {
+			name: 'setStrokeStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
 			name: 'moveTo',
+			args: [0, 10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [0, 10, 5, 0, 5, 0]
+		}, {
+			name: 'moveTo',
+			args: [19, -5]
+		}, {
+			name: 'stroke',
+			args: []
+		}, {
+			name: 'restore',
+			args: []
+		}];
+		expect(mockContext.getCalls()).toEqual(expected);
+	});
+
+	it('should skip points correctly when spanGaps is true', function() {
+		var mockContext = window.createMockContext();
+
+		// Create our points
+		var points = [];
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 0,
+			_view: {
+				x: 0,
+				y: 10,
+				controlPointNextX: 0,
+				controlPointNextY: 10
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 1,
+			_view: {
+				x: 5,
+				y: 0,
+				controlPointPreviousX: 5,
+				controlPointPreviousY: 0,
+				controlPointNextX: 5,
+				controlPointNextY: 0
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 2,
+			_view: {
+				x: 15,
+				y: -10,
+				controlPointPreviousX: 15,
+				controlPointPreviousY: -10,
+				controlPointNextX: 15,
+				controlPointNextY: -10,
+				skip: true
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 3,
+			_view: {
+				x: 19,
+				y: -5,
+				controlPointPreviousX: 19,
+				controlPointPreviousY: -5,
+				controlPointNextX: 19,
+				controlPointNextY: -5
+			}
+		}));
+
+		var line = new Chart.elements.Line({
+			_datasetindex: 2,
+			_chart: {
+				ctx: mockContext,
+			},
+			_children: points,
+			// Need to provide some settings
+			_view: {
+				fill: true,
+				scaleZero: 2, // for filling lines
+				tension: 0.0, // no bezier curve for now
+				spanGaps: true
+			}
+		});
+
+		line.draw();
+
+		var expected = [{
+			name: 'save',
+			args: []
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
+			args: [0, 2]
+		}, {
+			name: 'lineTo',
+			args: [0, 10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [0, 10, 5, 0, 5, 0]
+		}, {
+			name: 'bezierCurveTo',
+			args: [5, 0, 19, -5, 19, -5]
+		}, {
+			name: 'lineTo',
 			args: [19, 2]
 		}, {
- 			name: 'lineTo',
- 			args: [19, -5]
+			name: 'setFillStyle',
+			args: ['rgba(0,0,0,0.1)']
 		}, {
- 			name: 'lineTo',
- 			args: [19, 2]
+			name: 'closePath',
+			args: []
 		}, {
+			name: 'fill',
+			args: []
+		}, {
+			name: 'setLineCap',
+			args: ['butt']
+		}, {
+			name: 'setLineDash',
+			args: [
+				[]
+			]
+		}, {
+			name: 'setLineDashOffset',
+			args: [0]
+		}, {
+			name: 'setLineJoin',
+			args: ['miter']
+		}, {
+			name: 'setLineWidth',
+			args: [3]
+		}, {
+			name: 'setStrokeStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
+			args: [0, 10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [0, 10, 5, 0, 5, 0]
+		}, {
+			name: 'bezierCurveTo',
+			args: [5, 0, 19, -5, 19, -5]
+		}, {
+			name: 'stroke',
+			args: []
+		}, {
+			name: 'restore',
+			args: []
+		}];
+		expect(mockContext.getCalls()).toEqual(expected);
+	});
+
+	it('should skip the first point correctly', function() {
+		var mockContext = window.createMockContext();
+
+		// Create our points
+		var points = [];
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 0,
+			_view: {
+				x: 0,
+				y: 10,
+				controlPointNextX: 0,
+				controlPointNextY: 10,
+				skip: true
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 1,
+			_view: {
+				x: 5,
+				y: 0,
+				controlPointPreviousX: 5,
+				controlPointPreviousY: 0,
+				controlPointNextX: 5,
+				controlPointNextY: 0
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 2,
+			_view: {
+				x: 15,
+				y: -10,
+				controlPointPreviousX: 15,
+				controlPointPreviousY: -10,
+				controlPointNextX: 15,
+				controlPointNextY: -10
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 3,
+			_view: {
+				x: 19,
+				y: -5,
+				controlPointPreviousX: 19,
+				controlPointPreviousY: -5,
+				controlPointNextX: 19,
+				controlPointNextY: -5
+			}
+		}));
+
+		var line = new Chart.elements.Line({
+			_datasetindex: 2,
+			_chart: {
+				ctx: mockContext,
+			},
+			_children: points,
+			// Need to provide some settings
+			_view: {
+				fill: true,
+				scaleZero: 2, // for filling lines
+				tension: 0.0, // no bezier curve for now
+			}
+		});
+
+		line.draw();
+
+		var expected = [{
+			name: 'save',
+			args: []
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
+			args: [0, 2]
+		}, {
 			name: 'lineTo',
+			args: [5, 2]
+		}, {
+			name: 'lineTo',
+			args: [5, 0]
+		}, {
+			name: 'bezierCurveTo',
+			args: [5, 0, 15, -10, 15, -10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [15, -10, 19, -5, 19, -5]
+		}, {
+			name: 'lineTo',
+			args: [19, 2]
+		}, {
+			name: 'setFillStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'closePath',
+			args: []
+		}, {
+			name: 'fill',
+			args: []
+		}, {
+			name: 'setLineCap',
+			args: ['butt']
+		}, {
+			name: 'setLineDash',
+			args: [
+				[]
+			]
+		}, {
+			name: 'setLineDashOffset',
+			args: [0]
+		}, {
+			name: 'setLineJoin',
+			args: ['miter']
+		}, {
+			name: 'setLineWidth',
+			args: [3]
+		}, {
+			name: 'setStrokeStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
+			args: [5, 0]
+		}, {
+			name: 'bezierCurveTo',
+			args: [5, 0, 15, -10, 15, -10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [15, -10, 19, -5, 19, -5]
+		}, {
+			name: 'stroke',
+			args: []
+		}, {
+			name: 'restore',
+			args: []
+		}];
+		expect(mockContext.getCalls()).toEqual(expected);
+	});
+
+	it('should skip the last point correctly', function() {
+		var mockContext = window.createMockContext();
+
+		// Create our points
+		var points = [];
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 0,
+			_view: {
+				x: 0,
+				y: 10,
+				controlPointNextX: 0,
+				controlPointNextY: 10
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 1,
+			_view: {
+				x: 5,
+				y: 0,
+				controlPointPreviousX: 5,
+				controlPointPreviousY: 0,
+				controlPointNextX: 5,
+				controlPointNextY: 0
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 2,
+			_view: {
+				x: 15,
+				y: -10,
+				controlPointPreviousX: 15,
+				controlPointPreviousY: -10,
+				controlPointNextX: 15,
+				controlPointNextY: -10
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 3,
+			_view: {
+				x: 19,
+				y: -5,
+				controlPointPreviousX: 19,
+				controlPointPreviousY: -5,
+				controlPointNextX: 19,
+				controlPointNextY: -5,
+				skip: true
+			}
+		}));
+
+		var line = new Chart.elements.Line({
+			_datasetindex: 2,
+			_chart: {
+				ctx: mockContext,
+			},
+			_children: points,
+			// Need to provide some settings
+			_view: {
+				fill: true,
+				scaleZero: 2, // for filling lines
+				tension: 0.0, // no bezier curve for now
+			}
+		});
+
+		line.draw();
+
+		var expected = [{
+			name: 'save',
+			args: []
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
 			args: [0, 2]
 		}, {
+			name: 'lineTo',
+			args: [0, 10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [0, 10, 5, 0, 5, 0]
+		}, {
+			name: 'bezierCurveTo',
+			args: [5, 0, 15, -10, 15, -10]
+		}, {
+			name: 'lineTo',
+			args: [15, 2]
+		}, {
+			name: 'lineTo',
+			args: [19, 2]
+		}, {
 			name: 'setFillStyle',
@@ -410,3 +1081,3 @@ args: ['rgba(0,0,0,0.1)']
 			name: 'setLineDashOffset',
-			args: [0.0]
+			args: [0]
 		}, {
@@ -431,10 +1102,7 @@ name: 'setLineJoin',
 		}, {
- 			name: 'moveTo',
- 			args: [19, -5]
+			name: 'bezierCurveTo',
+			args: [5, 0, 15, -10, 15, -10]
 		}, {
- 			name: 'moveTo',
- 			args: [19, -5]
-		}, {
 			name: 'stroke',
-			args: [],
+			args: []
 		}, {
@@ -739,6 +1407,109 @@ name: 'restore',
 		}, {
+			name: 'bezierCurveTo',
+			args: [15, -10, 19, -5, 19, -5]
+		}, {
+			name: 'bezierCurveTo',
+			args: [19, -5, 0, 10, 0, 10]
+		}, {
+			name: 'stroke',
+			args: [],
+		}, {
+			name: 'restore',
+			args: []
+		}]);
+	});
+
+	it('should be able to draw with a loop back to the beginning point when span gaps is true and there is a skip in the middle of the dataset', function() {
+		var mockContext = window.createMockContext();
+
+		// Create our points
+		var points = [];
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 0,
+			_view: {
+				x: 0,
+				y: 10,
+				controlPointPreviousX: 0,
+				controlPointPreviousY: 10,
+				controlPointNextX: 0,
+				controlPointNextY: 10
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 1,
+			_view: {
+				x: 5,
+				y: 0,
+				controlPointPreviousX: 5,
+				controlPointPreviousY: 0,
+				controlPointNextX: 5,
+				controlPointNextY: 0,
+				skip: true
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 2,
+			_view: {
+				x: 15,
+				y: -10,
+				controlPointPreviousX: 15,
+				controlPointPreviousY: -10,
+				controlPointNextX: 15,
+				controlPointNextY: -10
+			}
+		}));
+		points.push(new Chart.elements.Point({
+			_datasetindex: 2,
+			_index: 3,
+			_view: {
+				x: 19,
+				y: -5,
+				controlPointPreviousX: 19,
+				controlPointPreviousY: -5,
+				controlPointNextX: 19,
+				controlPointNextY: -5
+			}
+		}));
+
+		var line = new Chart.elements.Line({
+			_datasetindex: 2,
+			_chart: {
+				ctx: mockContext,
+			},
+			_children: points,
+			_loop: true, // want the line to loop back to the first point
+			// Need to provide some settings
+			_view: {
+				fill: true, // don't want to fill
+				tension: 0.0, // no bezier curve for now
+				scaleZero: {
+					x: 3,
+					y: 2
+				},
+				spanGaps: true
+			}
+		});
+
+		line.draw();
+
+		expect(mockContext.getCalls()).toEqual([{
+			name: 'save',
+			args: [],
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
 			name: 'moveTo',
-			args: [15, -10]
+			args: [3, 2]
 		}, {
+			name: 'lineTo',
+			args: [0, 10]
+		}, {
 			name: 'bezierCurveTo',
+			args: [0, 10, 15, -10, 15, -10]
+		}, {
+			name: 'bezierCurveTo',
 			args: [15, -10, 19, -5, 19, -5]
@@ -749,2 +1520,46 @@ }, {
 		}, {
+			name: 'setFillStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'closePath',
+			args: []
+		}, {
+			name: 'fill',
+			args: []
+		}, {
+			name: 'setLineCap',
+			args: ['butt']
+		}, {
+			name: 'setLineDash',
+			args: [
+				[]
+			]
+		}, {
+			name: 'setLineDashOffset',
+			args: [0.0]
+		}, {
+			name: 'setLineJoin',
+			args: ['miter']
+		}, {
+			name: 'setLineWidth',
+			args: [3]
+		}, {
+			name: 'setStrokeStyle',
+			args: ['rgba(0,0,0,0.1)']
+		}, {
+			name: 'beginPath',
+			args: []
+		}, {
+			name: 'moveTo',
+			args: [0, 10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [0, 10, 15, -10, 15, -10]
+		}, {
+			name: 'bezierCurveTo',
+			args: [15, -10, 19, -5, 19, -5]
+		}, {
+			name: 'bezierCurveTo',
+			args: [19, -5, 0, 10, 0, 10]
+		}, {
 			name: 'stroke',
@@ -888,5 +1703,2 @@ args: [],
 			name: 'moveTo',
-			args: [0, 10]
-		}, {
-			name: 'moveTo',
 			args: [5, 0]
@@ -1006,3 +1818,3 @@ }, {
 			name: 'lineTo',
-			args: [3, 2]
+			args: [0, 10]
 		}, {
@@ -1051,3 +1863,3 @@ name: 'setFillStyle',
 			name: 'moveTo',
-			args: [19, -5]
+			args: [0, 10]
 		}, {
@@ -1061,2 +1873,2 @@ name: 'stroke',
 	});
-});
+});

test/scale.time.tests.js

@@ -482,2 +482,31 @@ // Time scale tests
 	});
+
+	it("should not throw an error if the datasetIndex is out of bounds", function() {
+		var chart = window.acquireChart({
+			type: 'line',
+			data: {
+				labels: ["2016-06-26"],
+				datasets: [{
+					type: "line",
+					data: [5]
+				}]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						display: true,
+						type: "time",
+					}]
+				}
+			}
+		});
+
+		var xScale = chartInstance.scales.xScale0;
+
+		var getOutOfBoundPixelForValue = function() {
+			xScale.getLabelMoment(12, 0);
+		};
+
+		expect(getOutOfBoundPixelForValue).not.toThrow();
+	});
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1894166

increased by0.73%

Lines of code

39841

increased by2.3%

Number of low quality alerts

2

decreased by-33.33%

No dependency changes