28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2014 Rasmus Schlünsen, https://github.com/organizations/angular-ui/teams/291112
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/angular-gauge.js:
--------------------------------------------------------------------------------
1 | /*global window:false, angular:false, Gauge:false*/
2 | /**
3 | * angular-gaugejs version 0.1
4 | * License: MIT.
5 | * Copyright (C) 2014, Rasmus Schlünsen
6 | */
7 |
8 | (function(angular) {
9 | 'use strict';
10 |
11 | angular.module('gaugejs', [])
12 | .directive('gaugejs', [function() {
13 | return {
14 | restrict: 'AC',
15 | scope: {
16 | 'animationTime': '=',
17 | 'value': '=',
18 | 'options': '=',
19 | 'maxValue': '=',
20 | 'gaugeType': '='
21 | },
22 | controller: function($scope, $element) {
23 | if ($scope.gaugeType === 'donut') {
24 | $scope.gauge = new Donut($element[0]);
25 | } else {
26 | $scope.gauge = new Gauge($element[0]);
27 | }
28 | $scope.gauge.maxValue = $scope.maxValue;
29 | $scope.$watchCollection('[options, value]', function(newValues){
30 | $scope.gauge.setOptions(newValues[0]);
31 | if (!isNaN(newValues[1])){
32 | $scope.gauge.set(newValues[1]);
33 | }
34 | });
35 | },
36 | };
37 | }]);
38 |
39 | })(window.angular);
40 |
--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
1 | var app = angular.module('gauge', ['gaugejs']);
2 |
3 | app.controller('test', ['$scope', '$timeout', function($scope, $timeout) {
4 | $scope.animationTime = 10;
5 | $scope.value = 3000;
6 | $scope.maxValue = 3000;
7 | $scope.gaugeType = 'donut';
8 |
9 | $scope.gaugeOptions = {
10 | lines: 12,
11 | // The number of lines to draw
12 | angle: 0.15,
13 | // The length of each line
14 | lineWidth: 0.44,
15 | // The line thickness
16 | pointer: {
17 | length: 0.9,
18 | // The radius of the inner circle
19 | strokeWidth: 0.035,
20 | // The rotation offset
21 | color: '#000000' // Fill color
22 | },
23 | limitMax: 'false',
24 | // If true, the pointer will not go past the end of the gauge
25 | colorStart: '#6FADCF',
26 | // Colors
27 | colorStop: '#8FC0DA',
28 | // just experiment with them
29 | strokeColor: '#E0E0E0',
30 | // to see which ones work best for you
31 | generateGradient: true
32 | };
33 |
34 | $scope.donutGaugeOptions = {
35 | lines: 12,
36 | // The number of lines to draw
37 | angle: 0.15,
38 | // The length of each line
39 | lineWidth: 0.044,
40 | // The line thickness
41 | pointer: {
42 | length: 0.09,
43 | // The radius of the inner circle
44 | strokeWidth: 0.0035,
45 | // The rotation offset
46 | color: '#000000' // Fill color
47 | },
48 | limitMax: 'false',
49 | // If true, the pointer will not go past the end of the gauge
50 | colorStart: '#6FADCF',
51 | // Colors
52 | colorStop: '#8FC0DA',
53 | // just experiment with them
54 | strokeColor: '#E0E0E0',
55 | // to see which ones work best for you
56 | generateGradient: true
57 | };
58 |
59 |
60 | }]);
61 |
62 |
--------------------------------------------------------------------------------