Remove index and datasetIndex from Element (#6688)

Remove `index` and `datasetIndex` properties from elements.

docs/getting-started/v3-migration.md

@@ -106,3 +106,17 @@ Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`.
 ##### Time Scale
 
 * `getValueForPixel` now returns milliseconds since the epoch
+
+#### Controllers
+
+##### Core Controller
+
+* The first parameter to `updateHoverStyle` is now an array of objects containing the `element`, `datasetIndex`, and `index`
+
+##### Dataset Controllers
+
+* `setHoverStyle` now additionally takes the `datasetIndex` and `index`
+
+#### Interactions
+
+* Interaction mode methods now return an array of objects containing the `element`, `datasetIndex`, and `index`

src/controllers/controller.bar.js

@@ -240,8 +240,6 @@ module.exports = DatasetController.extend({
 		var me = this;
 		var options = me._resolveDataElementOptions(index);
 
-		rectangle._datasetIndex = me.index;
-		rectangle._index = index;
 		rectangle._model = {
 			backgroundColor: options.backgroundColor,
 			borderColor: options.borderColor,

src/controllers/controller.bubble.js

@@ -107,8 +107,6 @@ module.exports = DatasetController.extend({
 		var y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed[yScale.id]);
 
 		point._options = options;
-		point._datasetIndex = me.index;
-		point._index = index;
 		point._model = {
 			backgroundColor: options.backgroundColor,
 			borderColor: options.borderColor,

src/controllers/controller.doughnut.js

@@ -238,10 +238,6 @@ module.exports = DatasetController.extend({
 		var options = arc._options || {};
 
 		helpers.extend(arc, {
-			// Utility
-			_datasetIndex: me.index,
-			_index: index,
-
 			// Desired view properties
 			_model: {
 				backgroundColor: options.backgroundColor,

src/controllers/controller.line.js

@@ -82,8 +82,6 @@ module.exports = DatasetController.extend({
 
 		// Update Line
 		if (showLine) {
-			// Utility
-			line._datasetIndex = me.index;
 			// Data
 			line._children = points;
 			// Model
@@ -110,7 +108,6 @@ module.exports = DatasetController.extend({
 	updateElement: function(point, index, reset) {
 		var me = this;
 		var meta = me.getMeta();
-		var datasetIndex = me.index;
 		var xScale = me._xScale;
 		var yScale = me._yScale;
 		var lineModel = meta.dataset._model;
@@ -122,8 +119,6 @@ module.exports = DatasetController.extend({
 
 		// Utility
 		point._options = options;
-		point._datasetIndex = datasetIndex;
-		point._index = index;
 
 		// Desired view properties
 		point._model = {

src/controllers/controller.polarArea.js

@@ -201,10 +201,6 @@ module.exports = DatasetController.extend({
 		var options = arc._options || {};
 
 		helpers.extend(arc, {
-			// Utility
-			_datasetIndex: me.index,
-			_index: index,
-
 			// Desired view properties
 			_model: {
 				backgroundColor: options.backgroundColor,

src/controllers/controller.radar.js

@@ -83,8 +83,6 @@ module.exports = DatasetController.extend({
 			config.lineTension = config.tension;
 		}
 
-		// Utility
-		line._datasetIndex = me.index;
 		// Data
 		line._children = points;
 		line._loop = true;
@@ -119,8 +117,6 @@ module.exports = DatasetController.extend({
 
 		// Utility
 		point._options = options;
-		point._datasetIndex = me.index;
-		point._index = index;
 
 		// Desired view properties
 		point._model = {

src/core/core.controller.js

@@ -980,19 +980,24 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
 		});
 	},
 
-	updateHoverStyle: function(elements, mode, enabled) {
+	updateHoverStyle: function(items, mode, enabled) {
 		var prefix = enabled ? 'set' : 'remove';
-		var element, i, ilen;
+		var meta, item, i, ilen;
 
-		for (i = 0, ilen = elements.length; i < ilen; ++i) {
-			element = elements[i];
-			if (element) {
-				this.getDatasetMeta(element._datasetIndex).controller[prefix + 'HoverStyle'](element);
+		if (mode === 'dataset') {
+			meta = this.getDatasetMeta(items[0].datasetIndex);
+			meta.controller['_' + prefix + 'DatasetHoverStyle']();
+			for (i = 0, ilen = meta.data.length; i < ilen; ++i) {
+				meta.controller[prefix + 'HoverStyle'](meta.data[i], items[0].datasetIndex, i);
 			}
+			return;
 		}
 
-		if (mode === 'dataset') {
-			this.getDatasetMeta(elements[0]._datasetIndex).controller['_' + prefix + 'DatasetHoverStyle']();
+		for (i = 0, ilen = items.length; i < ilen; ++i) {
+			item = items[i];
+			if (item) {
+				this.getDatasetMeta(item.datasetIndex).controller[prefix + 'HoverStyle'](item.element, item.datasetIndex, item.index);
+			}
 		}
 	},
 
@@ -1100,7 +1105,7 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
 		}
 
 		me._updateHoverStyles();
-		changed = !helpers.arrayEquals(me.active, me.lastActive);
+		changed = !helpers._elementsEqual(me.active, me.lastActive);
 
 		// Remember Last Actives
 		me.lastActive = me.active;

src/core/core.datasetController.js

@@ -793,9 +793,8 @@ helpers.extend(DatasetController.prototype, {
 		delete element.$previousStyle;
 	},
 
-	setHoverStyle: function(element) {
-		var dataset = this.chart.data.datasets[element._datasetIndex];
-		var index = element._index;
+	setHoverStyle: function(element, datasetIndex, index) {
+		var dataset = this.chart.data.datasets[datasetIndex];
 		var model = element._model;
 		var getHoverColor = helpers.getHoverColor;
 

src/core/core.element.js

@@ -56,12 +56,13 @@ class Element {
 
 	constructor(configuration) {
 		helpers.extend(this, configuration);
+
+		// this.hidden = false; we assume Element has an attribute called hidden, but do not initialize to save memory
+
 		this.initialize.apply(this, arguments);
 	}
 
-	initialize() {
-		this.hidden = false;
-	}
+	initialize() {}
 
 	pivot(animationsDisabled) {
 		var me = this;

src/core/core.interaction.js

@@ -33,7 +33,7 @@ function parseVisibleItems(chart, handler) {
 		for (j = 0, jlen = metadata.length; j < jlen; ++j) {
 			element = metadata[j];
 			if (!element._view.skip) {
-				handler(element);
+				handler(element, i, j);
 			}
 		}
 	}
@@ -48,9 +48,9 @@ function parseVisibleItems(chart, handler) {
 function getIntersectItems(chart, position) {
 	var elements = [];
 
-	parseVisibleItems(chart, function(element) {
+	parseVisibleItems(chart, function(element, datasetIndex, index) {
 		if (element.inRange(position.x, position.y)) {
-			elements.push(element);
+			elements.push({element, datasetIndex, index});
 		}
 	});
 
@@ -69,19 +69,19 @@ function getNearestItems(chart, position, intersect, distanceMetric) {
 	var minDistance = Number.POSITIVE_INFINITY;
 	var nearestItems = [];
 
-	parseVisibleItems(chart, function(element) {
+	parseVisibleItems(chart, function(element, datasetIndex, index) {
 		if (intersect && !element.inRange(position.x, position.y)) {
 			return;
 		}
 
 		var center = element.getCenterPoint();
 		var distance = distanceMetric(position, center);
 		if (distance < minDistance) {
-			nearestItems = [element];
+			nearestItems = [{element, datasetIndex, index}];
 			minDistance = distance;
 		} else if (distance === minDistance) {
 			// Can have multiple items at the same distance in which case we sort by size
-			nearestItems.push(element);
+			nearestItems.push({element, datasetIndex, index});
 		}
 	});
 
@@ -117,11 +117,12 @@ function indexMode(chart, e, options) {
 	}
 
 	chart._getSortedVisibleDatasetMetas().forEach(function(meta) {
-		var element = meta.data[items[0]._index];
+		var index = items[0].index;
+		var element = meta.data[index];
 
 		// don't count items that are skipped (null data)
 		if (element && !element._view.skip) {
-			elements.push(element);
+			elements.push({element, datasetIndex: meta.index, index});
 		}
 	});
 
@@ -152,7 +153,7 @@ module.exports = {
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
 		 * @param {IInteractionOptions} options - options to use during interaction
-		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
 		 */
 		index: indexMode,
 
@@ -163,7 +164,7 @@ module.exports = {
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
 		 * @param {IInteractionOptions} options - options to use during interaction
-		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
 		 */
 		dataset: function(chart, e, options) {
 			var position = getRelativePosition(e, chart);
@@ -172,7 +173,7 @@ module.exports = {
 			var items = options.intersect ? getIntersectItems(chart, position) : getNearestItems(chart, position, false, distanceMetric);
 
 			if (items.length > 0) {
-				items = chart.getDatasetMeta(items[0]._datasetIndex).data;
+				items = [{datasetIndex: items[0].datasetIndex}]; // when mode: 'dataset' we only need to return datasetIndex
 			}
 
 			return items;
@@ -184,7 +185,7 @@ module.exports = {
 		 * @function Chart.Interaction.modes.intersect
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
-		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
 		 */
 		point: function(chart, e) {
 			var position = getRelativePosition(e, chart);
@@ -197,7 +198,7 @@ module.exports = {
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
 		 * @param {IInteractionOptions} options - options to use
-		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
 		 */
 		nearest: function(chart, e, options) {
 			var position = getRelativePosition(e, chart);
@@ -212,16 +213,16 @@ module.exports = {
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
 		 * @param {IInteractionOptions} options - options to use
-		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
 		 */
 		x: function(chart, e, options) {
 			var position = getRelativePosition(e, chart);
 			var items = [];
 			var intersectsItem = false;
 
-			parseVisibleItems(chart, function(element) {
+			parseVisibleItems(chart, function(element, datasetIndex, index) {
 				if (element.inXRange(position.x)) {
-					items.push(element);
+					items.push({element, datasetIndex, index});
 				}
 
 				if (element.inRange(position.x, position.y)) {
@@ -243,16 +244,16 @@ module.exports = {
 		 * @param {Chart} chart - the chart we are returning items from
 		 * @param {Event} e - the event we are find things at
 		 * @param {IInteractionOptions} options - options to use
-		 * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned
+		 * @return {Object[]} Array of elements that are under the point. If none are found, an empty array is returned
 		 */
 		y: function(chart, e, options) {
 			var position = getRelativePosition(e, chart);
 			var items = [];
 			var intersectsItem = false;
 
-			parseVisibleItems(chart, function(element) {
+			parseVisibleItems(chart, function(element, datasetIndex, index) {
 				if (element.inYRange(position.y)) {
-					items.push(element);
+					items.push({element, datasetIndex, index});
 				}
 
 				if (element.inRange(position.x, position.y)) {

src/core/core.tooltip.js

@@ -117,7 +117,7 @@ var positioners = {
 		var count = 0;
 
 		for (i = 0, len = elements.length; i < len; ++i) {
-			var el = elements[i];
+			var el = elements[i].element;
 			if (el && el.hasValue()) {
 				var pos = el.tooltipPosition();
 				x += pos.x;
@@ -146,7 +146,7 @@ var positioners = {
 		var i, len, nearestElement;
 
 		for (i = 0, len = elements.length; i < len; ++i) {
-			var el = elements[i];
+			var el = elements[i].element;
 			if (el && el.hasValue()) {
 				var center = el.getCenterPoint();
 				var d = helpers.distanceBetweenPoints(eventPosition, center);
@@ -201,16 +201,15 @@ function splitNewlines(str) {
 
 /**
  * Private helper to create a tooltip item model
- * @param element - the chart element (point, arc, bar) to create the tooltip item for
+ * @param item - the chart element (point, arc, bar) to create the tooltip item for
  * @return new tooltip item
  */
-function createTooltipItem(chart, element) {
-	var datasetIndex = element._datasetIndex;
-	var index = element._index;
-	var controller = chart.getDatasetMeta(datasetIndex).controller;
-	var indexScale = controller._getIndexScale();
-	var valueScale = controller._getValueScale();
-	var parsed = controller._getParsed(index);
+function createTooltipItem(chart, item) {
+	const {datasetIndex, element, index} = item;
+	const controller = chart.getDatasetMeta(datasetIndex).controller;
+	const indexScale = controller._getIndexScale();
+	const valueScale = controller._getValueScale();
+	const parsed = controller._getParsed(index);
 
 	return {
 		label: indexScale ? '' + indexScale.getLabelForValue(parsed[indexScale.id]) : '',
@@ -1016,7 +1015,7 @@ class Tooltip extends Element {
 		}
 
 		// Remember Last Actives
-		changed = !helpers.arrayEquals(me._active, me._lastActive);
+		changed = !helpers._elementsEqual(me._active, me._lastActive);
 
 		// Only handle target event on tooltip change
 		if (changed) {

src/helpers/helpers.core.js

@@ -164,6 +164,31 @@ var helpers = {
 		return true;
 	},
 
+	/**
+	 * Returns true if the `a0` and `a1` arrays have the same content, else returns false.
+	 * @param {Array} a0 - The array to compare
+	 * @param {Array} a1 - The array to compare
+	 * @returns {boolean}
+	 */
+	_elementsEqual: function(a0, a1) {
+		let i, ilen, v0, v1;
+
+		if (!a0 || !a1 || a0.length !== a1.length) {
+			return false;
+		}
+
+		for (i = 0, ilen = a0.length; i < ilen; ++i) {
+			v0 = a0[i];
+			v1 = a1[i];
+
+			if (v0.datasetIndex !== v1.datasetIndex || v0.index !== v1.index) {
+				return false;
+			}
+		}
+
+		return true;
+	},
+
 	/**
 	 * Returns a deep copy of `source` without keeping references on objects and arrays.
 	 * @param {*} source - The value to clone.