From: Simon Brunel Date: Sat, 28 Jan 2017 11:52:40 +0000 (+0100) Subject: Rename `chartInstance` to `chart` X-Git-Tag: v2.6.0~2^2~71 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=28ea6c4967cc9cf414f8b3c6ca41135d9e2dfffd;p=thirdparty%2FChart.js.git Rename `chartInstance` to `chart` --- diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index 865a75583..883d74ec0 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 af7812ce0..a8abfb4b3 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 05642fcab..bdf02e704 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 4b6b19e16..8c64bcf09 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 dcb9c2ee0..c0f4a35f7 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 bf9739298..57a6cfe42 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 39cf26b90..bd82e4780 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 9874adfea..9e1811932 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 81a950790..4f3dea242 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 8e1416497..a1a3c8f43 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 32589b652..4084b9568 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 fedcbfad8..377fb401b 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 f4d409466..6640bbd53 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);