From 785c0167668b9e65e66fc27e9ba9f48da052a775 Mon Sep 17 00:00:00 2001 From: andig Date: Sat, 15 Jul 2017 10:59:33 +0200 Subject: [PATCH 1/5] Allow category label definition at axis level --- docs/axes/cartesian/category.md | 32 ++++++++++++++++++++++++++++++++ src/scales/scale.category.js | 2 +- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md index 41bfd74d7ed..697cd38168a 100644 --- a/docs/axes/cartesian/category.md +++ b/docs/axes/cartesian/category.md @@ -2,6 +2,38 @@ The category scale will be familiar to those who have used v1.0. Labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes. +Specifying any of the settings above implicitly defines the x axis as `type: category`if not defined otherwise. For more fine-grained control of category labels, it is (as of 2.7) also possible to add `labels` as part of the explicit category axis definition. + +## Category Axis Definition + +Implicit: + +```javascript +let chart = new Chart(ctx, { + type: ... + data: { + labels: ['January', 'February', 'March', 'April', 'May', 'June'], + datasets: ... + }, +}); +``` +Explicit: + +```javascript +let chart = new Chart(ctx, { + type: ... + data: ... + options: { + scales: { + xAxes: [{ + type: 'category', + labels: ['January', 'February', 'March', 'April', 'May', 'June'], + }] + } + } +}); +``` + ## Tick Configuration Options The category scale provides the following options for configuring tick marks. They are nested in the `ticks` sub object. These options extend the [common tick configuration](README.md#tick-configuration). diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 6b1532c1714..d5c21e788e4 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -15,7 +15,7 @@ module.exports = function(Chart) { */ getLabels: function() { var data = this.chart.data; - return (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels; + return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels; }, determineDataLimits: function() { From fafda17fe9fd8b6417e500f33343384dc7d9a307 Mon Sep 17 00:00:00 2001 From: andig Date: Sun, 16 Jul 2017 12:03:35 +0200 Subject: [PATCH 2/5] Add test --- docs/axes/cartesian/category.md | 8 ++++---- test/specs/scale.category.tests.js | 32 +++++++++++++++++++++++++++++- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md index 697cd38168a..ceb2137f841 100644 --- a/docs/axes/cartesian/category.md +++ b/docs/axes/cartesian/category.md @@ -1,12 +1,12 @@ # Category Cartesian Axis -The category scale will be familiar to those who have used v1.0. Labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes. +The category scale will be familiar to those who have used v1.0. If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes. -Specifying any of the settings above implicitly defines the x axis as `type: category`if not defined otherwise. For more fine-grained control of category labels, it is (as of 2.7) also possible to add `labels` as part of the explicit category axis definition. +Specifying any of the settings above implicitly defines the x axis as `type: category`if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults for bar charts. ## Category Axis Definition -Implicit: +Globally: ```javascript let chart = new Chart(ctx, { @@ -17,7 +17,7 @@ let chart = new Chart(ctx, { }, }); ``` -Explicit: +As part of axis definition: ```javascript let chart = new Chart(ctx, { diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js index d63fc59bf0e..eeb54206e0d 100644 --- a/test/specs/scale.category.tests.js +++ b/test/specs/scale.category.tests.js @@ -108,7 +108,7 @@ describe('Category scale tests', function() { expect(scale.ticks).toEqual(mockData.xLabels); }); - it('Should generate ticks from the data xLabels', function() { + it('Should generate ticks from the data yLabels', function() { var scaleID = 'myScale'; var mockData = { @@ -136,6 +136,36 @@ describe('Category scale tests', function() { expect(scale.ticks).toEqual(mockData.yLabels); }); + it('Should generate ticks from the axis labels', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + xAxisID: scaleID, + data: [10, 5, 0, 25, 78] + }] + }; + + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); + config.position = 'left'; // y axis + config.id = scaleID; + config.labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']; + + var Constructor = Chart.scaleService.getScaleConstructor('category'); + var scale = new Constructor({ + ctx: {}, + options: config, + chart: { + data: mockData + }, + id: scaleID + }); + + scale.determineDataLimits(); + scale.buildTicks(); + expect(scale.ticks).toEqual(config.labels); + }); + it ('should get the correct label for the index', function() { var scaleID = 'myScale'; From fbfbb0342e20e1910ae36198034ea4e51724e79f Mon Sep 17 00:00:00 2001 From: andig Date: Sun, 16 Jul 2017 15:03:07 +0200 Subject: [PATCH 3/5] Update docs --- docs/axes/cartesian/category.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md index ceb2137f841..9734e4e962d 100644 --- a/docs/axes/cartesian/category.md +++ b/docs/axes/cartesian/category.md @@ -1,8 +1,8 @@ # Category Cartesian Axis -The category scale will be familiar to those who have used v1.0. If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes. +If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes. -Specifying any of the settings above implicitly defines the x axis as `type: category`if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults for bar charts. +Specifying any of the settings above defines the x axis as `type: category` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults. ## Category Axis Definition From 4488813c75a3e53ce54fea6217336d5a8340cb0c Mon Sep 17 00:00:00 2001 From: andig Date: Sun, 16 Jul 2017 15:13:46 +0200 Subject: [PATCH 4/5] Update test and docs --- docs/axes/cartesian/category.md | 1 + test/specs/scale.category.tests.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md index 9734e4e962d..38c306712bb 100644 --- a/docs/axes/cartesian/category.md +++ b/docs/axes/cartesian/category.md @@ -40,6 +40,7 @@ The category scale provides the following options for configuring tick marks. Th | Name | Type | Default | Description | -----| ---- | --------| ----------- +| labels | Array[String] | - | An array of labels to display. | `min` | `String` | | The minimum item to display. [more...](#min-max-configuration) | `max` | `String` | | The maximum item to display. [more...](#min-max-configuration) diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js index eeb54206e0d..8c0d0c89101 100644 --- a/test/specs/scale.category.tests.js +++ b/test/specs/scale.category.tests.js @@ -148,7 +148,6 @@ describe('Category scale tests', function() { var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); config.position = 'left'; // y axis - config.id = scaleID; config.labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']; var Constructor = Chart.scaleService.getScaleConstructor('category'); From 7e297196429cb10a90c004a873048ff4f5991e79 Mon Sep 17 00:00:00 2001 From: andig Date: Mon, 17 Jul 2017 09:33:05 +0200 Subject: [PATCH 5/5] Make test more robust --- test/specs/scale.category.tests.js | 37 ++++++++++++------------------ 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js index 8c0d0c89101..31c0a4e6fee 100644 --- a/test/specs/scale.category.tests.js +++ b/test/specs/scale.category.tests.js @@ -137,32 +137,25 @@ describe('Category scale tests', function() { }); it('Should generate ticks from the axis labels', function() { - var scaleID = 'myScale'; - - var mockData = { - datasets: [{ - xAxisID: scaleID, + var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']; + var chart = window.acquireChart({ + type: 'line', + data: { data: [10, 5, 0, 25, 78] - }] - }; - - var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); - config.position = 'left'; // y axis - config.labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']; - - var Constructor = Chart.scaleService.getScaleConstructor('category'); - var scale = new Constructor({ - ctx: {}, - options: config, - chart: { - data: mockData }, - id: scaleID + options: { + scales: { + xAxes: [{ + id: 'x', + type: 'category', + labels: labels + }] + } + } }); - scale.determineDataLimits(); - scale.buildTicks(); - expect(scale.ticks).toEqual(config.labels); + var scale = chart.scales.x; + expect(scale.ticks).toEqual(labels); }); it ('should get the correct label for the index', function() {