From 8a57dab5894315cf1f49c3716c30863470a883cc Mon Sep 17 00:00:00 2001 From: Simon Brunel Date: Sat, 28 Jan 2017 12:43:54 +0100 Subject: [PATCH 1/4] Deprecate Chart.Controller (and nested `chart`) --- src/core/core.controller.js | 117 +++++++++++++++++++++--------------- src/core/core.js | 4 +- 2 files changed, 69 insertions(+), 52 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index b38df58b291..070aa0356b3 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -38,7 +38,7 @@ module.exports = function(Chart) { /** * Updates the config of the chart - * @param chart {Chart.Controller} chart to update the options for + * @param chart {Chart} chart to update the options for */ function updateConfig(chart) { var newOptions = chart.options; @@ -56,58 +56,66 @@ module.exports = function(Chart) { chart.tooltip._options = newOptions.tooltips; } - /** - * @class Chart.Controller - * The main controller of a chart. - */ - Chart.Controller = function(item, config, instance) { - var me = this; - - config = initConfig(config); - - var context = platform.acquireContext(item, config); - var canvas = context && context.canvas; - var height = canvas && canvas.height; - var width = canvas && canvas.width; - - instance.ctx = context; - instance.canvas = canvas; - instance.config = config; - instance.width = width; - instance.height = height; - instance.aspectRatio = height? width / height : null; - - me.id = helpers.uid(); - me.chart = instance; - me.config = config; - me.options = config.options; - me._bufferedRender = false; - - // Add the chart instance to the global namespace - Chart.instances[me.id] = me; - - Object.defineProperty(me, 'data', { - get: function() { - return me.config.data; - } - }); - - if (!context || !canvas) { - // The given item is not a compatible context2d element, let's return before finalizing - // the chart initialization but after setting basic chart / controller properties that - // can help to figure out that the chart is not valid (e.g chart.canvas !== null); - // https://github.com/chartjs/Chart.js/issues/2807 - console.error("Failed to create chart: can't acquire context from the given item"); - return me; - } + helpers.extend(Chart.prototype, /** @lends Chart */ { + /** + * @private + */ + construct: function(item, config) { + var me = this; - me.initialize(); - me.update(); + config = initConfig(config); + + var context = platform.acquireContext(item, config); + var canvas = context && context.canvas; + var height = canvas && canvas.height; + var width = canvas && canvas.width; + + me.id = helpers.uid(); + me.ctx = context; + me.canvas = canvas; + me.config = config; + me.width = width; + me.height = height; + me.aspectRatio = height? width / height : null; + me.options = config.options; + me._bufferedRender = false; - return me; - }; + /** + * Provided for backward compatibility, Chart and Chart.Controller have been merged, + * the "instance" still need to be defined since it might be called from plugins. + * @prop Chart#chart + * @deprecated since version 2.6.0 + * @todo remove at version 3 + * @private + */ + me.chart = me; + me.controller = me; // chart.chart.controller #inception + + // Add the chart instance to the global namespace + Chart.instances[me.id] = me; - helpers.extend(Chart.Controller.prototype, /** @lends Chart.Controller.prototype */ { + Object.defineProperty(me, 'data', { + get: function() { + return me.config.data; + } + }); + + if (!context || !canvas) { + // The given item is not a compatible context2d element, let's return before finalizing + // the chart initialization but after setting basic chart / controller properties that + // can help to figure out that the chart is not valid (e.g chart.canvas !== null); + // https://github.com/chartjs/Chart.js/issues/2807 + console.error("Failed to create chart: can't acquire context from the given item"); + return; + } + + me.initialize(); + me.update(); + }, + + /** + * @private + */ initialize: function() { var me = this; @@ -749,4 +757,13 @@ module.exports = function(Chart) { return changed; } }); + + /** + * Provided for backward compatibility, use Chart instead. + * @class Chart.Controller + * @deprecated since version 2.6.0 + * @todo remove at version 3 + * @private + */ + Chart.Controller = Chart; }; diff --git a/src/core/core.js b/src/core/core.js index cea3cf30bae..69e9cf9a037 100755 --- a/src/core/core.js +++ b/src/core/core.js @@ -4,8 +4,8 @@ module.exports = function() { // Occupy the global variable of Chart, and create a simple base class var Chart = function(item, config) { - this.controller = new Chart.Controller(item, config, this); - return this.controller; + this.construct(item, config); + return this; }; // Globally expose the defaults to allow for user updating/changing From df8cf01f908d5ff625fb87b6ddbc1ec94d8fca57 Mon Sep 17 00:00:00 2001 From: Simon Brunel Date: Sat, 28 Jan 2017 12:50:29 +0100 Subject: [PATCH 2/4] Remove deprecated nested `chart` accesses --- samples/data_labelling.html | 34 ++++++++++++++--------------- src/controllers/controller.bar.js | 15 +++++++------ src/controllers/controller.line.js | 9 ++++---- src/core/core.controller.js | 35 +++++++++++++++--------------- src/core/core.datasetController.js | 4 ++-- src/core/core.interaction.js | 14 ++++++------ src/core/core.legend.js | 2 +- src/core/core.title.js | 2 +- src/platforms/platform.dom.js | 8 +++---- test/core.controller.tests.js | 24 ++++++++++---------- test/core.interaction.tests.js | 34 ++++++++++++++--------------- test/core.tooltip.tests.js | 14 ++++++------ test/mockContext.js | 26 ++++++++++------------ test/platform.dom.tests.js | 28 ++++++++++++------------ 14 files changed, 123 insertions(+), 126 deletions(-) diff --git a/samples/data_labelling.html b/samples/data_labelling.html index 939e517a9f2..4b6b19e16db 100644 --- a/samples/data_labelling.html +++ b/samples/data_labelling.html @@ -30,12 +30,12 @@ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(), borderColor: window.chartColors.red, data: [ - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), randomScalingFactor(), - randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), randomScalingFactor() ] }, { @@ -44,12 +44,12 @@ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(), borderColor: window.chartColors.blue, data: [ - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), randomScalingFactor(), - randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), randomScalingFactor() ] }, { @@ -58,12 +58,12 @@ backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(), borderColor: window.chartColors.green, data: [ - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), - randomScalingFactor(), randomScalingFactor(), - randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), + randomScalingFactor(), randomScalingFactor() ] }] @@ -73,7 +73,7 @@ Chart.plugins.register({ afterDatasetsDraw: function(chartInstance, easing) { // To only draw at the end of animation, check for easing === 1 - var ctx = chartInstance.chart.ctx; + var ctx = chartInstance.ctx; chartInstance.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.getDatasetMeta(i); @@ -120,7 +120,7 @@ document.getElementById('randomizeData').addEventListener('click', function() { barChartData.datasets.forEach(function(dataset) { - dataset.data = dataset.data.map(function() { + dataset.data = dataset.data.map(function() { return randomScalingFactor(); }) }); diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 1d41386b6d7..cd746701e05 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -143,7 +143,7 @@ module.exports = function(Chart) { var xScale = me.getScaleForId(meta.xAxisID); var stackCount = me.getStackCount(); - var tickWidth = xScale.width / xScale.ticks.length; + var tickWidth = xScale.width / xScale.ticks.length; var categoryWidth = tickWidth * xScale.options.categoryPercentage; var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2; var fullBarWidth = categoryWidth / stackCount; @@ -169,7 +169,7 @@ module.exports = function(Chart) { if (xScale.options.barThickness) { return xScale.options.barThickness; } - return ruler.barWidth; + return ruler.barWidth; }, // Get stack index from the given dataset index accounting for stacks and the fact that not all bars are visible @@ -219,7 +219,7 @@ module.exports = function(Chart) { (yScale.options.stacked === undefined && meta.stack !== undefined)) { var base = yScale.getBaseValue(); var sumPos = base, - sumNeg = base; + sumNeg = base; for (var i = 0; i < datasetIndex; i++) { var ds = me.chart.data.datasets[i]; @@ -246,19 +246,20 @@ module.exports = function(Chart) { draw: function(ease) { var me = this; + var chart = me.chart; var easingDecimal = ease || 1; var metaData = me.getMeta().data; var dataset = me.getDataset(); var i, len; - Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea); + Chart.canvasHelpers.clipArea(chart.ctx, chart.chartArea); for (i = 0, len = metaData.length; i < len; ++i) { var d = dataset.data[i]; if (d !== null && d !== undefined && !isNaN(d)) { metaData[i].transition(easingDecimal).draw(); } } - Chart.canvasHelpers.unclipArea(me.chart.chart.ctx); + Chart.canvasHelpers.unclipArea(chart.ctx); }, setHoverStyle: function(rectangle) { @@ -483,7 +484,7 @@ module.exports = function(Chart) { } } - return stacks.length - 1; + return stacks.length - 1; }, calculateBarX: function(index, datasetIndex) { @@ -496,7 +497,7 @@ module.exports = function(Chart) { (xScale.options.stacked === undefined && meta.stack !== undefined)) { var base = xScale.getBaseValue(); var sumPos = base, - sumNeg = base; + sumNeg = base; for (var i = 0; i < datasetIndex; i++) { var ds = me.chart.data.datasets[i]; diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 806ab4f3f58..577ed75e2da 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -282,6 +282,7 @@ module.exports = function(Chart) { draw: function(ease) { var me = this; + var chart = me.chart; var meta = me.getMeta(); var points = meta.data || []; var easingDecimal = ease || 1; @@ -292,16 +293,16 @@ module.exports = function(Chart) { points[i].transition(easingDecimal); } - Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea); + Chart.canvasHelpers.clipArea(chart.ctx, chart.chartArea); // Transition and Draw the line - if (lineEnabled(me.getDataset(), me.chart.options)) { + if (lineEnabled(me.getDataset(), chart.options)) { meta.dataset.transition(easingDecimal).draw(); } - Chart.canvasHelpers.unclipArea(me.chart.chart.ctx); + Chart.canvasHelpers.unclipArea(chart.ctx); // Draw the points for (i=0, ilen=points.length; i 0) { @@ -210,7 +210,7 @@ module.exports = function(Chart) { * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned */ point: function(chart, e) { - var position = getRelativePosition(e, chart.chart); + var position = getRelativePosition(e, chart); return getIntersectItems(chart, position); }, @@ -223,7 +223,7 @@ module.exports = function(Chart) { * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned */ nearest: function(chart, e, options) { - var position = getRelativePosition(e, chart.chart); + var position = getRelativePosition(e, chart); var nearestItems = getNearestItems(chart, position, options.intersect); // We have multiple items at the same distance from the event. Now sort by smallest @@ -255,7 +255,7 @@ module.exports = function(Chart) { * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned */ x: function(chart, e, options) { - var position = getRelativePosition(e, chart.chart); + var position = getRelativePosition(e, chart); var items = []; var intersectsItem = false; @@ -286,7 +286,7 @@ module.exports = function(Chart) { * @return {Chart.Element[]} Array of elements that are under the point. If none are found, an empty array is returned */ y: function(chart, e, options) { - var position = getRelativePosition(e, chart.chart); + var position = getRelativePosition(e, chart); var items = []; var intersectsItem = false; diff --git a/src/core/core.legend.js b/src/core/core.legend.js index 4816b285f2e..9874adfea54 100644 --- a/src/core/core.legend.js +++ b/src/core/core.legend.js @@ -493,7 +493,7 @@ module.exports = function(Chart) { function createNewLegendAndAttach(chartInstance, legendOpts) { var legend = new Chart.Legend({ - ctx: chartInstance.chart.ctx, + ctx: chartInstance.ctx, options: legendOpts, chart: chartInstance }); diff --git a/src/core/core.title.js b/src/core/core.title.js index 5b2d989f8a7..8e1416497e5 100644 --- a/src/core/core.title.js +++ b/src/core/core.title.js @@ -183,7 +183,7 @@ module.exports = function(Chart) { function createNewTitleBlockAndAttach(chartInstance, titleOpts) { var title = new Chart.Title({ - ctx: chartInstance.chart.ctx, + ctx: chartInstance.ctx, options: titleOpts, chart: chartInstance }); diff --git a/src/platforms/platform.dom.js b/src/platforms/platform.dom.js index abfb3dee3e1..de451b935a6 100644 --- a/src/platforms/platform.dom.js +++ b/src/platforms/platform.dom.js @@ -240,24 +240,24 @@ module.exports = function(Chart) { }, addEventListener: function(chart, type, listener) { - var canvas = chart.chart.canvas; + var canvas = chart.canvas; if (type === 'resize') { // Note: the resize event is not supported on all browsers. - addResizeListener(canvas.parentNode, listener, chart.chart); + addResizeListener(canvas.parentNode, listener, chart); return; } var stub = listener._chartjs || (listener._chartjs = {}); var proxies = stub.proxies || (stub.proxies = {}); var proxy = proxies[chart.id + '_' + type] = function(event) { - listener(fromNativeEvent(event, chart.chart)); + listener(fromNativeEvent(event, chart)); }; helpers.addEvent(canvas, type, proxy); }, removeEventListener: function(chart, type, listener) { - var canvas = chart.chart.canvas; + var canvas = chart.canvas; if (type === 'resize') { // Note: the resize event is not supported on all browsers. removeResizeListener(canvas.parentNode, listener); diff --git a/test/core.controller.tests.js b/test/core.controller.tests.js index da4b77d1d21..9c5e9e26dd2 100644 --- a/test/core.controller.tests.js +++ b/test/core.controller.tests.js @@ -1,7 +1,7 @@ describe('Chart.Controller', function() { function waitForResize(chart, callback) { - var resizer = chart.chart.canvas.parentNode._chartjs.resizer; + var resizer = chart.canvas.parentNode._chartjs.resizer; var content = resizer.contentWindow || resizer; var state = content.document.readyState || 'complete'; var handler = function() { @@ -104,7 +104,7 @@ describe('Chart.Controller', function() { } }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; expect(wrapper.childNodes.length).toBe(1); expect(wrapper.firstChild.tagName).toBe('CANVAS'); }); @@ -152,7 +152,7 @@ describe('Chart.Controller', function() { rw: 300, rh: 350, }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; wrapper.style.width = '455px'; waitForResize(chart, function() { expect(chart).toBeChartOfSize({ @@ -192,7 +192,7 @@ describe('Chart.Controller', function() { rw: 300, rh: 350, }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; wrapper.style.height = '455px'; waitForResize(chart, function() { expect(chart).toBeChartOfSize({ @@ -233,7 +233,7 @@ describe('Chart.Controller', function() { rw: 320, rh: 350, }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; wrapper.style.height = '355px'; wrapper.style.width = '455px'; waitForResize(chart, function() { @@ -261,7 +261,7 @@ describe('Chart.Controller', function() { } }); - var canvas = chart.chart.canvas; + var canvas = chart.canvas; canvas.style.display = 'block'; waitForResize(chart, function() { expect(chart).toBeChartOfSize({ @@ -288,7 +288,7 @@ describe('Chart.Controller', function() { } }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; wrapper.style.display = 'block'; waitForResize(chart, function() { expect(chart).toBeChartOfSize({ @@ -321,7 +321,7 @@ describe('Chart.Controller', function() { rw: 320, rh: 350, }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; var parent = wrapper.parentNode; parent.removeChild(wrapper); parent.appendChild(wrapper); @@ -371,7 +371,7 @@ describe('Chart.Controller', function() { rw: 300, rh: 150, }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; wrapper.style.width = '450px'; waitForResize(chart, function() { expect(chart).toBeChartOfSize({ @@ -411,7 +411,7 @@ describe('Chart.Controller', function() { rw: 320, rh: 160, }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; wrapper.style.height = '455px'; waitForResize(chart, function() { expect(chart).toBeChartOfSize({ @@ -487,7 +487,7 @@ describe('Chart.Controller', function() { } }); - var wrapper = chart.chart.canvas.parentNode; + var wrapper = chart.canvas.parentNode; var resizer = wrapper.firstChild; expect(wrapper.childNodes.length).toBe(2); @@ -635,7 +635,7 @@ describe('Chart.Controller', function() { } }); - chart.chart.canvas.parentNode.style.width = '400px'; + chart.canvas.parentNode.style.width = '400px'; waitForResize(chart, function() { chart.destroy(); diff --git a/test/core.interaction.tests.js b/test/core.interaction.tests.js index 7d8e339caf9..fedcbfad864 100644 --- a/test/core.interaction.tests.js +++ b/test/core.interaction.tests.js @@ -27,7 +27,7 @@ describe('Core.Interaction', function() { var meta1 = chartInstance.getDatasetMeta(1); var point = meta0.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -63,7 +63,7 @@ describe('Core.Interaction', function() { }); // Trigger an event at (0, 0) - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var evt = { view: window, bubbles: true, @@ -103,7 +103,7 @@ describe('Core.Interaction', function() { var meta1 = chartInstance.getDatasetMeta(1); var point = meta0.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -142,7 +142,7 @@ describe('Core.Interaction', function() { var meta0 = chartInstance.getDatasetMeta(0); var meta1 = chartInstance.getDatasetMeta(1); - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -183,7 +183,7 @@ describe('Core.Interaction', function() { var meta = chartInstance.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -218,7 +218,7 @@ describe('Core.Interaction', function() { } }); - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -259,7 +259,7 @@ describe('Core.Interaction', function() { // Trigger an event over top of the var meta = chartInstance.getDatasetMeta(1); - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var evt = { view: window, bubbles: true, @@ -305,7 +305,7 @@ describe('Core.Interaction', function() { y: (meta0.data[1]._view.y + meta1.data[1]._view.y) / 2 }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -352,7 +352,7 @@ describe('Core.Interaction', function() { y: (meta0.data[1]._view.y + meta1.data[1]._view.y) / 2 }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -393,7 +393,7 @@ describe('Core.Interaction', function() { var meta = chartInstance.getDatasetMeta(1); var point = meta.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -450,7 +450,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -496,7 +496,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -542,7 +542,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -591,7 +591,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -649,7 +649,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -709,7 +709,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -767,7 +767,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, diff --git a/test/core.tooltip.tests.js b/test/core.tooltip.tests.js index d96dfa302d4..f4d409466fa 100755 --- a/test/core.tooltip.tests.js +++ b/test/core.tooltip.tests.js @@ -30,7 +30,7 @@ describe('Core.Tooltip', function() { var meta = chartInstance.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -146,7 +146,7 @@ describe('Core.Tooltip', function() { var meta = chartInstance.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -234,7 +234,7 @@ describe('Core.Tooltip', function() { var meta = chartInstance.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -377,7 +377,7 @@ describe('Core.Tooltip', function() { var meta = chartInstance.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -494,7 +494,7 @@ describe('Core.Tooltip', function() { var meta0 = chartInstance.getDatasetMeta(0); var point0 = meta0.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -576,7 +576,7 @@ describe('Core.Tooltip', function() { var meta0 = chartInstance.getDatasetMeta(0); var point0 = meta0.data[1]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -644,7 +644,7 @@ describe('Core.Tooltip', function() { var datasetIndex = 0; var meta = chartInstance.getDatasetMeta(datasetIndex); var point = meta.data[pointIndex]; - var node = chartInstance.chart.canvas; + var node = chartInstance.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { view: window, diff --git a/test/mockContext.js b/test/mockContext.js index 0d12384778d..b6d2c13f535 100644 --- a/test/mockContext.js +++ b/test/mockContext.js @@ -177,20 +177,17 @@ function toBeValidChart() { return { compare: function(actual) { - var chart = actual && actual.chart; var message = null; - if (!(actual instanceof Chart.Controller)) { - message = 'Expected ' + actual + ' to be an instance of Chart.Controller'; - } else if (!(chart instanceof Chart)) { - message = 'Expected chart to be an instance of Chart'; - } else if (!(chart.canvas instanceof HTMLCanvasElement)) { + if (!(actual instanceof Chart)) { + message = 'Expected ' + actual + ' to be an instance of Chart'; + } else if (!(actual.canvas instanceof HTMLCanvasElement)) { message = 'Expected canvas to be an instance of HTMLCanvasElement'; - } else if (!(chart.ctx instanceof CanvasRenderingContext2D)) { + } else if (!(actual.ctx instanceof CanvasRenderingContext2D)) { message = 'Expected context to be an instance of CanvasRenderingContext2D'; - } else if (typeof chart.height !== 'number' || !isFinite(chart.height)) { + } else if (typeof actual.height !== 'number' || !isFinite(actual.height)) { message = 'Expected height to be a strict finite number'; - } else if (typeof chart.width !== 'number' || !isFinite(chart.width)) { + } else if (typeof actual.width !== 'number' || !isFinite(actual.width)) { message = 'Expected width to be a strict finite number'; } @@ -211,8 +208,7 @@ } var message = null; - var chart = actual.chart; - var canvas = chart.ctx.canvas; + var canvas = actual.ctx.canvas; var style = getComputedStyle(canvas); var pixelRatio = window.devicePixelRatio; var dh = parseInt(style.height, 10); @@ -223,10 +219,10 @@ var orw = rw / pixelRatio; // sanity checks - if (chart.height !== orh) { - message = 'Expected chart height ' + chart.height + ' to be equal to original render height ' + orh; - } else if (chart.width !== orw) { - message = 'Expected chart width ' + chart.width + ' to be equal to original render width ' + orw; + if (actual.height !== orh) { + message = 'Expected chart height ' + actual.height + ' to be equal to original render height ' + orh; + } else if (actual.width !== orw) { + message = 'Expected chart width ' + actual.width + ' to be equal to original render width ' + orw; } // validity checks diff --git a/test/platform.dom.tests.js b/test/platform.dom.tests.js index a022cc75d5a..06562c9191f 100644 --- a/test/platform.dom.tests.js +++ b/test/platform.dom.tests.js @@ -1,7 +1,7 @@ describe('Platform.dom', function() { function waitForResize(chart, callback) { - var resizer = chart.chart.canvas.parentNode._chartjs.resizer; + var resizer = chart.canvas.parentNode._chartjs.resizer; var content = resizer.contentWindow || resizer; var state = content.document.readyState || 'complete'; var handler = function() { @@ -40,8 +40,8 @@ describe('Platform.dom', function() { var chart = new Chart(canvasId); expect(chart).toBeValidChart(); - expect(chart.chart.canvas).toBe(canvas); - expect(chart.chart.ctx).toBe(canvas.getContext('2d')); + expect(chart.canvas).toBe(canvas); + expect(chart.ctx).toBe(canvas.getContext('2d')); chart.destroy(); }); @@ -51,8 +51,8 @@ describe('Platform.dom', function() { var chart = new Chart(canvas); expect(chart).toBeValidChart(); - expect(chart.chart.canvas).toBe(canvas); - expect(chart.chart.ctx).toBe(canvas.getContext('2d')); + expect(chart.canvas).toBe(canvas); + expect(chart.ctx).toBe(canvas.getContext('2d')); chart.destroy(); }); @@ -63,8 +63,8 @@ describe('Platform.dom', function() { var chart = new Chart(context); expect(chart).toBeValidChart(); - expect(chart.chart.canvas).toBe(canvas); - expect(chart.chart.ctx).toBe(context); + expect(chart.canvas).toBe(canvas); + expect(chart.ctx).toBe(context); chart.destroy(); }); @@ -74,8 +74,8 @@ describe('Platform.dom', function() { var chart = new Chart([canvas]); expect(chart).toBeValidChart(); - expect(chart.chart.canvas).toBe(canvas); - expect(chart.chart.ctx).toBe(canvas.getContext('2d')); + expect(chart.canvas).toBe(canvas); + expect(chart.ctx).toBe(canvas.getContext('2d')); chart.destroy(); }); @@ -254,7 +254,7 @@ describe('Platform.dom', function() { describe('controller.destroy', function() { it('should reset context to default values', function() { var chart = acquireChart({}); - var context = chart.chart.ctx; + var context = chart.ctx; chart.destroy(); @@ -294,7 +294,7 @@ describe('Platform.dom', function() { } }); - var canvas = chart.chart.canvas; + var canvas = chart.canvas; var wrapper = canvas.parentNode; wrapper.style.width = '475px'; waitForResize(chart, function() { @@ -338,7 +338,7 @@ describe('Platform.dom', function() { plugins: [plugin] }); - var node = chart.chart.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var clientX = (rect.left + rect.right) / 2; var clientY = (rect.top + rect.bottom) / 2; @@ -362,8 +362,8 @@ describe('Platform.dom', function() { expect(notifiedEvent.type).toBe(evt.type); // Relative Position - expect(notifiedEvent.x).toBe(chart.chart.width / 2); - expect(notifiedEvent.y).toBe(chart.chart.height / 2); + expect(notifiedEvent.x).toBe(chart.width / 2); + expect(notifiedEvent.y).toBe(chart.height / 2); }); }); }); From 415956aeda0d2b876a436e6c0a9a26a38a60f3c0 Mon Sep 17 00:00:00 2001 From: Simon Brunel Date: Sat, 28 Jan 2017 12:52:40 +0100 Subject: [PATCH 3/4] Rename `chartInstance` to `chart` --- docs/01-Chart-Configuration.md | 22 ++--- docs/02-Scales.md | 10 +- docs/09-Advanced.md | 32 +++---- samples/data_labelling.html | 8 +- src/core/core.animation.js | 25 ++--- src/core/core.controller.js | 6 +- src/core/core.layoutService.js | 42 ++++----- src/core/core.legend.js | 34 +++---- src/core/core.scaleService.js | 6 +- src/core/core.title.js | 30 +++--- src/core/core.tooltip.js | 11 +-- test/core.interaction.tests.js | 162 ++++++++++++++++----------------- test/core.tooltip.tests.js | 60 ++++++------ 13 files changed, 224 insertions(+), 224 deletions(-) diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index 865a7558379..883d74ec009 100644 --- a/docs/01-Chart-Configuration.md +++ b/docs/01-Chart-Configuration.md @@ -21,7 +21,7 @@ yLabels | Array[string] | Optional parameter that is used with the category axis To create a chart with configuration options, simply pass an object containing your configuration to the constructor. In the example below, a line chart is created and configured to not be responsive. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'line', data: data, options: { @@ -42,13 +42,13 @@ The following example would set the hover mode to 'nearest' for all charts where Chart.defaults.global.hover.mode = 'nearest'; // Hover mode is set to nearest because it was not overridden here -var chartInstanceHoverModeNearest = new Chart(ctx, { +var chartHoverModeNearest = new Chart(ctx, { type: 'line', data: data, }); // This chart would have the hover mode that was passed in -var chartInstanceDifferentHoverMode = new Chart(ctx, { +var chartDifferentHoverMode = new Chart(ctx, { type: 'line', data: data, options: { @@ -115,7 +115,7 @@ text | String | '' | Title text The example below would enable a title of 'Custom Chart Title' on the chart that is created. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'line', data: data, options: { @@ -200,7 +200,7 @@ Items passed to the legend `onClick` function are the ones returned from `labels The following example will create a chart with the legend enabled and turn all of the text red in color. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'bar', data: data, options: { @@ -267,7 +267,7 @@ afterTitle | `Array[tooltipItem], data` | Text to render after the title beforeBody | `Array[tooltipItem], data` | Text to render before the body section beforeLabel | `tooltipItem, data` | Text to render before an individual label label | `tooltipItem, data` | Text to render for an individual item in the tooltip -labelColor | `tooltipItem, chartInstance` | Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`. +labelColor | `tooltipItem, chart` | Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`. afterLabel | `tooltipItem, data` | Text to render after an individual label afterBody | `Array[tooltipItem], data` | Text to render after the body section beforeFooter | `Array[tooltipItem], data` | Text to render before the footer section @@ -317,13 +317,13 @@ When configuring interaction with the graph via hover or tooltips, a number of d The following table details the modes and how they behave in conjunction with the `intersect` setting -Mode | Behaviour ---- | --- +Mode | Behaviour +--- | --- point | Finds all of the items that intersect the point nearest | Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars. single (deprecated) | Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true. label (deprecated) | See `'index'` mode -index | Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index. +index | Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index. x-axis (deprecated) | Behaves like `'index'` mode with `intersect = false` dataset | Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index. x | Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts @@ -346,8 +346,8 @@ The `onProgress` and `onComplete` callbacks are useful for synchronizing an exte ```javascript { - // Chart object - chartInstance, + // Chart instance + chart, // Contains details of the on-going animation animationObject, diff --git a/docs/02-Scales.md b/docs/02-Scales.md index af7812ce03b..a8abfb4b382 100644 --- a/docs/02-Scales.md +++ b/docs/02-Scales.md @@ -98,7 +98,7 @@ The `callback` method may be used for advanced tick customization. In the follow If the callback returns `null` or `undefined` the associated grid line will be hidden. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'line', data: data, options: { @@ -153,7 +153,7 @@ suggestedMin | Number | - | User defined minimum number for the scale, overrides The following example creates a line chart with a vertical axis that goes from 0 to 5 in 0.5 sized steps. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'line', data: data, options: { @@ -188,7 +188,7 @@ max | Number | - | User defined maximum number for the scale, overrides maximum The following example creates a chart with a logarithmic X axis that ranges from 1 to 1000. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'line', data: data, options: { @@ -250,7 +250,7 @@ year | 'YYYY' For example, to set the display format for the 'quarter' unit to show the month and year, the following config would be passed to the chart constructor. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'line', data: data, options: { @@ -285,7 +285,7 @@ The following time measurements are supported. The names can be passed as string For example, to create a chart with a time scale that always displayed units per month, the following config could be used. ```javascript -var chartInstance = new Chart(ctx, { +var chart = new Chart(ctx, { type: 'line', data: data, options: { diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md index 05642fcab43..bdf02e7044b 100644 --- a/docs/09-Advanced.md +++ b/docs/09-Advanced.md @@ -415,33 +415,33 @@ Plugins will be called at the following times Plugins should implement the `IPlugin` interface: ```javascript { - beforeInit: function(chartInstance) { }, - afterInit: function(chartInstance) { }, + beforeInit: function(chart) { }, + afterInit: function(chart) { }, - resize: function(chartInstance, newChartSize) { }, + resize: function(chart, newChartSize) { }, - beforeUpdate: function(chartInstance) { }, - afterScaleUpdate: function(chartInstance) { } - beforeDatasetsUpdate: function(chartInstance) { } - afterDatasetsUpdate: function(chartInstance) { } - afterUpdate: function(chartInstance) { }, + beforeUpdate: function(chart) { }, + afterScaleUpdate: function(chart) { } + beforeDatasetsUpdate: function(chart) { } + afterDatasetsUpdate: function(chart) { } + afterUpdate: function(chart) { }, // This is called at the start of a render. It is only called once, even if the animation will run for a number of frames. Use beforeDraw or afterDraw // to do something on each animation frame - beforeRender: function(chartInstance) { }, + beforeRender: function(chart) { }, // Easing is for animation - beforeDraw: function(chartInstance, easing) { }, - afterDraw: function(chartInstance, easing) { }, + beforeDraw: function(chart, easing) { }, + afterDraw: function(chart, easing) { }, // Before the datasets are drawn but after scales are drawn - beforeDatasetsDraw: function(chartInstance, easing) { }, - afterDatasetsDraw: function(chartInstance, easing) { }, + beforeDatasetsDraw: function(chart, easing) { }, + afterDatasetsDraw: function(chart, easing) { }, - destroy: function(chartInstance) { } + destroy: function(chart) { } // Called when an event occurs on the chart - beforeEvent: function(chartInstance, event) {} - afterEvent: function(chartInstance, event) {} + beforeEvent: function(chart, event) {} + afterEvent: function(chart, event) {} } ``` diff --git a/samples/data_labelling.html b/samples/data_labelling.html index 4b6b19e16db..8c64bcf0920 100644 --- a/samples/data_labelling.html +++ b/samples/data_labelling.html @@ -71,12 +71,12 @@ // Define a plugin to provide data labels Chart.plugins.register({ - afterDatasetsDraw: function(chartInstance, easing) { + afterDatasetsDraw: function(chart, easing) { // To only draw at the end of animation, check for easing === 1 - var ctx = chartInstance.ctx; + var ctx = chart.ctx; - chartInstance.data.datasets.forEach(function (dataset, i) { - var meta = chartInstance.getDatasetMeta(i); + chart.data.datasets.forEach(function (dataset, i) { + var meta = chart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach(function(element, index) { // Draw the text in black, with the specified font diff --git a/src/core/core.animation.js b/src/core/core.animation.js index dcb9c2ee0de..c0f4a35f707 100644 --- a/src/core/core.animation.js +++ b/src/core/core.animation.js @@ -30,20 +30,20 @@ module.exports = function(Chart) { /** * @function Chart.animationService.addAnimation - * @param chartInstance {ChartController} the chart to animate + * @param chart {ChartController} the chart to animate * @param animationObject {IAnimation} the animation that we will animate * @param duration {Number} length of animation in ms * @param lazy {Boolean} if true, the chart is not marked as animating to enable more responsive interactions */ - addAnimation: function(chartInstance, animationObject, duration, lazy) { + addAnimation: function(chart, animationObject, duration, lazy) { var me = this; if (!lazy) { - chartInstance.animating = true; + chart.animating = true; } for (var index = 0; index < me.animations.length; ++index) { - if (me.animations[index].chartInstance === chartInstance) { + if (me.animations[index].chart === chart) { // replacing an in progress animation me.animations[index].animationObject = animationObject; return; @@ -51,7 +51,8 @@ module.exports = function(Chart) { } me.animations.push({ - chartInstance: chartInstance, + chart: chart, + chartInstance: chart, // deprecated, backward compatibility animationObject: animationObject }); @@ -61,14 +62,14 @@ module.exports = function(Chart) { } }, // Cancel the animation for a given chart instance - cancelAnimation: function(chartInstance) { + cancelAnimation: function(chart) { var index = helpers.findIndex(this.animations, function(animationWrapper) { - return animationWrapper.chartInstance === chartInstance; + return animationWrapper.chart === chart; }); if (index !== -1) { this.animations.splice(index, 1); - chartInstance.animating = false; + chart.animating = false; } }, requestAnimationFrame: function() { @@ -106,18 +107,18 @@ module.exports = function(Chart) { me.animations[i].animationObject.currentStep = me.animations[i].animationObject.numSteps; } - me.animations[i].animationObject.render(me.animations[i].chartInstance, me.animations[i].animationObject); + me.animations[i].animationObject.render(me.animations[i].chart, me.animations[i].animationObject); if (me.animations[i].animationObject.onAnimationProgress && me.animations[i].animationObject.onAnimationProgress.call) { - me.animations[i].animationObject.onAnimationProgress.call(me.animations[i].chartInstance, me.animations[i]); + me.animations[i].animationObject.onAnimationProgress.call(me.animations[i].chart, me.animations[i]); } if (me.animations[i].animationObject.currentStep === me.animations[i].animationObject.numSteps) { if (me.animations[i].animationObject.onAnimationComplete && me.animations[i].animationObject.onAnimationComplete.call) { - me.animations[i].animationObject.onAnimationComplete.call(me.animations[i].chartInstance, me.animations[i]); + me.animations[i].animationObject.onAnimationComplete.call(me.animations[i].chart, me.animations[i]); } // executed the last frame. Remove the animation. - me.animations[i].chartInstance.animating = false; + me.animations[i].chart.animating = false; me.animations.splice(i, 1); } else { diff --git a/src/core/core.controller.js b/src/core/core.controller.js index bf973929886..57a6cfe4210 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -419,12 +419,12 @@ module.exports = function(Chart) { animation.easing = animationOptions.easing; // render function - animation.render = function(chartInstance, animationObject) { + animation.render = function(chart, animationObject) { var easingFunction = helpers.easingEffects[animationObject.easing]; var stepDecimal = animationObject.currentStep / animationObject.numSteps; var easeDecimal = easingFunction(stepDecimal); - chartInstance.draw(easeDecimal, stepDecimal, animationObject.currentStep); + chart.draw(easeDecimal, stepDecimal, animationObject.currentStep); }; // user events @@ -601,7 +601,7 @@ module.exports = function(Chart) { var me = this; me.tooltip = new Chart.Tooltip({ _chart: me, - _chartInstance: me, + _chartInstance: me, // deprecated, backward compatibility _data: me.data, _options: me.options.tooltips }, me); diff --git a/src/core/core.layoutService.js b/src/core/core.layoutService.js index 39cf26b9006..bd82e4780e9 100644 --- a/src/core/core.layoutService.js +++ b/src/core/core.layoutService.js @@ -10,29 +10,29 @@ module.exports = function(Chart) { Chart.layoutService = { defaults: {}, - // Register a box to a chartInstance. A box is simply a reference to an object that requires layout. eg. Scales, Legend, Plugins. - addBox: function(chartInstance, box) { - if (!chartInstance.boxes) { - chartInstance.boxes = []; + // Register a box to a chart. A box is simply a reference to an object that requires layout. eg. Scales, Legend, Plugins. + addBox: function(chart, box) { + if (!chart.boxes) { + chart.boxes = []; } - chartInstance.boxes.push(box); + chart.boxes.push(box); }, - removeBox: function(chartInstance, box) { - if (!chartInstance.boxes) { + removeBox: function(chart, box) { + if (!chart.boxes) { return; } - chartInstance.boxes.splice(chartInstance.boxes.indexOf(box), 1); + chart.boxes.splice(chart.boxes.indexOf(box), 1); }, // The most important function - update: function(chartInstance, width, height) { + update: function(chart, width, height) { - if (!chartInstance) { + if (!chart) { return; } - var layoutOptions = chartInstance.options.layout; + var layoutOptions = chart.options.layout; var padding = layoutOptions ? layoutOptions.padding : null; var leftPadding = 0; @@ -53,21 +53,21 @@ module.exports = function(Chart) { bottomPadding = padding.bottom || 0; } - var leftBoxes = helpers.where(chartInstance.boxes, function(box) { + var leftBoxes = helpers.where(chart.boxes, function(box) { return box.options.position === 'left'; }); - var rightBoxes = helpers.where(chartInstance.boxes, function(box) { + var rightBoxes = helpers.where(chart.boxes, function(box) { return box.options.position === 'right'; }); - var topBoxes = helpers.where(chartInstance.boxes, function(box) { + var topBoxes = helpers.where(chart.boxes, function(box) { return box.options.position === 'top'; }); - var bottomBoxes = helpers.where(chartInstance.boxes, function(box) { + var bottomBoxes = helpers.where(chart.boxes, function(box) { return box.options.position === 'bottom'; }); // Boxes that overlay the chartarea such as the radialLinear scale - var chartAreaBoxes = helpers.where(chartInstance.boxes, function(box) { + var chartAreaBoxes = helpers.where(chart.boxes, function(box) { return box.options.position === 'chartArea'; }); @@ -348,7 +348,7 @@ module.exports = function(Chart) { helpers.each(bottomBoxes, placeBox); // Step 8 - chartInstance.chartArea = { + chart.chartArea = { left: totalLeftBoxesWidth, top: totalTopBoxesHeight, right: totalLeftBoxesWidth + maxChartAreaWidth, @@ -357,10 +357,10 @@ module.exports = function(Chart) { // Step 9 helpers.each(chartAreaBoxes, function(box) { - box.left = chartInstance.chartArea.left; - box.top = chartInstance.chartArea.top; - box.right = chartInstance.chartArea.right; - box.bottom = chartInstance.chartArea.bottom; + box.left = chart.chartArea.left; + box.top = chart.chartArea.top; + box.right = chart.chartArea.right; + box.bottom = chart.chartArea.bottom; box.update(maxChartAreaWidth, maxChartAreaHeight); }); diff --git a/src/core/core.legend.js b/src/core/core.legend.js index 9874adfea54..9e181193208 100644 --- a/src/core/core.legend.js +++ b/src/core/core.legend.js @@ -491,43 +491,43 @@ module.exports = function(Chart) { } }); - function createNewLegendAndAttach(chartInstance, legendOpts) { + function createNewLegendAndAttach(chart, legendOpts) { var legend = new Chart.Legend({ - ctx: chartInstance.ctx, + ctx: chart.ctx, options: legendOpts, - chart: chartInstance + chart: chart }); - chartInstance.legend = legend; - Chart.layoutService.addBox(chartInstance, legend); + chart.legend = legend; + Chart.layoutService.addBox(chart, legend); } // Register the legend plugin Chart.plugins.register({ - beforeInit: function(chartInstance) { - var legendOpts = chartInstance.options.legend; + beforeInit: function(chart) { + var legendOpts = chart.options.legend; if (legendOpts) { - createNewLegendAndAttach(chartInstance, legendOpts); + createNewLegendAndAttach(chart, legendOpts); } }, - beforeUpdate: function(chartInstance) { - var legendOpts = chartInstance.options.legend; + beforeUpdate: function(chart) { + var legendOpts = chart.options.legend; if (legendOpts) { legendOpts = helpers.configMerge(Chart.defaults.global.legend, legendOpts); - if (chartInstance.legend) { - chartInstance.legend.options = legendOpts; + if (chart.legend) { + chart.legend.options = legendOpts; } else { - createNewLegendAndAttach(chartInstance, legendOpts); + createNewLegendAndAttach(chart, legendOpts); } } else { - Chart.layoutService.removeBox(chartInstance, chartInstance.legend); - delete chartInstance.legend; + Chart.layoutService.removeBox(chart, chart.legend); + delete chart.legend; } }, - afterEvent: function(chartInstance, e) { - var legend = chartInstance.legend; + afterEvent: function(chart, e) { + var legend = chart.legend; if (legend) { legend.handleEvent(e); } diff --git a/src/core/core.scaleService.js b/src/core/core.scaleService.js index 81a95079053..4f3dea242cb 100644 --- a/src/core/core.scaleService.js +++ b/src/core/core.scaleService.js @@ -30,10 +30,10 @@ module.exports = function(Chart) { defaults[type] = helpers.extend(defaults[type], additions); } }, - addScalesToLayout: function(chartInstance) { + addScalesToLayout: function(chart) { // Adds each scale to the chart.boxes array to be sized accordingly - helpers.each(chartInstance.scales, function(scale) { - Chart.layoutService.addBox(chartInstance, scale); + helpers.each(chart.scales, function(scale) { + Chart.layoutService.addBox(chart, scale); }); } }; diff --git a/src/core/core.title.js b/src/core/core.title.js index 8e1416497e5..a1a3c8f4309 100644 --- a/src/core/core.title.js +++ b/src/core/core.title.js @@ -181,39 +181,39 @@ module.exports = function(Chart) { } }); - function createNewTitleBlockAndAttach(chartInstance, titleOpts) { + function createNewTitleBlockAndAttach(chart, titleOpts) { var title = new Chart.Title({ - ctx: chartInstance.ctx, + ctx: chart.ctx, options: titleOpts, - chart: chartInstance + chart: chart }); - chartInstance.titleBlock = title; - Chart.layoutService.addBox(chartInstance, title); + chart.titleBlock = title; + Chart.layoutService.addBox(chart, title); } // Register the title plugin Chart.plugins.register({ - beforeInit: function(chartInstance) { - var titleOpts = chartInstance.options.title; + beforeInit: function(chart) { + var titleOpts = chart.options.title; if (titleOpts) { - createNewTitleBlockAndAttach(chartInstance, titleOpts); + createNewTitleBlockAndAttach(chart, titleOpts); } }, - beforeUpdate: function(chartInstance) { - var titleOpts = chartInstance.options.title; + beforeUpdate: function(chart) { + var titleOpts = chart.options.title; if (titleOpts) { titleOpts = helpers.configMerge(Chart.defaults.global.title, titleOpts); - if (chartInstance.titleBlock) { - chartInstance.titleBlock.options = titleOpts; + if (chart.titleBlock) { + chart.titleBlock.options = titleOpts; } else { - createNewTitleBlockAndAttach(chartInstance, titleOpts); + createNewTitleBlockAndAttach(chart, titleOpts); } } else { - Chart.layoutService.removeBox(chartInstance, chartInstance.titleBlock); - delete chartInstance.titleBlock; + Chart.layoutService.removeBox(chart, chart.titleBlock); + delete chart.titleBlock; } } }); diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index 32589b652e6..4084b956869 100755 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -70,8 +70,8 @@ module.exports = function(Chart) { var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || ''; return datasetLabel + ': ' + tooltipItem.yLabel; }, - labelColor: function(tooltipItem, chartInstance) { - var meta = chartInstance.getDatasetMeta(tooltipItem.datasetIndex); + labelColor: function(tooltipItem, chart) { + var meta = chart.getDatasetMeta(tooltipItem.datasetIndex); var activeElement = meta.data[tooltipItem.index]; var view = activeElement._view; return { @@ -249,7 +249,7 @@ module.exports = function(Chart) { function determineAlignment(tooltip, size) { var model = tooltip._model; var chart = tooltip._chart; - var chartArea = tooltip._chartInstance.chartArea; + var chartArea = tooltip._chart.chartArea; var xAlign = 'center'; var yAlign = 'center'; @@ -452,7 +452,6 @@ module.exports = function(Chart) { var active = me._active; var data = me._data; - var chartInstance = me._chartInstance; // In the case where active.length === 0 we need to keep these at existing values for good animations var alignment = { @@ -501,7 +500,7 @@ module.exports = function(Chart) { // Determine colors for boxes helpers.each(tooltipItems, function(tooltipItem) { - labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, chartInstance)); + labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart)); }); // Build the Text Lines @@ -777,7 +776,7 @@ module.exports = function(Chart) { if (e.type === 'mouseout') { me._active = []; } else { - me._active = me._chartInstance.getElementsAtEventForMode(e, options.mode, options); + me._active = me._chart.getElementsAtEventForMode(e, options.mode, options); } // Remember Last Actives diff --git a/test/core.interaction.tests.js b/test/core.interaction.tests.js index fedcbfad864..377fb401bd1 100644 --- a/test/core.interaction.tests.js +++ b/test/core.interaction.tests.js @@ -4,7 +4,7 @@ describe('Core.Interaction', function() { describe('point mode', function() { it ('should return all items under the point', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -23,11 +23,11 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); var point = meta0.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -39,12 +39,12 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.point(chartInstance, evt); + var elements = Chart.Interaction.modes.point(chart, evt); expect(elements).toEqual([point, meta1.data[1]]); }); it ('should return an empty array when no items are found', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -63,7 +63,7 @@ describe('Core.Interaction', function() { }); // Trigger an event at (0, 0) - var node = chartInstance.canvas; + var node = chart.canvas; var evt = { view: window, bubbles: true, @@ -73,14 +73,14 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.point(chartInstance, evt); + var elements = Chart.Interaction.modes.point(chart, evt); expect(elements).toEqual([]); }); }); describe('index mode', function() { it ('should return all items at the same index', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -99,11 +99,11 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); var point = meta0.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -115,12 +115,12 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.index(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.index(chart, evt, {intersect: true}); expect(elements).toEqual([point, meta1.data[1]]); }); it ('should return all items at the same index when intersect is false', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -139,10 +139,10 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -154,14 +154,14 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.index(chartInstance, evt, {intersect: false}); + var elements = Chart.Interaction.modes.index(chart, evt, {intersect: false}); expect(elements).toEqual([meta0.data[0], meta1.data[0]]); }); }); describe('dataset mode', function() { it ('should return all items in the dataset of the first item found', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -180,10 +180,10 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta = chartInstance.getDatasetMeta(0); + var meta = chart.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -195,12 +195,12 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.dataset(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.dataset(chart, evt, {intersect: true}); expect(elements).toEqual(meta.data); }); it ('should return all items in the dataset of the first item found when intersect is false', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -218,7 +218,7 @@ describe('Core.Interaction', function() { } }); - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { @@ -230,16 +230,16 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.dataset(chartInstance, evt, {intersect: false}); + var elements = Chart.Interaction.modes.dataset(chart, evt, {intersect: false}); - var meta = chartInstance.getDatasetMeta(1); + var meta = chart.getDatasetMeta(1); expect(elements).toEqual(meta.data); }); }); describe('nearest mode', function() { it ('should return the nearest item', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -258,8 +258,8 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta = chartInstance.getDatasetMeta(1); - var node = chartInstance.canvas; + var meta = chart.getDatasetMeta(1); + var node = chart.canvas; var evt = { view: window, bubbles: true, @@ -270,12 +270,12 @@ describe('Core.Interaction', function() { }; // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: false}); + var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false}); expect(elements).toEqual([meta.data[0]]); }); it ('should return the smallest item if more than 1 are at the same distance', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -296,8 +296,8 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); // Halfway between 2 mid points var pt = { @@ -305,7 +305,7 @@ describe('Core.Interaction', function() { y: (meta0.data[1]._view.y + meta1.data[1]._view.y) / 2 }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -317,12 +317,12 @@ describe('Core.Interaction', function() { }; // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: false}); + var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false}); expect(elements).toEqual([meta0.data[1]]); }); it ('should return the lowest dataset index if size and area are the same', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -343,8 +343,8 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); // Halfway between 2 mid points var pt = { @@ -352,7 +352,7 @@ describe('Core.Interaction', function() { y: (meta0.data[1]._view.y + meta1.data[1]._view.y) / 2 }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -364,14 +364,14 @@ describe('Core.Interaction', function() { }; // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: false}); + var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: false}); expect(elements).toEqual([meta0.data[1]]); }); }); describe('nearest intersect mode', function() { it ('should return the nearest item', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -390,10 +390,10 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta = chartInstance.getDatasetMeta(1); + var meta = chart.getDatasetMeta(1); var point = meta.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -405,7 +405,7 @@ describe('Core.Interaction', function() { }; // Nothing intersects so find nothing - var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true}); expect(elements).toEqual([]); evt = { @@ -416,12 +416,12 @@ describe('Core.Interaction', function() { clientY: rect.top + point._view.y, currentTarget: node }; - elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true}); + elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true}); expect(elements).toEqual([point]); }); it ('should return the nearest item even if 2 intersect', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -442,7 +442,7 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); + var meta0 = chart.getDatasetMeta(0); // Halfway between 2 mid points var pt = { @@ -450,7 +450,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -462,12 +462,12 @@ describe('Core.Interaction', function() { }; // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true}); expect(elements).toEqual([meta0.data[1]]); }); it ('should return the smallest item if more than 1 are at the same distance', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -488,7 +488,7 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); + var meta0 = chart.getDatasetMeta(0); // Halfway between 2 mid points var pt = { @@ -496,7 +496,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -508,12 +508,12 @@ describe('Core.Interaction', function() { }; // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true}); expect(elements).toEqual([meta0.data[1]]); }); it ('should return the item at the lowest dataset index if distance and area are the same', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -534,7 +534,7 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); + var meta0 = chart.getDatasetMeta(0); // Halfway between 2 mid points var pt = { @@ -542,7 +542,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -554,14 +554,14 @@ describe('Core.Interaction', function() { }; // Nearest to 0,0 (top left) will be first point of dataset 2 - var elements = Chart.Interaction.modes.nearest(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.nearest(chart, evt, {intersect: true}); expect(elements).toEqual([meta0.data[1]]); }); }); describe('x mode', function() { it('should return items at the same x value when intersect is false', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -582,8 +582,8 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); // Halfway between 2 mid points var pt = { @@ -591,7 +591,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -602,7 +602,7 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: false}); + var elements = Chart.Interaction.modes.x(chart, evt, {intersect: false}); expect(elements).toEqual([meta0.data[1], meta1.data[1]]); evt = { @@ -614,12 +614,12 @@ describe('Core.Interaction', function() { currentTarget: node }; - elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: false}); + elements = Chart.Interaction.modes.x(chart, evt, {intersect: false}); expect(elements).toEqual([]); }); it('should return items at the same x value when intersect is true', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -640,8 +640,8 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); // Halfway between 2 mid points var pt = { @@ -649,7 +649,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -660,7 +660,7 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.x(chart, evt, {intersect: true}); expect(elements).toEqual([]); // we don't intersect anything evt = { @@ -672,14 +672,14 @@ describe('Core.Interaction', function() { currentTarget: node }; - elements = Chart.Interaction.modes.x(chartInstance, evt, {intersect: true}); + elements = Chart.Interaction.modes.x(chart, evt, {intersect: true}); expect(elements).toEqual([meta0.data[1], meta1.data[1]]); }); }); describe('y mode', function() { it('should return items at the same y value when intersect is false', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -700,8 +700,8 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); // Halfway between 2 mid points var pt = { @@ -709,7 +709,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -720,7 +720,7 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: false}); + var elements = Chart.Interaction.modes.y(chart, evt, {intersect: false}); expect(elements).toEqual([meta0.data[1], meta1.data[0], meta1.data[1], meta1.data[2]]); evt = { @@ -732,12 +732,12 @@ describe('Core.Interaction', function() { currentTarget: node }; - elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: false}); + elements = Chart.Interaction.modes.y(chart, evt, {intersect: false}); expect(elements).toEqual([]); }); it('should return items at the same y value when intersect is true', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -758,8 +758,8 @@ describe('Core.Interaction', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); - var meta1 = chartInstance.getDatasetMeta(1); + var meta0 = chart.getDatasetMeta(0); + var meta1 = chart.getDatasetMeta(1); // Halfway between 2 mid points var pt = { @@ -767,7 +767,7 @@ describe('Core.Interaction', function() { y: meta0.data[1]._view.y }; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = { view: window, @@ -778,7 +778,7 @@ describe('Core.Interaction', function() { currentTarget: node }; - var elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: true}); + var elements = Chart.Interaction.modes.y(chart, evt, {intersect: true}); expect(elements).toEqual([]); // we don't intersect anything evt = { @@ -790,7 +790,7 @@ describe('Core.Interaction', function() { currentTarget: node }; - elements = Chart.Interaction.modes.y(chartInstance, evt, {intersect: true}); + elements = Chart.Interaction.modes.y(chart, evt, {intersect: true}); expect(elements).toEqual([meta0.data[1], meta1.data[0], meta1.data[1], meta1.data[2]]); }); }); diff --git a/test/core.tooltip.tests.js b/test/core.tooltip.tests.js index f4d409466fa..6640bbd536d 100755 --- a/test/core.tooltip.tests.js +++ b/test/core.tooltip.tests.js @@ -2,7 +2,7 @@ describe('Core.Tooltip', function() { describe('index mode', function() { it('Should only use x distance when intersect is false', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -27,10 +27,10 @@ describe('Core.Tooltip', function() { }); // Trigger an event over top of the - var meta = chartInstance.getDatasetMeta(0); + var meta = chart.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -45,7 +45,7 @@ describe('Core.Tooltip', function() { node.dispatchEvent(evt); // Check and see if tooltip was displayed - var tooltip = chartInstance.tooltip; + var tooltip = chart.tooltip; var globalDefaults = Chart.defaults.global; expect(tooltip._view).toEqual(jasmine.objectContaining({ @@ -118,7 +118,7 @@ describe('Core.Tooltip', function() { }); it('Should only display if intersecting if intersect is set', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -143,10 +143,10 @@ describe('Core.Tooltip', function() { }); // Trigger an event over top of the - var meta = chartInstance.getDatasetMeta(0); + var meta = chart.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -161,7 +161,7 @@ describe('Core.Tooltip', function() { node.dispatchEvent(evt); // Check and see if tooltip was displayed - var tooltip = chartInstance.tooltip; + var tooltip = chart.tooltip; var globalDefaults = Chart.defaults.global; expect(tooltip._view).toEqual(jasmine.objectContaining({ @@ -207,7 +207,7 @@ describe('Core.Tooltip', function() { }); it('Should display in single mode', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -231,10 +231,10 @@ describe('Core.Tooltip', function() { }); // Trigger an event over top of the - var meta = chartInstance.getDatasetMeta(0); + var meta = chart.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -249,7 +249,7 @@ describe('Core.Tooltip', function() { node.dispatchEvent(evt); // Check and see if tooltip was displayed - var tooltip = chartInstance.tooltip; + var tooltip = chart.tooltip; var globalDefaults = Chart.defaults.global; expect(tooltip._view).toEqual(jasmine.objectContaining({ @@ -315,7 +315,7 @@ describe('Core.Tooltip', function() { }); it('Should display information from user callbacks', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -374,10 +374,10 @@ describe('Core.Tooltip', function() { }); // Trigger an event over top of the - var meta = chartInstance.getDatasetMeta(0); + var meta = chart.getDatasetMeta(0); var point = meta.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -392,7 +392,7 @@ describe('Core.Tooltip', function() { node.dispatchEvent(evt); // Check and see if tooltip was displayed - var tooltip = chartInstance.tooltip; + var tooltip = chart.tooltip; var globalDefaults = Chart.defaults.global; expect(tooltip._view).toEqual(jasmine.objectContaining({ @@ -464,7 +464,7 @@ describe('Core.Tooltip', function() { }); it('Should display information from user callbacks', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -491,10 +491,10 @@ describe('Core.Tooltip', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); + var meta0 = chart.getDatasetMeta(0); var point0 = meta0.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -509,7 +509,7 @@ describe('Core.Tooltip', function() { node.dispatchEvent(evt); // Check and see if tooltip was displayed - var tooltip = chartInstance.tooltip; + var tooltip = chart.tooltip; expect(tooltip._view).toEqual(jasmine.objectContaining({ // Positioning @@ -544,7 +544,7 @@ describe('Core.Tooltip', function() { }); it('should filter items from the tooltip using the callback', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -573,10 +573,10 @@ describe('Core.Tooltip', function() { }); // Trigger an event over top of the - var meta0 = chartInstance.getDatasetMeta(0); + var meta0 = chart.getDatasetMeta(0); var point0 = meta0.data[1]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { @@ -591,7 +591,7 @@ describe('Core.Tooltip', function() { node.dispatchEvent(evt); // Check and see if tooltip was displayed - var tooltip = chartInstance.tooltip; + var tooltip = chart.tooltip; expect(tooltip._view).toEqual(jasmine.objectContaining({ // Positioning @@ -616,7 +616,7 @@ describe('Core.Tooltip', function() { }); it('Should have dataPoints', function() { - var chartInstance = window.acquireChart({ + var chart = window.acquireChart({ type: 'line', data: { datasets: [{ @@ -642,9 +642,9 @@ describe('Core.Tooltip', function() { // Trigger an event over top of the var pointIndex = 1; var datasetIndex = 0; - var meta = chartInstance.getDatasetMeta(datasetIndex); + var meta = chart.getDatasetMeta(datasetIndex); var point = meta.data[pointIndex]; - var node = chartInstance.canvas; + var node = chart.canvas; var rect = node.getBoundingClientRect(); var evt = new MouseEvent('mousemove', { view: window, @@ -658,7 +658,7 @@ describe('Core.Tooltip', function() { node.dispatchEvent(evt); // Check and see if tooltip was displayed - var tooltip = chartInstance.tooltip; + var tooltip = chart.tooltip; expect(tooltip._view instanceof Object).toBe(true); expect(tooltip._view.dataPoints instanceof Array).toBe(true); @@ -666,10 +666,10 @@ describe('Core.Tooltip', function() { expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex); expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex); expect(tooltip._view.dataPoints[0].xLabel).toEqual( - chartInstance.config.data.labels[pointIndex] + chart.config.data.labels[pointIndex] ); expect(tooltip._view.dataPoints[0].yLabel).toEqual( - chartInstance.config.data.datasets[datasetIndex].data[pointIndex] + chart.config.data.datasets[datasetIndex].data[pointIndex] ); expect(tooltip._view.dataPoints[0].x).toBeCloseToPixel(point._model.x); expect(tooltip._view.dataPoints[0].y).toBeCloseToPixel(point._model.y); From 6ac420c7586818d9de129ed76efa6efb86de3080 Mon Sep 17 00:00:00 2001 From: Simon Brunel Date: Sat, 28 Jan 2017 13:17:38 +0100 Subject: [PATCH 4/4] Unit tests for Chart constructor and deprecations --- src/core/core.controller.js | 1 + src/core/core.interaction.js | 4 ++ test/core.controller.tests.js | 13 ++++- test/global.deprecations.tests.js | 94 +++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 test/global.deprecations.tests.js diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 57a6cfe4210..0d4c128bad7 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -373,6 +373,7 @@ module.exports = function(Chart) { * @method IPlugin#afterScaleUpdate * @deprecated since version 2.5.0 * @todo remove at version 3 + * @private */ plugins.notify(me, 'afterScaleUpdate'); plugins.notify(me, 'afterLayout'); diff --git a/src/core/core.interaction.js b/src/core/core.interaction.js index 53a479f61fc..c2c4ffcbf91 100644 --- a/src/core/core.interaction.js +++ b/src/core/core.interaction.js @@ -158,6 +158,8 @@ module.exports = function(Chart) { /** * @function Chart.Interaction.modes.label * @deprecated since version 2.4.0 + * @todo remove at version 3 + * @private */ label: indexMode, @@ -196,6 +198,8 @@ module.exports = function(Chart) { /** * @function Chart.Interaction.modes.x-axis * @deprecated since version 2.4.0. Use index mode and intersect == true + * @todo remove at version 3 + * @private */ 'x-axis': function(chart, e) { return indexMode(chart, e, true); diff --git a/test/core.controller.tests.js b/test/core.controller.tests.js index 9c5e9e26dd2..f29542cbf59 100644 --- a/test/core.controller.tests.js +++ b/test/core.controller.tests.js @@ -1,4 +1,4 @@ -describe('Chart.Controller', function() { +describe('Chart', function() { function waitForResize(chart, callback) { var resizer = chart.canvas.parentNode._chartjs.resizer; @@ -13,6 +13,17 @@ describe('Chart.Controller', function() { Chart.helpers.addEvent(content, state !== 'complete'? 'load' : 'resize', handler); } + // https://github.com/chartjs/Chart.js/issues/2481 + // See global.deprecations.tests.js for backward compatibility + it('should be defined and prototype of chart instances', function() { + var chart = acquireChart({}); + expect(Chart).toBeDefined(); + expect(Chart instanceof Object).toBeTruthy(); + expect(chart.constructor).toBe(Chart); + expect(chart instanceof Chart).toBeTruthy(); + expect(Chart.prototype.isPrototypeOf(chart)).toBeTruthy(); + }); + describe('config initialization', function() { it('should create missing config.data properties', function() { var chart = acquireChart({}); diff --git a/test/global.deprecations.tests.js b/test/global.deprecations.tests.js new file mode 100644 index 00000000000..a6b4f70f55c --- /dev/null +++ b/test/global.deprecations.tests.js @@ -0,0 +1,94 @@ +describe('Deprecations', function() { + describe('Version 2.6.0', function() { + // https://github.com/chartjs/Chart.js/issues/2481 + describe('Chart.Controller', function() { + it('should be defined and an alias of Chart', function() { + expect(Chart.Controller).toBeDefined(); + expect(Chart.Controller).toBe(Chart); + }); + it('should be prototype of chart instances', function() { + var chart = acquireChart({}); + expect(chart.constructor).toBe(Chart.Controller); + expect(chart instanceof Chart.Controller).toBeTruthy(); + expect(Chart.Controller.prototype.isPrototypeOf(chart)).toBeTruthy(); + }); + }); + + describe('chart.chart', function() { + it('should be defined and an alias of chart', function() { + var chart = acquireChart({}); + var proxy = chart.chart; + expect(proxy).toBeDefined(); + expect(proxy).toBe(chart); + }); + it('should defined previously existing properties', function() { + var chart = acquireChart({}, { + canvas: { + style: 'width: 140px; height: 320px' + } + }); + + var proxy = chart.chart; + expect(proxy.config instanceof Object).toBeTruthy(); + expect(proxy.controller instanceof Chart.Controller).toBeTruthy(); + expect(proxy.canvas instanceof HTMLCanvasElement).toBeTruthy(); + expect(proxy.ctx instanceof CanvasRenderingContext2D).toBeTruthy(); + expect(proxy.currentDevicePixelRatio).toBe(window.devicePixelRatio || 1); + expect(proxy.aspectRatio).toBe(140/320); + expect(proxy.height).toBe(320); + expect(proxy.width).toBe(140); + }); + }); + }); + + describe('Version 2.5.0', function() { + describe('Chart.PluginBase', function() { + it('should exist and extendable', function() { + expect(Chart.PluginBase).toBeDefined(); + expect(Chart.PluginBase.extend).toBeDefined(); + }); + }); + + describe('IPlugin.afterScaleUpdate', function() { + it('should be called after the chart as been layed out', function() { + var sequence = []; + var plugin = {}; + var hooks = [ + 'beforeLayout', + 'afterScaleUpdate', + 'afterLayout' + ]; + + var override = Chart.layoutService.update; + Chart.layoutService.update = function() { + sequence.push('layoutUpdate'); + override.apply(this, arguments); + }; + + hooks.forEach(function(name) { + plugin[name] = function() { + sequence.push(name); + }; + }); + + window.acquireChart({plugins: [plugin]}); + expect(sequence).toEqual([].concat( + 'beforeLayout', + 'layoutUpdate', + 'afterScaleUpdate', + 'afterLayout' + )); + }); + }); + }); + + describe('Version 2.1.5', function() { + // https://github.com/chartjs/Chart.js/pull/2752 + describe('Chart.pluginService', function() { + it('should be defined and an alias of Chart.plugins', function() { + expect(Chart.pluginService).toBeDefined(); + expect(Chart.pluginService).toBe(Chart.plugins); + }); + }); + }); +});