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