From a566d16e697c895bcd719ab187c57f8c90daa54c Mon Sep 17 00:00:00 2001 From: Simon Brunel Date: Fri, 20 May 2016 20:17:28 +0200 Subject: [PATCH] Refactor scale base pixel and point calculation. --- src/controllers/controller.bar.js | 71 ++++------------------------ src/controllers/controller.bubble.js | 24 +--------- src/controllers/controller.line.js | 34 ++++--------- src/controllers/controller.radar.js | 15 +----- src/core/core.scale.js | 12 +++++ src/scales/scale.radialLinear.js | 13 +++++ 6 files changed, 46 insertions(+), 123 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index fc7f1eb2b..7a6915cf6 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -84,18 +84,7 @@ module.exports = function(Chart) { var meta = this.getMeta(); var xScale = this.getScaleForId(meta.xAxisID); var yScale = this.getScaleForId(meta.yAxisID); - - var yScalePoint; - - if (yScale.min < 0 && yScale.max < 0) { - // all less than 0. use the top - yScalePoint = yScale.getPixelForValue(yScale.max); - } else if (yScale.min > 0 && yScale.max > 0) { - yScalePoint = yScale.getPixelForValue(yScale.min); - } else { - yScalePoint = yScale.getPixelForValue(0); - } - + var scaleBase = yScale.getBasePixel(); var rectangleElementOptions = this.chart.options.elements.rectangle; var custom = rectangle.custom || {}; var dataset = this.getDataset(); @@ -112,14 +101,14 @@ module.exports = function(Chart) { // Desired view properties _model: { x: this.calculateBarX(index, this.index), - y: reset ? yScalePoint : this.calculateBarY(index, this.index), + y: reset ? scaleBase : this.calculateBarY(index, this.index), // Tooltip label: this.chart.data.labels[index], datasetLabel: dataset.label, // Appearance - base: reset ? yScalePoint : this.calculateBarBase(this.index, index), + base: reset ? scaleBase : this.calculateBarBase(this.index, index), width: this.calculateBarWidth(index), backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, @@ -132,9 +121,7 @@ module.exports = function(Chart) { calculateBarBase: function(datasetIndex, index) { var meta = this.getMeta(); - var xScale = this.getScaleForId(meta.xAxisID); var yScale = this.getScaleForId(meta.yAxisID); - var base = 0; if (yScale.options.stacked) { @@ -163,24 +150,12 @@ module.exports = function(Chart) { return yScale.getPixelForValue(base); } - base = yScale.getPixelForValue(yScale.min); - - if (yScale.beginAtZero || ((yScale.min <= 0 && yScale.max >= 0) || (yScale.min >= 0 && yScale.max <= 0))) { - base = yScale.getPixelForValue(0, 0); - //base += yScale.options.gridLines.lineWidth; - } else if (yScale.min < 0 && yScale.max < 0) { - // All values are negative. Use the top as the base - base = yScale.getPixelForValue(yScale.max); - } - - return base; - + return yScale.getBasePixel(); }, getRuler: function(index) { var meta = this.getMeta(); var xScale = this.getScaleForId(meta.xAxisID); - var yScale = this.getScaleForId(meta.yAxisID); var datasetCount = this.getBarCount(); var tickWidth; @@ -237,7 +212,6 @@ module.exports = function(Chart) { calculateBarX: function(index, datasetIndex) { var meta = this.getMeta(); - var yScale = this.getScaleForId(meta.yAxisID); var xScale = this.getScaleForId(meta.xAxisID); var barIndex = this.getBarIndex(datasetIndex); @@ -259,9 +233,7 @@ module.exports = function(Chart) { calculateBarY: function(index, datasetIndex) { var meta = this.getMeta(); - var xScale = this.getScaleForId(meta.xAxisID); var yScale = this.getScaleForId(meta.yAxisID); - var value = this.getDataset().data[index]; if (yScale.options.stacked) { @@ -387,21 +359,11 @@ module.exports = function(Chart) { var meta = this.getMeta(); var xScale = this.getScaleForId(meta.xAxisID); var yScale = this.getScaleForId(meta.yAxisID); - - var xScalePoint; - - if (xScale.min < 0 && xScale.max < 0) { - // all less than 0. use the right - xScalePoint = xScale.getPixelForValue(xScale.max); - } else if (xScale.min > 0 && xScale.max > 0) { - xScalePoint = xScale.getPixelForValue(xScale.min); - } else { - xScalePoint = xScale.getPixelForValue(0); - } - + var scaleBase = xScale.getBasePixel(); var custom = rectangle.custom || {}; var dataset = this.getDataset(); var rectangleElementOptions = this.chart.options.elements.rectangle; + helpers.extend(rectangle, { // Utility _chart: this.chart.chart, @@ -412,7 +374,7 @@ module.exports = function(Chart) { // Desired view properties _model: { - x: reset ? xScalePoint : this.calculateBarX(index, this.index), + x: reset ? scaleBase : this.calculateBarX(index, this.index), y: this.calculateBarY(index, this.index), // Tooltip @@ -420,7 +382,7 @@ module.exports = function(Chart) { datasetLabel: dataset.label, // Appearance - base: reset ? xScalePoint : this.calculateBarBase(this.index, index), + base: reset ? scaleBase : this.calculateBarBase(this.index, index), height: this.calculateBarHeight(index), backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, @@ -506,8 +468,6 @@ module.exports = function(Chart) { calculateBarBase: function (datasetIndex, index) { var meta = this.getMeta(); var xScale = this.getScaleForId(meta.xAxisID); - var yScale = this.getScaleForId(meta.yAxisID); - var base = 0; if (xScale.options.stacked) { @@ -535,21 +495,11 @@ module.exports = function(Chart) { return xScale.getPixelForValue(base); } - base = xScale.getPixelForValue(xScale.min); - - if (xScale.beginAtZero || ((xScale.min <= 0 && xScale.max >= 0) || (xScale.min >= 0 && xScale.max <= 0))) { - base = xScale.getPixelForValue(0, 0); - } else if (xScale.min < 0 && xScale.max < 0) { - // All values are negative. Use the right as the base - base = xScale.getPixelForValue(xScale.max); - } - - return base; + return xScale.getBasePixel(); }, getRuler: function (index) { var meta = this.getMeta(); - var xScale = this.getScaleForId(meta.xAxisID); var yScale = this.getScaleForId(meta.yAxisID); var datasetCount = this.getBarCount(); @@ -592,8 +542,6 @@ module.exports = function(Chart) { calculateBarX: function (index, datasetIndex) { var meta = this.getMeta(); var xScale = this.getScaleForId(meta.xAxisID); - var yScale = this.getScaleForId(meta.yAxisID); - var value = this.getDataset().data[index]; if (xScale.options.stacked) { @@ -626,7 +574,6 @@ module.exports = function(Chart) { calculateBarY: function (index, datasetIndex) { var meta = this.getMeta(); var yScale = this.getScaleForId(meta.yAxisID); - var xScale = this.getScaleForId(meta.xAxisID); var barIndex = this.getBarIndex(datasetIndex); var ruler = this.getRuler(index); diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 581287bd5..1faa10f65 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -64,17 +64,6 @@ module.exports = function(Chart) { update: function update(reset) { var meta = this.getMeta(); var points = meta.data; - var yScale = this.getScaleForId(meta.yAxisID); - var xScale = this.getScaleForId(meta.xAxisID); - var scaleBase; - - if (yScale.min < 0 && yScale.max < 0) { - scaleBase = yScale.getPixelForValue(yScale.max); - } else if (yScale.min > 0 && yScale.max > 0) { - scaleBase = yScale.getPixelForValue(yScale.min); - } else { - scaleBase = yScale.getPixelForValue(0); - } // Update Points helpers.each(points, function(point, index) { @@ -85,23 +74,14 @@ module.exports = function(Chart) { updateElement: function(point, index, reset) { var meta = this.getMeta(); - var yScale = this.getScaleForId(meta.yAxisID); var xScale = this.getScaleForId(meta.xAxisID); - var scaleBase; + var yScale = this.getScaleForId(meta.yAxisID); var custom = point.custom || {}; var dataset = this.getDataset(); var data = dataset.data[index]; var pointElementOptions = this.chart.options.elements.point; - if (yScale.min < 0 && yScale.max < 0) { - scaleBase = yScale.getPixelForValue(yScale.max); - } else if (yScale.min > 0 && yScale.max > 0) { - scaleBase = yScale.getPixelForValue(yScale.min); - } else { - scaleBase = yScale.getPixelForValue(0); - } - helpers.extend(point, { // Utility _chart: this.chart.chart, @@ -113,7 +93,7 @@ module.exports = function(Chart) { // Desired view properties _model: { x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(data, index, this.index, this.chart.isCombo), - y: reset ? scaleBase : yScale.getPixelForValue(data, index, this.index), + y: reset ? yScale.getBasePixel() : yScale.getPixelForValue(data, index, this.index), // Appearance radius: reset ? 0 : custom.radius ? custom.radius : this.getRadius(data), backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor), diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 080760068..39d0fca28 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -72,17 +72,8 @@ module.exports = function(Chart) { var points = meta.data || []; var options = me.chart.options; var lineElementOptions = options.elements.line; - var yScale = me.getScaleForId(meta.yAxisID); - var xScale = me.getScaleForId(meta.xAxisID); - var scaleBase, i, ilen, dataset, custom; - - if (yScale.min < 0 && yScale.max < 0) { - scaleBase = yScale.getPixelForValue(yScale.max); - } else if (yScale.min > 0 && yScale.max > 0) { - scaleBase = yScale.getPixelForValue(yScale.min); - } else { - scaleBase = yScale.getPixelForValue(0); - } + var scale = me.getScaleForId(meta.yAxisID); + var i, ilen, dataset, custom; // Update Line if (options.showLines) { @@ -95,7 +86,7 @@ module.exports = function(Chart) { } // Utility - line._scale = yScale; + line._scale = scale; line._datasetIndex = me.index; // Data line._children = points; @@ -112,9 +103,9 @@ module.exports = function(Chart) { borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle), fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill), // Scale - scaleTop: yScale.top, - scaleBottom: yScale.bottom, - scaleZero: scaleBase + scaleTop: scale.top, + scaleBottom: scale.bottom, + scaleZero: scale.getBasePixel() }; line.pivot(); @@ -188,15 +179,7 @@ module.exports = function(Chart) { var yScale = me.getScaleForId(meta.yAxisID); var xScale = me.getScaleForId(meta.xAxisID); var pointOptions = me.chart.options.elements.point; - var scaleBase, x, y; - - if (yScale.min < 0 && yScale.max < 0) { - scaleBase = yScale.getPixelForValue(yScale.max); - } else if (yScale.min > 0 && yScale.max > 0) { - scaleBase = yScale.getPixelForValue(yScale.min); - } else { - scaleBase = yScale.getPixelForValue(0); - } + var x, y; // Compatibility: If the properties are defined with only the old name, use those values if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) { @@ -207,7 +190,7 @@ module.exports = function(Chart) { } x = xScale.getPixelForValue(value, index, datasetIndex, me.chart.isCombo); - y = reset ? scaleBase : me.calculatePointY(value, index, datasetIndex, me.chart.isCombo); + y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex, me.chart.isCombo); // Utility point._chart = me.chart.chart; @@ -237,7 +220,6 @@ module.exports = function(Chart) { var me = this; var chart = me.chart; var meta = me.getMeta(); - var xScale = me.getScaleForId(meta.xAxisID); var yScale = me.getScaleForId(meta.yAxisID); var sumPos = 0; var sumNeg = 0; diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index f4a3f1e4b..4e1a5c48d 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -65,21 +65,10 @@ module.exports = function(Chart) { var custom = line.custom || {}; var dataset = this.getDataset(); var lineElementOptions = this.chart.options.elements.line; - var scale = this.chart.scale; - var scaleBase; - - if (scale.min < 0 && scale.max < 0) { - scaleBase = scale.getPointPositionForValue(0, scale.max); - } else if (scale.min > 0 && scale.max > 0) { - scaleBase = scale.getPointPositionForValue(0, scale.min); - } else { - scaleBase = scale.getPointPositionForValue(0, 0); - } // Compatibility: If the properties are defined with only the old name, use those values - if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) - { + if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) { dataset.lineTension = dataset.tension; } @@ -104,7 +93,7 @@ module.exports = function(Chart) { // Scale scaleTop: scale.top, scaleBottom: scale.bottom, - scaleZero: scaleBase + scaleZero: scale.getBasePosition() } }); diff --git a/src/core/core.scale.js b/src/core/core.scale.js index a158be624..cf6afb0f3 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -451,6 +451,18 @@ module.exports = function(Chart) { } }, + getBasePixel: function() { + var me = this; + var min = me.min; + var max = me.max; + + return me.getPixelForValue( + me.beginAtZero? 0: + min < 0 && max < 0? max : + min > 0 && max > 0? min : + 0); + }, + // Actualy draw the scale on the canvas // @param {rectangle} chartArea : the area of the chart to draw full grid lines on draw: function(chartArea) { diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 5d46f26ee..017c0c747 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -321,6 +321,19 @@ module.exports = function(Chart) { getPointPositionForValue: function(index, value) { return this.getPointPosition(index, this.getDistanceFromCenterForValue(value)); }, + + getBasePosition: function() { + var me = this; + var min = me.min; + var max = me.max; + + return me.getPointPositionForValue(0, + me.beginAtZero? 0: + min < 0 && max < 0? max : + min > 0 && max > 0? min : + 0); + }, + draw: function() { if (this.options.display) { var ctx = this.ctx;