Cache data limits to ensure they are only computed once per update (#8234)

* Cache data limits to ensure they are only computed once per updaet
* Replace `invalidateCaches` on scales with `beforeLayout`

src/core/core.datasetController.js

@@ -415,7 +415,7 @@ export default class DatasetController {
 	parse(start, count) {
 		const me = this;
 		const {_cachedMeta: meta, _data: data} = me;
-		const {iScale, vScale, _stacked} = meta;
+		const {iScale, _stacked} = meta;
 		const iAxis = iScale.axis;
 		let sorted = true;
 		let i, parsed, cur, prev;
@@ -453,9 +453,6 @@ export default class DatasetController {
 		if (_stacked) {
 			updateStacks(me, parsed);
 		}
-
-		iScale.invalidateCaches();
-		vScale.invalidateCaches();
 	}
 
 	/**

src/core/core.layouts.js

@@ -319,6 +319,14 @@ export default {
 		const verticalBoxes = boxes.vertical;
 		const horizontalBoxes = boxes.horizontal;
 
+		// Before any changes are made, notify boxes that an update is about to being
+		// This is used to clear any cached data (e.g. scale limits)
+		each(chart.boxes, box => {
+			if (typeof box.beforeLayout === 'function') {
+				box.beforeLayout();
+			}
+		});
+
 		// Essentially we now have any number of boxes on each of the 4 sides.
 		// Our canvas looks like the following.
 		// The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and

src/core/core.scale.js

@@ -384,6 +384,7 @@ export default class Scale extends Element {
 		this._ticksLength = 0;
 		this._borderValue = 0;
 		this._cache = {};
+		this._dataLimitsCached = false;
 		this.$context = undefined;
 	}
 
@@ -466,10 +467,6 @@ export default class Scale extends Element {
 		};
 	}
 
-	invalidateCaches() {
-		this._cache = {};
-	}
-
 	/**
 	 * Get the padding needed for the scale
 	 * @return {{top: number, left: number, bottom: number, right: number}} the necessary padding
@@ -502,6 +499,12 @@ export default class Scale extends Element {
 		return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels || [];
 	}
 
+	// When a new layout is created, reset the data limits cache
+	beforeLayout() {
+		this._cache = {};
+		this._dataLimitsCached = false;
+	}
+
 	// These methods are ordered by lifecycle. Utilities then follow.
 	// Any function defined here is inherited by all scale types.
 	// Any function can be extended by the scale type
@@ -547,9 +550,12 @@ export default class Scale extends Element {
 		me.afterSetDimensions();
 
 		// Data min/max
-		me.beforeDataLimits();
-		me.determineDataLimits();
-		me.afterDataLimits();
+		if (!me._dataLimitsCached) {
+			me.beforeDataLimits();
+			me.determineDataLimits();
+			me.afterDataLimits();
+			me._dataLimitsCached = true;
+		}
 
 		me.beforeBuildTicks();
 

src/scales/scale.time.js

@@ -249,7 +249,8 @@ export default class TimeScale extends Scale {
 		return parse(this, raw);
 	}
 
-	invalidateCaches() {
+	beforeLayout() {
+		super.beforeLayout();
 		this._cache = {
 			data: [],
 			labels: [],

types/index.esm.d.ts

@@ -718,7 +718,12 @@ export interface LayoutItem {
 	/**
 	 * Returns an object with padding on the edges
 	 */
-	getPadding?(): ChartArea;
+  getPadding?(): ChartArea;
+  
+  /**
+   * Called before the layout process starts
+   */
+  beforeLayout?(): void;
 
 	/**
 	 *  Width of item. Must be valid after update()
@@ -1255,7 +1260,7 @@ export interface Scale<O extends CoreScaleOptions = CoreScaleOptions> extends El
 	parse(raw: any, index: number): any;
 	getUserBounds(): { min: number; max: number; minDefined: boolean; maxDefined: boolean };
 	getMinMax(canStack: boolean): { min: number; max: number };
-	invalidateCaches(): void;
+	beforeLayout(): void;
 	getPadding(): ChartArea;
 	getTicks(): Tick[];
 	getLabels(): string[];