Label added to show the text below the Arc

README.md

@@ -14,17 +14,12 @@ Features
 - Utilises SVG for rendering.
 - Adjustable dimensions, color and thickness.
 - No additional dependencies outside of AngularJS.
+- Now add text that will be displaying below the progress arc
 
 Installation
 ============
 
-This module can be installed using bower:
-
-```shell
-bower install angular-progress-arc --save
-```
-
-Otherwise, simply add the `angular-progress-arc.min.js` file to your project.
+Simply download add the `angular-progress-arc.min.js` file to your project.
 
 Usage
 =====
@@ -44,7 +39,10 @@ Add a `progress-arc` element to your application as required.
     stroke-width="{integer}"
     complete="{expression}"
     counter-clockwise="{string}"
-    background="{string}">
+    background="{string}"
+	textval="{string}"
+	>
+
 </progress-arc>
 ```
 
@@ -57,7 +55,7 @@ Attributes
 - `complete` is an expression that should evaluate to a float value between 0.0 and 1.0; where 0.0 is an empty progress arc, and 1.0 is a full ring.
 - `counter-clockwise` is a boolean value that will render the progress arc in a counter-clockwise direction. Any value Javascript would recognise as true will be treated as such, with the exception of the literal string __false__ which will be treated as a boolean `false`.
 - `background` defines the color of the ring background. If not defined, no background is rendered.
-
+- `textval` defines the text that needs to be displayed below the progress arc
 Styling
 =======
 

angular-progress-arc.js

@@ -10,7 +10,8 @@
             size: 200,
             strokeWidth: 20,
             stroke: 'black',
-            background: null
+            background: null,
+			textval: null
         };
 
         this.setDefault = function (name, value) {
@@ -20,9 +21,11 @@
 
         this.$get = function () {
             return function (attr) {
-                angular.forEach(defaults, function (value, key) {
+			        angular.forEach(defaults, function (value, key) {
+
                     if (!attr[key]) {
                         attr[key] = value;
+
                     }
                 });
             };
@@ -38,7 +41,9 @@
                 stroke:           '@', // Color/appearance of stroke.
                 counterClockwise: '@', // Boolean value indicating
                 complete:         '&', // Expression evaluating to float [0.0, 1.0]
-                background:       '@'  // Color of the background ring. Defaults to null.
+                background:       '@',  // Color of the background ring. Defaults to null.
+				textval:			'@' //text to be displayed below the arc
+
             },
             compile: function (element, attr) {
 
@@ -55,10 +60,12 @@
                     };
                     scope.$watchCollection('[size, strokeWidth]', updateRadius);
                     updateRadius();
+
                 };
             },
             template:
-                '<svg ng-attr-width="{{size}}" ng-attr-height="{{size}}">' +
+			'<div>'+
+                '<svg ng-attr-width="{{size}}" ng-attr-height="{{size}}" style="display:block;margin-left:auto;margin-right:auto">' +
                     '<circle class="ngpa-background" fill="none" ' +
                         'ng-if="background" ' +
                         'ng-attr-cx="{{size/2}}" ' +
@@ -78,8 +85,10 @@
                         'ng-attr-transform="rotate({{offset}}, {{size/2}}, {{size/2}})' +
                             '{{ (counterClockwise && counterClockwise != \'false\') ? \' translate(0, \' + size + \') scale(1, -1)\' : \'\' }}"' +
                         '/>' +
-                '</svg>'
+                '</svg>'+'</div>'
+				+
+				'<div ng-if="textval" style="text-align:center"><label>{{textval}}</label></div>'
         };
     }]);
 
-})(window.angular);
+})(window.angular);