scale service - respect new weight scale option for axes ordering (#4094)

* respect new scale option 'order' when ordering scales

* scale service - respect new weight scale option for axes ordering

* added test for scale ordering by weight

* removed trailing spaces from layout weight scale order test

diff --git a/docs/axes/README.md b/docs/axes/README.md
index 9f53b14ab47a159fbd7f0cc3bfa4f8460cd315ff..b7de691eae9605228cc3d06d3414b581dc32ab7d 100644 (file)
--- a/docs/axes/README.md
+++ b/docs/axes/README.md
@@ -18,6 +18,7 @@ The following properties are common to all axes provided by Chart.js
 | ---- | ---- | ------- | -----------
 | `display` | `Boolean` | `true` | If set to `false` the axis is hidden from view. Overrides *gridLines.display*, *scaleLabel.display*, and *ticks.display*.
 | `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks)
+| `weight` | `Number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
 
 ## Callbacks
 There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process.

diff --git a/src/core/core.scaleService.js b/src/core/core.scaleService.js
index 9923bc922af1e775898c5ce9ba91485c09078efb..92e8136508b867f2c6d2012fa495d61c296cbcc9 100644 (file)
--- a/src/core/core.scaleService.js
+++ b/src/core/core.scaleService.js
@@ -36,6 +36,7 @@ module.exports = function(Chart) {
                                // Set ILayoutItem parameters for backwards compatibility
                                scale.fullWidth = scale.options.fullWidth;
                                scale.position = scale.options.position;
+                               scale.weight = scale.options.weight;
                                Chart.layoutService.addBox(chart, scale);
                        });
                }

diff --git a/test/specs/core.layoutService.tests.js b/test/specs/core.layoutService.tests.js
index d5f5fab9125b4c40144bc38e2f780c3580728d91..b3d57642666ba207979a2a0e4802fe8bbf33a104 100644 (file)
--- a/test/specs/core.layoutService.tests.js
+++ b/test/specs/core.layoutService.tests.js
@@ -428,5 +428,126 @@ describe('Test the layout service', function() {
                        expect(yAxis.left).toBe(legend.right);
                        expect(xAxis.bottom).toBe(title.top);
                });
+
+               it('should correctly set weights of scales and order them', function() {
+                       var chart = window.acquireChart({
+                               type: 'bar',
+                               data: {
+                                       datasets: [
+                                               {
+                                                       data: [10, 5, 0, 25, 78, -10]
+                                               }
+                                       ],
+                                       labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6']
+                               },
+                               options: {
+                                       scales: {
+                                               xAxes: [{
+                                                       id: 'xScale0',
+                                                       type: 'category',
+                                                       display: true,
+                                                       weight: 1
+                                               }, {
+                                                       id: 'xScale1',
+                                                       type: 'category',
+                                                       display: true,
+                                                       weight: 2
+                                               }, {
+                                                       id: 'xScale2',
+                                                       type: 'category',
+                                                       display: true
+                                               }, {
+                                                       id: 'xScale3',
+                                                       type: 'category',
+                                                       display: true,
+                                                       position: 'top',
+                                                       weight: 1
+                                               }, {
+                                                       id: 'xScale4',
+                                                       type: 'category',
+                                                       display: true,
+                                                       position: 'top',
+                                                       weight: 2
+                                               }],
+                                               yAxes: [{
+                                                       id: 'yScale0',
+                                                       type: 'linear',
+                                                       display: true,
+                                                       weight: 1
+                                               }, {
+                                                       id: 'yScale1',
+                                                       type: 'linear',
+                                                       display: true,
+                                                       weight: 2
+                                               }, {
+                                                       id: 'yScale2',
+                                                       type: 'linear',
+                                                       display: true
+                                               }, {
+                                                       id: 'yScale3',
+                                                       type: 'linear',
+                                                       display: true,
+                                                       position: 'right',
+                                                       weight: 1
+                                               }, {
+                                                       id: 'yScale4',
+                                                       type: 'linear',
+                                                       display: true,
+                                                       position: 'right',
+                                                       weight: 2
+                                               }]
+                                       }
+                               }
+                       }, {
+                               canvas: {
+                                       height: 150,
+                                       width: 250
+                               }
+                       });
+
+                       var xScale0 = chart.scales.xScale0;
+                       var xScale1 = chart.scales.xScale1;
+                       var xScale2 = chart.scales.xScale2;
+                       var xScale3 = chart.scales.xScale3;
+                       var xScale4 = chart.scales.xScale4;
+
+                       var yScale0 = chart.scales.yScale0;
+                       var yScale1 = chart.scales.yScale1;
+                       var yScale2 = chart.scales.yScale2;
+                       var yScale3 = chart.scales.yScale3;
+                       var yScale4 = chart.scales.yScale4;
+
+                       expect(xScale0.weight).toBe(1);
+                       expect(xScale1.weight).toBe(2);
+                       expect(xScale2.weight).toBe(0);
+
+                       expect(xScale3.weight).toBe(1);
+                       expect(xScale4.weight).toBe(2);
+
+                       expect(yScale0.weight).toBe(1);
+                       expect(yScale1.weight).toBe(2);
+                       expect(yScale2.weight).toBe(0);
+
+                       expect(yScale3.weight).toBe(1);
+                       expect(yScale4.weight).toBe(2);
+
+                       var isOrderCorrect = false;
+
+                       // bottom axes
+                       isOrderCorrect = xScale2.top < xScale0.top && xScale0.top < xScale1.top;
+                       expect(isOrderCorrect).toBe(true);
+
+                       // top axes
+                       isOrderCorrect = xScale4.top < xScale3.top;
+                       expect(isOrderCorrect).toBe(true);
+
+                       // left axes
+                       isOrderCorrect = yScale1.left < yScale0.left && yScale0.left < yScale2.left;
+                       expect(isOrderCorrect).toBe(true);
+
+                       // right axes
+                       isOrderCorrect = yScale3.left < yScale4.left;
+                       expect(isOrderCorrect).toBe(true);
+               });
        });
 });