From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Fri, 29 May 2020 20:27:10 +0000 (+0300)
Subject: Make indexable options looping (#7442)
X-Git-Tag: v3.0.0-beta.2~115
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=22e367c44537d9f23c214809d3c993209992592b;p=thirdparty%2FChart.js.git

Make indexable options looping (#7442)

* Make indexable options looping
* Migration note
---

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 1d3406a57..00c222c6a 100644
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -25,6 +25,12 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 
 A number of changes were made to the configuration options passed to the `Chart` constructor. Those changes are documented below.
 
+#### Generic changes
+
+* Indexable options are now looping. `backgroundColor: ['red', 'green']` will result in alternating `'red'` / `'green'` if there are more than 2 data points.
+
+#### Specific changes
+
 * `hover.animationDuration` is now configured in `animation.active.duration`
 * `responsiveAnimationDuration` is now configured in `animation.resize.duration`
 * Polar area `startAngle` option is now consistent with `Radar`, 0 is at top and value is in degrees. Default is changed from `-½π` to  `0`.
diff --git a/src/helpers/helpers.options.js b/src/helpers/helpers.options.js
index 1335d0ae2..c6dd6ef14 100644
--- a/src/helpers/helpers.options.js
+++ b/src/helpers/helpers.options.js
@@ -120,7 +120,7 @@ export function resolve(inputs, context, index, info) {
 			cacheable = false;
 		}
 		if (index !== undefined && isArray(value)) {
-			value = value[index];
+			value = value[index % value.length];
 			cacheable = false;
 		}
 		if (value !== undefined) {
diff --git a/test/fixtures/controller.bar/backgroundColor/loopable.js b/test/fixtures/controller.bar/backgroundColor/loopable.js
new file mode 100644
index 000000000..1e6ff1ee8
--- /dev/null
+++ b/test/fixtures/controller.bar/backgroundColor/loopable.js
@@ -0,0 +1,45 @@
+module.exports = {
+	config: {
+		type: 'bar',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 3, 4, 5, 6],
+					backgroundColor: [
+						'#ff0000',
+						'#00ff00',
+						'#0000ff'
+					]
+				},
+				{
+					// option in element (fallback)
+					data: [6, 5, 4, 3, 2, 1],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				rectangle: {
+					backgroundColor: [
+						'#000000',
+						'#888888'
+					]
+				}
+			},
+			scales: {
+				x: {display: false},
+				y: {display: false}
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};
diff --git a/test/fixtures/controller.bar/backgroundColor/loopable.png b/test/fixtures/controller.bar/backgroundColor/loopable.png
new file mode 100644
index 000000000..ea13b696d
Binary files /dev/null and b/test/fixtures/controller.bar/backgroundColor/loopable.png differ
diff --git a/test/specs/helpers.options.tests.js b/test/specs/helpers.options.tests.js
index 8622d4570..07f78d082 100644
--- a/test/specs/helpers.options.tests.js
+++ b/test/specs/helpers.options.tests.js
@@ -176,9 +176,14 @@ describe('Chart.helpers.options', function() {
 		});
 		it ('should fallback if an indexable option value is undefined', function() {
 			var input = [42, undefined, 'bar'];
-			expect(resolve([input], undefined, 5)).toBe(undefined);
+			expect(resolve([input], undefined, 1)).toBe(undefined);
 			expect(resolve([input, 'foo'], undefined, 1)).toBe('foo');
-			expect(resolve([input, 'foo'], undefined, 5)).toBe('foo');
+		});
+		it ('should loop if an indexable option index is out of bounds', function() {
+			var input = [42, undefined, 'bar'];
+			expect(resolve([input], undefined, 3)).toBe(42);
+			expect(resolve([input, 'foo'], undefined, 4)).toBe('foo');
+			expect(resolve([input, 'foo'], undefined, 5)).toBe('bar');
 		});
 		it ('should not handle indexable options if index is undefined', function() {
 			var array = [42, 'foo', 'bar'];
@@ -211,7 +216,7 @@ describe('Chart.helpers.options', function() {
 			};
 			expect(resolve([input, 'foo'], {v: 42}, 0)).toBe(42);
 			expect(resolve([input, 'foo'], {v: 42}, 1)).toBe('foo');
-			expect(resolve([input, 'foo'], {v: 42}, 5)).toBe('foo');
+			expect(resolve([input, 'foo'], {v: 42}, 5)).toBe('bar');
 			expect(resolve([input, ['foo', 'bar']], {v: 42}, 1)).toBe('bar');
 		});
 	});