From 22e367c44537d9f23c214809d3c993209992592b Mon Sep 17 00:00:00 2001
From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Fri, 29 May 2020 23:27:10 +0300
Subject: [PATCH] Make indexable options looping (#7442)

* Make indexable options looping
* Migration note
---
 docs/docs/getting-started/v3-migration.md     |   6 +++
 src/helpers/helpers.options.js                |   2 +-
 .../backgroundColor/loopable.js               |  45 ++++++++++++++++++
 .../backgroundColor/loopable.png              | Bin 0 -> 6627 bytes
 test/specs/helpers.options.tests.js           |  11 +++--
 5 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 test/fixtures/controller.bar/backgroundColor/loopable.js
 create mode 100644 test/fixtures/controller.bar/backgroundColor/loopable.png

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 0000000000000000000000000000000000000000..ea13b696d532fe1489cdf356feefdaf372f2ebd5
GIT binary patch
literal 6627
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
Rwn_kf)`v!|(Y}~g@CycJqP_qC

literal 0
Hc-jL100001

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');
 		});
 	});
-- 
2.47.2