|
1 | 1 | /*! |
2 | 2 | * angular-chart.js - An angular.js wrapper for Chart.js |
3 | 3 | * http://jtblin.github.io/angular-chart.js/ |
4 | | - * Version: 1.1.1 |
| 4 | + * Version: 2.0.0 |
5 | 5 | * |
6 | 6 | * Copyright 2016 Jerome Touffe-Blin |
7 | 7 | * Released under the BSD-2-Clause license |
|
14 | 14 | module.exports = factory( |
15 | 15 | typeof angular !== 'undefined' ? angular : require('angular'), |
16 | 16 | typeof Chart !== 'undefined' ? Chart : require('chart.js')); |
17 | | - } else if (typeof define === 'function' && define.amd) { |
| 17 | + } else if (typeof define === 'function' && define.amd) { |
18 | 18 | // AMD. Register as an anonymous module. |
19 | 19 | define(['angular', 'chart'], factory); |
20 | 20 | } else { |
21 | 21 | // Browser globals |
22 | 22 | if (typeof angular === 'undefined') { |
23 | | - throw new Error('AngularJS framework needs to be included, see https://angularjs.org/'); |
| 23 | + throw new Error('AngularJS framework needs to be included, see https://angularjs.org/'); |
24 | 24 | } else if (typeof Chart === 'undefined') { |
25 | 25 | throw new Error('Chart.js library needs to be included, see http://jtblin.github.io/angular-chart.js/'); |
26 | 26 | } |
|
44 | 44 | '#4D5360' // dark grey |
45 | 45 | ]; |
46 | 46 |
|
47 | | - var useExcanvas = typeof window.G_vmlCanvasManager === 'object' && |
| 47 | + const useExcanvas = typeof window.G_vmlCanvasManager === 'object' && |
48 | 48 | window.G_vmlCanvasManager !== null && |
49 | 49 | typeof window.G_vmlCanvasManager.initElement === 'function'; |
50 | 50 |
|
|
53 | 53 | return angular.module('chart.js', []) |
54 | 54 | .provider('ChartJs', ChartJsProvider) |
55 | 55 | .factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory]) |
56 | | - .directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }]) |
57 | | - .directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('line'); }]) |
58 | | - .directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bar'); }]) |
59 | | - .directive('chartHorizontalBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('horizontalBar'); }]) |
60 | | - .directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('radar'); }]) |
61 | | - .directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('doughnut'); }]) |
62 | | - .directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('pie'); }]) |
63 | | - .directive('chartPolarArea', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('polarArea'); }]) |
64 | | - .directive('chartBubble', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bubble'); }]) |
| 56 | + .directive('chartBase', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory()]) |
| 57 | + .directive('chartLine', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('line')]) |
| 58 | + .directive('chartBar', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('bar')]) |
| 59 | + .directive('chartHorizontalBar', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('horizontalBar')]) |
| 60 | + .directive('chartRadar', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('radar')]) |
| 61 | + .directive('chartDoughnut', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('doughnut')]) |
| 62 | + .directive('chartPie', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('pie')]) |
| 63 | + .directive('chartPolarArea', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('polarArea')]) |
| 64 | + .directive('chartBubble', ['ChartJsFactory', (ChartJsFactory) => new ChartJsFactory('bubble')]) |
65 | 65 | .name; |
66 | 66 |
|
67 | 67 | /** |
|
74 | 74 | * }))) |
75 | 75 | */ |
76 | 76 | function ChartJsProvider () { |
77 | | - var options = { responsive: true }; |
78 | | - var ChartJs = { |
| 77 | + let options = { responsive: true }; |
| 78 | + const ChartJs = { |
79 | 79 | Chart: Chart, |
80 | | - getOptions: function (type) { |
81 | | - var typeOptions = type && options[type] || {}; |
| 80 | + getOptions: (type) => { |
| 81 | + const typeOptions = type && options[type] || {}; |
82 | 82 | return angular.extend({}, options, typeOptions); |
83 | 83 | } |
84 | 84 | }; |
|
99 | 99 | angular.merge(ChartJs.Chart.defaults, options); |
100 | 100 | }; |
101 | 101 |
|
102 | | - this.$get = function () { |
103 | | - return ChartJs; |
104 | | - }; |
| 102 | + this.$get = () => ChartJs; |
105 | 103 | } |
106 | 104 |
|
107 | 105 | function ChartJsFactory (ChartJs, $timeout) { |
|
132 | 130 | scope.$watch('chartDatasetOverride', watchOther, true); |
133 | 131 | scope.$watch('chartType', watchType, false); |
134 | 132 |
|
135 | | - scope.$on('$destroy', function () { |
136 | | - destroyChart(scope); |
137 | | - }); |
| 133 | + scope.$on('$destroy', () => destroyChart(scope)); |
138 | 134 |
|
139 | | - scope.$on('$resize', function () { |
| 135 | + scope.$on('$resize', () => { |
140 | 136 | if (scope.chart) scope.chart.resize(); |
141 | 137 | }); |
142 | 138 |
|
|
145 | 141 | destroyChart(scope); |
146 | 142 | return; |
147 | 143 | } |
148 | | - var chartType = type || scope.chartType; |
| 144 | + const chartType = type || scope.chartType; |
149 | 145 | if (! chartType) return; |
150 | 146 |
|
151 | 147 | if (scope.chart && canUpdateChart(newVal, oldVal)) |
|
157 | 153 | function watchOther (newVal, oldVal) { |
158 | 154 | if (isEmpty(newVal)) return; |
159 | 155 | if (angular.equals(newVal, oldVal)) return; |
160 | | - var chartType = type || scope.chartType; |
| 156 | + const chartType = type || scope.chartType; |
161 | 157 | if (! chartType) return; |
162 | 158 |
|
163 | 159 | // chart.update() doesn't work for series and labels |
|
175 | 171 | }; |
176 | 172 |
|
177 | 173 | function createChart (type, scope, elem) { |
178 | | - var options = getChartOptions(type, scope); |
| 174 | + const options = getChartOptions(type, scope); |
179 | 175 | if (! hasData(scope) || ! canDisplay(type, scope, elem, options)) return; |
180 | 176 |
|
181 | | - var cvs = elem[0]; |
182 | | - var ctx = cvs.getContext('2d'); |
| 177 | + const cvs = elem[0]; |
| 178 | + const ctx = cvs.getContext('2d'); |
183 | 179 |
|
184 | 180 | scope.chartGetColor = getChartColorFn(scope); |
185 | | - var data = getChartData(type, scope); |
| 181 | + const data = getChartData(type, scope); |
186 | 182 | // Destroy old chart if it exists to avoid ghost charts issue |
187 | 183 | // https://github.com/jtblin/angular-chart.js/issues/187 |
188 | 184 | destroyChart(scope); |
|
199 | 195 | function canUpdateChart (newVal, oldVal) { |
200 | 196 | if (newVal && oldVal && newVal.length && oldVal.length) { |
201 | 197 | return Array.isArray(newVal[0]) ? |
202 | | - newVal.length === oldVal.length && newVal.every(function (element, index) { |
203 | | - return element.length === oldVal[index].length; }) : |
| 198 | + newVal.length === oldVal.length && newVal.every((element, index) => element.length === oldVal[index].length) : |
204 | 199 | oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false; |
205 | 200 | } |
206 | 201 | return false; |
|
211 | 206 | } |
212 | 207 |
|
213 | 208 | function getEventHandler (scope, action, triggerOnlyOnChange) { |
214 | | - var lastState = { |
215 | | - point: void 0, |
216 | | - points: void 0 |
| 209 | + const lastState = { |
| 210 | + point: undefined, |
| 211 | + points: undefined |
217 | 212 | }; |
218 | 213 | return function (evt) { |
219 | | - var atEvent = scope.chart.getElementAtEvent || scope.chart.getPointAtEvent; |
220 | | - var atEvents = scope.chart.getElementsAtEvent || scope.chart.getPointsAtEvent; |
| 214 | + const atEvent = scope.chart.getElementAtEvent || scope.chart.getPointAtEvent; |
| 215 | + const atEvents = scope.chart.getElementsAtEvent || scope.chart.getPointsAtEvent; |
221 | 216 | if (atEvents) { |
222 | | - var points = atEvents.call(scope.chart, evt); |
223 | | - var point = atEvent ? atEvent.call(scope.chart, evt)[0] : void 0; |
| 217 | + const points = atEvents.call(scope.chart, evt); |
| 218 | + const point = atEvent ? atEvent.call(scope.chart, evt)[0] : undefined; |
224 | 219 |
|
225 | 220 | if (triggerOnlyOnChange === false || |
226 | 221 | (! angular.equals(lastState.points, points) && ! angular.equals(lastState.point, point)) |
|
234 | 229 | } |
235 | 230 |
|
236 | 231 | function getColors (type, scope) { |
237 | | - var colors = angular.copy(scope.chartColors || |
| 232 | + const colors = angular.copy(scope.chartColors || |
238 | 233 | ChartJs.getOptions(type).chartColors || |
239 | 234 | Chart.defaults.global.colors |
240 | 235 | ); |
241 | | - var notEnoughColors = colors.length < scope.chartData.length; |
| 236 | + const notEnoughColors = colors.length < scope.chartData.length; |
242 | 237 | while (colors.length < scope.chartData.length) { |
243 | 238 | colors.push(scope.chartGetColor()); |
244 | 239 | } |
|
259 | 254 | } |
260 | 255 |
|
261 | 256 | function getRandomColor () { |
262 | | - var color = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)]; |
| 257 | + const color = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)]; |
263 | 258 | return getColor(color); |
264 | 259 | } |
265 | 260 |
|
266 | 261 | function getColor (color) { |
267 | | - var alpha = color[3] || 1; |
| 262 | + const alpha = color[3] || 1; |
268 | 263 | color = color.slice(0, 3); |
269 | 264 | return { |
270 | 265 | backgroundColor: rgba(color, 0.2), |
|
282 | 277 |
|
283 | 278 | function rgba (color, alpha) { |
284 | 279 | // rgba not supported by IE8 |
285 | | - return useExcanvas ? 'rgb(' + color.join(',') + ')' : 'rgba(' + color.concat(alpha).join(',') + ')'; |
| 280 | + return useExcanvas ? `rgb(${color.join(',')})` : `rgba(${color.concat(alpha).join(',')})`; |
286 | 281 | } |
287 | 282 |
|
288 | 283 | // Credit: http://stackoverflow.com/a/11508164/1190235 |
289 | 284 | function hexToRgb (hex) { |
290 | | - var bigint = parseInt(hex, 16), |
291 | | - r = (bigint >> 16) & 255, |
292 | | - g = (bigint >> 8) & 255, |
293 | | - b = bigint & 255; |
| 285 | + const bigint = parseInt(hex, 16); |
| 286 | + const r = (bigint >> 16) & 255; |
| 287 | + const g = (bigint >> 8) & 255; |
| 288 | + const b = bigint & 255; |
294 | 289 |
|
295 | 290 | return [r, g, b]; |
296 | 291 | } |
297 | 292 |
|
298 | 293 | function rgbStringToRgb (color) { |
299 | | - var match = color.match(/^rgba?\(([\d,.]+)\)$/); |
| 294 | + const match = color.match(/^rgba?\(([\d,.]+)\)$/); |
300 | 295 | if (! match) throw new Error('Cannot parse rgb value'); |
301 | 296 | color = match[1].split(','); |
302 | 297 | return color.map(Number); |
|
311 | 306 | } |
312 | 307 |
|
313 | 308 | function getChartData (type, scope) { |
314 | | - var colors = getColors(type, scope); |
| 309 | + const colors = getColors(type, scope); |
315 | 310 | return Array.isArray(scope.chartData[0]) ? |
316 | 311 | getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) : |
317 | 312 | getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride); |
|
320 | 315 | function getDataSets (labels, data, series, colors, datasetOverride) { |
321 | 316 | return { |
322 | 317 | labels: labels, |
323 | | - datasets: data.map(function (item, i) { |
324 | | - var dataset = angular.extend({}, colors[i], { |
| 318 | + datasets: data.map((item, i) => { |
| 319 | + const dataset = angular.extend({}, colors[i], { |
325 | 320 | label: series[i], |
326 | 321 | data: item |
327 | 322 | }); |
|
334 | 329 | } |
335 | 330 |
|
336 | 331 | function getData (labels, data, colors, datasetOverride) { |
337 | | - var dataset = { |
| 332 | + const dataset = { |
338 | 333 | labels: labels, |
339 | 334 | datasets: [{ |
340 | 335 | data: data, |
341 | | - backgroundColor: colors.map(function (color) { |
342 | | - return color.pointBackgroundColor; |
343 | | - }), |
344 | | - hoverBackgroundColor: colors.map(function (color) { |
345 | | - return color.backgroundColor; |
346 | | - }) |
| 336 | + backgroundColor: colors.map((color) => color.pointBackgroundColor), |
| 337 | + hoverBackgroundColor: colors.map((color) => color.backgroundColor) |
347 | 338 | }] |
348 | 339 | }; |
349 | 340 | if (datasetOverride) { |
|
363 | 354 |
|
364 | 355 | function updateChart (values, scope) { |
365 | 356 | if (Array.isArray(scope.chartData[0])) { |
366 | | - scope.chart.data.datasets.forEach(function (dataset, i) { |
| 357 | + scope.chart.data.datasets.forEach((dataset, i) => { |
367 | 358 | dataset.data = values[i]; |
368 | 359 | }); |
369 | 360 | } else { |
|
383 | 374 | function canDisplay (type, scope, elem, options) { |
384 | 375 | // TODO: check parent? |
385 | 376 | if (options.responsive && elem[0].clientHeight === 0) { |
386 | | - $timeout(function () { |
| 377 | + $timeout(() => { |
387 | 378 | createChart(type, scope, elem); |
388 | 379 | }, 50, false); |
389 | 380 | return false; |
|
0 commit comments