From 2b57660abaed8b98c8ed8d472c717aad805a81c2 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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
W)sv^Ui_y;;*ccYQPV-WF;lBX}W}?0T

literal 0
HcmV?d00001

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