From 932c8a67c5c45a4459fe6ce3629d72a07f216966 Mon Sep 17 00:00:00 2001
From: Yeon Juan <yeonjuan93@naver.com>
Date: Fri, 23 Nov 2018 20:07:04 +0900
Subject: [PATCH] feat: Add viewBox

---
 HalfCircleGauge/docs/exsvg.svg     |  2 +-
 HalfCircleGauge/halfCircleGauge.js | 23 ++++++++++++-----------
 HalfCircleGauge/index.html         | 22 +++++++++++-----------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/HalfCircleGauge/docs/exsvg.svg b/HalfCircleGauge/docs/exsvg.svg
index e1fed9b..ea1d59a 100644
--- a/HalfCircleGauge/docs/exsvg.svg
+++ b/HalfCircleGauge/docs/exsvg.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="163" height="81.5"><rect fill="#ffffff" width="100%" height="100%"></rect><path fill="transparent" stroke="#afdcc9" stroke-width="25" d="M 12.5 81.5 A 69 69 0 0 1 150.5 81.49999999999999"></path><path fill="transparent" stroke="#5ca284" stroke-width="12" d="M 12.5 81.5 A 69 69 0 0 1 40.94281759181935 25.677827388128634"></path><text fill="#07472C" x="81.5" y="81.5" text-anchor="middle" font-size="20">30%</text></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><path fill="transparent" stroke="#eaeaea" stroke-width="2" d="M 25 50 A 25 25 0 0 1 75 50"></path><path fill="transparent" stroke="#fee870" stroke-width="5" d="M 25 50 A 25 25 0 0 1 64.69463130731182 29.774575140626315"></path><text fill="#878787" x="50" y="50" text-anchor="middle" font-size="12">70%</text></svg>
\ No newline at end of file
diff --git a/HalfCircleGauge/halfCircleGauge.js b/HalfCircleGauge/halfCircleGauge.js
index cb30018..554705d 100644
--- a/HalfCircleGauge/halfCircleGauge.js
+++ b/HalfCircleGauge/halfCircleGauge.js
@@ -109,11 +109,11 @@ var HalfCircleGauge = (function (global)
             o = this.opts;
         
         // Create SVG
-        this.svg = createSVGElem('svg', {'xmlns': 'http://www.w3.org/2000/svg', 'width': sw, 'height': sh});
+        this.svg = createSVGElem('svg', {'xmlns': 'http://www.w3.org/2000/svg', 'viewBox' : '0 0 100 50' });
 
         // Create bg
-        this.bg = createSVGElem('rect', {'fill': o.bgColor, 'width': '100%', 'height': '100%'});
-        this.svg.appendChild(this.bg);
+       // this.bg = createSVGElem('rect', {'fill': o.bgColor, 'width': '100%', 'height': '100%'});
+        //this.svg.appendChild(this.bg);
 
         // Create empty line
         this.epath = createSVGElem('path', {
@@ -136,8 +136,8 @@ var HalfCircleGauge = (function (global)
         // Create text
         this._text = createSVGElem('text', {
             'fill': o.textColor,
-            'x': sw / 2,
-            'y': sh,
+            'x': 50,
+            'y': 50,
             'text-anchor': 'middle',
             'font-size': o.textSize
         }); 
@@ -211,7 +211,7 @@ var HalfCircleGauge = (function (global)
      * @param {String} c 설정할 배경 색상
      * @return {String} 현재 설정된 배경 색상
      */
-    HalfCircleGauge.prototype.bgColor = function (c)
+    /*HalfCircleGauge.prototype.bgColor = function (c)
     {
         if(typeof c !== "undefined")
         {
@@ -219,7 +219,7 @@ var HalfCircleGauge = (function (global)
             __attrs(this.bg, {'fill': c});
         }
         return this.opts.bgColor;
-    }
+    }*/
 
     /**
      * @public
@@ -369,7 +369,8 @@ var HalfCircleGauge = (function (global)
     HalfCircleGauge.prototype._geth = function ()
     {
         var o = this.opts;
-        return (o.radius + (o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth) / 2);
+        return 50;
+        //return (50+ (o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth) / 2);
     }
 
     /**
@@ -380,7 +381,7 @@ var HalfCircleGauge = (function (global)
     HalfCircleGauge.prototype._getoffx = function ()
     {
         var o = this.opts;
-        return ((o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth)) / 2;    
+        return 50 - o.radius ;//- ((o.lineWidth > o.emptyLineWidth ? o.lineWidth : o.emptyLineWidth)) / 2;    
     }
 
     /**
@@ -393,8 +394,8 @@ var HalfCircleGauge = (function (global)
         var sw = this._getw(),
             sh = this._geth(),
             o = this.opts;
-        __attrs(this.svg, {'width': sw, 'height': sh});
-        __attrs(this._text, {'x' : sw / 2, 'y': sh});
+       // __attrs(this.svg, {'width': sw, 'height': sh});
+        //__attrs(this._text, {'x' : sw / 2, 'y': sh});
         this.epath.setAttribute('d', arcPath(100, o.radius, this._getoffx(), sh));
         this.path.setAttribute('d', arcPath(o.value, o.radius, this._getoffx(), sh));
     }
diff --git a/HalfCircleGauge/index.html b/HalfCircleGauge/index.html
index 3676315..8eac2be 100644
--- a/HalfCircleGauge/index.html
+++ b/HalfCircleGauge/index.html
@@ -15,7 +15,7 @@
             width: 100px;
         }
         #test {
-            padding:4px; margin: 0 auto; width: 200px; height: 250px;
+            padding:4px; margin: 0 auto; width: 200px; height: 250px; border-style: solid; border-width: 1px 1px 1px 1px; border-color: black;
         }
     </style>
 </head>
@@ -29,7 +29,7 @@
         </div>
         <div>
             <div class="attrName"> radius: </div>
-            <input type="range" id = "radius" name="radius" min = "40" max ="100" value="50">
+            <input type="range" id = "radius" name="radius" min = "0" max ="25" value="50">
             <a id="radiusA"></a>
         </div>
         <div>
@@ -77,14 +77,14 @@
     var circularBar = new HalfCircleGauge({
         lineWidth : 40,
         percentage: 30,
-        radius : 50,
-        lineColor: '#5ca284',
-        bgColor : '#ffffff',
+        radius : 25,
+        lineColor: '#fee870',
         showText: true,
-        lineWidth: 25,
-        emptyLineWidth: 25,
-        emptyLineColor: '#afdcc9',
-        textColor : '#07472C'
+        lineWidth: 5,
+        emptyLineWidth: 2,
+        emptyLineColor: '#eaeaea',
+        textColor : '#878787',
+        textSize : 12
     }).create(target);
     console.log(circularBar);
     circularBar.text("" + Math.round(circularBar.val()) + "%");
@@ -160,12 +160,12 @@
     })
 
     // bgColor
-    var bgColor = document.getElementById('bgColor');
+    /*var bgColor = document.getElementById('bgColor');
     bgColor.value= circularBar.bgColor();
 
     bgColor.addEventListener("change", function () {
         circularBar.bgColor(bgColor.value);
-    });
+    });*/
 
     //text Color
     var textColor = document.getElementById('textColor');