public/bower_components/angular-chart.js/angular-chart.js

   1 (function (factory) {
   2   'use strict';
   3   if (typeof exports === 'object') {
   4     // Node/CommonJS
   5     module.exports = factory(
   6       typeof angular !== 'undefined' ? angular : require('angular'),
   7       typeof Chart !== 'undefined' ? Chart : require('chart.js'));
   8   }  else if (typeof define === 'function' && define.amd) {
   9     // AMD. Register as an anonymous module.
  10     define(['angular', 'chart'], factory);
  11   } else {
  12     // Browser globals
  13     factory(angular, Chart);
  14   }
  15 }(function (angular, Chart) {
  16   'use strict';
  17
  18   Chart.defaults.global.responsive = true;
  19   Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
  20
  21   Chart.defaults.global.colours = [
  22     '#97BBCD', // blue
  23     '#DCDCDC', // light grey
  24     '#F7464A', // red
  25     '#46BFBD', // green
  26     '#FDB45C', // yellow
  27     '#949FB1', // grey
  28     '#4D5360'  // dark grey
  29   ];
  30
  31   var usingExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
  32     window.G_vmlCanvasManager !== null &&
  33     typeof window.G_vmlCanvasManager.initElement === 'function';
  34
  35   if (usingExcanvas) Chart.defaults.global.animation = false;
  36
  37   return angular.module('chart.js', [])
  38     .provider('ChartJs', ChartJsProvider)
  39     .factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
  40     .directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }])
  41     .directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Line'); }])
  42     .directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Bar'); }])
  43     .directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Radar'); }])
  44     .directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Doughnut'); }])
  45     .directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Pie'); }])
  46     .directive('chartPolarArea', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('PolarArea'); }]);
  47
  48   /**
  49    * Wrapper for chart.js
  50    * Allows configuring chart js using the provider
  51    *
  52    * angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
  53    *   ChartJsProvider.setOptions({ responsive: true });
  54    *   ChartJsProvider.setOptions('Line', { responsive: false });
  55    * })))
  56    */
  57   function ChartJsProvider () {
  58     var options = {};
  59     var ChartJs = {
  60       Chart: Chart,
  61       getOptions: function (type) {
  62         var typeOptions = type && options[type] || {};
  63         return angular.extend({}, options, typeOptions);
  64       }
  65     };
  66
  67     /**
  68      * Allow to set global options during configuration
  69      */
  70     this.setOptions = function (type, customOptions) {
  71       // If no type was specified set option for the global object
  72       if (! customOptions) {
  73         customOptions = type;
  74         options = angular.extend(options, customOptions);
  75         return;
  76       }
  77       // Set options for the specific chart
  78       options[type] = angular.extend(options[type] || {}, customOptions);
  79     };
  80
  81     this.$get = function () {
  82       return ChartJs;
  83     };
  84   }
  85
  86   function ChartJsFactory (ChartJs, $timeout) {
  87     return function chart (type) {
  88       return {
  89         restrict: 'CA',
  90         scope: {
  91           data: '=?',
  92           labels: '=?',
  93           options: '=?',
  94           series: '=?',
  95           colours: '=?',
  96           getColour: '=?',
  97           chartType: '=',
  98           legend: '@',
  99           click: '=?',
 100           hover: '=?',
 101
 102           chartData: '=?',
 103           chartLabels: '=?',
 104           chartOptions: '=?',
 105           chartSeries: '=?',
 106           chartColours: '=?',
 107           chartLegend: '@',
 108           chartClick: '=?',
 109           chartHover: '=?'
 110         },
 111         link: function (scope, elem/*, attrs */) {
 112           var chart, container = document.createElement('div');
 113           container.className = 'chart-container';
 114           elem.replaceWith(container);
 115           container.appendChild(elem[0]);
 116
 117           if (usingExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
 118
 119           ['data', 'labels', 'options', 'series', 'colours', 'legend', 'click', 'hover'].forEach(deprecated);
 120           function aliasVar (fromName, toName) {
 121             scope.$watch(fromName, function (newVal) {
 122               if (typeof newVal === 'undefined') return;
 123               scope[toName] = newVal;
 124             });
 125           }
 126           /* provide backward compatibility to "old" directive names, by
 127            * having an alias point from the new names to the old names. */
 128           aliasVar('chartData', 'data');
 129           aliasVar('chartLabels', 'labels');
 130           aliasVar('chartOptions', 'options');
 131           aliasVar('chartSeries', 'series');
 132           aliasVar('chartColours', 'colours');
 133           aliasVar('chartLegend', 'legend');
 134           aliasVar('chartClick', 'click');
 135           aliasVar('chartHover', 'hover');
 136
 137           // Order of setting "watch" matter
 138
 139           scope.$watch('data', function (newVal, oldVal) {
 140             if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) return;
 141             var chartType = type || scope.chartType;
 142             if (! chartType) return;
 143
 144             if (chart) {
 145               if (canUpdateChart(newVal, oldVal)) return updateChart(chart, newVal, scope, elem);
 146               chart.destroy();
 147             }
 148
 149             createChart(chartType);
 150           }, true);
 151
 152           scope.$watch('series', resetChart, true);
 153           scope.$watch('labels', resetChart, true);
 154           scope.$watch('options', resetChart, true);
 155           scope.$watch('colours', resetChart, true);
 156
 157           scope.$watch('chartType', function (newVal, oldVal) {
 158             if (isEmpty(newVal)) return;
 159             if (angular.equals(newVal, oldVal)) return;
 160             if (chart) chart.destroy();
 161             createChart(newVal);
 162           });
 163
 164           scope.$on('$destroy', function () {
 165             if (chart) chart.destroy();
 166           });
 167
 168           function resetChart (newVal, oldVal) {
 169             if (isEmpty(newVal)) return;
 170             if (angular.equals(newVal, oldVal)) return;
 171             var chartType = type || scope.chartType;
 172             if (! chartType) return;
 173
 174             // chart.update() doesn't work for series and labels
 175             // so we have to re-create the chart entirely
 176             if (chart) chart.destroy();
 177
 178             createChart(chartType);
 179           }
 180
 181           function createChart (type) {
 182             if (isResponsive(type, scope) && elem[0].clientHeight === 0 && container.clientHeight === 0) {
 183               return $timeout(function () {
 184                 createChart(type);
 185               }, 50, false);
 186             }
 187             if (! scope.data || ! scope.data.length) return;
 188             scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour;
 189             var colours = getColours(type, scope);
 190             var cvs = elem[0], ctx = cvs.getContext('2d');
 191             var data = Array.isArray(scope.data[0]) ?
 192               getDataSets(scope.labels, scope.data, scope.series || [], colours) :
 193               getData(scope.labels, scope.data, colours);
 194             var options = angular.extend({}, ChartJs.getOptions(type), scope.options);
 195             chart = new ChartJs.Chart(ctx)[type](data, options);
 196             scope.$emit('create', chart);
 197
 198             // Bind events
 199             cvs.onclick = scope.click ? getEventHandler(scope, chart, 'click', false) : angular.noop;
 200             cvs.onmousemove = scope.hover ? getEventHandler(scope, chart, 'hover', true) : angular.noop;
 201
 202             if (scope.legend && scope.legend !== 'false') setLegend(elem, chart);
 203           }
 204
 205           function deprecated (attr) {
 206             if (typeof console !== 'undefined' && ChartJs.getOptions().env !== 'test') {
 207               var warn = typeof console.warn === 'function' ? console.warn : console.log;
 208               if (!! scope[attr]) {
 209                 warn.call(console, '"%s" is deprecated and will be removed in a future version. ' +
 210                   'Please use "chart-%s" instead.', attr, attr);
 211               }
 212             }
 213           }
 214         }
 215       };
 216     };
 217
 218     function canUpdateChart (newVal, oldVal) {
 219       if (newVal && oldVal && newVal.length && oldVal.length) {
 220         return Array.isArray(newVal[0]) ?
 221         newVal.length === oldVal.length && newVal.every(function (element, index) {
 222           return element.length === oldVal[index].length; }) :
 223           oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false;
 224       }
 225       return false;
 226     }
 227
 228     function sum (carry, val) {
 229       return carry + val;
 230     }
 231
 232     function getEventHandler (scope, chart, action, triggerOnlyOnChange) {
 233       var lastState = null;
 234       return function (evt) {
 235         var atEvent = chart.getPointsAtEvent || chart.getBarsAtEvent || chart.getSegmentsAtEvent;
 236         if (atEvent) {
 237           var activePoints = atEvent.call(chart, evt);
 238           if (triggerOnlyOnChange === false || angular.equals(lastState, activePoints) === false) {
 239             lastState = activePoints;
 240             scope[action](activePoints, evt);
 241             scope.$apply();
 242           }
 243         }
 244       };
 245     }
 246
 247     function getColours (type, scope) {
 248       var notEnoughColours = false;
 249       var colours = angular.copy(scope.colours ||
 250         ChartJs.getOptions(type).colours ||
 251         Chart.defaults.global.colours
 252       );
 253       while (colours.length < scope.data.length) {
 254         colours.push(scope.getColour());
 255         notEnoughColours = true;
 256       }
 257       // mutate colours in this case as we don't want
 258       // the colours to change on each refresh
 259       if (notEnoughColours) scope.colours = colours;
 260       return colours.map(convertColour);
 261     }
 262
 263     function convertColour (colour) {
 264       if (typeof colour === 'object' && colour !== null) return colour;
 265       if (typeof colour === 'string' && colour[0] === '#') return getColour(hexToRgb(colour.substr(1)));
 266       return getRandomColour();
 267     }
 268
 269     function getRandomColour () {
 270       var colour = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
 271       return getColour(colour);
 272     }
 273
 274     function getColour (colour) {
 275       return {
 276         fillColor: rgba(colour, 0.2),
 277         strokeColor: rgba(colour, 1),
 278         pointColor: rgba(colour, 1),
 279         pointStrokeColor: '#fff',
 280         pointHighlightFill: '#fff',
 281         pointHighlightStroke: rgba(colour, 0.8)
 282       };
 283     }
 284
 285     function getRandomInt (min, max) {
 286       return Math.floor(Math.random() * (max - min + 1)) + min;
 287     }
 288
 289     function rgba (colour, alpha) {
 290       if (usingExcanvas) {
 291         // rgba not supported by IE8
 292         return 'rgb(' + colour.join(',') + ')';
 293       } else {
 294         return 'rgba(' + colour.concat(alpha).join(',') + ')';
 295       }
 296     }
 297
 298     // Credit: http://stackoverflow.com/a/11508164/1190235
 299     function hexToRgb (hex) {
 300       var bigint = parseInt(hex, 16),
 301         r = (bigint >> 16) & 255,
 302         g = (bigint >> 8) & 255,
 303         b = bigint & 255;
 304
 305       return [r, g, b];
 306     }
 307
 308     function getDataSets (labels, data, series, colours) {
 309       return {
 310         labels: labels,
 311         datasets: data.map(function (item, i) {
 312           return angular.extend({}, colours[i], {
 313             label: series[i],
 314             data: item
 315           });
 316         })
 317       };
 318     }
 319
 320     function getData (labels, data, colours) {
 321       return labels.map(function (label, i) {
 322         return angular.extend({}, colours[i], {
 323           label: label,
 324           value: data[i],
 325           color: colours[i].strokeColor,
 326           highlight: colours[i].pointHighlightStroke
 327         });
 328       });
 329     }
 330
 331     function setLegend (elem, chart) {
 332       var $parent = elem.parent(),
 333           $oldLegend = $parent.find('chart-legend'),
 334           legend = '<chart-legend>' + chart.generateLegend() + '</chart-legend>';
 335       if ($oldLegend.length) $oldLegend.replaceWith(legend);
 336       else $parent.append(legend);
 337     }
 338
 339     function updateChart (chart, values, scope, elem) {
 340       if (Array.isArray(scope.data[0])) {
 341         chart.datasets.forEach(function (dataset, i) {
 342           (dataset.points || dataset.bars).forEach(function (dataItem, j) {
 343             dataItem.value = values[i][j];
 344           });
 345         });
 346       } else {
 347         chart.segments.forEach(function (segment, i) {
 348           segment.value = values[i];
 349         });
 350       }
 351       chart.update();
 352       scope.$emit('update', chart);
 353       if (scope.legend && scope.legend !== 'false') setLegend(elem, chart);
 354     }
 355
 356     function isEmpty (value) {
 357       return ! value ||
 358         (Array.isArray(value) && ! value.length) ||
 359         (typeof value === 'object' && ! Object.keys(value).length);
 360     }
 361
 362     function isResponsive (type, scope) {
 363       var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.options);
 364       return options.responsive;
 365     }
 366   }
 367 }));