From 2225ed51fd11e5874992201bfcd7c6435397c844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20Dub=C3=A9?= Date: Wed, 19 Sep 2018 11:16:25 -0400 Subject: [PATCH 1/4] Introduce the 'minSize' dataset property for bar controller --- docs/charts/bar.md | 1 + src/controllers/controller.bar.js | 11 +++++++++++ 2 files changed, 12 insertions(+) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index e4d146b2c67..6be59ae6484 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -77,6 +77,7 @@ Some properties can be specified as an array. If these are set to an array value | `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the bars when hovered. | `hoverBorderColor` | `Color/Color[]` | The stroke colour of the bars when hovered. | `hoverBorderWidth` | `Number/Number[]` | The stroke width of the bars when hovered. +| `minSize` | `Number` | The minimum size (height for vertical, width for horizontal) in pixels bars should be rendered. ### borderSkipped This setting is used to avoid drawing the bar stroke at the base of the fill. In general, this does not need to be changed except when creating chart types that derive from a bar chart. diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index cadae3fdb6c..76076457a32 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -382,8 +382,10 @@ module.exports = function(Chart) { var chart = me.chart; var meta = me.getMeta(); var scale = me.getValueScale(); + var isHorizontal = scale.isHorizontal(); var datasets = chart.data.datasets; var value = scale.getRightValue(datasets[datasetIndex].data[index]); + var minSize = datasets[datasetIndex].minSize; var stacked = scale.options.stacked; var stack = meta.stack; var start = 0; @@ -410,6 +412,15 @@ module.exports = function(Chart) { head = scale.getPixelForValue(start + value); size = (head - base) / 2; + if (minSize !== undefined && Math.abs(size) < minSize) { + size = minSize; + if (value >= 0 && !isHorizontal || value < 0 && isHorizontal) { + head = base - minSize; + } else { + head = base + minSize; + } + } + return { size: size, base: base, From 771dc20827f1566d8d5cb8c8efd2b6b68cd9b858 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20Dub=C3=A9?= Date: Tue, 25 Sep 2018 09:29:56 -0400 Subject: [PATCH 2/4] dataset.minSize --> scale.minBarLength --- docs/charts/bar.md | 2 +- src/controllers/controller.bar.js | 10 +++++----- src/scales/scale.linear.js | 2 ++ 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 6be59ae6484..eaaad0b58ce 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -77,7 +77,6 @@ Some properties can be specified as an array. If these are set to an array value | `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the bars when hovered. | `hoverBorderColor` | `Color/Color[]` | The stroke colour of the bars when hovered. | `hoverBorderWidth` | `Number/Number[]` | The stroke width of the bars when hovered. -| `minSize` | `Number` | The minimum size (height for vertical, width for horizontal) in pixels bars should be rendered. ### borderSkipped This setting is used to avoid drawing the bar stroke at the base of the fill. In general, this does not need to be changed except when creating chart types that derive from a bar chart. @@ -98,6 +97,7 @@ The bar chart defines the following configuration options. These options are mer | `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage) | `barThickness` | `Number/String` | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness) | `maxBarThickness` | `Number` | | Set this to ensure that bars are not sized thicker than this. +| `minBarLength` | `Number` | | Set this to ensure that bars have a minimum length in pixels. | `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines) ### barThickness diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 76076457a32..6ebae8a62ae 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -385,7 +385,7 @@ module.exports = function(Chart) { var isHorizontal = scale.isHorizontal(); var datasets = chart.data.datasets; var value = scale.getRightValue(datasets[datasetIndex].data[index]); - var minSize = datasets[datasetIndex].minSize; + var minBarLength = scale.minBarLength; var stacked = scale.options.stacked; var stack = meta.stack; var start = 0; @@ -412,12 +412,12 @@ module.exports = function(Chart) { head = scale.getPixelForValue(start + value); size = (head - base) / 2; - if (minSize !== undefined && Math.abs(size) < minSize) { - size = minSize; + if (minBarLength !== undefined && Math.abs(size) < minBarLength) { + size = minBarLength; if (value >= 0 && !isHorizontal || value < 0 && isHorizontal) { - head = base - minSize; + head = base - minBarLength; } else { - head = base + minSize; + head = base + minBarLength; } } diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js index a980615c5d1..f25bc1b1889 100644 --- a/src/scales/scale.linear.js +++ b/src/scales/scale.linear.js @@ -30,6 +30,8 @@ module.exports = function(Chart) { return isHorizontal ? meta.xAxisID === me.id : meta.yAxisID === me.id; } + me.minBarLength = opts.minBarLength; + // First Calculate the range me.min = null; me.max = null; From 7f898314efea421db5034fe1e3db751492db736d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20Dub=C3=A9?= Date: Tue, 25 Sep 2018 13:36:35 -0400 Subject: [PATCH 3/4] Add 2 unit tests for minBarLength --- test/specs/scale.linear.tests.js | 48 ++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js index 380feaac09d..959a76db01e 100644 --- a/test/specs/scale.linear.tests.js +++ b/test/specs/scale.linear.tests.js @@ -1046,4 +1046,52 @@ describe('Linear Scale', function() { expect(chart.scales['x-axis-0'].max).toEqual(0); }); + + it('minBarLength settings should be used on Y axis on bar chart', function() { + var minBarLength = 4; + var chart = window.acquireChart({ + type: 'bar', + data: { + datasets: [{ + data: [0.05, -0.05, 10, 15, 20, 25, 30, 35] + }] + }, + options: { + scales: { + yAxes: [{ + minBarLength: minBarLength + }] + } + } + }); + + var data = chart.getDatasetMeta(0).data; + + expect(data[0]._model.base - minBarLength).toEqual(data[0]._model.y); + expect(data[1]._model.base + minBarLength).toEqual(data[1]._model.y); + }); + + it('minBarLength settings should be used on X axis on horizontalBar chart', function() { + var minBarLength = 4; + var chart = window.acquireChart({ + type: 'horizontalBar', + data: { + datasets: [{ + data: [0.05, -0.05, 10, 15, 20, 25, 30, 35] + }] + }, + options: { + scales: { + xAxes: [{ + minBarLength: minBarLength + }] + } + } + }); + + var data = chart.getDatasetMeta(0).data; + + expect(data[0]._model.base + minBarLength).toEqual(data[0]._model.x); + expect(data[1]._model.base - minBarLength).toEqual(data[1]._model.x); + }); }); From a5670305ea43b2116e8c72298ee3981d73e54d20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20Dub=C3=A9?= Date: Wed, 17 Oct 2018 10:07:35 -0400 Subject: [PATCH 4/4] Do not expose minBarLength --- src/controllers/controller.bar.js | 2 +- src/scales/scale.linear.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 6ebae8a62ae..74e6d2289f0 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -385,7 +385,7 @@ module.exports = function(Chart) { var isHorizontal = scale.isHorizontal(); var datasets = chart.data.datasets; var value = scale.getRightValue(datasets[datasetIndex].data[index]); - var minBarLength = scale.minBarLength; + var minBarLength = scale.options.minBarLength; var stacked = scale.options.stacked; var stack = meta.stack; var start = 0; diff --git a/src/scales/scale.linear.js b/src/scales/scale.linear.js index f25bc1b1889..a980615c5d1 100644 --- a/src/scales/scale.linear.js +++ b/src/scales/scale.linear.js @@ -30,8 +30,6 @@ module.exports = function(Chart) { return isHorizontal ? meta.xAxisID === me.id : meta.yAxisID === me.id; } - me.minBarLength = opts.minBarLength; - // First Calculate the range me.min = null; me.max = null;