mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Rename chartInstance to chart
This commit is contained in:
Simon Brunel
Evert Timberg
parent
13c6121876
commit
28ea6c4967
@ -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,
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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) {}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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]]);
|
||||
});
|
||||
});
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user