From a3d75d20870ff96d9075eeb678ec7c370fc56574 Mon Sep 17 00:00:00 2001 From: Blake Niemyjski Date: Sat, 14 May 2016 08:58:42 -0500 Subject: [PATCH] More perf and minification changes based on feedback --- src/controllers/controller.bar.js | 36 +- src/controllers/controller.bubble.js | 45 ++- src/controllers/controller.doughnut.js | 20 +- src/controllers/controller.line.js | 96 +++--- src/controllers/controller.polarArea.js | 22 +- src/controllers/controller.radar.js | 89 +++-- src/core/core.datasetController.js | 16 +- src/core/core.scale.js | 432 ++++++++++++------------ 8 files changed, 399 insertions(+), 357 deletions(-) diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 328b96ff6..957111549 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -97,7 +97,7 @@ module.exports = function(Chart) { } var rectangleElementOptions = this.chart.options.elements.rectangle; - var custom = rectangle.custom; + var custom = rectangle.custom || {}; var dataset = this.getDataset(); helpers.extend(rectangle, { @@ -121,10 +121,10 @@ module.exports = function(Chart) { // Appearance base: reset ? yScalePoint : this.calculateBarBase(this.index, index), width: this.calculateBarWidth(numBars), - backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), - borderSkipped: custom && custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, - borderColor: custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor), - borderWidth: custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth) + backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), + borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, + borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor), + borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth) } }); rectangle.pivot(); @@ -304,23 +304,23 @@ module.exports = function(Chart) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; - var custom = rectangle.custom; + var custom = rectangle.custom || {}; var model = rectangle._model; - model.backgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor)); - model.borderColor = custom && custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor)); - model.borderWidth = custom && custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth); + model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor)); + model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor)); + model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth); }, removeHoverStyle: function(rectangle) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; - var custom = rectangle.custom; + var custom = rectangle.custom || {}; var model = rectangle._model; var rectangleElementOptions = this.chart.options.elements.rectangle; - model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor); - model.borderColor = custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor); - model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth); + model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor); + model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor); + model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth); } }); @@ -398,7 +398,7 @@ module.exports = function(Chart) { xScalePoint = xScale.getPixelForValue(0); } - var custom = rectangle.custom; + var custom = rectangle.custom || {}; var dataset = this.getDataset(); var rectangleElementOptions = this.chart.options.elements.rectangle; helpers.extend(rectangle, { @@ -421,10 +421,10 @@ module.exports = function(Chart) { // Appearance base: reset ? xScalePoint : this.calculateBarBase(this.index, index), height: this.calculateBarHeight(numBars), - backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), - borderSkipped: custom && custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, - borderColor: custom && custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor), - borderWidth: custom && custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth) + backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor), + borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleElementOptions.borderSkipped, + borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor), + borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth) }, draw: function () { diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 23500c29f..581287bd5 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -89,6 +89,11 @@ module.exports = function(Chart) { var xScale = this.getScaleForId(meta.xAxisID); var scaleBase; + 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) { @@ -107,20 +112,21 @@ module.exports = function(Chart) { // Desired view properties _model: { - x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo), - y: reset ? scaleBase : yScale.getPixelForValue(this.getDataset().data[index], index, this.index), + x: reset ? xScale.getPixelForDecimal(0.5) : xScale.getPixelForValue(data, index, this.index, this.chart.isCombo), + y: reset ? scaleBase : yScale.getPixelForValue(data, index, this.index), // Appearance - radius: reset ? 0 : point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[index]), - backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor), - borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor), - borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth), + radius: reset ? 0 : custom.radius ? custom.radius : this.getRadius(data), + backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor), + borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, pointElementOptions.borderColor), + borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, pointElementOptions.borderWidth), // Tooltip - hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius) + hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.hitRadius, index, pointElementOptions.hitRadius) } }); - point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y)); + var model = point._model; + model.skip = custom.skip ? custom.skip : (isNaN(model.x) || isNaN(model.y)); point.pivot(); }, @@ -144,21 +150,26 @@ module.exports = function(Chart) { // Point var dataset = this.chart.data.datasets[point._datasetIndex]; var index = point._index; + var custom = point.custom || {}; + var model = point._model; - point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); - point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, point._model.borderWidth); + model.radius = custom.hoverRadius ? custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]); + model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor)); + model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor)); + model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth); }, removeHoverStyle: function(point) { var dataset = this.chart.data.datasets[point._datasetIndex]; var index = point._index; - - point._model.radius = point.custom && point.custom.radius ? point.custom.radius : this.getRadius(this.getDataset().data[point._index]); - point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.point.backgroundColor); - point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.point.borderColor); - point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth); + var custom = point.custom || {}; + var model = point._model; + var pointElementOptions = this.chart.options.elements.point; + + model.radius = custom.radius ? custom.radius : this.getRadius(dataset.data[point._index]); + model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, pointElementOptions.backgroundColor); + model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, pointElementOptions.borderColor); + model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, pointElementOptions.borderWidth); } }); }; diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 8a68a68cf..00152fb00 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -46,12 +46,12 @@ module.exports = function(Chart) { var meta = chart.getDatasetMeta(0); var ds = data.datasets[0]; var arc = meta.data[i]; - var custom = arc.custom; + var custom = arc.custom || {}; var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault; var arcOpts = chart.options.elements.arc; - var fill = custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor); - var stroke = custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor); - var bw = custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth); + var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor); + var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor); + var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth); return { text: label, @@ -170,7 +170,7 @@ module.exports = function(Chart) { availableHeight = chartArea.bottom - chartArea.top - arcOpts.borderWidth, minSize = Math.min(availableWidth, availableHeight), offset = { - x: 0, + x: 0, y: 0 }, meta = _this.getMeta(), @@ -227,7 +227,7 @@ module.exports = function(Chart) { circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : _this.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI)), innerRadius = reset && animationOpts.animateScale ? 0 : _this.innerRadius, outerRadius = reset && animationOpts.animateScale ? 0 : _this.outerRadius, - custom = arc.custom, + custom = arc.custom || {}, valueAtIndexOrDefault = helpers.getValueAtIndexOrDefault; helpers.extend(arc, { @@ -250,10 +250,10 @@ module.exports = function(Chart) { }); var model = arc._model; - model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor); - model.hoverBackgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor); - model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth); - model.borderColor = custom && custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor); + model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor); + model.hoverBackgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor); + model.borderWidth = custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth); + model.borderColor = custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor); // Set correct angles if not resetting if (!reset || !animationOpts.animateRotate) { diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index e863399b8..58349034c 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -61,6 +61,7 @@ module.exports = function(Chart) { update: function update(reset) { var meta = this.getMeta(); var line = meta.dataset; + var lineElementOptions = this.chart.options.elements.line; var points = meta.data; var yScale = this.getScaleForId(meta.yAxisID); @@ -84,23 +85,24 @@ module.exports = function(Chart) { line._children = points; // Model + var dataset = this.getDataset(); + var custom = line.custom || {}; // Compatibility: If the properties are defined with only the old name, use those values - if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined)) - { - this.getDataset().lineTension = this.getDataset().tension; + if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) { + dataset.lineTension = dataset.tension; } line._model = { // Appearance - tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension), - backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor), - borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth), - borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor), - borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle), - borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash), - borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset), - borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle), - fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill), + tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension), + backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor), + borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth), + borderColor: custom.borderColor ? custom.borderColor : (dataset.borderColor || lineElementOptions.borderColor), + borderCapStyle: custom.borderCapStyle ? custom.borderCapStyle : (dataset.borderCapStyle || lineElementOptions.borderCapStyle), + borderDash: custom.borderDash ? custom.borderDash : (dataset.borderDash || lineElementOptions.borderDash), + borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset), + 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, @@ -114,16 +116,18 @@ module.exports = function(Chart) { this.updateElement(point, index, reset); }, this); - if (this.chart.options.showLines && this.chart.options.elements.line.tension !== 0) + if (this.chart.options.showLines && lineElementOptions.tension !== 0) { this.updateBezierControlPoints(); + } }, getPointBackgroundColor: function(point, index) { var backgroundColor = this.chart.options.elements.point.backgroundColor; var dataset = this.getDataset(); + var custom = point.custom || {}; - if (point.custom && point.custom.backgroundColor) { - backgroundColor = point.custom.backgroundColor; + if (custom.backgroundColor) { + backgroundColor = custom.backgroundColor; } else if (dataset.pointBackgroundColor) { backgroundColor = helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, backgroundColor); } else if (dataset.backgroundColor) { @@ -135,11 +139,12 @@ module.exports = function(Chart) { getPointBorderColor: function(point, index) { var borderColor = this.chart.options.elements.point.borderColor; var dataset = this.getDataset(); + var custom = point.custom || {}; - if (point.custom && point.custom.borderColor) { - borderColor = point.custom.borderColor; + if (custom.borderColor) { + borderColor = custom.borderColor; } else if (dataset.pointBorderColor) { - borderColor = helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, borderColor); + borderColor = helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, borderColor); } else if (dataset.borderColor) { borderColor = dataset.borderColor; } @@ -149,12 +154,13 @@ module.exports = function(Chart) { getPointBorderWidth: function(point, index) { var borderWidth = this.chart.options.elements.point.borderWidth; var dataset = this.getDataset(); + var custom = point.custom || {}; - if (point.custom && point.custom.borderWidth !== undefined) { - borderWidth = point.custom.borderWidth; - } else if (dataset.pointBorderWidth !== undefined) { + if (custom.borderWidth) { + borderWidth = custom.borderWidth; + } else if (dataset.pointBorderWidth) { borderWidth = helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, borderWidth); - } else if (dataset.borderWidth !== undefined) { + } else if (dataset.borderWidth) { borderWidth = dataset.borderWidth; } @@ -163,6 +169,8 @@ module.exports = function(Chart) { updateElement: function(point, index, reset) { var meta = this.getMeta(); + var custom = point.custom || {}; + var dataset = this.getDataset(); var yScale = this.getScaleForId(meta.yAxisID); var xScale = this.getScaleForId(meta.xAxisID); var scaleBase; @@ -185,30 +193,30 @@ module.exports = function(Chart) { // Desired view properties // Compatibility: If the properties are defined with only the old name, use those values - if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined)) + if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) { - this.getDataset().pointRadius = this.getDataset().radius; + dataset.pointRadius = dataset.radius; } - if ((this.getDataset().hitRadius !== undefined) && (this.getDataset().pointHitRadius === undefined)) + if ((dataset.hitRadius !== undefined) && (dataset.pointHitRadius === undefined)) { - this.getDataset().pointHitRadius = this.getDataset().hitRadius; + dataset.pointHitRadius = dataset.hitRadius; } point._model = { - x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo), - y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo), + x: xScale.getPixelForValue(dataset.data[index], index, this.index, this.chart.isCombo), + y: reset ? scaleBase : this.calculatePointY(dataset.data[index], index, this.index, this.chart.isCombo), // Appearance - radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius), - pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle), + radius: custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.chart.options.elements.point.radius), + pointStyle: custom.pointStyle ? custom.pointStyle : helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, this.chart.options.elements.point.pointStyle), backgroundColor: this.getPointBackgroundColor(point, index), borderColor: this.getPointBorderColor(point, index), borderWidth: this.getPointBorderWidth(point, index), tension: meta.dataset._model ? meta.dataset._model.tension : 0, // Tooltip - hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointHitRadius, index, this.chart.options.elements.point.hitRadius) + hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.pointHitRadius, index, this.chart.options.elements.point.hitRadius) }; - point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y)); + point._model.skip = custom.skip ? custom.skip : (isNaN(point._model.x) || isNaN(point._model.y)); }, calculatePointY: function(value, index, datasetIndex, isCombo) { @@ -289,27 +297,31 @@ module.exports = function(Chart) { // Point var dataset = this.chart.data.datasets[point._datasetIndex]; var index = point._index; + var custom = point.custom || {}; + var model = point._model; - point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); - point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth); + model.radius = custom.hoverRadius ? custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); + model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor)); + model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(model.borderColor)); + model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, model.borderWidth); }, removeHoverStyle: function(point) { var dataset = this.chart.data.datasets[point._datasetIndex]; var index = point._index; + var custom = point.custom || {}; + var model = point._model; // Compatibility: If the properties are defined with only the old name, use those values - if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined)) + if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) { - this.getDataset().pointRadius = this.getDataset().radius; + dataset.pointRadius = dataset.radius; } - point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius); - point._model.backgroundColor = this.getPointBackgroundColor(point, index); - point._model.borderColor = this.getPointBorderColor(point, index); - point._model.borderWidth = this.getPointBorderWidth(point, index); + model.radius = custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.chart.options.elements.point.radius); + model.backgroundColor = this.getPointBackgroundColor(point, index); + model.borderColor = this.getPointBorderColor(point, index); + model.borderWidth = this.getPointBorderWidth(point, index); } }); }; diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 2308be89b..1523cfb1d 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -48,12 +48,12 @@ module.exports = function(Chart) { var meta = chart.getDatasetMeta(0); var ds = data.datasets[0]; var arc = meta.data[i]; - var custom = arc.custom; + var custom = arc.custom || {}; var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault; var arcOpts = chart.options.elements.arc; - var fill = custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor); - var stroke = custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor); - var bw = custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth); + var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor); + var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor); + var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth); return { text: label, @@ -158,7 +158,7 @@ module.exports = function(Chart) { var opts = chart.options; var animationOpts = opts.animation; var arcOpts = opts.elements.arc; - var custom = arc.custom; + var custom = arc.custom || {}; var scale = chart.scale; var getValueAtIndexOrDefault = helpers.getValueAtIndexOrDefault; var labels = chart.data.labels; @@ -189,9 +189,9 @@ module.exports = function(Chart) { startAngle: animationOpts.animateRotate ? Math.PI * -0.5 : startAngle, endAngle: animationOpts.animateRotate ? Math.PI * -0.5 : endAngle, - backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor), - borderWidth: custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth), - borderColor: custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor), + backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor), + borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth), + borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor), label: getValueAtIndexOrDefault(labels, index, labels[index]) }; @@ -212,9 +212,9 @@ module.exports = function(Chart) { startAngle: startAngle, endAngle: endAngle, - backgroundColor: custom && custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor), - borderWidth: custom && custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth), - borderColor: custom && custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor), + backgroundColor: custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor), + borderWidth: custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth), + borderColor: custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor), label: getValueAtIndexOrDefault(labels, index, labels[index]) } diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 423c3ed97..f4a3f1e4b 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -62,6 +62,9 @@ module.exports = function(Chart) { var meta = this.getMeta(); var line = meta.dataset; var points = meta.data; + var custom = line.custom || {}; + var dataset = this.getDataset(); + var lineElementOptions = this.chart.options.elements.line; var scale = this.chart.scale; var scaleBase; @@ -75,9 +78,9 @@ module.exports = function(Chart) { } // Compatibility: If the properties are defined with only the old name, use those values - if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined)) + if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) { - this.getDataset().lineTension = this.getDataset().tension; + dataset.lineTension = dataset.tension; } helpers.extend(meta.dataset, { @@ -88,15 +91,15 @@ module.exports = function(Chart) { // Model _model: { // Appearance - tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension), - backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor), - borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth), - borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor), - fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill), - borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle), - borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash), - borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset), - borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle), + tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.lineTension, lineElementOptions.tension), + backgroundColor: custom.backgroundColor ? custom.backgroundColor : (dataset.backgroundColor || lineElementOptions.backgroundColor), + borderWidth: custom.borderWidth ? custom.borderWidth : (dataset.borderWidth || lineElementOptions.borderWidth), + borderColor: custom.borderColor ? custom.borderColor : (dataset.borderColor || lineElementOptions.borderColor), + fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill), + borderCapStyle: custom.borderCapStyle ? custom.borderCapStyle : (dataset.borderCapStyle || lineElementOptions.borderCapStyle), + borderDash: custom.borderDash ? custom.borderDash : (dataset.borderDash || lineElementOptions.borderDash), + borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset), + borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle), // Scale scaleTop: scale.top, @@ -117,50 +120,57 @@ module.exports = function(Chart) { this.updateBezierControlPoints(); }, updateElement: function(point, index, reset) { - var pointPosition = this.chart.scale.getPointPositionForValue(index, this.getDataset().data[index]); + var custom = point.custom || {}; + var dataset = this.getDataset(); + var scale = this.chart.scale; + var pointElementOptions = this.chart.options.elements.point; + var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]); helpers.extend(point, { // Utility _datasetIndex: this.index, _index: index, - _scale: this.chart.scale, + _scale: scale, // Desired view properties _model: { - x: reset ? this.chart.scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales - y: reset ? this.chart.scale.yCenter : pointPosition.y, + x: reset ? scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales + y: reset ? scale.yCenter : pointPosition.y, // Appearance - tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension), - radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius), - backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor), - borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor), - borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth), - pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle), + tension: custom.tension ? custom.tension : helpers.getValueOrDefault(dataset.tension, this.chart.options.elements.line.tension), + radius: custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, pointElementOptions.radius), + backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, pointElementOptions.backgroundColor), + borderColor: custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, pointElementOptions.borderColor), + borderWidth: custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, pointElementOptions.borderWidth), + pointStyle: custom.pointStyle ? custom.pointStyle : helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, pointElementOptions.pointStyle), // Tooltip - hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius) + hitRadius: custom.hitRadius ? custom.hitRadius : helpers.getValueAtIndexOrDefault(dataset.hitRadius, index, pointElementOptions.hitRadius) } }); - point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y)); + point._model.skip = custom.skip ? custom.skip : (isNaN(point._model.x) || isNaN(point._model.y)); }, updateBezierControlPoints: function() { + var chartArea = this.chart.chartArea; var meta = this.getMeta(); + helpers.each(meta.data, function(point, index) { + var model = point._model; var controlPoints = helpers.splineCurve( helpers.previousItem(meta.data, index, true)._model, - point._model, + model, helpers.nextItem(meta.data, index, true)._model, - point._model.tension + model.tension ); // Prevent the bezier going outside of the bounds of the graph - point._model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, this.chart.chartArea.right), this.chart.chartArea.left); - point._model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, this.chart.chartArea.bottom), this.chart.chartArea.top); + model.controlPointPreviousX = Math.max(Math.min(controlPoints.previous.x, chartArea.right), chartArea.left); + model.controlPointPreviousY = Math.max(Math.min(controlPoints.previous.y, chartArea.bottom), chartArea.top); - point._model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, this.chart.chartArea.right), this.chart.chartArea.left); - point._model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, this.chart.chartArea.bottom), this.chart.chartArea.top); + model.controlPointNextX = Math.max(Math.min(controlPoints.next.x, chartArea.right), chartArea.left); + model.controlPointNextY = Math.max(Math.min(controlPoints.next.y, chartArea.bottom), chartArea.top); // Now pivot the point for animation point.pivot(); @@ -188,22 +198,27 @@ module.exports = function(Chart) { setHoverStyle: function(point) { // Point var dataset = this.chart.data.datasets[point._datasetIndex]; + var custom = point.custom || {}; var index = point._index; + var model = point._model; - point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); - point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth); + model.radius = custom.hoverRadius ? custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); + model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor)); + model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(model.borderColor)); + model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, model.borderWidth); }, removeHoverStyle: function(point) { var dataset = this.chart.data.datasets[point._datasetIndex]; + var custom = point.custom || {}; var index = point._index; + var model = point._model; + var pointElementOptions = this.chart.options.elements.point; - point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius); - point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor); - point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor); - point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth); + model.radius = custom.radius ? custom.radius : helpers.getValueAtIndexOrDefault(dataset.radius, index, pointElementOptions.radius); + model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, pointElementOptions.backgroundColor); + model.borderColor = custom.borderColor ? custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, pointElementOptions.borderColor); + model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, pointElementOptions.borderWidth); } }); }; diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js index cfd069ef8..835d0858f 100644 --- a/src/core/core.datasetController.js +++ b/src/core/core.datasetController.js @@ -80,27 +80,27 @@ module.exports = function(Chart) { removeHoverStyle: function(element, elementOpts) { var dataset = this.chart.data.datasets[element._datasetIndex], index = element._index, - custom = element.custom, + custom = element.custom || {}, valueOrDefault = helpers.getValueAtIndexOrDefault, color = helpers.color, model = element._model; - model.backgroundColor = custom && custom.backgroundColor ? custom.backgroundColor : valueOrDefault(dataset.backgroundColor, index, elementOpts.backgroundColor); - model.borderColor = custom && custom.borderColor ? custom.borderColor : valueOrDefault(dataset.borderColor, index, elementOpts.borderColor); - model.borderWidth = custom && custom.borderWidth ? custom.borderWidth : valueOrDefault(dataset.borderWidth, index, elementOpts.borderWidth); + model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueOrDefault(dataset.backgroundColor, index, elementOpts.backgroundColor); + model.borderColor = custom.borderColor ? custom.borderColor : valueOrDefault(dataset.borderColor, index, elementOpts.borderColor); + model.borderWidth = custom.borderWidth ? custom.borderWidth : valueOrDefault(dataset.borderWidth, index, elementOpts.borderWidth); }, setHoverStyle: function(element) { var dataset = this.chart.data.datasets[element._datasetIndex], index = element._index, - custom = element.custom, + custom = element.custom || {}, valueOrDefault = helpers.getValueAtIndexOrDefault, color = helpers.color, getHoverColor = helpers.getHoverColor, model = element._model; - model.backgroundColor = custom && custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueOrDefault(dataset.hoverBackgroundColor, index, getHoverColor(model.backgroundColor)); - model.borderColor = custom && custom.hoverBorderColor ? custom.hoverBorderColor : valueOrDefault(dataset.hoverBorderColor, index, getHoverColor(model.borderColor)); - model.borderWidth = custom && custom.hoverBorderWidth ? custom.hoverBorderWidth : valueOrDefault(dataset.hoverBorderWidth, index, model.borderWidth); + model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueOrDefault(dataset.hoverBackgroundColor, index, getHoverColor(model.backgroundColor)); + model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : valueOrDefault(dataset.hoverBorderColor, index, getHoverColor(model.borderColor)); + model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : valueOrDefault(dataset.hoverBorderWidth, index, model.borderWidth); }, update: noop }); diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 9802995da..24d3c1bfe 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -3,7 +3,6 @@ module.exports = function(Chart) { var helpers = Chart.helpers; - var globalDefaults = Chart.defaults.global; Chart.defaults.scale = { display: true, @@ -182,6 +181,7 @@ module.exports = function(Chart) { }, calculateTickRotation: function() { var context = this.ctx; + var globalDefaults = Chart.defaults.global; var optionTicks = this.options.ticks; //Get the width of each grid by calculating the difference @@ -453,262 +453,266 @@ module.exports = function(Chart) { // Actualy draw the scale on the canvas // @param {rectangle} chartArea : the area of the chart to draw full grid lines on draw: function(chartArea) { - if (this.options.display) { - var context = this.ctx; - var optionTicks = this.options.ticks; - var gridLines = this.options.gridLines; - var scaleLabel = this.options.scaleLabel; - - var setContextLineSettings; - var isRotated = this.labelRotation !== 0; - var skipRatio; - var scaleLabelX; - var scaleLabelY; - var useAutoskipper = optionTicks.autoSkip; - - // figure out the maximum number of gridlines to show - var maxTicks; - if (optionTicks.maxTicksLimit) { - maxTicks = optionTicks.maxTicksLimit; - } + var options = this.options; + if (!options.display) { + return; + } - var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor); - var tickFontSize = helpers.getValueOrDefault(optionTicks.fontSize, globalDefaults.defaultFontSize); - var tickFontStyle = helpers.getValueOrDefault(optionTicks.fontStyle, globalDefaults.defaultFontStyle); - var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily); - var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); - var tl = gridLines.tickMarkLength; + var context = this.ctx; + var globalDefaults = Chart.defaults.global; + var optionTicks = options.ticks; + var gridLines = options.gridLines; + var scaleLabel = options.scaleLabel; + + var setContextLineSettings; + var isRotated = this.labelRotation !== 0; + var skipRatio; + var scaleLabelX; + var scaleLabelY; + var useAutoskipper = optionTicks.autoSkip; + + // figure out the maximum number of gridlines to show + var maxTicks; + if (optionTicks.maxTicksLimit) { + maxTicks = optionTicks.maxTicksLimit; + } - var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor); - var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize); - var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabel.fontStyle, globalDefaults.defaultFontStyle); - var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabel.fontFamily, globalDefaults.defaultFontFamily); - var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily); + var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor); + var tickFontSize = helpers.getValueOrDefault(optionTicks.fontSize, globalDefaults.defaultFontSize); + var tickFontStyle = helpers.getValueOrDefault(optionTicks.fontStyle, globalDefaults.defaultFontStyle); + var tickFontFamily = helpers.getValueOrDefault(optionTicks.fontFamily, globalDefaults.defaultFontFamily); + var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily); + var tl = gridLines.tickMarkLength; - var labelRotationRadians = helpers.toRadians(this.labelRotation); - var cosRotation = Math.cos(labelRotationRadians); - var sinRotation = Math.sin(labelRotationRadians); - var longestRotatedLabel = this.longestLabelWidth * cosRotation; - var rotatedLabelHeight = tickFontSize * sinRotation; + var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor); + var scaleLabelFontSize = helpers.getValueOrDefault(scaleLabel.fontSize, globalDefaults.defaultFontSize); + var scaleLabelFontStyle = helpers.getValueOrDefault(scaleLabel.fontStyle, globalDefaults.defaultFontStyle); + var scaleLabelFontFamily = helpers.getValueOrDefault(scaleLabel.fontFamily, globalDefaults.defaultFontFamily); + var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily); - // Make sure we draw text in the correct color and font - context.fillStyle = tickFontColor; + var labelRotationRadians = helpers.toRadians(this.labelRotation); + var cosRotation = Math.cos(labelRotationRadians); + var sinRotation = Math.sin(labelRotationRadians); + var longestRotatedLabel = this.longestLabelWidth * cosRotation; + var rotatedLabelHeight = tickFontSize * sinRotation; - if (this.isHorizontal()) { - setContextLineSettings = true; - var yTickStart = this.options.position === "bottom" ? this.top : this.bottom - tl; - var yTickEnd = this.options.position === "bottom" ? this.top + tl : this.bottom; - skipRatio = false; + // Make sure we draw text in the correct color and font + context.fillStyle = tickFontColor; - if (((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) { - skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight))); - } + if (this.isHorizontal()) { + setContextLineSettings = true; + var yTickStart = options.position === "bottom" ? this.top : this.bottom - tl; + var yTickEnd = options.position === "bottom" ? this.top + tl : this.bottom; + skipRatio = false; - // if they defined a max number of optionTicks, - // increase skipRatio until that number is met - if (maxTicks && this.ticks.length > maxTicks) { - while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) { - if (!skipRatio) { - skipRatio = 1; - } - skipRatio += 1; + if (((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) { + skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + optionTicks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight))); + } + + // if they defined a max number of optionTicks, + // increase skipRatio until that number is met + if (maxTicks && this.ticks.length > maxTicks) { + while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) { + if (!skipRatio) { + skipRatio = 1; } + skipRatio += 1; } + } - if (!useAutoskipper) { - skipRatio = false; - } + if (!useAutoskipper) { + skipRatio = false; + } - helpers.each(this.ticks, function(label, index) { - // Blank optionTicks - var isLastTick = this.ticks.length === index + 1; + helpers.each(this.ticks, function (label, index) { + // Blank optionTicks + var isLastTick = this.ticks.length === index + 1; - // Since we always show the last tick,we need may need to hide the last shown one before - var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length); - if (shouldSkip && !isLastTick || (label === undefined || label === null)) { - return; + // Since we always show the last tick,we need may need to hide the last shown one before + var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length); + if (shouldSkip && !isLastTick || (label === undefined || label === null)) { + return; + } + var xLineValue = this.getPixelForTick(index); // xvalues for grid lines + var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option) + + if (gridLines.display) { + if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { + // Draw the first index specially + context.lineWidth = gridLines.zeroLineWidth; + context.strokeStyle = gridLines.zeroLineColor; + setContextLineSettings = true; // reset next time + } else if (setContextLineSettings) { + context.lineWidth = gridLines.lineWidth; + context.strokeStyle = gridLines.color; + setContextLineSettings = false; } - var xLineValue = this.getPixelForTick(index); // xvalues for grid lines - var xLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option) - - if (gridLines.display) { - if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { - // Draw the first index specially - context.lineWidth = gridLines.zeroLineWidth; - context.strokeStyle = gridLines.zeroLineColor; - setContextLineSettings = true; // reset next time - } else if (setContextLineSettings) { - context.lineWidth = gridLines.lineWidth; - context.strokeStyle = gridLines.color; - setContextLineSettings = false; - } - - xLineValue += helpers.aliasPixel(context.lineWidth); - // Draw the label area - context.beginPath(); + xLineValue += helpers.aliasPixel(context.lineWidth); - if (gridLines.drawTicks) { - context.moveTo(xLineValue, yTickStart); - context.lineTo(xLineValue, yTickEnd); - } + // Draw the label area + context.beginPath(); - // Draw the chart area - if (gridLines.drawOnChartArea) { - context.moveTo(xLineValue, chartArea.top); - context.lineTo(xLineValue, chartArea.bottom); - } - - // Need to stroke in the loop because we are potentially changing line widths & colours - context.stroke(); + if (gridLines.drawTicks) { + context.moveTo(xLineValue, yTickStart); + context.lineTo(xLineValue, yTickEnd); } - if (optionTicks.display) { - context.save(); - context.translate(xLabelValue + optionTicks.labelOffset, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - tl : this.top + tl); - context.rotate(labelRotationRadians * -1); - context.font = tickLabelFont; - context.textAlign = (isRotated) ? "right" : "center"; - context.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top"; - context.fillText(label, 0, 0); - context.restore(); + // Draw the chart area + if (gridLines.drawOnChartArea) { + context.moveTo(xLineValue, chartArea.top); + context.lineTo(xLineValue, chartArea.bottom); } - }, this); - - if (scaleLabel.display) { - // Draw the scale label - context.textAlign = "center"; - context.textBaseline = 'middle'; - context.fillStyle = scaleLabelFontColor; // render in correct colour - context.font = scaleLabelFont; - scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width - scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2); + // Need to stroke in the loop because we are potentially changing line widths & colours + context.stroke(); + } - context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY); + if (optionTicks.display) { + context.save(); + context.translate(xLabelValue + optionTicks.labelOffset, (isRotated) ? this.top + 12 : options.position === "top" ? this.bottom - tl : this.top + tl); + context.rotate(labelRotationRadians * -1); + context.font = tickLabelFont; + context.textAlign = (isRotated) ? "right" : "center"; + context.textBaseline = (isRotated) ? "middle" : options.position === "top" ? "bottom" : "top"; + context.fillText(label, 0, 0); + context.restore(); } + }, this); - } else { - setContextLineSettings = true; - var xTickStart = this.options.position === "right" ? this.left : this.right - 5; - var xTickEnd = this.options.position === "right" ? this.left + 5 : this.right; - - helpers.each(this.ticks, function(label, index) { - // If the callback returned a null or undefined value, do not draw this line - if (label === undefined || label === null) { - return; - } + if (scaleLabel.display) { + // Draw the scale label + context.textAlign = "center"; + context.textBaseline = 'middle'; + context.fillStyle = scaleLabelFontColor; // render in correct colour + context.font = scaleLabelFont; - var yLineValue = this.getPixelForTick(index); // xvalues for grid lines - - if (gridLines.display) { - if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { - // Draw the first index specially - context.lineWidth = gridLines.zeroLineWidth; - context.strokeStyle = gridLines.zeroLineColor; - setContextLineSettings = true; // reset next time - } else if (setContextLineSettings) { - context.lineWidth = gridLines.lineWidth; - context.strokeStyle = gridLines.color; - setContextLineSettings = false; - } + scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width + scaleLabelY = options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2); - yLineValue += helpers.aliasPixel(context.lineWidth); + context.fillText(scaleLabel.labelString, scaleLabelX, scaleLabelY); + } - // Draw the label area - context.beginPath(); + } else { + setContextLineSettings = true; + var xTickStart = options.position === "right" ? this.left : this.right - 5; + var xTickEnd = options.position === "right" ? this.left + 5 : this.right; + + helpers.each(this.ticks, function (label, index) { + // If the callback returned a null or undefined value, do not draw this line + if (label === undefined || label === null) { + return; + } - if (gridLines.drawTicks) { - context.moveTo(xTickStart, yLineValue); - context.lineTo(xTickEnd, yLineValue); - } + var yLineValue = this.getPixelForTick(index); // xvalues for grid lines + + if (gridLines.display) { + if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) { + // Draw the first index specially + context.lineWidth = gridLines.zeroLineWidth; + context.strokeStyle = gridLines.zeroLineColor; + setContextLineSettings = true; // reset next time + } else if (setContextLineSettings) { + context.lineWidth = gridLines.lineWidth; + context.strokeStyle = gridLines.color; + setContextLineSettings = false; + } - // Draw the chart area - if (gridLines.drawOnChartArea) { - context.moveTo(chartArea.left, yLineValue); - context.lineTo(chartArea.right, yLineValue); - } + yLineValue += helpers.aliasPixel(context.lineWidth); + + // Draw the label area + context.beginPath(); - // Need to stroke in the loop because we are potentially changing line widths & colours - context.stroke(); + if (gridLines.drawTicks) { + context.moveTo(xTickStart, yLineValue); + context.lineTo(xTickEnd, yLineValue); } - if (optionTicks.display) { - var xLabelValue; - var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option) + // Draw the chart area + if (gridLines.drawOnChartArea) { + context.moveTo(chartArea.left, yLineValue); + context.lineTo(chartArea.right, yLineValue); + } + + // Need to stroke in the loop because we are potentially changing line widths & colours + context.stroke(); + } + + if (optionTicks.display) { + var xLabelValue; + var yLabelValue = this.getPixelForTick(index, gridLines.offsetGridLines); // x values for optionTicks (need to consider offsetLabel option) - context.save(); + context.save(); - if (this.options.position === "left") { - if (optionTicks.mirror) { - xLabelValue = this.right + optionTicks.padding; - context.textAlign = "left"; - } else { - xLabelValue = this.right - optionTicks.padding; - context.textAlign = "right"; - } + if (options.position === "left") { + if (optionTicks.mirror) { + xLabelValue = this.right + optionTicks.padding; + context.textAlign = "left"; } else { - // right side - if (optionTicks.mirror) { - xLabelValue = this.left - optionTicks.padding; - context.textAlign = "right"; - } else { - xLabelValue = this.left + optionTicks.padding; - context.textAlign = "left"; - } + xLabelValue = this.right - optionTicks.padding; + context.textAlign = "right"; + } + } else { + // right side + if (optionTicks.mirror) { + xLabelValue = this.left - optionTicks.padding; + context.textAlign = "right"; + } else { + xLabelValue = this.left + optionTicks.padding; + context.textAlign = "left"; } - - context.translate(xLabelValue, yLabelValue + optionTicks.labelOffset); - context.rotate(labelRotationRadians * -1); - context.font = tickLabelFont; - context.textBaseline = "middle"; - context.fillText(label, 0, 0); - context.restore(); } - }, this); - - if (scaleLabel.display) { - // Draw the scale label - scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2); - scaleLabelY = this.top + ((this.bottom - this.top) / 2); - var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI; - context.save(); - context.translate(scaleLabelX, scaleLabelY); - context.rotate(rotation); - context.textAlign = "center"; - context.fillStyle =scaleLabelFontColor; // render in correct colour - context.font = scaleLabelFont; - context.textBaseline = 'middle'; - context.fillText(scaleLabel.labelString, 0, 0); + context.translate(xLabelValue, yLabelValue + optionTicks.labelOffset); + context.rotate(labelRotationRadians * -1); + context.font = tickLabelFont; + context.textBaseline = "middle"; + context.fillText(label, 0, 0); context.restore(); } + }, this); + + if (scaleLabel.display) { + // Draw the scale label + scaleLabelX = options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2); + scaleLabelY = this.top + ((this.bottom - this.top) / 2); + var rotation = options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI; + + context.save(); + context.translate(scaleLabelX, scaleLabelY); + context.rotate(rotation); + context.textAlign = "center"; + context.fillStyle = scaleLabelFontColor; // render in correct colour + context.font = scaleLabelFont; + context.textBaseline = 'middle'; + context.fillText(scaleLabel.labelString, 0, 0); + context.restore(); } + } - // Draw the line at the edge of the axis - context.lineWidth = gridLines.lineWidth; - context.strokeStyle = gridLines.color; - var x1 = this.left, - x2 = this.right, - y1 = this.top, - y2 = this.bottom; - - var aliasPixel = helpers.aliasPixel(context.lineWidth); - if (this.isHorizontal()) { - y1 = y2 = this.options.position === 'top' ? this.bottom : this.top; - y1 += aliasPixel; - y2 += aliasPixel; - } else { - x1 = x2 = this.options.position === 'left' ? this.right : this.left; - x1 += aliasPixel; - x2 += aliasPixel; - } + // Draw the line at the edge of the axis + context.lineWidth = gridLines.lineWidth; + context.strokeStyle = gridLines.color; + var x1 = this.left, + x2 = this.right, + y1 = this.top, + y2 = this.bottom; - context.beginPath(); - context.moveTo(x1, y1); - context.lineTo(x2, y2); - context.stroke(); + var aliasPixel = helpers.aliasPixel(context.lineWidth); + if (this.isHorizontal()) { + y1 = y2 = options.position === 'top' ? this.bottom : this.top; + y1 += aliasPixel; + y2 += aliasPixel; + } else { + x1 = x2 = options.position === 'left' ? this.right : this.left; + x1 += aliasPixel; + x2 += aliasPixel; } + + context.beginPath(); + context.moveTo(x1, y1); + context.lineTo(x2, y2); + context.stroke(); } }); }; -- 2.47.2