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 1d3406a5796b64cc0d3bf9230b9eee03506c91ac..00c222c6ab3b593ee7d7f343786ca066392fec52 100644 (file)
--- 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 1335d0ae2ba099722cba9e44616e60313730ca38..c6dd6ef14279e716cb58c4e9557aec8c9c491a60 100644 (file)
--- 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 (file)
index 0000000..1e6ff1e
--- /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 (file)
index 0000000..ea13b69
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 8622d4570382c9bc356bd1a99db2c3be9fbb22e7..07f78d0823a617fa2bda935c55a2ca9403c4bf2d 100644 (file)
--- 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');
                });
        });