Skip to content

Chart.Controller deprecation #3839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 10, 2017
Merged

Chart.Controller deprecation #3839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8a57dab
Deprecate Chart.Controller (and nested `chart`)
simonbrunel Jan 28, 2017
df8cf01
Remove deprecated nested `chart` accesses
simonbrunel Jan 28, 2017
415956a
Rename `chartInstance` to `chart`
simonbrunel Jan 28, 2017
6ac420c
Unit tests for Chart constructor and deprecations
simonbrunel Jan 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions docs/01-Chart-Configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand Down
10 changes: 5 additions & 5 deletions docs/02-Scales.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down
32 changes: 16 additions & 16 deletions docs/09-Advanced.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {}
}
```

Expand Down
40 changes: 20 additions & 20 deletions samples/data_labelling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@
backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
borderColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
Copy link
Member

@etimberg etimberg Jan 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are these just whitespace changes?

Copy link
Member Author

@simonbrunel simonbrunel Jan 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, my editor is configured to remove trailing whitespace, which is actually an ESLint rule, but examples are not part of the lint process.

Copy link
Member

@etimberg etimberg Jan 28, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, ok. makes sense :)

randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
Expand All @@ -44,12 +44,12 @@
backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
borderColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
Expand All @@ -58,25 +58,25 @@
backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
borderColor: window.chartColors.green,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}]
};

// 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.chart.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
Expand Down Expand Up @@ -120,7 +120,7 @@

document.getElementById('randomizeData').addEventListener('click', function() {
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
})
});
Expand Down
15 changes: 8 additions & 7 deletions src/controllers/controller.bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ module.exports = function(Chart) {
var xScale = me.getScaleForId(meta.xAxisID);
var stackCount = me.getStackCount();

var tickWidth = xScale.width / xScale.ticks.length;
var tickWidth = xScale.width / xScale.ticks.length;
var categoryWidth = tickWidth * xScale.options.categoryPercentage;
var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
var fullBarWidth = categoryWidth / stackCount;
Expand All @@ -169,7 +169,7 @@ module.exports = function(Chart) {
if (xScale.options.barThickness) {
return xScale.options.barThickness;
}
return ruler.barWidth;
return ruler.barWidth;
},

// Get stack index from the given dataset index accounting for stacks and the fact that not all bars are visible
Expand Down Expand Up @@ -219,7 +219,7 @@ module.exports = function(Chart) {
(yScale.options.stacked === undefined && meta.stack !== undefined)) {
var base = yScale.getBaseValue();
var sumPos = base,
sumNeg = base;
sumNeg = base;

for (var i = 0; i < datasetIndex; i++) {
var ds = me.chart.data.datasets[i];
Expand All @@ -246,19 +246,20 @@ module.exports = function(Chart) {

draw: function(ease) {
var me = this;
var chart = me.chart;
var easingDecimal = ease || 1;
var metaData = me.getMeta().data;
var dataset = me.getDataset();
var i, len;

Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea);
Chart.canvasHelpers.clipArea(chart.ctx, chart.chartArea);
for (i = 0, len = metaData.length; i < len; ++i) {
var d = dataset.data[i];
if (d !== null && d !== undefined && !isNaN(d)) {
metaData[i].transition(easingDecimal).draw();
}
}
Chart.canvasHelpers.unclipArea(me.chart.chart.ctx);
Chart.canvasHelpers.unclipArea(chart.ctx);
},

setHoverStyle: function(rectangle) {
Expand Down Expand Up @@ -483,7 +484,7 @@ module.exports = function(Chart) {
}
}

return stacks.length - 1;
return stacks.length - 1;
},

calculateBarX: function(index, datasetIndex) {
Expand All @@ -496,7 +497,7 @@ module.exports = function(Chart) {
(xScale.options.stacked === undefined && meta.stack !== undefined)) {
var base = xScale.getBaseValue();
var sumPos = base,
sumNeg = base;
sumNeg = base;

for (var i = 0; i < datasetIndex; i++) {
var ds = me.chart.data.datasets[i];
Expand Down
9 changes: 5 additions & 4 deletions src/controllers/controller.line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ module.exports = function(Chart) {

draw: function(ease) {
var me = this;
var chart = me.chart;
var meta = me.getMeta();
var points = meta.data || [];
var easingDecimal = ease || 1;
Expand All @@ -292,16 +293,16 @@ module.exports = function(Chart) {
points[i].transition(easingDecimal);
}

Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea);
Chart.canvasHelpers.clipArea(chart.ctx, chart.chartArea);
// Transition and Draw the line
if (lineEnabled(me.getDataset(), me.chart.options)) {
if (lineEnabled(me.getDataset(), chart.options)) {
meta.dataset.transition(easingDecimal).draw();
}
Chart.canvasHelpers.unclipArea(me.chart.chart.ctx);
Chart.canvasHelpers.unclipArea(chart.ctx);

// Draw the points
for (i=0, ilen=points.length; i<ilen; ++i) {
points[i].draw(me.chart.chartArea);
points[i].draw(chart.chartArea);
}
},

Expand Down
Loading