Merged Conflict FIX API_Dev -> MASTER
This commit is contained in:
commit
0be52f2b0a
55 changed files with 12817 additions and 0 deletions
23
templates/js/controllers/newTasksController.js
Normal file
23
templates/js/controllers/newTasksController.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
angular.module('SeHub').controller('newTasksController', ['$scope',
|
||||||
|
function($scope) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scope.componentTypes = [{
|
||||||
|
"type": "textbox"
|
||||||
|
}, {
|
||||||
|
"type": "textarea"
|
||||||
|
}, {
|
||||||
|
"type": "checkbox"
|
||||||
|
}];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$scope.task = [];
|
||||||
|
|
||||||
|
$scope.addComponent = function(){
|
||||||
|
$scope.task.push($scope.newComp);
|
||||||
|
$scope.newComp = {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
18
templates/js/libs/angular-chart.js-0.7.2/.editorconfig
Normal file
18
templates/js/libs/angular-chart.js-0.7.2/.editorconfig
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
# This file is for unifying the coding style for different editors and IDEs
|
||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
# Tabs in JS unless otherwise specified
|
||||||
|
[**.js]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
4
templates/js/libs/angular-chart.js-0.7.2/.gitignore
vendored
Normal file
4
templates/js/libs/angular-chart.js-0.7.2/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.idea/
|
||||||
|
node_modules/
|
||||||
|
test/fixtures/shots/
|
||||||
|
bower_components/
|
||||||
80
templates/js/libs/angular-chart.js-0.7.2/.jscsrc
Normal file
80
templates/js/libs/angular-chart.js-0.7.2/.jscsrc
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
{
|
||||||
|
"requireCurlyBraces": [
|
||||||
|
"try",
|
||||||
|
"catch",
|
||||||
|
"do"
|
||||||
|
],
|
||||||
|
"requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
|
||||||
|
"requireCapitalizedConstructors": true,
|
||||||
|
"maximumLineLength": {
|
||||||
|
"value": 120,
|
||||||
|
"allowComments": true,
|
||||||
|
"allowRegex": true
|
||||||
|
},
|
||||||
|
"validateIndentation": 2,
|
||||||
|
"validateQuoteMarks": "'",
|
||||||
|
|
||||||
|
"disallowMultipleLineStrings": true,
|
||||||
|
"disallowMixedSpacesAndTabs": true,
|
||||||
|
"disallowTrailingWhitespace": true,
|
||||||
|
"disallowQuotedKeysInObjects": true,
|
||||||
|
"disallowSpaceAfterObjectKeys": true,
|
||||||
|
|
||||||
|
"requireSpaceAfterKeywords": [
|
||||||
|
"if",
|
||||||
|
"else",
|
||||||
|
"for",
|
||||||
|
"while",
|
||||||
|
"do",
|
||||||
|
"switch",
|
||||||
|
"return",
|
||||||
|
"try",
|
||||||
|
"catch",
|
||||||
|
"function",
|
||||||
|
"typeof"
|
||||||
|
],
|
||||||
|
"requireSpaceBeforeBinaryOperators": [
|
||||||
|
"=", "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=",
|
||||||
|
"&=", "|=", "^=", "+=",
|
||||||
|
|
||||||
|
"+", "-", "*", "/", "%", "<<", ">>", ">>>", "&",
|
||||||
|
"|", "^", "&&", "||", "===", "==", ">=",
|
||||||
|
"<=", "<", ">", "!=", "!=="
|
||||||
|
],
|
||||||
|
"requireSpaceAfterPrefixUnaryOperators": [
|
||||||
|
"!"
|
||||||
|
],
|
||||||
|
"requireSpacesInConditionalExpression": true,
|
||||||
|
"requireSpaceBeforeBlockStatements": true,
|
||||||
|
"requireSpacesInForStatement": true,
|
||||||
|
"requireLineFeedAtFileEnd": true,
|
||||||
|
"requireSpacesInFunctionExpression": {
|
||||||
|
"beforeOpeningCurlyBrace": true,
|
||||||
|
"beforeOpeningRoundBrace": true
|
||||||
|
},
|
||||||
|
"requireSpacesInFunctionDeclaration": {
|
||||||
|
"beforeOpeningCurlyBrace": true,
|
||||||
|
"beforeOpeningRoundBrace": true
|
||||||
|
},
|
||||||
|
"requireDotNotation": true,
|
||||||
|
"disallowSpacesInsideArrayBrackets": "all",
|
||||||
|
"disallowSpacesInsideParentheses": true,
|
||||||
|
|
||||||
|
|
||||||
|
"validateJSDoc": {
|
||||||
|
"checkParamNames": true,
|
||||||
|
"requireParamTypes": true
|
||||||
|
},
|
||||||
|
|
||||||
|
"disallowMultipleLineBreaks": true,
|
||||||
|
"disallowNewlineBeforeBlockStatements": true,
|
||||||
|
"disallowKeywords": [ "with" ],
|
||||||
|
|
||||||
|
"excludeFiles": [
|
||||||
|
"bower_components/**",
|
||||||
|
"node_modules/**",
|
||||||
|
"dist/**",
|
||||||
|
"test/coverage/**",
|
||||||
|
"examples/smoothscroll.min.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
6
templates/js/libs/angular-chart.js-0.7.2/.jshintignore
Normal file
6
templates/js/libs/angular-chart.js-0.7.2/.jshintignore
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
bower_components/
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
tmp/
|
||||||
|
examples/smoothscroll.min.js
|
||||||
|
|
||||||
22
templates/js/libs/angular-chart.js-0.7.2/.jshintrc
Normal file
22
templates/js/libs/angular-chart.js-0.7.2/.jshintrc
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"strict" : true, // true: Requires all functions run in ES5 Strict Mode
|
||||||
|
"undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
|
||||||
|
"unused" : true, // true: Require all defined variables be used
|
||||||
|
"noempty" : true, // Prohibit use of empty blocks
|
||||||
|
"trailing" : true, // Prohibit trailing whitespaces.
|
||||||
|
"white" : false, // Check against strict whitespace and indentation rules.
|
||||||
|
"indent" : 2, // {int} Number of spaces to use for indentation
|
||||||
|
"newcap" : true, // true: Require capitalization of all constructor functions e.g. `new F()`
|
||||||
|
"quotmark" : "single", // Quotation mark consistency
|
||||||
|
"-W058" : true, // Missing '()' invoking a constructor
|
||||||
|
"browser" : true, // Standard browser globals e.g. `window`, `document`.
|
||||||
|
"predef" : [ // Custom globals.
|
||||||
|
"angular",
|
||||||
|
"G_vmlCanvasManager",
|
||||||
|
"require",
|
||||||
|
"console",
|
||||||
|
"Chart",
|
||||||
|
"define",
|
||||||
|
"module"
|
||||||
|
]
|
||||||
|
}
|
||||||
13
templates/js/libs/angular-chart.js-0.7.2/.travis.yml
Normal file
13
templates/js/libs/angular-chart.js-0.7.2/.travis.yml
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- '0.10'
|
||||||
|
before_install:
|
||||||
|
- npm install -g bower
|
||||||
|
- bower install
|
||||||
|
- sudo apt-get install graphicsmagick
|
||||||
|
env:
|
||||||
|
global:
|
||||||
|
- secure: YWABlINoIkwl9RFLOW9G0lATEP3aiXXi+DS6TWfvQWWG/jkS5sn7IqWC2U67LjwQ0lDg0yevo3ZD7FyYQ5lr8AVuScAZ6P2o2dm9t/HBKGTG4u016dxbWWYVZ8MAlKT7TfjVD8iDzcWyZedsbpuyaNNp4pGr/CNcvq7TGdJLNkU=
|
||||||
|
- CI=1
|
||||||
|
- TOLERANCE=0.002
|
||||||
|
- DELAY=5000
|
||||||
27
templates/js/libs/angular-chart.js-0.7.2/LICENSE
Normal file
27
templates/js/libs/angular-chart.js-0.7.2/LICENSE
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
Copyright (c) Jerome Touffe-Blin ("Author")
|
||||||
|
All rights reserved.
|
||||||
|
|
||||||
|
The BSD License
|
||||||
|
|
||||||
|
Redistribution and use in source and binary forms, with or without
|
||||||
|
modification, are permitted provided that the following conditions
|
||||||
|
are met:
|
||||||
|
|
||||||
|
1. Redistributions of source code must retain the above copyright
|
||||||
|
notice, this list of conditions and the following disclaimer.
|
||||||
|
|
||||||
|
2. Redistributions in binary form must reproduce the above copyright
|
||||||
|
notice, this list of conditions and the following disclaimer in the
|
||||||
|
documentation and/or other materials provided with the distribution.
|
||||||
|
|
||||||
|
THIS SOFTWARE IS PROVIDED BY THE AUTHOR AND CONTRIBUTORS ``AS IS'' AND
|
||||||
|
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||||
|
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
||||||
|
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE AUTHOR OR CONTRIBUTORS
|
||||||
|
BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
||||||
|
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
||||||
|
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
|
||||||
|
BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
|
||||||
|
WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
|
||||||
|
OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN
|
||||||
|
IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||||
175
templates/js/libs/angular-chart.js-0.7.2/README.md
Normal file
175
templates/js/libs/angular-chart.js-0.7.2/README.md
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
# angular-chart.js
|
||||||
|
|
||||||
|
[](http://badge.fury.io/bo/angular-chart.js)
|
||||||
|
[](http://badge.fury.io/js/angular-chart.js)
|
||||||
|
[](https://travis-ci.org/jtblin/angular-chart.js)
|
||||||
|
[](https://codeclimate.com/github/jtblin/angular-chart.js)
|
||||||
|
|
||||||
|
Beautiful, reactive, responsive charts for Angular.JS using [Chart.js](http://www.chartjs.org/).
|
||||||
|
|
||||||
|
[Demo](http://jtblin.github.io/angular-chart.js/)
|
||||||
|
|
||||||
|
# Installation
|
||||||
|
|
||||||
|
bower install angular-chart.js --save
|
||||||
|
|
||||||
|
or copy the files from `dist/`. Then add the sources to your code (adjust paths as needed) after
|
||||||
|
adding the dependencies for Angular and Chart.js first:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="/bower_components/Chart.js/Chart.min.js"></script>
|
||||||
|
<script src="/bower_components/angular-chart.js/dist/angular-chart.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
# Utilisation
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
- `data`: series data
|
||||||
|
- `labels`: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)
|
||||||
|
- `options`: chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
|
||||||
|
- `series`: (default: `[]`): series labels (line, bar, radar)
|
||||||
|
- `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)
|
||||||
|
- `click`: onclick event handler
|
||||||
|
- `hover`: onmousemove event handler
|
||||||
|
- `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).
|
||||||
|
|
||||||
|
## Browser compatibility
|
||||||
|
|
||||||
|
For IE8 and older browsers, you will need
|
||||||
|
to include [excanvas](https://code.google.com/p/explorercanvas/wiki/Instructions).
|
||||||
|
You will also need [shims](https://github.com/es-shims/es5-shim) for ES5 functions.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]-->
|
||||||
|
<!--[if lt IE 9]><script src="es5-shim.js"></script><![endif]-->
|
||||||
|
</head>
|
||||||
|
```
|
||||||
|
|
||||||
|
# Example
|
||||||
|
|
||||||
|
## Markup
|
||||||
|
|
||||||
|
```html
|
||||||
|
<canvas id="line" class="chart chart-line" data="data" labels="labels"
|
||||||
|
legend="true" series="series" click="onClick"></canvas>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Javascript
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
angular.module("app", ["chart.js"])
|
||||||
|
// Optional configuration
|
||||||
|
.config(['ChartJsProvider', function (ChartJsProvider) {
|
||||||
|
// Configure all charts
|
||||||
|
ChartJsProvider.setOptions({
|
||||||
|
colours: ['#FF5252', '#FF8A80'],
|
||||||
|
responsive: false
|
||||||
|
});
|
||||||
|
// Configure all line charts
|
||||||
|
ChartJsProvider.setOptions('Line', {
|
||||||
|
datasetFill: false
|
||||||
|
});
|
||||||
|
}])
|
||||||
|
.controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
|
||||||
|
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$scope.onClick = function (points, evt) {
|
||||||
|
console.log(points, evt);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Simulate async data update
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.data = [
|
||||||
|
[28, 48, 40, 19, 86, 27, 90],
|
||||||
|
[65, 59, 80, 81, 56, 55, 40]
|
||||||
|
];
|
||||||
|
}, 3000);
|
||||||
|
}]);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Reactive
|
||||||
|
|
||||||
|
angular-chart.js watch updates on data, series, labels, colours and options and will update, or destroy and recreate,
|
||||||
|
the chart on changes.
|
||||||
|
|
||||||
|
## Events
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
```
|
||||||
|
$scope.$on('create', function (event, chart) {
|
||||||
|
console.log(chart);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note**: the event can be emitted multiple times for each chart as the chart can be destroyed and
|
||||||
|
created multiple times during angular `watch` lifecycle.
|
||||||
|
|
||||||
|
angular-chart.js listen to the scope `destroy` event and destroy the chart when it happens.
|
||||||
|
|
||||||
|
## Colours
|
||||||
|
|
||||||
|
There are a set of 7 default colours. Colours can be replaced using the `colours` attribute.
|
||||||
|
If there is more data than colours, colours are generated randomly or can be provided
|
||||||
|
via a function through the `getColour` attribute.
|
||||||
|
|
||||||
|
Hex colours are converted to Chart.js colours automatically,
|
||||||
|
including different shades for highlight, fill, stroke, etc.
|
||||||
|
|
||||||
|
# Issues
|
||||||
|
|
||||||
|
**Issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) need to be opened on
|
||||||
|
[Chart.js issues tracker](https://github.com/nnnick/Chart.js/issues)**
|
||||||
|
|
||||||
|
Please check if issue exists and otherwise open issue in [github](https://github.com/jtblin/angular-chart.js/issues).
|
||||||
|
**Please add a link to a plunker, jsbin, or equivalent.**
|
||||||
|
Here is a [jsbin template](http://jsbin.com/dufibi/3/edit?html,js,output) for convenience.
|
||||||
|
|
||||||
|
# Contributing
|
||||||
|
|
||||||
|
Pull requests welcome!
|
||||||
|
|
||||||
|
1. Fork the repo
|
||||||
|
1. Make your changes
|
||||||
|
1. Run tests: `npm test`
|
||||||
|
1. Submit pull request
|
||||||
|
|
||||||
|
## Contributors
|
||||||
|
|
||||||
|
Thank you!
|
||||||
|
|
||||||
|
* [@jantimon](https://twitter.com/jantimon)
|
||||||
|
* [RevanProdigalKnight](https://github.com/RevanProdigalKnight)
|
||||||
|
* [@ManuelRauber](https://twitter.com/ManuelRauber)
|
||||||
|
* [@vad710](https://twitter.com/vad710)
|
||||||
|
* [@JAAulde](https://twitter.com/JAAulde)
|
||||||
|
* [@offsky](https://twitter.com/offsky)
|
||||||
|
* [@jonathansampson](https://twitter.com/jonathansampson)
|
||||||
|
* [@idangozlan](https://twitter.com/idangozlan)
|
||||||
|
|
||||||
|
# Author
|
||||||
|
|
||||||
|
Jerome Touffe-Blin, [@jtblin](https://twitter.com/jtblin), [About me](http://about.me/jtblin)
|
||||||
|
|
||||||
|
# License
|
||||||
|
|
||||||
|
angular-chart.js is copyright 2015 Jerome Touffe-Blin and contributors.
|
||||||
|
It is licensed under the BSD license. See the include LICENSE file for details.
|
||||||
301
templates/js/libs/angular-chart.js-0.7.2/angular-chart.js
vendored
Normal file
301
templates/js/libs/angular-chart.js-0.7.2/angular-chart.js
vendored
Normal file
|
|
@ -0,0 +1,301 @@
|
||||||
|
(function (factory) {
|
||||||
|
'use strict';
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['angular', 'chart.js'], factory);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
// Node/CommonJS
|
||||||
|
module.exports = factory(require('angular'), require('chart.js'));
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(angular, Chart);
|
||||||
|
}
|
||||||
|
}(function (angular, Chart) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Chart.defaults.global.responsive = true;
|
||||||
|
Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
|
||||||
|
|
||||||
|
Chart.defaults.global.colours = [
|
||||||
|
'#97BBCD', // blue
|
||||||
|
'#DCDCDC', // light grey
|
||||||
|
'#F7464A', // red
|
||||||
|
'#46BFBD', // green
|
||||||
|
'#FDB45C', // yellow
|
||||||
|
'#949FB1', // grey
|
||||||
|
'#4D5360' // dark grey
|
||||||
|
];
|
||||||
|
|
||||||
|
angular.module('chart.js', [])
|
||||||
|
.provider('ChartJs', ChartJsProvider)
|
||||||
|
.factory('ChartJsFactory', ['ChartJs', ChartJsFactory])
|
||||||
|
.directive('chartBase', function (ChartJsFactory) { return new ChartJsFactory(); })
|
||||||
|
.directive('chartLine', function (ChartJsFactory) { return new ChartJsFactory('Line'); })
|
||||||
|
.directive('chartBar', function (ChartJsFactory) { return new ChartJsFactory('Bar'); })
|
||||||
|
.directive('chartRadar', function (ChartJsFactory) { return new ChartJsFactory('Radar'); })
|
||||||
|
.directive('chartDoughnut', function (ChartJsFactory) { return new ChartJsFactory('Doughnut'); })
|
||||||
|
.directive('chartPie', function (ChartJsFactory) { return new ChartJsFactory('Pie'); })
|
||||||
|
.directive('chartPolarArea', function (ChartJsFactory) { return new ChartJsFactory('PolarArea'); });
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapper for chart.js
|
||||||
|
* Allows configuring chart js using the provider
|
||||||
|
*
|
||||||
|
* angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
|
||||||
|
* ChartJsProvider.setOptions({ responsive: true });
|
||||||
|
* ChartJsProvider.setOptions('Line', { responsive: false });
|
||||||
|
* })))
|
||||||
|
*/
|
||||||
|
function ChartJsProvider () {
|
||||||
|
var options = {};
|
||||||
|
var ChartJs = {
|
||||||
|
Chart: Chart,
|
||||||
|
getOptions: function (type) {
|
||||||
|
var typeOptions = type && options[type] || {};
|
||||||
|
return angular.extend({}, options, typeOptions);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow to set global options during configuration
|
||||||
|
*/
|
||||||
|
this.setOptions = function (type, customOptions) {
|
||||||
|
// If no type was specified set option for the global object
|
||||||
|
if (! customOptions) {
|
||||||
|
customOptions = type;
|
||||||
|
options = angular.extend(options, customOptions);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Set options for the specific chart
|
||||||
|
options[type] = angular.extend(options[type] || {}, customOptions);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$get = function () {
|
||||||
|
return ChartJs;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartJsFactory (ChartJs) {
|
||||||
|
return function chart (type) {
|
||||||
|
return {
|
||||||
|
restrict: 'CA',
|
||||||
|
scope: {
|
||||||
|
data: '=',
|
||||||
|
labels: '=',
|
||||||
|
options: '=',
|
||||||
|
series: '=',
|
||||||
|
colours: '=?',
|
||||||
|
getColour: '=?',
|
||||||
|
chartType: '=',
|
||||||
|
legend: '@',
|
||||||
|
click: '=',
|
||||||
|
hover: '='
|
||||||
|
},
|
||||||
|
link: function (scope, elem/*, attrs */) {
|
||||||
|
var chart, container = document.createElement('div');
|
||||||
|
container.className = 'chart-container';
|
||||||
|
elem.replaceWith(container);
|
||||||
|
container.appendChild(elem[0]);
|
||||||
|
|
||||||
|
if (typeof window.G_vmlCanvasManager === 'object' && window.G_vmlCanvasManager !== null) {
|
||||||
|
if (typeof window.G_vmlCanvasManager.initElement === 'function') {
|
||||||
|
window.G_vmlCanvasManager.initElement(elem[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Order of setting "watch" matter
|
||||||
|
|
||||||
|
scope.$watch('data', function (newVal, oldVal) {
|
||||||
|
if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) return;
|
||||||
|
var chartType = type || scope.chartType;
|
||||||
|
if (! chartType) return;
|
||||||
|
|
||||||
|
if (chart) {
|
||||||
|
if (canUpdateChart(newVal, oldVal)) return updateChart(chart, newVal, scope);
|
||||||
|
chart.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
chart = createChart(chartType, scope, elem);
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
scope.$watch('series', resetChart, true);
|
||||||
|
scope.$watch('labels', resetChart, true);
|
||||||
|
scope.$watch('options', resetChart, true);
|
||||||
|
scope.$watch('colours', resetChart, true);
|
||||||
|
|
||||||
|
scope.$watch('chartType', function (newVal, oldVal) {
|
||||||
|
if (isEmpty(newVal)) return;
|
||||||
|
if (angular.equals(newVal, oldVal)) return;
|
||||||
|
if (chart) chart.destroy();
|
||||||
|
chart = createChart(newVal, scope, elem);
|
||||||
|
});
|
||||||
|
|
||||||
|
scope.$on('$destroy', function () {
|
||||||
|
if (chart) chart.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
function resetChart (newVal, oldVal) {
|
||||||
|
if (isEmpty(newVal)) return;
|
||||||
|
if (angular.equals(newVal, oldVal)) return;
|
||||||
|
var chartType = type || scope.chartType;
|
||||||
|
if (! chartType) return;
|
||||||
|
|
||||||
|
// chart.update() doesn't work for series and labels
|
||||||
|
// so we have to re-create the chart entirely
|
||||||
|
if (chart) chart.destroy();
|
||||||
|
|
||||||
|
chart = createChart(chartType, scope, elem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function canUpdateChart (newVal, oldVal) {
|
||||||
|
if (newVal && oldVal && newVal.length && oldVal.length) {
|
||||||
|
return Array.isArray(newVal[0]) ?
|
||||||
|
newVal.length === oldVal.length && newVal[0].length === oldVal[0].length :
|
||||||
|
oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sum (carry, val) {
|
||||||
|
return carry + val;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createChart (type, scope, elem) {
|
||||||
|
if (! scope.data || ! scope.data.length) return;
|
||||||
|
scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour;
|
||||||
|
scope.colours = 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 chart = new ChartJs.Chart(ctx)[type](data, options);
|
||||||
|
scope.$emit('create', chart);
|
||||||
|
|
||||||
|
['hover', 'click'].forEach(function (action) {
|
||||||
|
if (scope[action]) cvs[action === 'click' ? 'onclick' : 'onmousemove'] = getEventHandler(scope, chart, action);
|
||||||
|
});
|
||||||
|
if (scope.legend && scope.legend !== 'false') setLegend(elem, chart);
|
||||||
|
return chart;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getEventHandler (scope, chart, action) {
|
||||||
|
return function (evt) {
|
||||||
|
var atEvent = chart.getPointsAtEvent || chart.getBarsAtEvent || chart.getSegmentsAtEvent;
|
||||||
|
if (atEvent) {
|
||||||
|
var activePoints = atEvent.call(chart, evt);
|
||||||
|
scope[action](activePoints, evt);
|
||||||
|
scope.$apply();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColours (type, scope) {
|
||||||
|
var colours = angular.copy(scope.colours ||
|
||||||
|
ChartJs.getOptions(type).colours ||
|
||||||
|
Chart.defaults.global.colours
|
||||||
|
);
|
||||||
|
while (colours.length < scope.data.length) {
|
||||||
|
colours.push(scope.getColour());
|
||||||
|
}
|
||||||
|
return colours.map(convertColour);
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertColour (colour) {
|
||||||
|
if (typeof colour === 'object' && colour !== null) return colour;
|
||||||
|
if (typeof colour === 'string' && colour[0] === '#') return getColour(hexToRgb(colour.substr(1)));
|
||||||
|
return getRandomColour();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomColour () {
|
||||||
|
var colour = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
|
||||||
|
return getColour(colour);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColour (colour) {
|
||||||
|
return {
|
||||||
|
fillColor: rgba(colour, 0.2),
|
||||||
|
strokeColor: rgba(colour, 1),
|
||||||
|
pointColor: rgba(colour, 1),
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: rgba(colour, 0.8)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomInt (min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
}
|
||||||
|
|
||||||
|
function rgba (colour, alpha) {
|
||||||
|
return 'rgba(' + colour.concat(alpha).join(',') + ')';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Credit: http://stackoverflow.com/a/11508164/1190235
|
||||||
|
function hexToRgb (hex) {
|
||||||
|
var bigint = parseInt(hex, 16),
|
||||||
|
r = (bigint >> 16) & 255,
|
||||||
|
g = (bigint >> 8) & 255,
|
||||||
|
b = bigint & 255;
|
||||||
|
|
||||||
|
return [r, g, b];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDataSets (labels, data, series, colours) {
|
||||||
|
return {
|
||||||
|
labels: labels,
|
||||||
|
datasets: data.map(function (item, i) {
|
||||||
|
return angular.extend({}, colours[i], {
|
||||||
|
label: series[i],
|
||||||
|
data: item
|
||||||
|
});
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData (labels, data, colours) {
|
||||||
|
return labels.map(function (label, i) {
|
||||||
|
return angular.extend({}, colours[i], {
|
||||||
|
label: label,
|
||||||
|
value: data[i],
|
||||||
|
color: colours[i].strokeColor,
|
||||||
|
highlight: colours[i].pointHighlightStroke
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLegend (elem, chart) {
|
||||||
|
var $parent = elem.parent(),
|
||||||
|
$oldLegend = $parent.find('chart-legend'),
|
||||||
|
legend = '<chart-legend>' + chart.generateLegend() + '</chart-legend>';
|
||||||
|
if ($oldLegend.length) $oldLegend.replaceWith(legend);
|
||||||
|
else $parent.append(legend);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateChart (chart, values, scope) {
|
||||||
|
if (Array.isArray(scope.data[0])) {
|
||||||
|
chart.datasets.forEach(function (dataset, i) {
|
||||||
|
(dataset.points || dataset.bars).forEach(function (dataItem, j) {
|
||||||
|
dataItem.value = values[i][j];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
chart.segments.forEach(function (segment, i) {
|
||||||
|
segment.value = values[i];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
chart.update();
|
||||||
|
scope.$emit('update', chart);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEmpty (value) {
|
||||||
|
return ! value ||
|
||||||
|
(Array.isArray(value) && ! value.length) ||
|
||||||
|
(typeof value === 'object' && ! Object.keys(value).length);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}));
|
||||||
30
templates/js/libs/angular-chart.js-0.7.2/angular-chart.less
Normal file
30
templates/js/libs/angular-chart.js-0.7.2/angular-chart.less
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.chart-legend, .bar-legend, .line-legend, .pie-legend, .radar-legend, .polararea-legend, .doughnut-legend {
|
||||||
|
list-style-type: none;
|
||||||
|
margin-top: 5px;
|
||||||
|
text-align: center;
|
||||||
|
/* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
|
||||||
|
-webkit-padding-start:0; /* Webkit */
|
||||||
|
-moz-padding-start:0; /* Mozilla */
|
||||||
|
padding-left:0; /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 2px 8px 2px 28px;
|
||||||
|
font-size: smaller;
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
56
templates/js/libs/angular-chart.js-0.7.2/bower.json
Normal file
56
templates/js/libs/angular-chart.js-0.7.2/bower.json
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
{
|
||||||
|
"name": "angular-chart.js",
|
||||||
|
"version": "0.7.2",
|
||||||
|
"main": [
|
||||||
|
"./dist/angular-chart.js",
|
||||||
|
"./dist/angular-chart.css"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
"Jerome Touffe-Blin <jtblin@gmail.com>"
|
||||||
|
],
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/jtblin/angular-chart.js.git"
|
||||||
|
},
|
||||||
|
"description": "An angular.js wrapper for Chart.js - reactive, responsive, beautiful charts.",
|
||||||
|
"moduleType": [
|
||||||
|
"globals"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"angular",
|
||||||
|
"angular.js",
|
||||||
|
"chartjs",
|
||||||
|
"chart",
|
||||||
|
"reactive",
|
||||||
|
"responsive",
|
||||||
|
"graph",
|
||||||
|
"bar",
|
||||||
|
"line",
|
||||||
|
"area",
|
||||||
|
"donut"
|
||||||
|
],
|
||||||
|
"license": "BSD",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"tests"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"angular": "1.x",
|
||||||
|
"Chart.js": "~1.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"angular-bootstrap": "~0.11.0",
|
||||||
|
"font-awesome": "~4.1.0",
|
||||||
|
"rainbow": "~1.1.9",
|
||||||
|
"Chart.StackedBar.js": "~1.0.1",
|
||||||
|
"angular-mocks": "~1.3.10"
|
||||||
|
},
|
||||||
|
"resolutions": {
|
||||||
|
"Chart.js": "~1.0.1",
|
||||||
|
"angular": "1.x",
|
||||||
|
"angular-mocks": "1.3.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.css
vendored
Normal file
2
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.css
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
.chart-legend,.bar-legend,.line-legend,.pie-legend,.radar-legend,.polararea-legend,.doughnut-legend{list-style-type:none;margin-top:5px;text-align:center;-webkit-padding-start:0;-moz-padding-start:0;padding-left:0}.chart-legend li,.bar-legend li,.line-legend li,.pie-legend li,.radar-legend li,.polararea-legend li,.doughnut-legend li{display:inline-block;white-space:nowrap;position:relative;margin-bottom:4px;border-radius:5px;padding:2px 8px 2px 28px;font-size:smaller;cursor:default}.chart-legend li span,.bar-legend li span,.line-legend li span,.pie-legend li span,.radar-legend li span,.polararea-legend li span,.doughnut-legend li span{display:block;position:absolute;left:0;top:0;width:20px;height:20px;border-radius:5px}
|
||||||
|
/*# sourceMappingURL=angular-chart.css.map */
|
||||||
1
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.css.map
vendored
Executable file
1
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.css.map
vendored
Executable file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":["angular-chart.less"],"names":[],"mappings":"AAAA;AAAe;AAAa;AAAc;AAAa;AAAe;AAAmB;EACvF,qBAAA;EACA,eAAA;EACA,kBAAA;;EAEA,wBAAA;;EACA,qBAAA;;EACA,eAAA;;;AAPF,aASE;AATa,WASb;AAT0B,YAS1B;AATwC,WASxC;AATqD,aASrD;AAToE,iBASpE;AATuF,gBASvF;EACE,qBAAA;EACA,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kBAAA;EACA,eAAA;;AAjBJ,aASE,GAUE;AAnBW,WASb,GAUE;AAnBwB,YAS1B,GAUE;AAnBsC,WASxC,GAUE;AAnBmD,aASrD,GAUE;AAnBkE,iBASpE,GAUE;AAnBqF,gBASvF,GAUE;EACE,cAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA","file":"angular-chart.css","sourcesContent":[".chart-legend, .bar-legend, .line-legend, .pie-legend, .radar-legend, .polararea-legend, .doughnut-legend {\n list-style-type: none;\n margin-top: 5px;\n text-align: center;\n /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */\n -webkit-padding-start:0; /* Webkit */\n -moz-padding-start:0; /* Mozilla */\n padding-left:0; /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */\n\n li {\n display: inline-block;\n white-space: nowrap;\n position: relative;\n margin-bottom: 4px;\n border-radius: 5px;\n padding: 2px 8px 2px 28px;\n font-size: smaller;\n cursor: default;\n\n span {\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n width: 20px;\n height: 20px;\n border-radius: 5px;\n }\n }\n}\n"],"sourceRoot":"/source/"}
|
||||||
301
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.js
vendored
Normal file
301
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.js
vendored
Normal file
|
|
@ -0,0 +1,301 @@
|
||||||
|
(function (factory) {
|
||||||
|
'use strict';
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['angular', 'chart.js'], factory);
|
||||||
|
} else if (typeof exports === 'object') {
|
||||||
|
// Node/CommonJS
|
||||||
|
module.exports = factory(require('angular'), require('chart.js'));
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory(angular, Chart);
|
||||||
|
}
|
||||||
|
}(function (angular, Chart) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Chart.defaults.global.responsive = true;
|
||||||
|
Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
|
||||||
|
|
||||||
|
Chart.defaults.global.colours = [
|
||||||
|
'#97BBCD', // blue
|
||||||
|
'#DCDCDC', // light grey
|
||||||
|
'#F7464A', // red
|
||||||
|
'#46BFBD', // green
|
||||||
|
'#FDB45C', // yellow
|
||||||
|
'#949FB1', // grey
|
||||||
|
'#4D5360' // dark grey
|
||||||
|
];
|
||||||
|
|
||||||
|
angular.module('chart.js', [])
|
||||||
|
.provider('ChartJs', ChartJsProvider)
|
||||||
|
.factory('ChartJsFactory', ['ChartJs', ChartJsFactory])
|
||||||
|
.directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }])
|
||||||
|
.directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Line'); }])
|
||||||
|
.directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Bar'); }])
|
||||||
|
.directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Radar'); }])
|
||||||
|
.directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Doughnut'); }])
|
||||||
|
.directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('Pie'); }])
|
||||||
|
.directive('chartPolarArea', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('PolarArea'); }]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapper for chart.js
|
||||||
|
* Allows configuring chart js using the provider
|
||||||
|
*
|
||||||
|
* angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
|
||||||
|
* ChartJsProvider.setOptions({ responsive: true });
|
||||||
|
* ChartJsProvider.setOptions('Line', { responsive: false });
|
||||||
|
* })))
|
||||||
|
*/
|
||||||
|
function ChartJsProvider () {
|
||||||
|
var options = {};
|
||||||
|
var ChartJs = {
|
||||||
|
Chart: Chart,
|
||||||
|
getOptions: function (type) {
|
||||||
|
var typeOptions = type && options[type] || {};
|
||||||
|
return angular.extend({}, options, typeOptions);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow to set global options during configuration
|
||||||
|
*/
|
||||||
|
this.setOptions = function (type, customOptions) {
|
||||||
|
// If no type was specified set option for the global object
|
||||||
|
if (! customOptions) {
|
||||||
|
customOptions = type;
|
||||||
|
options = angular.extend(options, customOptions);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Set options for the specific chart
|
||||||
|
options[type] = angular.extend(options[type] || {}, customOptions);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$get = function () {
|
||||||
|
return ChartJs;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartJsFactory (ChartJs) {
|
||||||
|
return function chart (type) {
|
||||||
|
return {
|
||||||
|
restrict: 'CA',
|
||||||
|
scope: {
|
||||||
|
data: '=',
|
||||||
|
labels: '=',
|
||||||
|
options: '=',
|
||||||
|
series: '=',
|
||||||
|
colours: '=?',
|
||||||
|
getColour: '=?',
|
||||||
|
chartType: '=',
|
||||||
|
legend: '@',
|
||||||
|
click: '=',
|
||||||
|
hover: '='
|
||||||
|
},
|
||||||
|
link: function (scope, elem/*, attrs */) {
|
||||||
|
var chart, container = document.createElement('div');
|
||||||
|
container.className = 'chart-container';
|
||||||
|
elem.replaceWith(container);
|
||||||
|
container.appendChild(elem[0]);
|
||||||
|
|
||||||
|
if (typeof window.G_vmlCanvasManager === 'object' && window.G_vmlCanvasManager !== null) {
|
||||||
|
if (typeof window.G_vmlCanvasManager.initElement === 'function') {
|
||||||
|
window.G_vmlCanvasManager.initElement(elem[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Order of setting "watch" matter
|
||||||
|
|
||||||
|
scope.$watch('data', function (newVal, oldVal) {
|
||||||
|
if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) return;
|
||||||
|
var chartType = type || scope.chartType;
|
||||||
|
if (! chartType) return;
|
||||||
|
|
||||||
|
if (chart) {
|
||||||
|
if (canUpdateChart(newVal, oldVal)) return updateChart(chart, newVal, scope);
|
||||||
|
chart.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
chart = createChart(chartType, scope, elem);
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
scope.$watch('series', resetChart, true);
|
||||||
|
scope.$watch('labels', resetChart, true);
|
||||||
|
scope.$watch('options', resetChart, true);
|
||||||
|
scope.$watch('colours', resetChart, true);
|
||||||
|
|
||||||
|
scope.$watch('chartType', function (newVal, oldVal) {
|
||||||
|
if (isEmpty(newVal)) return;
|
||||||
|
if (angular.equals(newVal, oldVal)) return;
|
||||||
|
if (chart) chart.destroy();
|
||||||
|
chart = createChart(newVal, scope, elem);
|
||||||
|
});
|
||||||
|
|
||||||
|
scope.$on('$destroy', function () {
|
||||||
|
if (chart) chart.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
function resetChart (newVal, oldVal) {
|
||||||
|
if (isEmpty(newVal)) return;
|
||||||
|
if (angular.equals(newVal, oldVal)) return;
|
||||||
|
var chartType = type || scope.chartType;
|
||||||
|
if (! chartType) return;
|
||||||
|
|
||||||
|
// chart.update() doesn't work for series and labels
|
||||||
|
// so we have to re-create the chart entirely
|
||||||
|
if (chart) chart.destroy();
|
||||||
|
|
||||||
|
chart = createChart(chartType, scope, elem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function canUpdateChart (newVal, oldVal) {
|
||||||
|
if (newVal && oldVal && newVal.length && oldVal.length) {
|
||||||
|
return Array.isArray(newVal[0]) ?
|
||||||
|
newVal.length === oldVal.length && newVal[0].length === oldVal[0].length :
|
||||||
|
oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function sum (carry, val) {
|
||||||
|
return carry + val;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createChart (type, scope, elem) {
|
||||||
|
if (! scope.data || ! scope.data.length) return;
|
||||||
|
scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour;
|
||||||
|
scope.colours = 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 chart = new ChartJs.Chart(ctx)[type](data, options);
|
||||||
|
scope.$emit('create', chart);
|
||||||
|
|
||||||
|
['hover', 'click'].forEach(function (action) {
|
||||||
|
if (scope[action]) cvs[action === 'click' ? 'onclick' : 'onmousemove'] = getEventHandler(scope, chart, action);
|
||||||
|
});
|
||||||
|
if (scope.legend && scope.legend !== 'false') setLegend(elem, chart);
|
||||||
|
return chart;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getEventHandler (scope, chart, action) {
|
||||||
|
return function (evt) {
|
||||||
|
var atEvent = chart.getPointsAtEvent || chart.getBarsAtEvent || chart.getSegmentsAtEvent;
|
||||||
|
if (atEvent) {
|
||||||
|
var activePoints = atEvent.call(chart, evt);
|
||||||
|
scope[action](activePoints, evt);
|
||||||
|
scope.$apply();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColours (type, scope) {
|
||||||
|
var colours = angular.copy(scope.colours ||
|
||||||
|
ChartJs.getOptions(type).colours ||
|
||||||
|
Chart.defaults.global.colours
|
||||||
|
);
|
||||||
|
while (colours.length < scope.data.length) {
|
||||||
|
colours.push(scope.getColour());
|
||||||
|
}
|
||||||
|
return colours.map(convertColour);
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertColour (colour) {
|
||||||
|
if (typeof colour === 'object' && colour !== null) return colour;
|
||||||
|
if (typeof colour === 'string' && colour[0] === '#') return getColour(hexToRgb(colour.substr(1)));
|
||||||
|
return getRandomColour();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomColour () {
|
||||||
|
var colour = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
|
||||||
|
return getColour(colour);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColour (colour) {
|
||||||
|
return {
|
||||||
|
fillColor: rgba(colour, 0.2),
|
||||||
|
strokeColor: rgba(colour, 1),
|
||||||
|
pointColor: rgba(colour, 1),
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: rgba(colour, 0.8)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomInt (min, max) {
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||||
|
}
|
||||||
|
|
||||||
|
function rgba (colour, alpha) {
|
||||||
|
return 'rgba(' + colour.concat(alpha).join(',') + ')';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Credit: http://stackoverflow.com/a/11508164/1190235
|
||||||
|
function hexToRgb (hex) {
|
||||||
|
var bigint = parseInt(hex, 16),
|
||||||
|
r = (bigint >> 16) & 255,
|
||||||
|
g = (bigint >> 8) & 255,
|
||||||
|
b = bigint & 255;
|
||||||
|
|
||||||
|
return [r, g, b];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDataSets (labels, data, series, colours) {
|
||||||
|
return {
|
||||||
|
labels: labels,
|
||||||
|
datasets: data.map(function (item, i) {
|
||||||
|
return angular.extend({}, colours[i], {
|
||||||
|
label: series[i],
|
||||||
|
data: item
|
||||||
|
});
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData (labels, data, colours) {
|
||||||
|
return labels.map(function (label, i) {
|
||||||
|
return angular.extend({}, colours[i], {
|
||||||
|
label: label,
|
||||||
|
value: data[i],
|
||||||
|
color: colours[i].strokeColor,
|
||||||
|
highlight: colours[i].pointHighlightStroke
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLegend (elem, chart) {
|
||||||
|
var $parent = elem.parent(),
|
||||||
|
$oldLegend = $parent.find('chart-legend'),
|
||||||
|
legend = '<chart-legend>' + chart.generateLegend() + '</chart-legend>';
|
||||||
|
if ($oldLegend.length) $oldLegend.replaceWith(legend);
|
||||||
|
else $parent.append(legend);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateChart (chart, values, scope) {
|
||||||
|
if (Array.isArray(scope.data[0])) {
|
||||||
|
chart.datasets.forEach(function (dataset, i) {
|
||||||
|
(dataset.points || dataset.bars).forEach(function (dataItem, j) {
|
||||||
|
dataItem.value = values[i][j];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
chart.segments.forEach(function (segment, i) {
|
||||||
|
segment.value = values[i];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
chart.update();
|
||||||
|
scope.$emit('update', chart);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEmpty (value) {
|
||||||
|
return ! value ||
|
||||||
|
(Array.isArray(value) && ! value.length) ||
|
||||||
|
(typeof value === 'object' && ! Object.keys(value).length);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}));
|
||||||
BIN
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.js.tar.gz
vendored
Executable file
BIN
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.js.tar.gz
vendored
Executable file
Binary file not shown.
2
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.min.js
vendored
Normal file
2
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
!function(t){"use strict";"function"==typeof define&&define.amd?define(["angular","chart.js"],t):"object"==typeof exports?module.exports=t(require("angular"),require("chart.js")):t(angular,Chart)}(function(t,e){"use strict";function n(){var n={},r={Chart:e,getOptions:function(e){var r=e&&n[e]||{};return t.extend({},n,r)}};this.setOptions=function(e,r){return r?(n[e]=t.extend(n[e]||{},r),void 0):(r=e,n=t.extend(n,r),void 0)},this.$get=function(){return r}}function r(n){function r(t,e){return t&&e&&t.length&&e.length?Array.isArray(t[0])?t.length===e.length&&t[0].length===e[0].length:e.reduce(a,0)>0?t.length===e.length:!1:!1}function a(t,e){return t+e}function o(e,r,a){if(r.data&&r.data.length){r.getColour="function"==typeof r.getColour?r.getColour:l,r.colours=c(e,r);var o=a[0],u=o.getContext("2d"),s=Array.isArray(r.data[0])?g(r.labels,r.data,r.series||[],r.colours):p(r.labels,r.data,r.colours),f=t.extend({},n.getOptions(e),r.options),h=new n.Chart(u)[e](s,f);return r.$emit("create",h),["hover","click"].forEach(function(t){r[t]&&(o["click"===t?"onclick":"onmousemove"]=i(r,h,t))}),r.legend&&"false"!==r.legend&&v(a,h),h}}function i(t,e,n){return function(r){var a=e.getPointsAtEvent||e.getBarsAtEvent||e.getSegmentsAtEvent;if(a){var o=a.call(e,r);t[n](o,r),t.$apply()}}}function c(r,a){for(var o=t.copy(a.colours||n.getOptions(r).colours||e.defaults.global.colours);o.length<a.data.length;)o.push(a.getColour());return o.map(u)}function u(t){return"object"==typeof t&&null!==t?t:"string"==typeof t&&"#"===t[0]?s(d(t.substr(1))):l()}function l(){var t=[f(0,255),f(0,255),f(0,255)];return s(t)}function s(t){return{fillColor:h(t,.2),strokeColor:h(t,1),pointColor:h(t,1),pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:h(t,.8)}}function f(t,e){return Math.floor(Math.random()*(e-t+1))+t}function h(t,e){return"rgba("+t.concat(e).join(",")+")"}function d(t){var e=parseInt(t,16),n=e>>16&255,r=e>>8&255,a=255&e;return[n,r,a]}function g(e,n,r,a){return{labels:e,datasets:n.map(function(e,n){return t.extend({},a[n],{label:r[n],data:e})})}}function p(e,n,r){return e.map(function(e,a){return t.extend({},r[a],{label:e,value:n[a],color:r[a].strokeColor,highlight:r[a].pointHighlightStroke})})}function v(t,e){var n=t.parent(),r=n.find("chart-legend"),a="<chart-legend>"+e.generateLegend()+"</chart-legend>";r.length?r.replaceWith(a):n.append(a)}function y(t,e,n){Array.isArray(n.data[0])?t.datasets.forEach(function(t,n){(t.points||t.bars).forEach(function(t,r){t.value=e[n][r]})}):t.segments.forEach(function(t,n){t.value=e[n]}),t.update(),n.$emit("update",t)}function C(t){return!t||Array.isArray(t)&&!t.length||"object"==typeof t&&!Object.keys(t).length}return function(e){return{restrict:"CA",scope:{data:"=",labels:"=",options:"=",series:"=",colours:"=?",getColour:"=?",chartType:"=",legend:"@",click:"=",hover:"="},link:function(n,a){function i(r,i){if(!C(r)&&!t.equals(r,i)){var u=e||n.chartType;u&&(c&&c.destroy(),c=o(u,n,a))}}var c,u=document.createElement("div");u.className="chart-container",a.replaceWith(u),u.appendChild(a[0]),"object"==typeof window.G_vmlCanvasManager&&null!==window.G_vmlCanvasManager&&"function"==typeof window.G_vmlCanvasManager.initElement&&window.G_vmlCanvasManager.initElement(a[0]),n.$watch("data",function(t,i){if(t&&t.length&&(!Array.isArray(t[0])||t[0].length)){var u=e||n.chartType;if(u){if(c){if(r(t,i))return y(c,t,n);c.destroy()}c=o(u,n,a)}}},!0),n.$watch("series",i,!0),n.$watch("labels",i,!0),n.$watch("options",i,!0),n.$watch("colours",i,!0),n.$watch("chartType",function(e,r){C(e)||t.equals(e,r)||(c&&c.destroy(),c=o(e,n,a))}),n.$on("$destroy",function(){c&&c.destroy()})}}}}e.defaults.global.responsive=!0,e.defaults.global.multiTooltipTemplate="<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>",e.defaults.global.colours=["#97BBCD","#DCDCDC","#F7464A","#46BFBD","#FDB45C","#949FB1","#4D5360"],t.module("chart.js",[]).provider("ChartJs",n).factory("ChartJsFactory",["ChartJs",r]).directive("chartBase",["ChartJsFactory",function(t){return new t}]).directive("chartLine",["ChartJsFactory",function(t){return new t("Line")}]).directive("chartBar",["ChartJsFactory",function(t){return new t("Bar")}]).directive("chartRadar",["ChartJsFactory",function(t){return new t("Radar")}]).directive("chartDoughnut",["ChartJsFactory",function(t){return new t("Doughnut")}]).directive("chartPie",["ChartJsFactory",function(t){return new t("Pie")}]).directive("chartPolarArea",["ChartJsFactory",function(t){return new t("PolarArea")}])});
|
||||||
|
//# sourceMappingURL=angular-chart.min.js.map
|
||||||
1
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.min.js.map
vendored
Normal file
1
templates/js/libs/angular-chart.js-0.7.2/dist/angular-chart.min.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
3477
templates/js/libs/angular-chart.js-0.7.2/dist/chart.js
vendored
Normal file
3477
templates/js/libs/angular-chart.js-0.7.2/dist/chart.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
80
templates/js/libs/angular-chart.js-0.7.2/examples/app.css
Normal file
80
templates/js/libs/angular-chart.js-0.7.2/examples/app.css
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
body { padding-top: 50px; }
|
||||||
|
|
||||||
|
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
|
||||||
|
|
||||||
|
#hero-bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aspect-ratio {
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 25%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
top: 50%;
|
||||||
|
font-size: larger;
|
||||||
|
z-index: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-heading {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code .nav-tabs>li.active>a, .code .nav-tabs>li.active>a:hover, .code .nav-tabs>li.active>a:focus {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code pre, .code code {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-top: none;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings > a, .settings {
|
||||||
|
background-color: white ! important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs > li > a {
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings > a.active {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.settings {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-top: 0;
|
||||||
|
padding: 9.5px;
|
||||||
|
margin: 0 0 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
div.settings > code {
|
||||||
|
border-top: 1px solid #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 0;
|
||||||
|
margin-top: 70px;
|
||||||
|
border-top: 1px solid #e5e5e5;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
185
templates/js/libs/angular-chart.js-0.7.2/examples/app.js
Normal file
185
templates/js/libs/angular-chart.js-0.7.2/examples/app.js
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
|
||||||
|
|
||||||
|
app.config(function (ChartJsProvider) {
|
||||||
|
// Configure all charts
|
||||||
|
ChartJsProvider.setOptions({
|
||||||
|
colours: ['#97BBCD', '#DCDCDC', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
|
||||||
|
responsive: true
|
||||||
|
});
|
||||||
|
// Configure all doughnut charts
|
||||||
|
ChartJsProvider.setOptions('Doughnut', {
|
||||||
|
animateScale: true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('MenuCtrl', function ($scope) {
|
||||||
|
$scope.isCollapsed = true;
|
||||||
|
$scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Base'];
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$scope.onClick = function (points, evt) {
|
||||||
|
console.log(points, evt);
|
||||||
|
};
|
||||||
|
$scope.onHover = function (points) {
|
||||||
|
if (points.length > 0) {
|
||||||
|
console.log('Point', points[0].value);
|
||||||
|
} else {
|
||||||
|
console.log('No point');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
$scope.data = [
|
||||||
|
[28, 48, 40, 19, 86, 27, 90],
|
||||||
|
[65, 59, 80, 81, 56, 55, 40]
|
||||||
|
];
|
||||||
|
$scope.series = ['Series C', 'Series D'];
|
||||||
|
}, 3000);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
app.controller('BarCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.options = { scaleShowVerticalLines: false };
|
||||||
|
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.options = { scaleShowVerticalLines: true };
|
||||||
|
}, 3000);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||||
|
$scope.data = [0, 0, 0];
|
||||||
|
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.data = [350, 450, 100];
|
||||||
|
}, 500);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
app.controller('PieCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||||
|
$scope.data = [300, 500, 100];
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('PolarAreaCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||||
|
$scope.data = [300, 500, 100, 40, 120];
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('BaseCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Download Sales', 'Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||||
|
$scope.data = [300, 500, 100, 40, 120];
|
||||||
|
$scope.type = 'PolarArea';
|
||||||
|
|
||||||
|
$scope.toggle = function () {
|
||||||
|
$scope.type = $scope.type === 'PolarArea' ? 'Pie' : 'PolarArea';
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('RadarCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||||
|
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 90, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 96, 27, 100]
|
||||||
|
];
|
||||||
|
|
||||||
|
$scope.onClick = function (points, evt) {
|
||||||
|
console.log(points, evt);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('StackedBarCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
$scope.type = 'StackedBar';
|
||||||
|
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 90, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 96, 27, 100]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('DataTablesCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$scope.colours = [
|
||||||
|
{ // grey
|
||||||
|
fillColor: 'rgba(148,159,177,0.2)',
|
||||||
|
strokeColor: 'rgba(148,159,177,1)',
|
||||||
|
pointColor: 'rgba(148,159,177,1)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(148,159,177,0.8)'
|
||||||
|
},
|
||||||
|
{ // dark grey
|
||||||
|
fillColor: 'rgba(77,83,96,0.2)',
|
||||||
|
strokeColor: 'rgba(77,83,96,1)',
|
||||||
|
pointColor: 'rgba(77,83,96,1)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(77,83,96,1)'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
$scope.randomize = function () {
|
||||||
|
$scope.data = $scope.data.map(function (data) {
|
||||||
|
return data.map(function (y) {
|
||||||
|
y = y + Math.random() * 10 - 5;
|
||||||
|
return parseInt(y < 0 ? 0 : y > 100 ? 100 : y);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('TicksCtrl', ['$scope', '$interval', function ($scope, $interval) {
|
||||||
|
var maximum = document.getElementById('container').clientWidth / 2 || 300;
|
||||||
|
$scope.data = [[]];
|
||||||
|
$scope.labels = [];
|
||||||
|
$scope.options = {
|
||||||
|
animation: false,
|
||||||
|
showScale: false,
|
||||||
|
showTooltips: false,
|
||||||
|
pointDot: false,
|
||||||
|
datasetStrokeWidth: 0.5
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update the dataset at 25FPS for a smoothly-animating chart
|
||||||
|
$interval(function () {
|
||||||
|
getLiveChartData();
|
||||||
|
}, 40);
|
||||||
|
|
||||||
|
function getLiveChartData () {
|
||||||
|
if ($scope.data[0].length) {
|
||||||
|
$scope.labels = $scope.labels.slice(1);
|
||||||
|
$scope.data[0] = $scope.data[0].slice(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
while ($scope.data[0].length < maximum) {
|
||||||
|
$scope.labels.push('');
|
||||||
|
$scope.data[0].push(getRandomValue($scope.data[0]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
function getRandomValue (data) {
|
||||||
|
var l = data.length, previous = l ? data[l - 1] : 50;
|
||||||
|
var y = previous + Math.random() * 10 - 5;
|
||||||
|
return y < 0 ? 0 : y > 100 ? 100 : y;
|
||||||
|
}
|
||||||
|
})();
|
||||||
5785
templates/js/libs/angular-chart.js-0.7.2/examples/bootstrap.css
vendored
Normal file
5785
templates/js/libs/angular-chart.js-0.7.2/examples/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
462
templates/js/libs/angular-chart.js-0.7.2/examples/charts.html
Normal file
462
templates/js/libs/angular-chart.js-0.7.2/examples/charts.html
Normal file
|
|
@ -0,0 +1,462 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Charts</title>
|
||||||
|
<link rel="stylesheet" href="../dist/angular-chart.css">
|
||||||
|
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="../bower_components/rainbow/themes/github.css">
|
||||||
|
<link href="bootstrap.css" rel="stylesheet">
|
||||||
|
<link href="app.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="examples" id="top">
|
||||||
|
<div class="navbar navbar-default navbar-fixed-top">
|
||||||
|
<div class="container" ng-controller="MenuCtrl">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand visible-xs" href="#">Angular Charts</a>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden-xs">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li>
|
||||||
|
<a href="#top" role="button" class="navbar-brand">
|
||||||
|
Angular Chart
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Directives <b class="caret"></b>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li ng-repeat="chart in charts"><a ng-href="#{{chart | lowercase }}-chart">{{chart}}</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#getting_started">Getting started</a></li>
|
||||||
|
<li><a href="#reactive">Reactive</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="collapse" collapse="isCollapsed" style="height: 0px;">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
|
||||||
|
<li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
|
||||||
|
<canvas width='1200' height='300' id="hero-bar" class="chart chart-line chart-xl" data="data" options="options" labels="labels"></canvas>
|
||||||
|
<div class="header">
|
||||||
|
<h1>
|
||||||
|
Angular Chart
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p>Reactive, responsive, beautiful charts for <a href="http://angularjs.org">AngularJS</a> based on <a href="http://www.chartjs.org">Chart.js</a></p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
|
||||||
|
<a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
|
||||||
|
<i class="fa fa-download"></i> Download <small>(0.7.2)</small>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<section id="getting_started">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Getting started</h1>
|
||||||
|
</div>
|
||||||
|
<h3>Dependencies</h3>
|
||||||
|
<p>
|
||||||
|
This repository contains a set of <strong>native AngularJS directives</strong> for Chart.js. The <strong>only required dependencies</strong> are:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="http://angularjs.org" target="_blank">AngularJS</a> (tested with 1.2.20 and 1.3.10 although it probably works with older versions)</li>
|
||||||
|
<li><a href="http://chartjs.org" target="_blank">Chart.js</a> (requires Chart.js 1.0, tested with version 1.0.1-beta.2, 1.0.1-beta.4, and and 1.0.1).</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Files to download</h3>
|
||||||
|
<p>
|
||||||
|
The easiest is to download with <strong>bower</strong>:
|
||||||
|
<pre>bower install angular-chart.js --save</pre>
|
||||||
|
Alternatively files can be downloaded <a href="https://github.com/jtblin/angular-chart.js">downloaded from Github</a>.
|
||||||
|
</p>
|
||||||
|
<p>Whichever method you choose the good news is that the overall size is very small:
|
||||||
|
<5kb for all directives (~1kb with gzip compression!)</p>
|
||||||
|
<h3>Installation</h3>
|
||||||
|
</p><pre><code><script src="bower_components/dist/angular-chart.js"></script></code></pre>
|
||||||
|
<p>As soon as you've got all the files downloaded and included in your page you just need to declare
|
||||||
|
a dependency on the <code>chart.js</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
|
||||||
|
</p><pre><code>angular.module('myModule', ['chart.js']);</code></pre>
|
||||||
|
<p></p>
|
||||||
|
<h3>CSS</h3>
|
||||||
|
<p>You need to include a link to the css file in your page.</p>
|
||||||
|
</p><pre><code><link rel="stylesheet" href="bower_components/dist/angular-chart.css"></code></pre>
|
||||||
|
<p></p>
|
||||||
|
<h3>Colours</h3>
|
||||||
|
<p>Series have beautiful pre-sets colours (to a maximum of 7 series, after that colours will be randomly generated).
|
||||||
|
They can be overwritten using <code>Chart.defaults.global.colours</code>.</p>
|
||||||
|
<ol class="chart-legend">
|
||||||
|
<li><span style="background-color: rgba(151,187,205,1)"></span> Blue</li>
|
||||||
|
<li><span style="background-color: rgba(220,220,220,1)"></span>Light grey</li>
|
||||||
|
<li><span style="background-color: rgba(247,70,74,1)"></span>Red</li>
|
||||||
|
<li><span style="background-color: rgba(70,191,189,1)"></span>Green</li>
|
||||||
|
<li><span style="background-color: rgba(253,180,92,1)"></span>Yellow</li>
|
||||||
|
<li><span style="background-color: rgba(148,159,177,1)"></span>Grey</li>
|
||||||
|
<li><span style="background-color: rgba(77,83,96,1)"></span>Dark Grey</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
<section id="directives">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Directives</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Line Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true"
|
||||||
|
click="onClick" hover="onHover" series="series"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-line</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: x axis labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>series</code> (default: <code>[]</code>): series labels</li>
|
||||||
|
<li><code>click</code> (optional): onclick event handler</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="line" class="chart chart-line" data="data"
|
||||||
|
labels="labels" legend="true" series="series"
|
||||||
|
click="onClick">
|
||||||
|
</canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {
|
||||||
|
|
||||||
|
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$scope.onClick = function (points, evt) {
|
||||||
|
console.log(points, evt);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-bar</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: x axis labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>series</code> (default: <code>[]</code>): series labels</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="bar" class="chart chart-bar" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
|
||||||
|
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Bar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" series="series"
|
||||||
|
options="options"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Doughnut Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="doughnut" class="chart chart-doughnut chart-xs" data="data" labels="labels" legend="false"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-doughnut</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="doughnut" class="chart chart-doughnut" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||||
|
$scope.data = [300, 500, 100];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-radar</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>series</code> (default: <code>[]</code>): series labels</li>
|
||||||
|
<li><code>click</code> (optional): onclick event handler</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="radar" class="chart chart-radar" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
|
||||||
|
$scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
|
||||||
|
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 90, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 96, 27, 100]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Radar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="area" class="chart chart-radar" data="data" labels="labels" click="onClick"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Pie Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="pie" class="chart chart-pie chart-xs" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-pie</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="pie" class="chart chart-pie" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||||
|
$scope.data = [300, 500, 100];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-polar-area</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="polar-area" class="chart chart-polar-area" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||||
|
$scope.data = [300, 500, 100, 40, 120];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Polar Area Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="polar" class="chart chart-polar-area" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Dynamic Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="base" class="chart chart-base" chart-type="type" data="data" labels="labels" legend="true"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-base</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>chart-type</code>: chart type e.g. Bar, PolarArea, etc. or other plugins</li>
|
||||||
|
<li>other options according to chart type</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="base" class="chart-base" chart-type="type" data="data"
|
||||||
|
labels="labels" legend="true"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
|
||||||
|
function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||||
|
$scope.data = [300, 500, 100, 40, 120];
|
||||||
|
$scope.type = 'PolarArea';
|
||||||
|
|
||||||
|
$scope.toggle = function () {
|
||||||
|
$scope.type = $scope.type === 'PolarArea' ?
|
||||||
|
'Pie' : 'PolarArea';
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="reactive">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Reactive</h1>
|
||||||
|
<p>All charts are reactive and will update automatically when data changes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row" ng-controller="DataTablesCtrl">
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Chart Data</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<table class="table table-responsive table-condensed table-striped">
|
||||||
|
<tr>
|
||||||
|
<th ng-repeat="label in labels">{{label}}</th>
|
||||||
|
</tr>
|
||||||
|
<tr ng-repeat="dataSet in data">
|
||||||
|
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Reactive Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="tables" class="chart chart-line" data="data" labels="labels" colours="colours"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>Designed and built by <a href="https://github.com/jtblin" target="_blank">Jerome Touffe-Blin</a></p>
|
||||||
|
<p>Code licensed under <a href="https://github.com/jtblin/angular-chart.js/blob/master/LICENSE">BSD License</a>.</p>
|
||||||
|
<p><a href="https://github.com/jtblin/angular-chart.js/issues?state=open">Issues</a></p>
|
||||||
|
<p><strong>Credits</strong>: <a href="http://www.chartjs.org/">Chart.js</a> and <a href="https://angularjs.org/">AngularJS</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/rainbow.min.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/language/generic.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/language/html.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/language/javascript.js"></script>
|
||||||
|
<script src="../angular-chart.js"></script>
|
||||||
|
<script src="smoothscroll.min.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,462 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Charts</title>
|
||||||
|
<link rel="stylesheet" href="../dist/angular-chart.css">
|
||||||
|
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="../bower_components/rainbow/themes/github.css">
|
||||||
|
<link href="bootstrap.css" rel="stylesheet">
|
||||||
|
<link href="app.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="examples" id="top">
|
||||||
|
<div class="navbar navbar-default navbar-fixed-top">
|
||||||
|
<div class="container" ng-controller="MenuCtrl">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand visible-xs" href="#">Angular Charts</a>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden-xs">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li>
|
||||||
|
<a href="#top" role="button" class="navbar-brand">
|
||||||
|
Angular Chart
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Directives <b class="caret"></b>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li ng-repeat="chart in charts"><a ng-href="#{{chart | lowercase }}-chart">{{chart}}</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#getting_started">Getting started</a></li>
|
||||||
|
<li><a href="#reactive">Reactive</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="collapse" collapse="isCollapsed" style="height: 0px;">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
|
||||||
|
<li><a href="#directives" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="text-center aspect-ratio" id="container" ng-controller="TicksCtrl">
|
||||||
|
<canvas width='1200' height='300' id="hero-bar" class="chart chart-line chart-xl" data="data" options="options" labels="labels"></canvas>
|
||||||
|
<div class="header">
|
||||||
|
<h1>
|
||||||
|
Angular Chart
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p>Reactive, responsive, beautiful charts for <a href="http://angularjs.org">AngularJS</a> based on <a href="http://www.chartjs.org">Chart.js</a></p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-default btn-lg" href="https://github.com/jtblin/angular-chart"><i class="icon-github"></i>Code on Github</a>
|
||||||
|
<a class="btn btn-success btn-lg" href="../dist/angular-chart.js.tar.gz" download="angular-chart.js.tar.gz">
|
||||||
|
<i class="fa fa-download"></i> Download <small>(<!-- version -->)</small>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<section id="getting_started">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Getting started</h1>
|
||||||
|
</div>
|
||||||
|
<h3>Dependencies</h3>
|
||||||
|
<p>
|
||||||
|
This repository contains a set of <strong>native AngularJS directives</strong> for Chart.js. The <strong>only required dependencies</strong> are:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="http://angularjs.org" target="_blank">AngularJS</a> (tested with 1.2.20 and 1.3.10 although it probably works with older versions)</li>
|
||||||
|
<li><a href="http://chartjs.org" target="_blank">Chart.js</a> (requires Chart.js 1.0, tested with version 1.0.1-beta.2, 1.0.1-beta.4, and and 1.0.1).</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Files to download</h3>
|
||||||
|
<p>
|
||||||
|
The easiest is to download with <strong>bower</strong>:
|
||||||
|
<pre>bower install angular-chart.js --save</pre>
|
||||||
|
Alternatively files can be downloaded <a href="https://github.com/jtblin/angular-chart.js">downloaded from Github</a>.
|
||||||
|
</p>
|
||||||
|
<p>Whichever method you choose the good news is that the overall size is very small:
|
||||||
|
<5kb for all directives (~1kb with gzip compression!)</p>
|
||||||
|
<h3>Installation</h3>
|
||||||
|
</p><pre><code><script src="bower_components/dist/angular-chart.js"></script></code></pre>
|
||||||
|
<p>As soon as you've got all the files downloaded and included in your page you just need to declare
|
||||||
|
a dependency on the <code>chart.js</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
|
||||||
|
</p><pre><code>angular.module('myModule', ['chart.js']);</code></pre>
|
||||||
|
<p></p>
|
||||||
|
<h3>CSS</h3>
|
||||||
|
<p>You need to include a link to the css file in your page.</p>
|
||||||
|
</p><pre><code><link rel="stylesheet" href="bower_components/dist/angular-chart.css"></code></pre>
|
||||||
|
<p></p>
|
||||||
|
<h3>Colours</h3>
|
||||||
|
<p>Series have beautiful pre-sets colours (to a maximum of 7 series, after that colours will be randomly generated).
|
||||||
|
They can be overwritten using <code>Chart.defaults.global.colours</code>.</p>
|
||||||
|
<ol class="chart-legend">
|
||||||
|
<li><span style="background-color: rgba(151,187,205,1)"></span> Blue</li>
|
||||||
|
<li><span style="background-color: rgba(220,220,220,1)"></span>Light grey</li>
|
||||||
|
<li><span style="background-color: rgba(247,70,74,1)"></span>Red</li>
|
||||||
|
<li><span style="background-color: rgba(70,191,189,1)"></span>Green</li>
|
||||||
|
<li><span style="background-color: rgba(253,180,92,1)"></span>Yellow</li>
|
||||||
|
<li><span style="background-color: rgba(148,159,177,1)"></span>Grey</li>
|
||||||
|
<li><span style="background-color: rgba(77,83,96,1)"></span>Dark Grey</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
<section id="directives">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Directives</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Line Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true"
|
||||||
|
click="onClick" hover="onHover" series="series"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-line</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: x axis labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>series</code> (default: <code>[]</code>): series labels</li>
|
||||||
|
<li><code>click</code> (optional): onclick event handler</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="line" class="chart chart-line" data="data"
|
||||||
|
labels="labels" legend="true" series="series"
|
||||||
|
click="onClick">
|
||||||
|
</canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {
|
||||||
|
|
||||||
|
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$scope.onClick = function (points, evt) {
|
||||||
|
console.log(points, evt);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-bar</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: x axis labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>series</code> (default: <code>[]</code>): series labels</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="bar" class="chart chart-bar" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
|
||||||
|
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Bar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="bar" class="chart chart-bar" data="data" labels="labels" series="series"
|
||||||
|
options="options"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Doughnut Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="doughnut" class="chart chart-doughnut chart-xs" data="data" labels="labels" legend="false"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-doughnut</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="doughnut" class="chart chart-doughnut" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||||
|
$scope.data = [300, 500, 100];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-radar</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>series</code> (default: <code>[]</code>): series labels</li>
|
||||||
|
<li><code>click</code> (optional): onclick event handler</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="radar" class="chart chart-radar" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("RadarCtrl", function ($scope) {
|
||||||
|
$scope.labels =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
|
||||||
|
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 90, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 96, 27, 100]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Radar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="area" class="chart chart-radar" data="data" labels="labels" click="onClick"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Pie Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="pie" class="chart chart-pie chart-xs" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-pie</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="pie" class="chart chart-pie" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
|
||||||
|
$scope.data = [300, 500, 100];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-polar-area</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>data</code>: series data</li>
|
||||||
|
<li><code>labels</code>: series labels</li>
|
||||||
|
<li><code>legend</code> (default: <code>false</code>): show legend below the chart</li>
|
||||||
|
<li><code>options</code> (default: <code>{}</code>): Chart.js options</li>
|
||||||
|
<li><code>colours</code> (default to global colours): colours for the chart</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="polar-area" class="chart chart-polar-area" data="data"
|
||||||
|
labels="labels"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("PolarAreaCtrl", function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||||
|
$scope.data = [300, 500, 100, 40, 120];
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Polar Area Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="polar" class="chart chart-polar-area" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="BaseCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Dynamic Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="base" class="chart chart-base" chart-type="type" data="data" labels="labels" legend="true"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">Toggle</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12 code">
|
||||||
|
<tabset>
|
||||||
|
<tab heading="Settings" class="settings">
|
||||||
|
<div class="settings">
|
||||||
|
<code>.chart-base</code>
|
||||||
|
<ul>
|
||||||
|
<li><code>chart-type</code>: chart type e.g. Bar, PolarArea, etc. or other plugins</li>
|
||||||
|
<li>other options according to chart type</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Markup">
|
||||||
|
<pre><code data-language="html"><canvas id="base" class="chart-base" chart-type="type" data="data"
|
||||||
|
labels="labels" legend="true"></canvas> </code></pre>
|
||||||
|
</tab>
|
||||||
|
<tab heading="Javascript">
|
||||||
|
<pre><code data-language="javascript">angular.module("app", ["chart.js"]).controller("BaseCtrl",
|
||||||
|
function ($scope) {
|
||||||
|
$scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
|
||||||
|
$scope.data = [300, 500, 100, 40, 120];
|
||||||
|
$scope.type = 'PolarArea';
|
||||||
|
|
||||||
|
$scope.toggle = function () {
|
||||||
|
$scope.type = $scope.type === 'PolarArea' ?
|
||||||
|
'Pie' : 'PolarArea';
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</code></pre>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="reactive">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Reactive</h1>
|
||||||
|
<p>All charts are reactive and will update automatically when data changes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="row" ng-controller="DataTablesCtrl">
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Chart Data</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<table class="table table-responsive table-condensed table-striped">
|
||||||
|
<tr>
|
||||||
|
<th ng-repeat="label in labels">{{label}}</th>
|
||||||
|
</tr>
|
||||||
|
<tr ng-repeat="dataSet in data">
|
||||||
|
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Reactive Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="tables" class="chart chart-line" data="data" labels="labels" colours="colours"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>Designed and built by <a href="https://github.com/jtblin" target="_blank">Jerome Touffe-Blin</a></p>
|
||||||
|
<p>Code licensed under <a href="https://github.com/jtblin/angular-chart.js/blob/master/LICENSE">BSD License</a>.</p>
|
||||||
|
<p><a href="https://github.com/jtblin/angular-chart.js/issues?state=open">Issues</a></p>
|
||||||
|
<p><strong>Credits</strong>: <a href="http://www.chartjs.org/">Chart.js</a> and <a href="https://angularjs.org/">AngularJS</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/rainbow.min.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/language/generic.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/language/html.js"></script>
|
||||||
|
<script src="../bower_components/rainbow/js/language/javascript.js"></script>
|
||||||
|
<script src="../angular-chart.js"></script>
|
||||||
|
<script src="smoothscroll.min.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
templates/js/libs/angular-chart.js-0.7.2/examples/smoothscroll.min.js
vendored
Normal file
1
templates/js/libs/angular-chart.js-0.7.2/examples/smoothscroll.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
window.smoothScroll=function(){if(document.querySelectorAll===void 0||window.pageYOffset===void 0||history.pushState===void 0){return}var e=function(e){if(e.nodeName==="HTML")return-window.pageYOffset;return e.getBoundingClientRect().top+window.pageYOffset};var t=function(e){return e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1};var n=function(e,n,r,i){if(r>i)return n;return e+(n-e)*t(r/i)};var r=function(t,r,i){r=r||500;var s=window.pageYOffset;if(typeof t==="number"){var o=parseInt(t)}else{var o=e(t)}var u=Date.now();var a=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)};var f=function(){var e=Date.now()-u;window.scroll(0,n(s,o,e,r));if(e>r){if(typeof i==="function"){i(t)}}else{a(f)}};f()};var i=function(e){e.preventDefault();if(location.hash!==this.hash)window.history.pushState(null,null,this.hash);r(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll('a[href^="#"]'),t;for(var n=e.length;t=e[--n];){t.addEventListener("click",i,false)}});return r}()
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Stacked Bar chart</title>
|
||||||
|
<link rel="stylesheet" href="../dist/angular-chart.css">
|
||||||
|
<link href="bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="examples">
|
||||||
|
<br/>
|
||||||
|
<div class="container"></div>
|
||||||
|
<div id="container" class="container">
|
||||||
|
<div class="row" ng-controller="StackedBarCtrl">
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Stacked Bar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas class="chart chart-stacked-bar" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/angular/angular.js"></script>
|
||||||
|
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||||
|
<script src="../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../bower_components/Chart.StackedBar.js/src/Chart.StackedBar.js"></script>
|
||||||
|
<script src="../angular-chart.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
<script>
|
||||||
|
// Create the 'chart-stacked-bar' class/attribute directive:
|
||||||
|
angular.module('examples')
|
||||||
|
.directive('chartStackedBar', function (ChartJsFactory) {
|
||||||
|
return new ChartJsFactory('StackedBar');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Stacked Bar chart</title>
|
||||||
|
<link rel="stylesheet" href="../dist/angular-chart.css">
|
||||||
|
<link href="bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="examples">
|
||||||
|
<br/>
|
||||||
|
<div class="container"></div>
|
||||||
|
<div id="container" class="container">
|
||||||
|
<div class="row" ng-controller="StackedBarCtrl">
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Stacked Bar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas class="chart chart-base" chart-type="type" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/angular/angular.js"></script>
|
||||||
|
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||||
|
<script src="../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../bower_components/Chart.StackedBar.js/src/Chart.StackedBar.js"></script>
|
||||||
|
<script src="../angular-chart.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Data tables</title>
|
||||||
|
<link rel="stylesheet" href="../dist/angular-chart.css">
|
||||||
|
<link href="bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="examples">
|
||||||
|
<div class="container"></div>
|
||||||
|
<div id="container" class="container">
|
||||||
|
<div class="row" ng-controller="DataTablesCtrl">
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Chart Data</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<table class="table table-responsive table-condensed">
|
||||||
|
<tr>
|
||||||
|
<th ng-repeat="label in labels">{{label}}</th>
|
||||||
|
</tr>
|
||||||
|
<tr ng-repeat="dataSet in data">
|
||||||
|
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<input ng-click="randomize()" value="Randomize" type="button" class="pull-right"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Reactive Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="tables" class="chart chart-line" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||||
|
<script src="../bower_components/Chart.js/Chart.min.js"></script>
|
||||||
|
<script src="../angular-chart.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
templates/js/libs/angular-chart.js-0.7.2/examples/ticks.html
Normal file
30
templates/js/libs/angular-chart.js-0.7.2/examples/ticks.html
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Realtime ticks</title>
|
||||||
|
<link rel="stylesheet" href="../dist/angular-chart.css">
|
||||||
|
<link href="bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="examples">
|
||||||
|
<div class="container"></div>
|
||||||
|
<div id="container" class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-sm-12" ng-controller="TicksCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Ticks Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="ticks" class="chart chart-line chart-xl" data="data" options="options" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||||
|
<script src="../bower_components/Chart.js/Chart.min.js"></script>
|
||||||
|
<script src="../angular-chart.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
135
templates/js/libs/angular-chart.js-0.7.2/gulpfile.js
Normal file
135
templates/js/libs/angular-chart.js-0.7.2/gulpfile.js
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var gulp = require('gulp');
|
||||||
|
var less = require('gulp-less');
|
||||||
|
var sourcemaps = require('gulp-sourcemaps');
|
||||||
|
var uglify = require('gulp-uglify');
|
||||||
|
var csso = require('gulp-csso');
|
||||||
|
var jshint = require('gulp-jshint');
|
||||||
|
var stylish = require('jshint-stylish');
|
||||||
|
var jscs = require('gulp-jscs');
|
||||||
|
var mocha = require('gulp-spawn-mocha');
|
||||||
|
var tar = require('gulp-tar');
|
||||||
|
var gzip = require('gulp-gzip');
|
||||||
|
var bumper = require('gulp-bump');
|
||||||
|
var git = require('gulp-git');
|
||||||
|
var shell = require('gulp-shell');
|
||||||
|
var rename = require('gulp-rename');
|
||||||
|
var fs = require('fs');
|
||||||
|
var sequence = require('gulp-sequence');
|
||||||
|
var ngAnnotate = require('gulp-ng-annotate');
|
||||||
|
|
||||||
|
gulp.task('less', function () {
|
||||||
|
return gulp.src('./*.less')
|
||||||
|
.pipe(sourcemaps.init())
|
||||||
|
.pipe(less())
|
||||||
|
.pipe(csso())
|
||||||
|
.pipe(sourcemaps.write('./'))
|
||||||
|
.pipe(gulp.dest('./dist'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('lint', function () {
|
||||||
|
return gulp.src('**/*.js')
|
||||||
|
.pipe(jshint())
|
||||||
|
.pipe(jshint.reporter(stylish));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('style', function () {
|
||||||
|
return gulp.src('**/*.js')
|
||||||
|
.pipe(jscs());
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('unit', shell.task([
|
||||||
|
' ./node_modules/mocha-phantomjs/bin/mocha-phantomjs -R spec test/index.html '
|
||||||
|
]));
|
||||||
|
|
||||||
|
gulp.task('integration', function () {
|
||||||
|
return gulp.src('test/test.integration.js', {read: false})
|
||||||
|
.pipe(mocha({ reporter: 'list', timeout: 10000, require: 'test/support/setup.js' }));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('bump-patch', bump('patch'));
|
||||||
|
gulp.task('bump-minor', bump('minor'));
|
||||||
|
gulp.task('bump-major', bump('major'));
|
||||||
|
|
||||||
|
gulp.task('bower', function () {
|
||||||
|
return gulp.src('./angular-chart.js')
|
||||||
|
.pipe(ngAnnotate({single_quotes: true}))
|
||||||
|
.pipe(gulp.dest('./dist'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('js', ['lint', 'style', 'bower'], function () {
|
||||||
|
return gulp.src('./angular-chart.js')
|
||||||
|
.pipe(rename('angular-chart.min.js'))
|
||||||
|
.pipe(ngAnnotate({single_quotes: true}))
|
||||||
|
.pipe(sourcemaps.init())
|
||||||
|
.pipe(uglify())
|
||||||
|
.pipe(sourcemaps.write('./'))
|
||||||
|
.pipe(gulp.dest('./dist'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('build', function () {
|
||||||
|
return gulp.src(['dist/*', '!./dist/*.tar.gz'])
|
||||||
|
.pipe(tar('angular-chart.js.tar'))
|
||||||
|
.pipe(gzip({ gzipOptions: { level: 9 } }))
|
||||||
|
.pipe(gulp.dest('dist/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('update', function (cb) {
|
||||||
|
fs.readFile('./examples/charts.template.html', 'utf8', function (err, file) {
|
||||||
|
if (err) return cb(err);
|
||||||
|
file = file.replace('<!-- version -->', version());
|
||||||
|
fs.writeFile('./examples/charts.html', file, cb);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('git-commit', function () {
|
||||||
|
var v = version();
|
||||||
|
gulp.src(['./dist/*', './package.json', './bower.json', './examples/charts.html'])
|
||||||
|
.pipe(git.add())
|
||||||
|
.pipe(git.commit(v))
|
||||||
|
;
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('git-push', function (cb) {
|
||||||
|
var v = version();
|
||||||
|
git.push('origin', 'master', function (err) {
|
||||||
|
if (err) return cb(err);
|
||||||
|
git.tag(v, v, function (err) {
|
||||||
|
if (err) return cb(err);
|
||||||
|
git.push('origin', 'master', {args: '--tags' }, cb);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('npm', shell.task([
|
||||||
|
'npm publish'
|
||||||
|
]));
|
||||||
|
|
||||||
|
gulp.task('watch', function () {
|
||||||
|
gulp.watch('./*.js', ['js']);
|
||||||
|
gulp.watch('./*.less', ['less']);
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
function bump (level) {
|
||||||
|
return function () {
|
||||||
|
return gulp.src(['./package.json', './bower.json'])
|
||||||
|
.pipe(bumper({type: level}))
|
||||||
|
.pipe(gulp.dest('./'));
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function version () {
|
||||||
|
return JSON.parse(fs.readFileSync('package.json', 'utf8')).version;
|
||||||
|
}
|
||||||
|
|
||||||
|
gulp.task('default', sequence('check', ['less', 'js'], 'build'));
|
||||||
|
gulp.task('test', sequence('unit', 'integration'));
|
||||||
|
gulp.task('check', sequence(['lint', 'style'], 'test'));
|
||||||
|
gulp.task('deploy-patch', sequence('default', 'bump-patch', 'update', 'git-commit', 'git-push', 'npm'));
|
||||||
|
gulp.task('deploy-minor', sequence('default', 'bump-minor', 'update', 'git-commit', 'git-push', 'npm'));
|
||||||
|
gulp.task('deploy-major', sequence('default', 'bump-patch', 'update', 'git-commit', 'git-push', 'npm'));
|
||||||
|
|
||||||
|
})();
|
||||||
51
templates/js/libs/angular-chart.js-0.7.2/package.json
Normal file
51
templates/js/libs/angular-chart.js-0.7.2/package.json
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "angular-chart.js",
|
||||||
|
"version": "0.7.2",
|
||||||
|
"description": "An angular.js wrapper for Chart.js",
|
||||||
|
"main": "dist/angular-chart.js",
|
||||||
|
"directories": {
|
||||||
|
"example": "examples"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "gulp check"
|
||||||
|
},
|
||||||
|
"author": "Jerome Touffe-Blin <jtblin@gmail.com>",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/jtblin/angular-chart.js.git"
|
||||||
|
},
|
||||||
|
"license": "BSD",
|
||||||
|
"devDependencies": {
|
||||||
|
"chai": "^1.10.0",
|
||||||
|
"chai-string": "^1.1.1",
|
||||||
|
"cp": "^0.2.0",
|
||||||
|
"gm": "^1.17.0",
|
||||||
|
"gulp": "^3.8.6",
|
||||||
|
"gulp-bump": "^0.1.11",
|
||||||
|
"gulp-csso": "^0.2.9",
|
||||||
|
"gulp-git": "^0.5.6",
|
||||||
|
"gulp-gzip": "0.0.8",
|
||||||
|
"gulp-jscs": "^1.4.0",
|
||||||
|
"gulp-jshint": "^1.9.2",
|
||||||
|
"gulp-less": "^1.3.1",
|
||||||
|
"gulp-ng-annotate": "^0.5.2",
|
||||||
|
"gulp-rename": "^1.2.0",
|
||||||
|
"gulp-sequence": "^0.3.1",
|
||||||
|
"gulp-shell": "^0.2.11",
|
||||||
|
"gulp-sourcemaps": "^1.0.0",
|
||||||
|
"gulp-spawn-mocha": "^2.0.1",
|
||||||
|
"gulp-tar": "^0.5.0",
|
||||||
|
"gulp-uglify": "^0.3.1",
|
||||||
|
"imgur-node-api": "^0.1.0",
|
||||||
|
"jshint-stylish": "^1.0.0",
|
||||||
|
"less": "^1.7.3",
|
||||||
|
"mkdirp": "^0.5.0",
|
||||||
|
"mocha": "^2.1.0",
|
||||||
|
"mocha-phantomjs": "^3.5.3",
|
||||||
|
"sinon": "^1.12.2",
|
||||||
|
"sinon-chai": "^2.7.0",
|
||||||
|
"testatic": "^0.1.0",
|
||||||
|
"tmp-sync": "jtblin/node-tmp-sync",
|
||||||
|
"webshot": "^0.15.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
36
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/51-pie-update-colours.html
vendored
Normal file
36
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/51-pie-update-colours.html
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pie update colours</title>
|
||||||
|
<link rel="stylesheet" href="../../dist/angular-chart.css">
|
||||||
|
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="pie" id="top">
|
||||||
|
<div class="container">
|
||||||
|
<section id="charts">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Charts</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Pie Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas class="chart chart-pie" data="data" labels="labels" colours="colours"></canvas>
|
||||||
|
</div>
|
||||||
|
<p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
|
||||||
|
https://github.com/jtblin/angular-chart.js/issues/51
|
||||||
|
</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../../angular-chart.js"></script>
|
||||||
|
<script src="51-pie-update-colours.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/51-pie-update-colours.js
vendored
Normal file
30
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/51-pie-update-colours.js
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var app = angular.module('pie', ['chart.js']);
|
||||||
|
app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.labels = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [65, 59];
|
||||||
|
$scope.colours = [{ // red
|
||||||
|
fillColor: 'rgba(247,70,74,0.2)',
|
||||||
|
strokeColor: 'rgba(247,70,74,1)',
|
||||||
|
pointColor: 'rgba(247,70,74,1)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(247,70,74,0.8)'
|
||||||
|
},
|
||||||
|
{ // green
|
||||||
|
fillColor: 'rgba(70,191,189,0.2)',
|
||||||
|
strokeColor: 'rgba(70,191,189,1)',
|
||||||
|
pointColor: 'rgba(70,191,189,1)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(70,191,189,0.8)'
|
||||||
|
}];
|
||||||
|
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.data = [49, 65];
|
||||||
|
}, 0);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/51-pie-update-colours.png
vendored
Normal file
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/51-pie-update-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
37
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/54-not-enough-colours.html
vendored
Normal file
37
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/54-not-enough-colours.html
vendored
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Not enough colours</title>
|
||||||
|
<link rel="stylesheet" href="../../dist/angular-chart.css">
|
||||||
|
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="pie" id="top">
|
||||||
|
<div class="container">
|
||||||
|
<section id="charts">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Charts</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Pie Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas class="chart chart-pie" data="data" labels="labels"
|
||||||
|
colours="colours" get-colour="getColour"></canvas>
|
||||||
|
</div>
|
||||||
|
<p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
|
||||||
|
https://github.com/jtblin/angular-chart.js/issues/54
|
||||||
|
</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../../angular-chart.js"></script>
|
||||||
|
<script src="54-not-enough-colours.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/54-not-enough-colours.js
vendored
Normal file
32
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/54-not-enough-colours.js
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var app = angular.module('pie', ['chart.js']);
|
||||||
|
app.controller('PieCtrl', ['$scope', function ($scope) {
|
||||||
|
var cnt = 0;
|
||||||
|
$scope.colours = [];
|
||||||
|
$scope.labels = ['Series A', 'Series B'];
|
||||||
|
$scope.getColour = function () {
|
||||||
|
return ++cnt % 2 > 0 ?
|
||||||
|
{ // red
|
||||||
|
fillColor: 'rgba(247,70,74,0.2)',
|
||||||
|
strokeColor: 'rgba(247,70,74,1)',
|
||||||
|
pointColor: 'rgba(247,70,74,1)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(247,70,74,0.8)'
|
||||||
|
}
|
||||||
|
:
|
||||||
|
{ // green
|
||||||
|
fillColor: 'rgba(70,191,189,0.2)',
|
||||||
|
strokeColor: 'rgba(70,191,189,1)',
|
||||||
|
pointColor: 'rgba(70,191,189,1)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(70,191,189,0.8)'
|
||||||
|
};
|
||||||
|
};
|
||||||
|
$scope.data = [49, 65];
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/54-not-enough-colours.png
vendored
Normal file
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/54-not-enough-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
36
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/57-hex-colours.html
vendored
Normal file
36
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/57-hex-colours.html
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Hex colours</title>
|
||||||
|
<link rel="stylesheet" href="../../dist/angular-chart.css">
|
||||||
|
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="pie" id="top">
|
||||||
|
<div class="container">
|
||||||
|
<section id="charts">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Charts</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Pie Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas class="chart chart-pie" data="data" labels="labels" colours="colours"></canvas>
|
||||||
|
</div>
|
||||||
|
<p align="center"><a href="https://github.com/jtblin/angular-chart.js/issues/51">
|
||||||
|
https://github.com/jtblin/angular-chart.js/issues/57
|
||||||
|
</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../../angular-chart.js"></script>
|
||||||
|
<script src="57-hex-colours.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/57-hex-colours.js
vendored
Normal file
11
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/57-hex-colours.js
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var app = angular.module('pie', ['chart.js']);
|
||||||
|
app.controller('PieCtrl', ['$scope', function ($scope) {
|
||||||
|
$scope.labels = ['Series A', 'Series B'];
|
||||||
|
$scope.colours = ['#9AFEFF', '#D1D0CE'];
|
||||||
|
$scope.data = [49, 65];
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/57-hex-colours.png
vendored
Normal file
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/57-hex-colours.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
78
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/charts.html
vendored
Normal file
78
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/charts.html
vendored
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Charts</title>
|
||||||
|
<link rel="stylesheet" href="../../dist/angular-chart.css">
|
||||||
|
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="charts" id="top">
|
||||||
|
<div class="container">
|
||||||
|
<section id="charts">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Charts</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-sm-12" id="line-chart" ng-controller="LineCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Line Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="line" class="chart chart-line" data="data" labels="labels" series="series"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Bar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="bar" class="chart chart-bar" data="data" labels="labels"
|
||||||
|
series="series" options="options"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Doughnut Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="doughnut" class="chart chart-doughnut" data="data" labels="labels" legend="false"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Radar Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="area" class="chart chart-radar" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Pie Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="pie" class="chart chart-pie" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-4 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Polar Area Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas id="polar" class="chart chart-polar-area" data="data" labels="labels"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../../angular-chart.js"></script>
|
||||||
|
<script src="charts.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
61
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/charts.js
vendored
Normal file
61
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/charts.js
vendored
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var app = angular.module('charts', ['chart.js']);
|
||||||
|
|
||||||
|
app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
$scope.data = [
|
||||||
|
[28, 48, 40, 19, 86, 27, 90],
|
||||||
|
[65, 59, 80, 81, 56, 55, 40]
|
||||||
|
];
|
||||||
|
$scope.series = ['Series C', 'Series D'];
|
||||||
|
}, 0);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
app.controller('BarCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.options = { scaleShowVerticalLines: false };
|
||||||
|
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||||
|
$scope.series = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.options = { scaleShowVerticalLines: true };
|
||||||
|
}, 0);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
app.controller('DoughnutCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
|
||||||
|
$scope.data = [350, 450, 100];
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||||
|
$scope.data = [0, 0, 0];
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.data = [350, 450, 100];
|
||||||
|
}, 0);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
app.controller('PolarAreaCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
|
||||||
|
$scope.data = [300, 500, 100, 40, 120];
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('RadarCtrl', function ($scope) {
|
||||||
|
$scope.labels = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||||
|
$scope.data = [
|
||||||
|
[65, 59, 90, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 96, 27, 100]
|
||||||
|
];
|
||||||
|
});
|
||||||
|
})();
|
||||||
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/charts.png
vendored
Normal file
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/charts.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
33
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/configure-line-chart.html
vendored
Normal file
33
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/configure-line-chart.html
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pie update colours</title>
|
||||||
|
<link rel="stylesheet" href="../../dist/angular-chart.css">
|
||||||
|
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="line" id="top">
|
||||||
|
<div class="container">
|
||||||
|
<section id="charts">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Charts</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-sm-12" ng-controller="LineCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Line Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas class="chart chart-line" options="options" data="data" labels="labels" colours="colours"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../../angular-chart.js"></script>
|
||||||
|
<script src="configure-line-chart.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/configure-line-chart.js
vendored
Normal file
32
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/configure-line-chart.js
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var app = angular.module('line', ['chart.js']);
|
||||||
|
|
||||||
|
app.config(function (ChartJsProvider) {
|
||||||
|
// Configure all charts
|
||||||
|
ChartJsProvider.setOptions({
|
||||||
|
colours: ['#FF5252', '#FF8A80'],
|
||||||
|
responsive: false
|
||||||
|
});
|
||||||
|
// Configure all line charts
|
||||||
|
ChartJsProvider.setOptions('Line', {
|
||||||
|
datasetFill: false
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.labels = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [[15, 23], [59, 80]];
|
||||||
|
|
||||||
|
// Configure only this instance
|
||||||
|
$scope.options = {
|
||||||
|
scaleLineWidth: 5
|
||||||
|
};
|
||||||
|
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.data = [[15, 23], [59, 80]];
|
||||||
|
}, 0);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/configure-line-chart.png
vendored
Normal file
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/configure-line-chart.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
33
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/custom-directive.html
vendored
Normal file
33
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/custom-directive.html
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Pie update colours</title>
|
||||||
|
<link rel="stylesheet" href="../../dist/angular-chart.css">
|
||||||
|
<link href="../../examples/bootstrap.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body ng-app="pie" id="top">
|
||||||
|
<div class="container">
|
||||||
|
<section id="charts">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Charts</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-sm-12" ng-controller="PieCtrl">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">Pie Chart</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<canvas class="chart my-special-pie" data="data" labels="labels" colours="colours"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../../angular-chart.js"></script>
|
||||||
|
<script src="custom-directive.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
17
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/custom-directive.js
vendored
Normal file
17
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/custom-directive.js
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var app = angular.module('pie', ['chart.js']);
|
||||||
|
|
||||||
|
app.directive('mySpecialPie', function (ChartJsFactory) { return new ChartJsFactory('Pie'); });
|
||||||
|
|
||||||
|
app.controller('PieCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
|
||||||
|
$scope.labels = ['Series A', 'Series B'];
|
||||||
|
$scope.data = [5, 59];
|
||||||
|
|
||||||
|
$timeout(function () {
|
||||||
|
$scope.data = [5, 65];
|
||||||
|
}, 0);
|
||||||
|
}]);
|
||||||
|
|
||||||
|
})();
|
||||||
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/custom-directive.png
vendored
Normal file
BIN
templates/js/libs/angular-chart.js-0.7.2/test/fixtures/custom-directive.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
30
templates/js/libs/angular-chart.js-0.7.2/test/index.html
Normal file
30
templates/js/libs/angular-chart.js-0.7.2/test/index.html
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Mocha Tests</title>
|
||||||
|
<link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
|
||||||
|
</head>
|
||||||
|
<body ng-app="chart.js">
|
||||||
|
<div id="mocha"></div>
|
||||||
|
<script src="../bower_components/angular/angular.min.js"></script>
|
||||||
|
<script src="../bower_components/Chart.js/Chart.js"></script>
|
||||||
|
<script src="../angular-chart.js"></script>
|
||||||
|
<script src="../node_modules/mocha/mocha.js"></script>
|
||||||
|
<script src="../node_modules/chai/chai.js"></script>
|
||||||
|
<script src="../node_modules/chai-string/chai-string.js"></script>
|
||||||
|
<script src="../node_modules/sinon/pkg/sinon.js"></script>
|
||||||
|
<script src="../node_modules/sinon-chai/lib/sinon-chai.js"></script>
|
||||||
|
<script>mocha.setup('bdd')</script>
|
||||||
|
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
|
||||||
|
<script src="../test/test.unit.js"></script>
|
||||||
|
<script>
|
||||||
|
var expect = chai.expect;
|
||||||
|
mocha.checkLeaks();
|
||||||
|
mocha.globals(['angular', 'Chart', 'angular', 'chai', 'expect', 'sinon', 'sinonChai']);
|
||||||
|
if (window.mochaPhantomJS)
|
||||||
|
mochaPhantomJS.run();
|
||||||
|
else
|
||||||
|
mocha.run();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
templates/js/libs/angular-chart.js-0.7.2/test/mocha.opts
Normal file
4
templates/js/libs/angular-chart.js-0.7.2/test/mocha.opts
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
--slow 20
|
||||||
|
--growl
|
||||||
|
--reporter spec
|
||||||
|
--require test/support/setup
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/*jshint node:true*/
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var chai = require('chai');
|
||||||
|
global.chai = chai;
|
||||||
|
global.should = chai.should();
|
||||||
|
global.expect = chai.expect;
|
||||||
|
global.assert = chai.assert;
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
/*jshint node:true*/
|
||||||
|
/*jshint mocha:true*/
|
||||||
|
/*global assert:true*/
|
||||||
|
describe('integration', function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var webshot = require('webshot'),
|
||||||
|
gm = require('gm'),
|
||||||
|
tmp = require('tmp-sync'),
|
||||||
|
mkdirp = require('mkdirp').sync,
|
||||||
|
cp = require('cp').sync,
|
||||||
|
imgur = require('imgur-node-api'),
|
||||||
|
server = require('testatic')(),
|
||||||
|
WEBSHOT_OPTIONS = { renderDelay: process.env.DELAY || 2500, windowSize: { width: 1366, height: 768 }},
|
||||||
|
WEBSHOT_FAILED_DIR = 'test/fixtures/shots/',
|
||||||
|
dir;
|
||||||
|
|
||||||
|
beforeEach(function () {
|
||||||
|
dir = tmp.in() + '/';
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(function () {
|
||||||
|
tmp.clean();
|
||||||
|
});
|
||||||
|
|
||||||
|
after(function () {
|
||||||
|
server.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
mkdirp(WEBSHOT_FAILED_DIR);
|
||||||
|
|
||||||
|
[
|
||||||
|
'57-hex-colours',
|
||||||
|
'54-not-enough-colours',
|
||||||
|
'51-pie-update-colours',
|
||||||
|
'configure-line-chart',
|
||||||
|
'custom-directive',
|
||||||
|
'charts'
|
||||||
|
].forEach(function (name) {
|
||||||
|
it('compares screenshots for: ' + name, function (done) {
|
||||||
|
var image = dir + name + '.png',
|
||||||
|
url = 'http://localhost:8080/test/fixtures/' + name + '.html',
|
||||||
|
expected = 'test/fixtures/' + name + '.png';
|
||||||
|
|
||||||
|
webshot(url, image, WEBSHOT_OPTIONS, function (err) {
|
||||||
|
if (err) return done(err);
|
||||||
|
gm.compare(expected, image, process.env.TOLERANCE || 0.0001, function (err, isEqual) {
|
||||||
|
if (err) return done(err);
|
||||||
|
if (! isEqual) {
|
||||||
|
var failed = WEBSHOT_FAILED_DIR + name + '-failed.png',
|
||||||
|
msg = 'Expected screenshots to be similar. Screenshot saved to ' + failed;
|
||||||
|
cp(image, failed);
|
||||||
|
if (process.env.CI && process.env.IMGUR_ID) {
|
||||||
|
imgur.setClientID(process.env.IMGUR_ID);
|
||||||
|
imgur.upload(image, function (err, res) {
|
||||||
|
if (err) return done(err);
|
||||||
|
assert.fail(isEqual, true, msg + ', uploaded to ' + res.data.link);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
assert.fail(isEqual, true, msg);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
372
templates/js/libs/angular-chart.js-0.7.2/test/test.unit.js
Normal file
372
templates/js/libs/angular-chart.js-0.7.2/test/test.unit.js
Normal file
|
|
@ -0,0 +1,372 @@
|
||||||
|
/*jshint mocha:true*/
|
||||||
|
/*global module:true*/
|
||||||
|
/*global inject:true*/
|
||||||
|
/*global expect:true*/
|
||||||
|
/*global sinon:true*/
|
||||||
|
describe('Unit testing', function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var $compile, scope, sandbox, ChartJs, ChartJsProvider;
|
||||||
|
|
||||||
|
beforeEach(module('chart.js', function (_ChartJsProvider_) {
|
||||||
|
ChartJsProvider = _ChartJsProvider_;
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(inject(function (_$compile_, _$rootScope_, _ChartJs_) {
|
||||||
|
// The injector unwraps the underscores (_) from around the parameter names when matching
|
||||||
|
$compile = _$compile_;
|
||||||
|
scope = _$rootScope_;
|
||||||
|
ChartJs = _ChartJs_;
|
||||||
|
sandbox = sinon.sandbox.create();
|
||||||
|
}));
|
||||||
|
|
||||||
|
afterEach(function () {
|
||||||
|
sandbox.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('base', function () {
|
||||||
|
it('replaces the element with the appropriate content', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels"></canvas></div>';
|
||||||
|
|
||||||
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
|
||||||
|
var element = $compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
expect(element.html()).to.startWith('<div class="chart-container"><canvas ');
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('chart types', function () {
|
||||||
|
['Line', 'Bar', 'Radar', 'Pie', 'Doughnut', 'PolarArea'].forEach(function (type) {
|
||||||
|
it('creates a ' + type + ' chart using the directive', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px"><canvas class="chart chart-' +
|
||||||
|
(type === 'PolarArea' ? 'polar-area' : type.toLowerCase()) +
|
||||||
|
'" data="data" labels="labels"></canvas></div>';
|
||||||
|
|
||||||
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
|
||||||
|
if (['Line', 'Bar', 'Radar'].indexOf(type) > - 1)
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
else
|
||||||
|
scope.data = [300, 500, 100];
|
||||||
|
|
||||||
|
var mock = sandbox.mock(Chart.prototype);
|
||||||
|
mock.expects(type);
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
mock.verify();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates a ' + type + ' chart using the "chart-type" attribute"', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-base" data="data" labels="labels" chart-type="type"></canvas></div>';
|
||||||
|
|
||||||
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
scope.type = type;
|
||||||
|
|
||||||
|
if (['Line', 'Bar', 'Radar'].indexOf(type) > - 1)
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
else
|
||||||
|
scope.data = [300, 500, 100];
|
||||||
|
|
||||||
|
var mock = sandbox.mock(Chart.prototype);
|
||||||
|
mock.expects(type);
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
mock.verify();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('generates the legend', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels" legend="true"></canvas></div>';
|
||||||
|
|
||||||
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
|
||||||
|
var element = $compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
expect(element.html()).to.have.string('<chart-legend>');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('lifecycle', function () {
|
||||||
|
it('watches the attributes of the chart', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels" chart-type="type"></canvas></div>';
|
||||||
|
|
||||||
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
|
||||||
|
var mock = sandbox.mock(scope);
|
||||||
|
// cannot get a hold of the child scope as it isn't created yet
|
||||||
|
// so cannot be more precise on expectations
|
||||||
|
mock.expects('$watch').atLeast(6);
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
|
||||||
|
mock.verify();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates the chart only once', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series"></canvas></div>';
|
||||||
|
var count = 0;
|
||||||
|
|
||||||
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
scope.series = ['Series A', 'Series B'];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
scope.$on('create', function () {
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
expect(count).to.equal(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('updates the chart', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series"></canvas></div>';
|
||||||
|
var count = 0;
|
||||||
|
|
||||||
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
scope.series = ['Series A', 'Series B'];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
|
||||||
|
scope.$on('update', function () {
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
scope.data = [
|
||||||
|
[28, 48, 40, 19, 86, 27, 90],
|
||||||
|
[65, 59, 80, 81, 56, 55, 40]
|
||||||
|
];
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
expect(count).to.equal(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('re-create the chart if data added or removed', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series"></canvas></div>';
|
||||||
|
var countCreate = 0, countUpdate = 0;
|
||||||
|
|
||||||
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
|
||||||
|
scope.$on('create', function () {
|
||||||
|
countCreate++;
|
||||||
|
});
|
||||||
|
|
||||||
|
scope.$on('update', function () {
|
||||||
|
countUpdate++;
|
||||||
|
});
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
scope.data = [
|
||||||
|
[28, 48, 40, 19, 86, 27, 90],
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[65, 59, 80, 81, 56, 55, 40]
|
||||||
|
];
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
expect(countCreate).to.equal(2);
|
||||||
|
expect(countUpdate).to.equal(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow to set a configuration', function () {
|
||||||
|
ChartJsProvider.setOptions({responsive: false});
|
||||||
|
expect(ChartJs.getOptions().responsive).to.equal(false);
|
||||||
|
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
|
||||||
|
ChartJsProvider.setOptions({responsive: true});
|
||||||
|
expect(ChartJs.getOptions().responsive).to.equal(true);
|
||||||
|
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should allow to set a configuration for a chart type', function () {
|
||||||
|
ChartJsProvider.setOptions('Line', {responsive: false});
|
||||||
|
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
|
||||||
|
ChartJsProvider.setOptions('Line', {responsive: true});
|
||||||
|
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
['labels', 'colours', 'series', 'options'].forEach(function (attr) {
|
||||||
|
it('re-creates the chart on ' + attr + ' changes', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series" ' +
|
||||||
|
'colours="colours" options="options"></canvas></div>';
|
||||||
|
var count = 0;
|
||||||
|
|
||||||
|
scope.options = { scaleShowVerticalLines: false };
|
||||||
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
scope.series = ['Series A', 'Series B'];
|
||||||
|
scope.colours = [{
|
||||||
|
fillColor: 'rgba(127,253,31,0.2)',
|
||||||
|
pointColor: 'rgba(127,253,31,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(127,253,31,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(127,253,31,1)'
|
||||||
|
}, {
|
||||||
|
fillColor: 'rgba(104,240,0,0.2)',
|
||||||
|
pointColor: 'rgba(104,240,0,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(104,240,0,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(104,240,0,1)'
|
||||||
|
}];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
scope.$on('create', function () {
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
switch (attr) {
|
||||||
|
case 'labels':
|
||||||
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||||
|
break;
|
||||||
|
case 'colours':
|
||||||
|
scope.colours = [{
|
||||||
|
fillColor: 'rgba(253,31,94,0.2)',
|
||||||
|
pointColor: 'rgba(253,31,94,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(253,31,94,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(253,31,94,1)'
|
||||||
|
}, {
|
||||||
|
fillColor: 'rgba(30,249,161,0.2)',
|
||||||
|
pointColor: 'rgba(30,249,161,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(30,249,161,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(30,249,161,1)'
|
||||||
|
}];
|
||||||
|
break;
|
||||||
|
case 'series':
|
||||||
|
scope.series = ['Series C', 'Series D'];
|
||||||
|
break;
|
||||||
|
case 'options':
|
||||||
|
scope.options = { scaleShowVerticalLines: true };
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
expect(count).to.equal(2);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
['labels', 'colours', 'series', 'options'].forEach(function (attr) {
|
||||||
|
it('does not re-create the chart on ' + attr + ' not changed', function () {
|
||||||
|
var markup = '<div style="width: 250px; height:120px">' +
|
||||||
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series" ' +
|
||||||
|
'colours="colours" options="options"></canvas></div>';
|
||||||
|
var count = 0;
|
||||||
|
|
||||||
|
scope.options = { scaleShowVerticalLines: false };
|
||||||
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
scope.series = ['Series A', 'Series B'];
|
||||||
|
scope.colours = [{
|
||||||
|
fillColor: 'rgba(127,253,31,0.2)',
|
||||||
|
pointColor: 'rgba(127,253,31,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(127,253,31,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(127,253,31,1)'
|
||||||
|
}, {
|
||||||
|
fillColor: 'rgba(104,240,0,0.2)',
|
||||||
|
pointColor: 'rgba(104,240,0,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(104,240,0,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(104,240,0,1)'
|
||||||
|
}];
|
||||||
|
scope.data = [
|
||||||
|
[65, 59, 80, 81, 56, 55, 40],
|
||||||
|
[28, 48, 40, 19, 86, 27, 90]
|
||||||
|
];
|
||||||
|
scope.$on('create', function () {
|
||||||
|
count++;
|
||||||
|
});
|
||||||
|
|
||||||
|
$compile(markup)(scope);
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
switch (attr) {
|
||||||
|
case 'labels':
|
||||||
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||||
|
break;
|
||||||
|
case 'colours':
|
||||||
|
scope.colours = [{
|
||||||
|
fillColor: 'rgba(127,253,31,0.2)',
|
||||||
|
pointColor: 'rgba(127,253,31,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(127,253,31,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(127,253,31,1)'
|
||||||
|
}, {
|
||||||
|
fillColor: 'rgba(104,240,0,0.2)',
|
||||||
|
pointColor: 'rgba(104,240,0,1)',
|
||||||
|
pointHighlightFill: '#fff',
|
||||||
|
pointHighlightStroke: 'rgba(104,240,0,0.8)',
|
||||||
|
pointStrokeColor: '#fff',
|
||||||
|
strokeColor: 'rgba(104,240,0,1)'
|
||||||
|
}];
|
||||||
|
break;
|
||||||
|
case 'series':
|
||||||
|
scope.series = ['Series A', 'Series B'];
|
||||||
|
break;
|
||||||
|
case 'options':
|
||||||
|
scope.options = { scaleShowVerticalLines: false };
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
scope.$digest();
|
||||||
|
|
||||||
|
expect(count).to.equal(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
48
templates/views/newTask.html
Normal file
48
templates/views/newTask.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<div layout-padding>
|
||||||
|
<div layout="row">
|
||||||
|
<div flex="20" layout-padding>
|
||||||
|
<h2>
|
||||||
|
<i class="fa fa-info-circle"></i> Task Info:
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div layout="column" flex="30" layout-padding>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>
|
||||||
|
<i class="fa fa-cubes"></i> Add A component:
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Select Type:
|
||||||
|
<md-select placeholder="Component Type" ng-model="newComp.type">
|
||||||
|
<md-option ng-repeat="component in componentTypes" value="{{component.type}}">{{component.type}}</md-option>
|
||||||
|
</md-select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<md-input-container>
|
||||||
|
<label>Label</label>
|
||||||
|
<input ng-model="newComp.label" required>
|
||||||
|
</md-input-container>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<md-switch ng-model="newComp.isMandatory" aria-label="Switch 1">
|
||||||
|
Mandatory?: {{ newComp.isMandatory}}
|
||||||
|
</md-switch>
|
||||||
|
</div>
|
||||||
|
<div layout="row">
|
||||||
|
<div flex="70"></div>
|
||||||
|
<md-button class="md-primary" ng-click="addComponent()">Add Component</md-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div flex="50" layout-padding>
|
||||||
|
<!-- <md-card style="background-image: url('http://www.stationeryhq.com/content/images/thumbs/0000324_clipboard_500.png')">
|
||||||
|
|
||||||
|
</md-card> -->
|
||||||
|
<h2>
|
||||||
|
<i class="fa fa-eye"></i> Task Preview:
|
||||||
|
</h2>
|
||||||
|
<p>{{task.toString()}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
Loading…
Reference in a new issue