From c337ea212bb02382c1e2724635ae3d9dffb0cebe Mon Sep 17 00:00:00 2001
From: Jerome Touffe-Blin
Date: Sat, 5 Dec 2015 21:09:21 +1100
Subject: [PATCH 01/62] Remove deprecated attributes
---
README.md | 33 ++++----
angular-chart.js | 82 ++++++--------------
examples/stacked-bars-directive.html | 6 +-
examples/stacked-bars.html | 2 +-
examples/tables.html | 2 +-
examples/tabs.html | 4 +-
examples/ticks.html | 3 +-
test/fixtures/29-tabs.alt.html | 34 --------
test/fixtures/29-tabs.html | 4 +-
test/fixtures/51-pie-update-colours.alt.html | 36 ---------
test/fixtures/51-pie-update-colours.html | 2 +-
test/fixtures/54-not-enough-colours.alt.html | 37 ---------
test/fixtures/54-not-enough-colours.html | 4 +-
test/fixtures/57-hex-colours.alt.html | 36 ---------
test/fixtures/57-hex-colours.html | 2 +-
test/fixtures/charts.alt.html | 78 -------------------
test/fixtures/charts.html | 14 ++--
test/fixtures/configure-line-chart.alt.html | 33 --------
test/fixtures/configure-line-chart.html | 2 +-
test/fixtures/coverage.js | 4 +-
test/fixtures/custom-directive.alt.html | 33 --------
test/fixtures/custom-directive.html | 2 +-
test/test.integration.js | 45 +++++------
test/test.unit.js | 40 +++++-----
24 files changed, 104 insertions(+), 434 deletions(-)
delete mode 100644 test/fixtures/29-tabs.alt.html
delete mode 100644 test/fixtures/51-pie-update-colours.alt.html
delete mode 100644 test/fixtures/54-not-enough-colours.alt.html
delete mode 100644 test/fixtures/57-hex-colours.alt.html
delete mode 100644 test/fixtures/charts.alt.html
delete mode 100644 test/fixtures/configure-line-chart.alt.html
delete mode 100644 test/fixtures/custom-directive.alt.html
diff --git a/README.md b/README.md
index d2044e81..d8bcf802 100644
--- a/README.md
+++ b/README.md
@@ -49,20 +49,15 @@ adding the dependencies for Angular and Chart.js first:
There are 6 types of charts so 6 directives: `chart-line`, `chart-bar`, `chart-radar`, `chart-pie`,
`chart-polar-area`, `chart-doughnut`.
-They all use mostly the same API (`[chart-]` indicates an optional but recommended prefix):
-
-- `[chart-]data`: series data
-- `[chart-]labels`: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)
-- `[chart-]options`: chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
-- `[chart-]series`: (default: `[]`): series labels (line, bar, radar)
-- `[chart-]colours`: data colours (will use default colours if not specified)
-- `getColour`: function that returns a colour in case there are not enough (will use random colours if not specified)
-- `[chart-]click`: onclick event handler
-- `[chart-]hover`: onmousemove event handler
-- `[chart-]legend`: (default: `false`): show legend below the chart
-
-*DEPRECATION WARNING*: Note that all attributes which do *not* use the `[chart-]` prefix are deprecated
-and may be removed in a future version.
+- `chart-data`: series data
+- `chart-labels`: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)
+- `chart-options`: chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
+- `chart-series`: (default: `[]`): series labels (line, bar, radar)
+- `chart-colours`: data colours (will use default colours if not specified)
+- `get-colour`: function that returns a colour in case there are not enough (will use random colours if not specified)
+- `chart-click`: onclick event handler
+- `chart-hover`: onmousemove event handler
+- `chart-legend`: (default: `false`): show legend below the chart
There is another directive `chart-base` that takes an extra attribute `chart-type` to define the type
dynamically, see [stacked bar example](http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html).
@@ -72,7 +67,7 @@ dynamically, see [stacked bar example](http://jtblin.github.io/angular-chart.js/
## Markup
```html
-
```
@@ -84,7 +79,7 @@ angular.module("app", ["chart.js"])
.config(['ChartJsProvider', function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
- colours: ['#FF5252', '#FF8A80'],
+ chartColours: ['#FF5252', '#FF8A80'],
responsive: false
});
// Configure all line charts
@@ -132,11 +127,11 @@ the chart on changes.
angular-chart.js emits the following events on the `scope` and pass the chart as argument:
-* `create`: when chart is created
-* `update`: when chart is updated
+* `chart-create`: when chart is created
+* `chart-update`: when chart is updated
```
-$scope.$on('create', function (event, chart) {
+$scope.$on('chart-create', function (event, chart) {
console.log(chart);
});
```
diff --git a/angular-chart.js b/angular-chart.js
index d6df1cd3..5222234b 100644
--- a/angular-chart.js
+++ b/angular-chart.js
@@ -88,17 +88,8 @@
return {
restrict: 'CA',
scope: {
- data: '=?',
- labels: '=?',
- options: '=?',
- series: '=?',
- colours: '=?',
getColour: '=?',
chartType: '=',
- legend: '@',
- click: '=?',
- hover: '=?',
-
chartData: '=?',
chartLabels: '=?',
chartOptions: '=?',
@@ -116,27 +107,10 @@
if (usingExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
- ['data', 'labels', 'options', 'series', 'colours', 'legend', 'click', 'hover'].forEach(deprecated);
- function aliasVar (fromName, toName) {
- scope.$watch(fromName, function (newVal) {
- if (typeof newVal === 'undefined') return;
- scope[toName] = newVal;
- });
- }
- /* provide backward compatibility to "old" directive names, by
- * having an alias point from the new names to the old names. */
- aliasVar('chartData', 'data');
- aliasVar('chartLabels', 'labels');
- aliasVar('chartOptions', 'options');
- aliasVar('chartSeries', 'series');
- aliasVar('chartColours', 'colours');
- aliasVar('chartLegend', 'legend');
- aliasVar('chartClick', 'click');
- aliasVar('chartHover', 'hover');
-
// Order of setting "watch" matter
- scope.$watch('data', function (newVal, oldVal) {
+ scope.$watch('chartData', function (newVal, oldVal) {
+ //console.log('chartData');
if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) return;
var chartType = type || scope.chartType;
if (! chartType) return;
@@ -149,10 +123,10 @@
createChart(chartType);
}, true);
- scope.$watch('series', resetChart, true);
- scope.$watch('labels', resetChart, true);
- scope.$watch('options', resetChart, true);
- scope.$watch('colours', resetChart, true);
+ scope.$watch('chartSeries', resetChart, true);
+ scope.$watch('chartLabels', resetChart, true);
+ scope.$watch('chartOptions', resetChart, true);
+ scope.$watch('chartColours', resetChart, true);
scope.$watch('chartType', function (newVal, oldVal) {
if (isEmpty(newVal)) return;
@@ -184,32 +158,22 @@
createChart(type);
}, 50, false);
}
- if (! scope.data || ! scope.data.length) return;
+ if (! scope.chartData || ! scope.chartData.length) return;
scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour;
- scope.colours = getColours(type, scope);
+ scope.chartColours = getColours(type, scope);
var cvs = elem[0], ctx = cvs.getContext('2d');
- var data = Array.isArray(scope.data[0]) ?
- getDataSets(scope.labels, scope.data, scope.series || [], scope.colours) :
- getData(scope.labels, scope.data, scope.colours);
- var options = angular.extend({}, ChartJs.getOptions(type), scope.options);
+ var data = Array.isArray(scope.chartData[0]) ?
+ getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], scope.chartColours) :
+ getData(scope.chartLabels, scope.chartData, scope.chartColours);
+ var options = angular.extend({}, ChartJs.getOptions(type), scope.chartOptions);
chart = new ChartJs.Chart(ctx)[type](data, options);
- scope.$emit('create', chart);
+ scope.$emit('chart-create', chart);
// Bind events
- cvs.onclick = scope.click ? getEventHandler(scope, chart, 'click', false) : angular.noop;
- cvs.onmousemove = scope.hover ? getEventHandler(scope, chart, 'hover', true) : angular.noop;
+ cvs.onclick = scope.chartClick ? getEventHandler(scope, chart, 'click', false) : angular.noop;
+ cvs.onmousemove = scope.chartHover ? getEventHandler(scope, chart, 'hover', true) : angular.noop;
- if (scope.legend && scope.legend !== 'false') setLegend(elem, chart);
- }
-
- function deprecated (attr) {
- if (typeof console !== 'undefined' && ChartJs.getOptions().env !== 'test') {
- var warn = typeof console.warn === 'function' ? console.warn : console.log;
- if (!! scope[attr]) {
- warn.call(console, '"%s" is deprecated and will be removed in a future version. ' +
- 'Please use "chart-%s" instead.', attr, attr);
- }
- }
+ if (scope.chartLegend && scope.chartLegend !== 'false') setLegend(elem, chart);
}
}
};
@@ -245,11 +209,11 @@
}
function getColours (type, scope) {
- var colours = angular.copy(scope.colours ||
- ChartJs.getOptions(type).colours ||
+ var colours = angular.copy(scope.chartColours ||
+ ChartJs.getOptions(type).chartColours ||
Chart.defaults.global.colours
);
- while (colours.length < scope.data.length) {
+ while (colours.length < scope.chartData.length) {
colours.push(scope.getColour());
}
return colours.map(convertColour);
@@ -332,7 +296,7 @@
}
function updateChart (chart, values, scope, elem) {
- if (Array.isArray(scope.data[0])) {
+ if (Array.isArray(scope.chartData[0])) {
chart.datasets.forEach(function (dataset, i) {
(dataset.points || dataset.bars).forEach(function (dataItem, j) {
dataItem.value = values[i][j];
@@ -344,8 +308,8 @@
});
}
chart.update();
- scope.$emit('update', chart);
- if (scope.legend && scope.legend !== 'false') setLegend(elem, chart);
+ scope.$emit('chart-update', chart);
+ if (scope.chartLegend && scope.chartLegend !== 'false') setLegend(elem, chart);
}
function isEmpty (value) {
@@ -355,7 +319,7 @@
}
function isResponsive (type, scope) {
- var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.options);
+ var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.chartOptions);
return options.responsive;
}
}
diff --git a/examples/stacked-bars-directive.html b/examples/stacked-bars-directive.html
index bec90e81..bdfb094d 100644
--- a/examples/stacked-bars-directive.html
+++ b/examples/stacked-bars-directive.html
@@ -15,7 +15,7 @@
@@ -31,8 +31,8 @@
diff --git a/examples/stacked-bars.html b/examples/stacked-bars.html
index dbcca282..1b70f077 100644
--- a/examples/stacked-bars.html
+++ b/examples/stacked-bars.html
@@ -15,7 +15,7 @@
diff --git a/examples/tables.html b/examples/tables.html
index 4c0296ce..78c1dda3 100644
--- a/examples/tables.html
+++ b/examples/tables.html
@@ -30,7 +30,7 @@
diff --git a/examples/tabs.html b/examples/tabs.html
index 44415bc3..44e57d81 100644
--- a/examples/tabs.html
+++ b/examples/tabs.html
@@ -13,12 +13,12 @@