From 5fd87136b2ad8a624903dc6849bf84ed337a3dc5 Mon Sep 17 00:00:00 2001
From: Azi Crawford <azi.crawford@gonitro.com>
Date: Thu, 4 Oct 2018 14:21:22 +0100
Subject: [PATCH 1/3] enables going from lower arbitrary percent to higher one

---
 html_javascript/circular-progress.js |  7 +++++--
 html_javascript/index.html           | 12 ++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/html_javascript/circular-progress.js b/html_javascript/circular-progress.js
index eaaae93..6c89f86 100644
--- a/html_javascript/circular-progress.js
+++ b/html_javascript/circular-progress.js
@@ -3,12 +3,15 @@
  * @Desc: Shows progress bar.
  * @Params: _upto -> upto that percentage.
  */
-function __showProgress(_upto, _cir_progress_id) {
+function __showProgress(_from, _upto, _cir_progress_id) {
 
     //Filter Percentage
     _upto = (_upto > 100) ? 100 : ((_upto < 0) ? 0 : _upto);
 
-    var _progress = 0;
+    //Filter Percentage
+    _from = (_from > 100) ? 100 : ((_from < 0) ? 0 : _from);
+
+    var _progress = _from;
 
     var _cir_progress = document.getElementById(_cir_progress_id).getElementsByClassName("_cir_P_y")[0];
     var _text_percentage = document.getElementById(_cir_progress_id).getElementsByClassName("_cir_Per")[0];
diff --git a/html_javascript/index.html b/html_javascript/index.html
index 6d13a41..69514ba 100644
--- a/html_javascript/index.html
+++ b/html_javascript/index.html
@@ -14,12 +14,20 @@
             <circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
             <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
         </svg>
-        <button onclick="__showProgress(60,'_cir_progress_1')">Show 60%</button>
+        <button onclick="__showProgress(0,60,'_cir_progress_1')">Show 60%</button>
         <svg height="200" width="200" id="_cir_progress_2">
             <circle class="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
             <circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
             <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
         </svg>
-        <button onclick="__showProgress(30, '_cir_progress_2')">Show 30%</button>
+        <button onclick="__showProgress(0,30, '_cir_progress_2')">Show 30%</button>
+        <svg height="200" width="200" id="_cir_progress_3">
+            <circle class="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
+            <circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025"
+            stroke-width="20"  stroke-dasharray="114.6,1000" fill="none"></circle>
+            <text x="50%" y="50%" text-anchor="middle" stroke="none"
+            stroke-width="1px" dy=".3em" class="_cir_Per">30%</text>
+        </svg>
+        <button onclick="__showProgress(30,60, '_cir_progress_3')">Show 30%</button>
     </body>
 </html>

From 8bd37506fd1bb6a44a928d1eade64c2edeb2611b Mon Sep 17 00:00:00 2001
From: Azi Crawford <azi.crawford@gonitro.com>
Date: Thu, 4 Oct 2018 14:24:24 +0100
Subject: [PATCH 2/3] make button clearer

---
 html_javascript/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/html_javascript/index.html b/html_javascript/index.html
index 69514ba..d7dc965 100644
--- a/html_javascript/index.html
+++ b/html_javascript/index.html
@@ -28,6 +28,6 @@
             <text x="50%" y="50%" text-anchor="middle" stroke="none"
             stroke-width="1px" dy=".3em" class="_cir_Per">30%</text>
         </svg>
-        <button onclick="__showProgress(30,60, '_cir_progress_3')">Show 30%</button>
+        <button onclick="__showProgress(30,60, '_cir_progress_3')">Show 30% &rArr; 60%</button>
     </body>
 </html>

From 36a9b91b46b7ecb3a2c16e90206a214bac102fec Mon Sep 17 00:00:00 2001
From: Azi Crawford <azi.crawford@gonitro.com>
Date: Thu, 4 Oct 2018 15:25:19 +0100
Subject: [PATCH 3/3] initializes progress meters based on initial values

---
 html_javascript/circular-progress.js | 20 ++++++++++++++++++++
 html_javascript/index.html           |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/html_javascript/circular-progress.js b/html_javascript/circular-progress.js
index 6c89f86..6e6b926 100644
--- a/html_javascript/circular-progress.js
+++ b/html_javascript/circular-progress.js
@@ -3,6 +3,9 @@
  * @Desc: Shows progress bar.
  * @Params: _upto -> upto that percentage.
  */
+
+window.onload = init;
+
 function __showProgress(_from, _upto, _cir_progress_id) {
 
     //Filter Percentage
@@ -38,5 +41,22 @@ function __showProgress(_from, _upto, _cir_progress_id) {
             _cir_progress.style.strokeDasharray = _percentage + ', 1000';
         }
     }
+
+}
+
+function _initializeCircle(elem){
+  console.log("setting level to given percentage...");
+      var _cir_progress = elem.getElementsByClassName("_cir_P_y")[0];
+      var _text_percentage = elem.getElementsByClassName("_cir_Per")[0].innerHTML.slice(0,-1);
+      var _percentage = (parseInt(_text_percentage) / 100 ) * 382;
+      _cir_progress.style.strokeDasharray = _percentage + ', 1000';
+}
+
+function init(){
+  var progressMeters = document.getElementsByTagName("svg");
+  for(var i = 0; i < progressMeters.length; i++){
+    _initializeCircle(progressMeters[i]);
+
+  }
 }
 
diff --git a/html_javascript/index.html b/html_javascript/index.html
index d7dc965..7582e6a 100644
--- a/html_javascript/index.html
+++ b/html_javascript/index.html
@@ -24,7 +24,7 @@
         <svg height="200" width="200" id="_cir_progress_3">
             <circle class="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
             <circle class="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025"
-            stroke-width="20"  stroke-dasharray="114.6,1000" fill="none"></circle>
+            stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
             <text x="50%" y="50%" text-anchor="middle" stroke="none"
             stroke-width="1px" dy=".3em" class="_cir_Per">30%</text>
         </svg>