Remove ticksToTimestamps and change ticks to numbers

Author: benmccann

docs/getting-started/v3-migration.md

@@ -151,9 +151,8 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 ##### Ticks
 
 * `Scale.afterBuildTicks` now has no parameters like the other callbacks
-* `Scale.buildTicks` is now expected to return tick objects
-* `Scale.convertTicksToLabels` was renamed to `generateTickLabels`. It is now expected to set the label property on the ticks given as input
-* `Scale.ticks` now contains objects instead of strings
+* `Scale.ticks` now contains the tick values instead of labels, which are now available in `Scale.labels`
+* `TimeScale.buildTicks` is now expected to return `number`s like the other scales
 * When the `autoSkip` option is enabled, `Scale.ticks` now contains only the non-skipped ticks instead of all ticks.
 
 ##### Time Scale

src/core/core.scale.js

@@ -122,16 +122,17 @@ function garbageCollect(caches, length) {
  * Returns {width, height, offset} objects for the first, last, widest, highest tick
  * labels where offset indicates the anchor point offset from the top in pixels.
  */
-function computeLabelSizes(ctx, tickFonts, ticks, caches) {
-	var length = ticks.length;
+function computeLabelSizes(ctx, tickFonts, labels, tickMeta, caches) {
+	var length = labels.length;
 	var widths = [];
 	var heights = [];
 	var offsets = [];
-	var i, j, jlen, label, tickFont, fontString, cache, lineHeight, width, height, nestedLabel, widest, highest;
+	var i, j, jlen, label, meta, tickFont, fontString, cache, lineHeight, width, height, nestedLabel, widest, highest;
 
 	for (i = 0; i < length; ++i) {
-		label = ticks[i].label;
-		tickFont = ticks[i].major ? tickFonts.major : tickFonts.minor;
+		label = labels[i];
+		meta = tickMeta[i];
+		tickFont = meta && meta.major ? tickFonts.major : tickFonts.minor;
 		ctx.font = fontString = tickFont.string;
 		cache = caches[fontString] = caches[fontString] || {data: {}, gc: []};
 		lineHeight = tickFont.lineHeight;
@@ -248,18 +249,18 @@ function calculateSpacing(majorIndices, ticks, axisLength, ticksLimit) {
 	return Math.max(spacing, 1);
 }
 
-function getMajorIndices(ticks) {
+function getMajorIndices(meta) {
 	var result = [];
 	var i, ilen;
-	for (i = 0, ilen = ticks.length; i < ilen; i++) {
-		if (ticks[i].major) {
+	for (i = 0, ilen = meta.length; i < ilen; i++) {
+		if (meta[i] && meta[i].major) {
 			result.push(i);
 		}
 	}
 	return result;
 }
 
-function skipMajors(ticks, newTicks, majorIndices, spacing) {
+function skipMajors(ticks, meta, newTicks, newMeta, majorIndices, spacing) {
 	let count = 0;
 	let next = majorIndices[0];
 	let i;
@@ -268,13 +269,14 @@ function skipMajors(ticks, newTicks, majorIndices, spacing) {
 	for (i = 0; i < ticks.length; i++) {
 		if (i === next) {
 			newTicks.push(ticks[i]);
+			newMeta.push(meta[i]);
 			count++;
 			next = majorIndices[count * spacing];
 		}
 	}
 }
 
-function skip(ticks, newTicks, spacing, majorStart, majorEnd) {
+function skip(ticks, meta, newTicks, newMeta, spacing, majorStart, majorEnd) {
 	const start = valueOrDefault(majorStart, 0);
 	const end = Math.min(valueOrDefault(majorEnd, ticks.length), ticks.length);
 	let count = 0;
@@ -296,6 +298,7 @@ function skip(ticks, newTicks, spacing, majorStart, majorEnd) {
 	for (i = Math.max(start, 0); i < end; i++) {
 		if (i === next) {
 			newTicks.push(ticks[i]);
+			newMeta.push(meta[i]);
 			count++;
 			next = Math.round(start + count * spacing);
 		}
@@ -426,10 +429,10 @@ class Scale extends Element {
 	 *     - thickness of scales or legends in another orientation
 	 */
 	update(maxWidth, maxHeight, margins) {
-		var me = this;
-		var tickOpts = me.options.ticks;
-		var sampleSize = tickOpts.sampleSize;
-		var samplingEnabled;
+		const me = this;
+		const tickOpts = me.options.ticks;
+		const sampleSize = tickOpts.sampleSize;
+		const autoSkipEnabled = tickOpts.autoSkip || tickOpts.source === 'auto';
 
 		// Update Lifecycle - Probably don't want to ever extend or overwrite this function ;)
 		me.beforeUpdate();
@@ -445,6 +448,7 @@ class Scale extends Element {
 		}, margins);
 
 		me.ticks = null;
+		me._tickMeta = [];
 		me._labelSizes = null;
 		me._maxLabelLines = 0;
 		me.longestLabelWidth = 0;
@@ -471,8 +475,8 @@ class Scale extends Element {
 
 		// Compute tick rotation and fit using a sampled subset of labels
 		// We generally don't need to compute the size of every single label for determining scale size
-		samplingEnabled = sampleSize < me.ticks.length;
-		me._convertTicksToLabels(samplingEnabled ? sample(me.ticks, sampleSize) : me.ticks);
+		const samplingEnabled = sampleSize < me.ticks.length;
+		me.labels = me._convertTicksToLabels(samplingEnabled ? sample(me.ticks, sampleSize) : me.ticks);
 
 		// _configure is called twice, once here, once from core.controller.updateLayout.
 		// Here we haven't been positioned yet, but dimensions are correct.
@@ -490,11 +494,13 @@ class Scale extends Element {
 		me.afterFit();
 
 		// Auto-skip
-		me.ticks = tickOpts.display && (tickOpts.autoSkip || tickOpts.source === 'auto') ? me._autoSkip(me.ticks) : me.ticks;
+		if (tickOpts.display && autoSkipEnabled) {
+			me._autoSkip();
+		}
 
-		if (samplingEnabled) {
+		if (tickOpts.display && (samplingEnabled || autoSkipEnabled)) {
 			// Generate labels using all non-skipped ticks
-			me._convertTicksToLabels(me.ticks);
+			me.labels = me._convertTicksToLabels(me.ticks);
 		}
 
 		// IMPORTANT: after this point, we consider that `this.ticks` will NEVER change!
@@ -588,14 +594,15 @@ class Scale extends Element {
 	/**
 	 * Convert ticks to label strings
 	 */
-	generateTickLabels(ticks) {
+	convertTicksToLabels(ticks) {
 		var me = this;
 		var tickOpts = me.options.ticks;
-		var i, ilen, tick;
+		var labels = [];
+		var i, ilen;
 		for (i = 0, ilen = ticks.length; i < ilen; i++) {
-			tick = ticks[i];
-			tick.label = helpers.callback(tickOpts.callback, [tick.value, i, ticks], me);
+			labels[i] = helpers.callback(tickOpts.callback, [ticks[i], i, ticks], me);
 		}
+		return labels;
 	}
 	afterTickToLabelConversion() {
 		helpers.callback(this.options.afterTickToLabelConversion, [this]);
@@ -786,12 +793,15 @@ class Scale extends Element {
 
 	_convertTicksToLabels(ticks) {
 		var me = this;
+		var labels;
 
 		me.beforeTickToLabelConversion();
 
-		me.generateTickLabels(ticks);
+		labels = me.convertTicksToLabels(ticks);
 
 		me.afterTickToLabelConversion();
+
+		return labels;
 	}
 
 	/**
@@ -802,7 +812,7 @@ class Scale extends Element {
 		var labelSizes = me._labelSizes;
 
 		if (!labelSizes) {
-			me._labelSizes = labelSizes = computeLabelSizes(me.ctx, parseTickFontOptions(me.options.ticks), me.ticks, me.longestTextCache);
+			me._labelSizes = labelSizes = computeLabelSizes(me.ctx, parseTickFontOptions(me.options.ticks), me.labels, me._tickMeta, me.longestTextCache);
 			me.longestLabelWidth = labelSizes.widest.width;
 		}
 
@@ -890,37 +900,46 @@ class Scale extends Element {
 	 * Returns a subset of ticks to be plotted to avoid overlapping labels.
 	 * @private
 	 */
-	_autoSkip(ticks) {
+	_autoSkip() {
 		const me = this;
 		const tickOpts = me.options.ticks;
+		const ticks = me.ticks;
+		const meta = me._tickMeta;
 		const axisLength = me._length;
 		const ticksLimit = tickOpts.maxTicksLimit || axisLength / me._tickSize() + 1;
-		const majorIndices = tickOpts.major.enabled ? getMajorIndices(ticks) : [];
+		const majorIndices = tickOpts.major.enabled ? getMajorIndices(meta) : [];
 		const numMajorIndices = majorIndices.length;
 		const first = majorIndices[0];
 		const last = majorIndices[numMajorIndices - 1];
 		const newTicks = [];
+		const newMeta = [];
 
 		// If there are too many major ticks to display them all
 		if (numMajorIndices > ticksLimit) {
-			skipMajors(ticks, newTicks, majorIndices, numMajorIndices / ticksLimit);
-			return newTicks;
+			skipMajors(ticks, meta, newTicks, newMeta, majorIndices, numMajorIndices / ticksLimit);
+			me._tickMeta = newMeta;
+			me.ticks = newTicks;
+			return;
 		}
 
 		const spacing = calculateSpacing(majorIndices, ticks, axisLength, ticksLimit);
 
 		if (numMajorIndices > 0) {
 			let i, ilen;
 			const avgMajorSpacing = numMajorIndices > 1 ? Math.round((last - first) / (numMajorIndices - 1)) : null;
-			skip(ticks, newTicks, spacing, helpers.isNullOrUndef(avgMajorSpacing) ? 0 : first - avgMajorSpacing, first);
+			skip(ticks, meta, newTicks, newMeta, spacing, helpers.isNullOrUndef(avgMajorSpacing) ? 0 : first - avgMajorSpacing, first);
 			for (i = 0, ilen = numMajorIndices - 1; i < ilen; i++) {
-				skip(ticks, newTicks, spacing, majorIndices[i], majorIndices[i + 1]);
+				skip(ticks, meta, newTicks, newMeta, spacing, majorIndices[i], majorIndices[i + 1]);
 			}
-			skip(ticks, newTicks, spacing, last, helpers.isNullOrUndef(avgMajorSpacing) ? ticks.length : last + avgMajorSpacing);
-			return newTicks;
+			skip(ticks, meta, newTicks, newMeta, spacing, last, helpers.isNullOrUndef(avgMajorSpacing) ? ticks.length : last + avgMajorSpacing);
+			me._tickMeta = newMeta;
+			me.ticks = newTicks;
+			return;
 		}
-		skip(ticks, newTicks, spacing);
-		return newTicks;
+		skip(ticks, meta, newTicks, newMeta, spacing);
+		me._tickMeta = newMeta;
+		me.ticks = newTicks;
+		return;
 	}
 
 	/**
@@ -942,8 +961,8 @@ class Scale extends Element {
 
 		// Calculate space needed for 1 tick in axis direction.
 		return me.isHorizontal()
-			? h * cos > w * sin ? w / cos : h / sin
-			: h * sin < w * cos ? h / cos : w / sin;
+			? (h * cos > w * sin ? w / cos : h / sin)
+			: (h * sin < w * cos ? h / cos : w / sin);
 	}
 
 	/**
@@ -1105,7 +1124,7 @@ class Scale extends Element {
 		const tl = getTickMarkLength(options.gridLines);
 		const rotation = -helpers.math.toRadians(me.labelRotation);
 		const items = [];
-		let i, ilen, tick, label, x, y, textAlign, pixel, font, lineHeight, lineCount, textOffset;
+		let i, ilen, meta, label, x, y, textAlign, pixel, font, lineHeight, lineCount, textOffset;
 
 		if (position === 'top') {
 			y = me.bottom - tl - tickPadding;
@@ -1140,11 +1159,11 @@ class Scale extends Element {
 		}
 
 		for (i = 0, ilen = ticks.length; i < ilen; ++i) {
-			tick = ticks[i];
-			label = tick.label;
+			meta = me._tickMeta[i];
+			label = me.labels[i];
 
 			pixel = me.getPixelForTick(i) + optionTicks.labelOffset;
-			font = tick.major ? fonts.major : fonts.minor;
+			font = meta && meta.major ? fonts.major : fonts.minor;
 			lineHeight = font.lineHeight;
 			lineCount = isArray(label) ? label.length : 1;
 

src/core/core.ticks.js

@@ -33,7 +33,7 @@ module.exports = {
 		 */
 		linear: function(tickValue, index, ticks) {
 			// If we have lots of ticks, don't use the ones
-			var delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
+			var delta = ticks.length > 3 ? ticks[2] - ticks[1] : ticks[1] - ticks[0];
 
 			// If we have a number like 2.5 as the delta, figure out how many decimal places we need
 			if (Math.abs(delta) > 1) {
@@ -47,7 +47,7 @@ module.exports = {
 			var tickString = '';
 
 			if (tickValue !== 0) {
-				var maxTick = Math.max(Math.abs(ticks[0].value), Math.abs(ticks[ticks.length - 1].value));
+				var maxTick = Math.max(Math.abs(ticks[0]), Math.abs(ticks[ticks.length - 1]));
 				if (maxTick < 1e-4) { // all ticks are small numbers; use scientific notation
 					var logTick = math.log10(Math.abs(tickValue));
 					var numExponential = Math.floor(logTick) - Math.floor(logDelta);

src/helpers/helpers.math.js

@@ -55,6 +55,18 @@ export function almostWhole(x, epsilon) {
 	return ((rounded - epsilon) <= x) && ((rounded + epsilon) >= x);
 }
 
+export function _setMinAndMax(array, target) {
+	var i, ilen, value;
+
+	for (i = 0, ilen = array.length; i < ilen; i++) {
+		value = array[i];
+		if (!isNaN(value)) {
+			target.min = Math.min(target.min, value);
+			target.max = Math.max(target.max, value);
+		}
+	}
+}
+
 export function _setMinAndMaxByKey(array, target, property) {
 	var i, ilen, value;
 

src/scales/scale.category.js

@@ -35,9 +35,7 @@ class CategoryScale extends Scale {
 		me._valueRange = Math.max(labels.length - (offset ? 0 : 1), 1);
 		me._startValue = me.min - (offset ? 0.5 : 0);
 
-		return labels.map(function(l) {
-			return {value: l};
-		});
+		return labels;
 	}
 
 	getLabelForValue(value) {

src/scales/scale.linearbase.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import helpers from '../helpers/index';
-import {almostEquals, almostWhole, _decimalPlaces, _setMinAndMaxByKey, sign} from '../helpers/helpers.math';
+import {almostEquals, almostWhole, _decimalPlaces, _setMinAndMax, sign} from '../helpers/helpers.math';
 import Scale from '../core/core.scale';
 
 const isNullOrUndef = helpers.isNullOrUndef;
@@ -33,7 +33,7 @@ function generateTicks(generationOptions, dataRange) {
 	// Beyond MIN_SPACING floating point numbers being to lose precision
 	// such that we can't do the math necessary to generate ticks
 	if (spacing < MIN_SPACING && isNullOrUndef(min) && isNullOrUndef(max)) {
-		return [{value: rmin}, {value: rmax}];
+		return [rmin, rmax];
 	}
 
 	numSpaces = Math.ceil(rmax / spacing) - Math.floor(rmin / spacing);
@@ -75,11 +75,11 @@ function generateTicks(generationOptions, dataRange) {
 
 	niceMin = Math.round(niceMin * factor) / factor;
 	niceMax = Math.round(niceMax * factor) / factor;
-	ticks.push({value: isNullOrUndef(min) ? niceMin : min});
+	ticks.push(isNullOrUndef(min) ? niceMin : min);
 	for (var j = 1; j < numSpaces; ++j) {
-		ticks.push({value: Math.round((niceMin + j * spacing) * factor) / factor});
+		ticks.push(Math.round((niceMin + j * spacing) * factor) / factor);
 	}
-	ticks.push({value: isNullOrUndef(max) ? niceMax : max});
+	ticks.push(isNullOrUndef(max) ? niceMax : max);
 
 	return ticks;
 }
@@ -216,7 +216,7 @@ class LinearScaleBase extends Scale {
 
 		// At this point, we need to update our max and min given the tick values since we have expanded the
 		// range of the scale
-		_setMinAndMaxByKey(ticks, me, 'value');
+		_setMinAndMax(ticks, me);
 
 		if (opts.reverse) {
 			ticks.reverse();