Merge pull request #83 from kimmobrunfeldt/feature/aspect-ration-warning

Add warning about incorrect aspect ratio of container
kimmobrunfeldt · Aug 11, 2015 · 99f3e58 · 99f3e58
2 parents 3f1b302 + f227e87
commit 99f3e58
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git a/src/circle.js b/src/circle.js
@@ -11,6 +11,8 @@ var Circle = function Circle(container, options) {
         ' a {radius},{radius} 0 1 1 0,{2radius}' +
         ' a {radius},{radius} 0 1 1 0,-{2radius}';
 
+    this.containerAspectRatio = 1;
+
     Shape.apply(this, arguments);
 };
 

diff --git a/src/semicircle.js b/src/semicircle.js
@@ -11,6 +11,8 @@ var SemiCircle = function SemiCircle(container, options) {
         'M 50,50 m -{radius},0' +
         ' a {radius},{radius} 0 1 1 {2radius},0';
 
+    this.containerAspectRatio = 2;
+
     Shape.apply(this, arguments);
 };
 
@@ -29,8 +31,8 @@ SemiCircle.prototype._initializeTextElement = function _initializeTextElement(
     if (opts.text.style) {
         // Reset top style
         element.style.top = 'auto';
-
         element.style.bottom = '0';
+
         if (opts.text.alignToBottom) {
             utils.setStyle(element, 'transform', 'translate(-50%, 0)');
         } else {

diff --git a/src/shape.js b/src/shape.js
@@ -67,6 +67,7 @@ var Shape = function Shape(container, opts) {
 
     this._container = element;
     this._container.appendChild(svgView.svg);
+    this._warnContainerAspectRatio(this._container);
 
     if (this._opts.svgStyle) {
         utils.setStyles(svgView.svg, this._opts.svgStyle);
@@ -273,4 +274,29 @@ Shape.prototype._trailString = function _trailString(opts) {
     throw new Error('Override this function for each progress bar');
 };
 
+Shape.prototype._warnContainerAspectRatio = function _warnContainerAspectRatio(container) {
+    if (!this.containerAspectRatio) {
+        return;
+    }
+
+    var computedStyle = window.getComputedStyle(container, null);
+    var width = parseFloat(computedStyle.getPropertyValue('width'), 10);
+    var height = parseFloat(computedStyle.getPropertyValue('height'), 10);
+    if (!utils.floatEquals(this.containerAspectRatio, width / height)) {
+        console.warn(
+            'Incorrect aspect ratio of container detected:',
+            computedStyle.getPropertyValue('width') + '(width)',
+            '/',
+            computedStyle.getPropertyValue('height') + '(height)',
+            '=',
+            width / height
+        );
+
+        console.warn(
+            'Aspect ratio of should be',
+            this.containerAspectRatio
+        );
+    }
+};
+
 module.exports = Shape;
diff --git a/src/utils.js b/src/utils.js
@@ -1,6 +1,7 @@
 // Utility functions
 
 var PREFIXES = 'Webkit Moz O ms'.split(' ');
+var FLOAT_COMPARISON_EPSILON = 0.001;
 
 // Copy all attributes from source object to destination object.
 // destination object is mutated.
@@ -108,6 +109,10 @@ function forEachObject(object, callback) {
     }
 }
 
+function floatEquals(a, b) {
+    return Math.abs(a - b) < FLOAT_COMPARISON_EPSILON;
+}
+
 module.exports = {
     extend: extend,
     render: render,
@@ -117,5 +122,6 @@ module.exports = {
     isString: isString,
     isFunction: isFunction,
     isObject: isObject,
-    forEachObject: forEachObject
+    forEachObject: forEachObject,
+    floatEquals: floatEquals
 };