bubblechart - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/bubblechart.js

 /**
- * BubbleChart (1.0.1)
+ * BubbleChart (1.1.0)
  *
@@ -18,3 +18,2 @@ * Author: Jonathan D. Johnson (http://jondavidjohn.com)
       this.fillColors = o.fillColors || [];
-      this.fps = o.fps || 60;
       this.contain = o.contain || false;
@@ -50,7 +49,7 @@ this.gutter = o.gutter || 0;
         if ((window.devicePixelRatio != null) && window.devicePixelRatio > 1) {
-          if (c.context.webkitBackingStorePixelRatio < 2) {
-            ratio = window.devicePixelRatio;
+          if (c.context.webkitBackingStorePixelRatio === 2) {
+            window.devicePixelRatio = 1;
           }
         }
-        if (ratio > 1) {
+        if (window.devicePixelRatio > 1) {
           c.style.height = "" + c.height + "px";
@@ -68,3 +67,4 @@ c.style.width = "" + c.width + "px";
         c.usableArea = c.area * (o.usedArea || 0.2);
-        return c.midpoint = new BubbleChart.Point(c.width / 2, c.height / 2);
+        c.midpoint = new BubbleChart.Point(c.width / 2, c.height / 2);
+        return _this.spinner = new BubbleChart.Spinner(_this.canvas.context);
       })(this.canvas);
@@ -103,2 +103,4 @@ if (this.data.length) {
           data: d.data,
+          img_src: d.img_src,
+          img_area: d.img_area,
           fillColor: d.fillColor || randColor,
@@ -114,3 +116,4 @@ borderColor: d.borderColor || this.o.borderColor,
         };
-        _results.push(this.bubbles.push(new BubbleChart.Bubble(opts)));
+        this.bubbles.push(new BubbleChart.Bubble(opts));
+        _results.push(this.canvas.context.clearRect(0, 0, this.canvas.width, this.canvas.height));
       }
@@ -120,30 +123,62 @@ return _results;
 
-    BubbleChart.prototype.paint = function(_loop) {
-      var b, bubble, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2,
+    BubbleChart.prototype.advance = function() {
+      var b, bubble, _i, _len, _ref, _results;
+      _ref = this.bubbles;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        b = _ref[_i];
+        b.advance(this);
+        _results.push((function() {
+          var _j, _len1, _ref1, _results1;
+          _ref1 = this.bubbles;
+          _results1 = [];
+          for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+            bubble = _ref1[_j];
+            if (b.label !== bubble.label && b.overlapsWith(bubble)) {
+              b.resolveCollisionWith(bubble);
+            }
+            if (this.contain) {
+              _results1.push(bubble.pushAwayFromEdges(this.canvas, this.gutter));
+            } else {
+              _results1.push(void 0);
+            }
+          }
+          return _results1;
+        }).call(this));
+      }
+      return _results;
+    };
+
+    BubbleChart.prototype.paint = function(_animate) {
+      var b, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2,
         _this = this;
-      if (_loop == null) {
-        _loop = true;
+      if (_animate == null) {
+        _animate = true;
       }
+      if (!this.pointer.grabbingBubble()) {
+        this.canvas.style.cursor = "default";
+      }
+      if (!this.pointer.grabbingBubble()) {
+        this.pointer.bubble = null;
+      }
+      setTimeout((function() {
+        return _this.advance();
+      }), 0);
       _ref = this.bubbles;
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         b = _ref[_i];
-        b.advance(this);
-        _ref1 = this.bubbles;
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          bubble = _ref1[_j];
-          if (b.label !== bubble.label && b.overlapsWith(bubble)) {
-            b.resolveCollisionWith(bubble);
-          }
-          if (this.contain) {
-            bubble.pushAwayFromEdges(this.canvas, this.gutter);
-          }
+        if (b.last_draw != null) {
+          b.clear(this.canvas.context);
         }
       }
-      this.canvas.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      if (this.pointer.bubble != null) {
-        if (!this.pointer.bubble.grabbed) {
-          document.body.style.cursor = "default";
+      _ref1 = this.bubbles;
+      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+        b = _ref1[_j];
+        if (b.popover.last_draw != null) {
+          b.popover.clear(this.canvas.context);
         }
-        if (!this.pointer.bubble.grabbed) {
-          this.pointer.bubble = null;
+        if (!this.pointer.grabbingBubble()) {
+          if ((this.pointer.current != null) && this.pointer.current.distance(b.position) <= b.radius) {
+            this.pointer.bubble = b;
+          }
         }
@@ -155,16 +190,11 @@ }
         b.paint(this.canvas.context);
-        if ((this.pointer.current != null) && !this.pointer.grabbingBubble()) {
-          if (this.canvas.context.isPointInPath(this.pointer.current.x, this.pointer.current.y)) {
-            this.pointer.bubble = b;
-          }
-        }
       }
       if (this.pointer.bubble != null) {
-        document.body.style.cursor = "pointer";
+        this.canvas.style.cursor = "pointer";
         this.pointer.bubble.popover.paint(this.pointer, this.canvas.context);
       }
-      if (_loop) {
-        return setTimeout((function() {
+      if (_animate) {
+        return requestAnimationFrame((function() {
           return _this.paint();
-        }), 1000 / this.fps);
+        }));
       }
@@ -188,2 +218,3 @@ };
       this.data = o.data;
+      this.img_src = o.img_src;
       this.fillColor = o.fillColor;
@@ -197,3 +228,4 @@ this.borderColor = o.borderColor;
       this.diameter = this.radius * 2;
-      this.reach = this.radius;
+      this.reach = this.radius + 1;
+      this.img_area = o.img_area || 0.8;
       if (this.borderSize != null) {
@@ -203,2 +235,6 @@ this.reach += this.borderSize;
       this.popover = new BubbleChart.Popover(this, o.popoverOpts || {});
+      this.pre = null;
+      this.img = new Image();
+      this.last_draw = null;
+      this.render();
     }
@@ -277,27 +313,73 @@
     Bubble.prototype.paint = function(context) {
-      var spacingX, spacingY, text_measurement, truncated_label;
-      context.beginPath();
-      context.fillStyle = this.fillColor;
-      context.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2, true);
-      context.fill();
+      if (this.pre != null) {
+        this.last_draw = {
+          x: this.position.x - this.radius,
+          y: this.position.y - this.radius,
+          w: this.pre.width,
+          h: this.pre.height
+        };
+        return context.drawImage(this.pre, this.last_draw.x, this.last_draw.y, this.last_draw.w, this.last_draw.h);
+      }
+    };
+
+    Bubble.prototype.render = function() {
+      var pre_context, spacingX, spacingY, text_measurement, truncated_label,
+        _this = this;
+      if (this.img_src != null) {
+        this.img.onload = function() {
+          var canvas, ctx, img_arc_r, img_arc_x, img_arc_y, pre_ctx;
+          while (_this.img.width > _this.diameter * _this.img_area) {
+            _this.img.height = _this.img.height * 0.75;
+            _this.img.width = _this.img.width * 0.75;
+          }
+          canvas = document.createElement('canvas');
+          canvas.height = _this.img.height;
+          canvas.width = _this.img.width + 2;
+          img_arc_x = _this.img.width / 2 + 2;
+          img_arc_y = _this.img.height / 2;
+          img_arc_r = _this.img.width / 2;
+          ctx = canvas.getContext('2d');
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(img_arc_x, img_arc_y, img_arc_r, 0, Math.PI * 2, true);
+          ctx.closePath();
+          ctx.clip();
+          ctx.drawImage(_this.img, 1, 0, _this.img.width, _this.img.height);
+          ctx.restore();
+          ctx.arc(img_arc_x, img_arc_y, _this.img.width / 2, 0, Math.PI * 2, true);
+          ctx.lineWidth = 1;
+          ctx.strokeStyle = _this.fillColor;
+          ctx.stroke();
+          pre_ctx = _this.pre.getContext('2d');
+          return pre_ctx.drawImage(canvas, _this.radius - (canvas.width / 2), _this.radius - ((_this.img.height - _this.img.width) / 2) - (_this.img.width / 2), canvas.width, canvas.height);
+        };
+        this.img.src = this.img_src;
+      }
+      this.pre = document.createElement('canvas');
+      this.pre.height = this.pre.width = (this.diameter + 3) * window.devicePixelRatio;
+      pre_context = this.pre.getContext('2d');
+      pre_context.beginPath();
+      pre_context.fillStyle = this.fillColor;
+      pre_context.arc(this.radius + 1, this.radius + 1, this.radius, 0, Math.PI * 2, true);
+      pre_context.fill();
       if (this.borderColor != null) {
-        context.lineWidth = this.borderSize;
-        context.strokeStyle = this.borderColor;
-        context.stroke();
+        pre_context.lineWidth = this.borderSize;
+        pre_context.strokeStyle = this.borderColor;
+        pre_context.stroke();
       }
       if (this.textColor) {
-        context.font = "20px '" + this.textFont + "'";
-        context.fillStyle = this.textColor;
-        text_measurement = context.measureText(this.label);
+        pre_context.font = "20px '" + this.textFont + "'";
+        pre_context.fillStyle = this.textColor;
+        text_measurement = pre_context.measureText(this.label);
         if (text_measurement.width + 12 < this.diameter) {
-          spacingX = this.position.x - (text_measurement.width / 2);
-          spacingY = this.position.y + (14 / 2);
-          context.fillText(this.label, spacingX, spacingY);
+          spacingX = this.radius - (text_measurement.width / 2);
+          spacingY = this.radius + (14 / 2);
+          pre_context.fillText(this.label, spacingX, spacingY);
         } else {
-          context.font = "12px helvetica";
-          text_measurement = context.measureText(this.label);
+          pre_context.font = "12px helvetica";
+          text_measurement = pre_context.measureText(this.label);
           if (text_measurement.width + 7 < this.diameter) {
-            spacingX = this.position.x - (text_measurement.width / 2);
-            spacingY = this.position.y + (4 / 2);
-            context.fillText(this.label, spacingX, spacingY);
+            spacingX = this.radius - (text_measurement.width / 2);
+            spacingY = this.radius + (4 / 2);
+            pre_context.fillText(this.label, spacingX, spacingY);
           } else {
@@ -310,8 +392,8 @@ truncated_label = "" + this.label + "...";
               }
-              text_measurement = context.measureText(truncated_label);
+              text_measurement = pre_context.measureText(truncated_label);
             }
             if (truncated_label) {
-              spacingX = this.position.x - (text_measurement.width / 2);
-              spacingY = this.position.y + (4 / 2);
-              context.fillText(truncated_label, spacingX, spacingY);
+              spacingX = this.radius - (text_measurement.width / 2);
+              spacingY = this.radius + (4 / 2);
+              pre_context.fillText(truncated_label, spacingX, spacingY);
             }
@@ -321,5 +403,12 @@ }
       }
-      return context.closePath();
+      return pre_context.closePath();
     };
 
+    Bubble.prototype.clear = function(context) {
+      if (this.last_draw != null) {
+        context.clearRect(this.last_draw.x - 5, this.last_draw.y - 5, this.last_draw.w + 10, this.last_draw.h + 10);
+        return this.last_draw = null;
+      }
+    };
+
     return Bubble;
@@ -415,4 +504,7 @@
           }
-          return self.dragging = false;
+          self.dragging = false;
         }
+        if (e.type === 'mouseout') {
+          return self.current = null;
+        }
       };
@@ -473,6 +565,2 @@ }
   BubbleChart.Popover = (function() {
-    /*
-    # Hover Popover
-    */
-
     function Popover(bubble, o) {
@@ -483,6 +571,14 @@ this.bubble = bubble;
       this.textFont = o.textFont || 'helvetica';
-      this.opacity = o.opacity || 0.6;
+      this.opacity = o.opacity || 0.8;
       this.lineHeight = 20;
+      this.last_draw = null;
     }
 
+    Popover.prototype.clear = function(context) {
+      if (this.last_draw != null) {
+        context.clearRect(this.last_draw.x, this.last_draw.y, this.last_draw.w, this.last_draw.h);
+        return this.last_draw = null;
+      }
+    };
+
     Popover.prototype.paint = function(pointer, context) {
@@ -525,2 +621,8 @@ var detailX, detailY, labelX, labelY, label_measurement, lineWidth, metric_measurement, triangle;
       context.globalAlpha = this.opacity;
+      this.last_draw = {
+        x: labelX,
+        y: labelY,
+        w: lineWidth,
+        h: this.lineHeight * 2 + 10 + (triangle.y3 - triangle.y) + 5
+      };
       context.roundedRect(labelX, labelY, lineWidth, this.lineHeight * 2 + 10, 7);
@@ -548,2 +650,54 @@ context.moveTo(triangle.x, triangle.y);
 ;(function() {
+  BubbleChart.Spinner = (function() {
+    function Spinner(context) {
+      this.context = context;
+      this.running = false;
+      this.lines = 12;
+      this.start_date = null;
+    }
+
+    Spinner.prototype.start = function() {
+      this.running = true;
+      this.start_date = new Date();
+      return this.paint();
+    };
+
+    Spinner.prototype.paint = function() {
+      var i, rotation, _i, _ref,
+        _this = this;
+      rotation = parseInt(((new Date() - this.start_date) / 1000) * this.lines) / this.lines;
+      this.context.save();
+      this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
+      this.context.translate(this.context.canvas.width / 2, this.context.canvas.height / 2);
+      this.context.rotate(Math.PI * 2 * rotation);
+      this.context.scale(0.4, 0.4);
+      for (i = _i = 0, _ref = this.lines; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
+        this.context.beginPath();
+        this.context.rotate(Math.PI * 2 / this.lines);
+        this.context.moveTo(this.context.canvas.width / 7, 0);
+        this.context.lineTo(this.context.canvas.width / 4, 0);
+        this.context.lineWidth = this.context.canvas.width / 50;
+        this.context.strokeStyle = "rgba(0,0,0," + i / this.lines + ")";
+        this.context.stroke();
+      }
+      this.context.restore();
+      if (this.running) {
+        return requestAnimationFrame((function() {
+          return _this.paint();
+        }));
+      } else {
+        return this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
+      }
+    };
+
+    Spinner.prototype.stop = function() {
+      return this.running = false;
+    };
+
+    return Spinner;
+
+  })();
+
+}).call(this);
+;(function() {
   CanvasRenderingContext2D.prototype.roundedRect = function(x, y, w, h, r) {
@@ -570,2 +724,30 @@ if (w < 2 * r) {
 
+  (function() {
+    var lastTime, v, vendors;
+    lastTime = 0;
+    vendors = ['webkit', 'moz'];
+    while (!window.requestAnimationFrame && vendors.length) {
+      v = vendors.pop();
+      window.requestAnimationFrame = window[v + 'RequestAnimationFrame'];
+      window.cancelAnimationFrame = window[v + 'CancelAnimationFrame'] || window[v + 'CancelRequestAnimationFrame'];
+    }
+    if (!window.requestAnimationFrame) {
+      window.requestAnimationFrame = function(cb, ele) {
+        var currTime, id, timeToCall;
+        currTime = new Date().getTime();
+        timeToCall = Math.max(0, 16 - (currTime - lastTime));
+        id = window.setTimeout((function() {
+          return cb(currTime + timeToCall);
+        }), timeToCall);
+        lastTime = currTime + timeToCall;
+        return id;
+      };
+    }
+    if (!window.cancelAnimationFrame) {
+      return window.cancelAnimationFrame = function(id) {
+        return clearTimeout(id);
+      };
+    }
+  })();
+
 }).call(this);

dist/bubblechart.min.js

 /**
- * BubbleChart (1.0.1)
+ * BubbleChart (1.1.0)
  *
@@ -9,2 +9,2 @@ * Author: Jonathan D. Johnson (http://jondavidjohn.com)
  */
-(function(){this.BubbleChart=function(){function a(b){var c,d,e,f=this;this.o=b,this.data=b.data||[],this.metric=b.metric,this.fillColors=b.fillColors||[],this.fps=b.fps||60,this.contain=b.contain||!1,this.gutter=b.gutter||0,this.canvas=document.getElementById(b.canvasId),null==b.attribution&&(b.attribution="before"),b.attribution&&(e="https://github.com/jondavidjohn/bubblechart",c=document.createElement("div"),c.className="bubblechart-attribution",c.innerHTML='<small>(Powered by <a href="'+e+'">BubbleChart</a>)</small>',"before"===b.attribution&&this.canvas.parentNode.insertBefore(c,this.canvas),"after"===b.attribution&&this.canvas.parentNode.insertBefore(c,this.canvas.nextSibling)),d=document.createComment(" BubbleChart by jondavidjohn (http://jondavidjohn.github.io/bubblechart/) "),null!=this.canvas.firstChild?this.canvas.insertBefore(d,this.canvas.firstChild):this.canvas.appendChild(d),this.pointer=new a.Pointer,function(c){var d;return c.context=c.getContext("2d"),d=1,null!=window.devicePixelRatio&&window.devicePixelRatio>1&&c.context.webkitBackingStorePixelRatio<2&&(d=window.devicePixelRatio),d>1&&(c.style.height=""+c.height+"px",c.style.width=""+c.width+"px",c.width=c.width*d,c.height=c.height*d),c.style.position="relative",c.onmousemove=c.ontouchmove=f.pointer.e_move,c.onmousedown=c.ontouchstart=f.pointer.e_grab,c.onmouseup=c.onmouseout=c.ontouchend=f.pointer.e_release,c.style.webkitUserSelect="none",c.area=c.height*c.width,c.usableArea=c.area*(b.usedArea||.2),c.midpoint=new a.Point(c.width/2,c.height/2)}(this.canvas),this.data.length&&this.reload()}return a.prototype.reload=function(){var b,c,d,e,f,g,h;for(this.bubbles=[],this.metricTotal=function(){var a,c,d,e;for(d=this.data,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b.data);return e}.call(this).reduce(function(a,b){return a+b}),g=this.data,h=[],e=0,f=g.length;f>e;e++)b=g[e],d=function(a){return a[a.length?Math.randInt(a.length):void 0]}(this.fillColors),c={href:b.href,label:b.label,metric:b.metric||this.o.metric,data:b.data,fillColor:b.fillColor||d,borderColor:b.borderColor||this.o.borderColor,textColor:b.textColor||this.o.textColor,textFont:b.textFont||this.o.textFont,borderSize:b.borderSize||this.o.borderSize,radius:Math.sqrt(this.canvas.usableArea*(b.data/this.metricTotal))/2,popoverOpts:this.o.popoverOpts,position:new a.Point(Math.randInt(Math.sqrt(this.canvas.area)),Math.randInt(Math.sqrt(this.canvas.area))),pointOfGravity:this.canvas.midpoint},h.push(this.bubbles.push(new a.Bubble(c)));return h},a.prototype.paint=function(a){var b,c,d,e,f,g,h,i,j,k,l,m=this;for(null==a&&(a=!0),j=this.bubbles,d=0,g=j.length;g>d;d++)for(b=j[d],b.advance(this),k=this.bubbles,e=0,h=k.length;h>e;e++)c=k[e],b.label!==c.label&&b.overlapsWith(c)&&b.resolveCollisionWith(c),this.contain&&c.pushAwayFromEdges(this.canvas,this.gutter);for(this.canvas.context.clearRect(0,0,this.canvas.width,this.canvas.height),null!=this.pointer.bubble&&(this.pointer.bubble.grabbed||(document.body.style.cursor="default"),this.pointer.bubble.grabbed||(this.pointer.bubble=null)),l=this.bubbles,f=0,i=l.length;i>f;f++)b=l[f],b.paint(this.canvas.context),null==this.pointer.current||this.pointer.grabbingBubble()||this.canvas.context.isPointInPath(this.pointer.current.x,this.pointer.current.y)&&(this.pointer.bubble=b);return null!=this.pointer.bubble&&(document.body.style.cursor="pointer",this.pointer.bubble.popover.paint(this.pointer,this.canvas.context)),a?setTimeout(function(){return m.paint()},1e3/this.fps):void 0},a}()}).call(this),function(){BubbleChart.Bubble=function(){function a(a){this.grabbed=!1,this.bully=!1,this.pointOfGravity=a.pointOfGravity,this.href=a.href,this.label=a.label,this.metric=a.metric,this.data=a.data,this.fillColor=a.fillColor,this.borderColor=a.borderColor,this.textColor=a.textColor,this.textFont=a.textFont||"helvetica",this.borderSize=a.borderSize,this.radius=a.radius,this.position=a.position,this.diameter=2*this.radius,this.reach=this.radius,null!=this.borderSize&&(this.reach+=this.borderSize),this.popover=new BubbleChart.Popover(this,a.popoverOpts||{})}return a.prototype.getVelocity=function(){return{x:.04*(this.pointOfGravity.x-this.position.x),y:.04*(this.pointOfGravity.y-this.position.y)}},a.prototype.advance=function(a){var b,c;return this.grabbed?(b=a.pointer,null!=b.current&&null!=b.diff?(this.position.x=b.current.x-b.diff.x,this.position.y=b.current.y-b.diff.y):void 0):(c=this.getVelocity(),this.position.x+=c.x,this.position.y+=c.y)},a.prototype.distanceFrom=function(a){return this.position.distance(a.position)-(this.reach+a.reach)},a.prototype.overlapsWith=function(a){return this.distanceFrom(a)<0},a.prototype.hasSpatialInferiorityTo=function(a){return a.grabbed||a.radius>this.radius&&!this.grabbed||a.radius>this.radius&&this.bully&&a.bully&&!this.grabbed||a.bully&&!this.grabbed},a.prototype.resolveCollisionWith=function(a){var b,c,d,e;return this.overlapsWith(a)?(b=this.position.distance(a.position),c=this.distanceFrom(a),e=b-c,this.hasSpatialInferiorityTo(a)?(d=this.position.rAngle(a.position),this.position.x=a.position.x+e*Math.cos(d),this.position.y=a.position.y+e*Math.sin(d),this.bully=!0):(d=a.position.rAngle(this.position),a.position.x=this.position.x+e*Math.cos(d),a.position.y=this.position.y+e*Math.sin(d),a.bully=!0)):void 0},a.prototype.pushAwayFromEdges=function(a,b){return this.position.y-this.reach+b<0?(this.position.y=this.reach-b,this.bully=!0):this.position.y+this.reach-b>a.height?(this.position.y=a.height-this.reach+b,this.bully=!0):this.position.x+this.reach-b>a.width?(this.position.x=a.width-this.reach+b,this.bully=!0):this.position.x-this.reach+b<0?(this.position.x=this.reach-b,this.bully=!0):void 0},a.prototype.paint=function(a){var b,c,d,e;if(a.beginPath(),a.fillStyle=this.fillColor,a.arc(this.position.x,this.position.y,this.radius,0,2*Math.PI,!0),a.fill(),null!=this.borderColor&&(a.lineWidth=this.borderSize,a.strokeStyle=this.borderColor,a.stroke()),this.textColor)if(a.font="20px '"+this.textFont+"'",a.fillStyle=this.textColor,d=a.measureText(this.label),d.width+12<this.diameter)b=this.position.x-d.width/2,c=this.position.y+7,a.fillText(this.label,b,c);else if(a.font="12px helvetica",d=a.measureText(this.label),d.width+7<this.diameter)b=this.position.x-d.width/2,c=this.position.y+2,a.fillText(this.label,b,c);else{for(e=""+this.label+"...";e&&d.width+7>=this.diameter;)e=e.substr(0,e.length-4).concat("..."),"..."===e&&(e=!1),d=a.measureText(e);e&&(b=this.position.x-d.width/2,c=this.position.y+2,a.fillText(e,b,c))}return a.closePath()},a}()}.call(this),function(){BubbleChart.Point=function(){function a(a,b){this.x=a,this.y=b}return a.prototype.slope=function(a){var b,c;return b=this.y-a.y,c=this.x-a.x,b/c},a.prototype.angle=function(a){return 180*this.rAngle(a)/Math.PI+180},a.prototype.rAngle=function(a){return Math.atan2(this.y-a.y,this.x-a.x)},a.prototype.diff=function(a){return{x:this.x-a.x,y:this.y-a.y}},a.prototype.distance=function(a){var b;return b=this.diff(a),Math.sqrt(b.x*b.x+b.y*b.y)},a}()}.call(this),function(){BubbleChart.Pointer=function(){function a(){var a;this.current=null,this.bubble=null,this.diff=null,this.moving=!1,this.dragging=!1,a=this,this.e_move=function(){var b;return b=null,function(c){return clearTimeout(b),a.current=a.getPosition(c),a.moving=!0,a.grabbingBubble()&&(c.preventDefault(),a.dragging=!0),b=setTimeout(function(){return a.moving=!1},50)}}(),this.e_grab=function(b){return null!=a.bubble?(b.preventDefault(),a.bubble.grabbed=!0,a.diff=a.current.diff(a.bubble.position),a.current=null):void 0},this.e_release=function(b){return a.grabbingBubble()?(b.preventDefault(),a.bubble.grabbed=!1,a.diff=null,a.dragging||"undefined"!=typeof window&&null!==window&&null!=a.bubble.href&&(window.location.href=a.bubble.href),a.dragging=!1):void 0}}return a.prototype.grabbingBubble=function(){return null!=this.bubble&&this.bubble.grabbed},a.prototype.getPixelRatio=function(a){var b;return b=1,null!=window.devicePixelRatio&&a.context.webkitBackingStorePixelRatio<2&&(b=window.devicePixelRatio),b},a.prototype.getPosition=function(){var a,b;return b={},a={},function(c){var d,e,f,g,h;if(d=c.target||c.srcElement,e=d.id,f=this.getPixelRatio(d),null==b[e]||null==a[e])for(b[e]=0,a[e]=0;;)if(b[e]+=d.offsetTop||0,a[e]+=d.offsetLeft||0,d=d.offsetParent,!d)break;return c.touches&&c.touches.length>0?(g=c.touches[0].pageX-a[e],h=c.touches[0].pageY-b[e]):(g=c.pageX-a[e],h=c.pageY-b[e]),new BubbleChart.Point(g*f,h*f)}}(),a}()}.call(this),function(){BubbleChart.Popover=function(){function a(a,b){this.bubble=a,this.fillColor=b.fillColor||"#333",this.textColor=b.textColor||"#fff",this.textFont=b.textFont||"helvetica",this.opacity=b.opacity||.6,this.lineHeight=20}return a.prototype.paint=function(a,b){var c,d,e,f,g,h,i,j;if(null!=a.current)return b.font="17px '"+this.textFont+"'",g=b.measureText(this.bubble.label),i=b.measureText(""+this.bubble.data+" "+this.bubble.metric),h=g.width>i.width?g.width+15:i.width+15,e=a.current.x-14,f=a.current.y-26-2*this.lineHeight,j={x:0,y:0,x2:0,y2:0,x3:0,y3:0},0>f?(f=a.current.y+26,j.y=a.current.y+26,j.y3=j.y-4):(j.y=a.current.y-16,j.y3=a.current.y-10),j.x=a.current.x-8,j.x2=j.x+16,j.y2=j.y,j.x3=j.x2-8,e+h>b.canvas.width&&(e-=e+h-b.canvas.width),b.beginPath(),b.fillStyle=this.fillColor,b.globalAlpha=this.opacity,b.roundedRect(e,f,h,2*this.lineHeight+10,7),b.moveTo(j.x,j.y),b.lineTo(j.x2,j.y2),b.lineTo(j.x3,j.y3),b.lineTo(j.x,j.y),b.fill(),b.globalAlpha=1,b.fillStyle=this.textColor,b.fillText(this.bubble.label,e+7,f+this.lineHeight),b.font="11px "+this.textFont,c=e+7,d=f+2*this.lineHeight,b.fillText(""+this.bubble.data+" "+this.bubble.metric,c,d),b.closePath()},a}()}.call(this),function(){CanvasRenderingContext2D.prototype.roundedRect=function(a,b,c,d,e){return 2*e>c&&(e=c/2),2*e>d&&(e=d/2),this.moveTo(a+e,b),this.arcTo(a+c,b,a+c,b+d,e),this.arcTo(a+c,b+d,a,b+d,e),this.arcTo(a,b+d,a,b,e),this.arcTo(a,b,a+c,b,e)},Math.randInt=function(a){return null==a&&(a=100),Math.floor(Math.random()*a)}}.call(this);
+(function(){this.BubbleChart=function(){function a(b){var c,d,e,f=this;this.o=b,this.data=b.data||[],this.metric=b.metric,this.fillColors=b.fillColors||[],this.contain=b.contain||!1,this.gutter=b.gutter||0,this.canvas=document.getElementById(b.canvasId),null==b.attribution&&(b.attribution="before"),b.attribution&&(e="https://github.com/jondavidjohn/bubblechart",c=document.createElement("div"),c.className="bubblechart-attribution",c.innerHTML='<small>(Powered by <a href="'+e+'">BubbleChart</a>)</small>',"before"===b.attribution&&this.canvas.parentNode.insertBefore(c,this.canvas),"after"===b.attribution&&this.canvas.parentNode.insertBefore(c,this.canvas.nextSibling)),d=document.createComment(" BubbleChart by jondavidjohn (http://jondavidjohn.github.io/bubblechart/) "),null!=this.canvas.firstChild?this.canvas.insertBefore(d,this.canvas.firstChild):this.canvas.appendChild(d),this.pointer=new a.Pointer,function(c){var d;return c.context=c.getContext("2d"),d=1,null!=window.devicePixelRatio&&window.devicePixelRatio>1&&2===c.context.webkitBackingStorePixelRatio&&(window.devicePixelRatio=1),window.devicePixelRatio>1&&(c.style.height=""+c.height+"px",c.style.width=""+c.width+"px",c.width=c.width*d,c.height=c.height*d),c.style.position="relative",c.onmousemove=c.ontouchmove=f.pointer.e_move,c.onmousedown=c.ontouchstart=f.pointer.e_grab,c.onmouseup=c.onmouseout=c.ontouchend=f.pointer.e_release,c.style.webkitUserSelect="none",c.area=c.height*c.width,c.usableArea=c.area*(b.usedArea||.2),c.midpoint=new a.Point(c.width/2,c.height/2),f.spinner=new a.Spinner(f.canvas.context)}(this.canvas),this.data.length&&this.reload()}return a.prototype.reload=function(){var b,c,d,e,f,g,h;for(this.bubbles=[],this.metricTotal=function(){var a,c,d,e;for(d=this.data,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b.data);return e}.call(this).reduce(function(a,b){return a+b}),g=this.data,h=[],e=0,f=g.length;f>e;e++)b=g[e],d=function(a){return a[a.length?Math.randInt(a.length):void 0]}(this.fillColors),c={href:b.href,label:b.label,metric:b.metric||this.o.metric,data:b.data,img_src:b.img_src,img_area:b.img_area,fillColor:b.fillColor||d,borderColor:b.borderColor||this.o.borderColor,textColor:b.textColor||this.o.textColor,textFont:b.textFont||this.o.textFont,borderSize:b.borderSize||this.o.borderSize,radius:Math.sqrt(this.canvas.usableArea*(b.data/this.metricTotal))/2,popoverOpts:this.o.popoverOpts,position:new a.Point(Math.randInt(Math.sqrt(this.canvas.area)),Math.randInt(Math.sqrt(this.canvas.area))),pointOfGravity:this.canvas.midpoint},this.bubbles.push(new a.Bubble(c)),h.push(this.canvas.context.clearRect(0,0,this.canvas.width,this.canvas.height));return h},a.prototype.advance=function(){var a,b,c,d,e,f;for(e=this.bubbles,f=[],c=0,d=e.length;d>c;c++)a=e[c],a.advance(this),f.push(function(){var c,d,e,f;for(e=this.bubbles,f=[],c=0,d=e.length;d>c;c++)b=e[c],a.label!==b.label&&a.overlapsWith(b)&&a.resolveCollisionWith(b),this.contain?f.push(b.pushAwayFromEdges(this.canvas,this.gutter)):f.push(void 0);return f}.call(this));return f},a.prototype.paint=function(a){var b,c,d,e,f,g,h,i,j,k,l=this;for(null==a&&(a=!0),this.pointer.grabbingBubble()||(this.canvas.style.cursor="default"),this.pointer.grabbingBubble()||(this.pointer.bubble=null),setTimeout(function(){return l.advance()},0),i=this.bubbles,c=0,f=i.length;f>c;c++)b=i[c],null!=b.last_draw&&b.clear(this.canvas.context);for(j=this.bubbles,d=0,g=j.length;g>d;d++)b=j[d],null!=b.popover.last_draw&&b.popover.clear(this.canvas.context),this.pointer.grabbingBubble()||null!=this.pointer.current&&this.pointer.current.distance(b.position)<=b.radius&&(this.pointer.bubble=b);for(k=this.bubbles,e=0,h=k.length;h>e;e++)b=k[e],b.paint(this.canvas.context);return null!=this.pointer.bubble&&(this.canvas.style.cursor="pointer",this.pointer.bubble.popover.paint(this.pointer,this.canvas.context)),a?requestAnimationFrame(function(){return l.paint()}):void 0},a}()}).call(this),function(){BubbleChart.Bubble=function(){function a(a){this.grabbed=!1,this.bully=!1,this.pointOfGravity=a.pointOfGravity,this.href=a.href,this.label=a.label,this.metric=a.metric,this.data=a.data,this.img_src=a.img_src,this.fillColor=a.fillColor,this.borderColor=a.borderColor,this.textColor=a.textColor,this.textFont=a.textFont||"helvetica",this.borderSize=a.borderSize,this.radius=a.radius,this.position=a.position,this.diameter=2*this.radius,this.reach=this.radius+1,this.img_area=a.img_area||.8,null!=this.borderSize&&(this.reach+=this.borderSize),this.popover=new BubbleChart.Popover(this,a.popoverOpts||{}),this.pre=null,this.img=new Image,this.last_draw=null,this.render()}return a.prototype.getVelocity=function(){return{x:.04*(this.pointOfGravity.x-this.position.x),y:.04*(this.pointOfGravity.y-this.position.y)}},a.prototype.advance=function(a){var b,c;return this.grabbed?(b=a.pointer,null!=b.current&&null!=b.diff?(this.position.x=b.current.x-b.diff.x,this.position.y=b.current.y-b.diff.y):void 0):(c=this.getVelocity(),this.position.x+=c.x,this.position.y+=c.y)},a.prototype.distanceFrom=function(a){return this.position.distance(a.position)-(this.reach+a.reach)},a.prototype.overlapsWith=function(a){return this.distanceFrom(a)<0},a.prototype.hasSpatialInferiorityTo=function(a){return a.grabbed||a.radius>this.radius&&!this.grabbed||a.radius>this.radius&&this.bully&&a.bully&&!this.grabbed||a.bully&&!this.grabbed},a.prototype.resolveCollisionWith=function(a){var b,c,d,e;return this.overlapsWith(a)?(b=this.position.distance(a.position),c=this.distanceFrom(a),e=b-c,this.hasSpatialInferiorityTo(a)?(d=this.position.rAngle(a.position),this.position.x=a.position.x+e*Math.cos(d),this.position.y=a.position.y+e*Math.sin(d),this.bully=!0):(d=a.position.rAngle(this.position),a.position.x=this.position.x+e*Math.cos(d),a.position.y=this.position.y+e*Math.sin(d),a.bully=!0)):void 0},a.prototype.pushAwayFromEdges=function(a,b){return this.position.y-this.reach+b<0?(this.position.y=this.reach-b,this.bully=!0):this.position.y+this.reach-b>a.height?(this.position.y=a.height-this.reach+b,this.bully=!0):this.position.x+this.reach-b>a.width?(this.position.x=a.width-this.reach+b,this.bully=!0):this.position.x-this.reach+b<0?(this.position.x=this.reach-b,this.bully=!0):void 0},a.prototype.paint=function(a){return null!=this.pre?(this.last_draw={x:this.position.x-this.radius,y:this.position.y-this.radius,w:this.pre.width,h:this.pre.height},a.drawImage(this.pre,this.last_draw.x,this.last_draw.y,this.last_draw.w,this.last_draw.h)):void 0},a.prototype.render=function(){var a,b,c,d,e,f=this;if(null!=this.img_src&&(this.img.onload=function(){for(var a,b,c,d,e,g;f.img.width>f.diameter*f.img_area;)f.img.height=.75*f.img.height,f.img.width=.75*f.img.width;return a=document.createElement("canvas"),a.height=f.img.height,a.width=f.img.width+2,d=f.img.width/2+2,e=f.img.height/2,c=f.img.width/2,b=a.getContext("2d"),b.save(),b.beginPath(),b.arc(d,e,c,0,2*Math.PI,!0),b.closePath(),b.clip(),b.drawImage(f.img,1,0,f.img.width,f.img.height),b.restore(),b.arc(d,e,f.img.width/2,0,2*Math.PI,!0),b.lineWidth=1,b.strokeStyle=f.fillColor,b.stroke(),g=f.pre.getContext("2d"),g.drawImage(a,f.radius-a.width/2,f.radius-(f.img.height-f.img.width)/2-f.img.width/2,a.width,a.height)},this.img.src=this.img_src),this.pre=document.createElement("canvas"),this.pre.height=this.pre.width=(this.diameter+3)*window.devicePixelRatio,a=this.pre.getContext("2d"),a.beginPath(),a.fillStyle=this.fillColor,a.arc(this.radius+1,this.radius+1,this.radius,0,2*Math.PI,!0),a.fill(),null!=this.borderColor&&(a.lineWidth=this.borderSize,a.strokeStyle=this.borderColor,a.stroke()),this.textColor)if(a.font="20px '"+this.textFont+"'",a.fillStyle=this.textColor,d=a.measureText(this.label),d.width+12<this.diameter)b=this.radius-d.width/2,c=this.radius+7,a.fillText(this.label,b,c);else if(a.font="12px helvetica",d=a.measureText(this.label),d.width+7<this.diameter)b=this.radius-d.width/2,c=this.radius+2,a.fillText(this.label,b,c);else{for(e=""+this.label+"...";e&&d.width+7>=this.diameter;)e=e.substr(0,e.length-4).concat("..."),"..."===e&&(e=!1),d=a.measureText(e);e&&(b=this.radius-d.width/2,c=this.radius+2,a.fillText(e,b,c))}return a.closePath()},a.prototype.clear=function(a){return null!=this.last_draw?(a.clearRect(this.last_draw.x-5,this.last_draw.y-5,this.last_draw.w+10,this.last_draw.h+10),this.last_draw=null):void 0},a}()}.call(this),function(){BubbleChart.Point=function(){function a(a,b){this.x=a,this.y=b}return a.prototype.slope=function(a){var b,c;return b=this.y-a.y,c=this.x-a.x,b/c},a.prototype.angle=function(a){return 180*this.rAngle(a)/Math.PI+180},a.prototype.rAngle=function(a){return Math.atan2(this.y-a.y,this.x-a.x)},a.prototype.diff=function(a){return{x:this.x-a.x,y:this.y-a.y}},a.prototype.distance=function(a){var b;return b=this.diff(a),Math.sqrt(b.x*b.x+b.y*b.y)},a}()}.call(this),function(){BubbleChart.Pointer=function(){function a(){var a;this.current=null,this.bubble=null,this.diff=null,this.moving=!1,this.dragging=!1,a=this,this.e_move=function(){var b;return b=null,function(c){return clearTimeout(b),a.current=a.getPosition(c),a.moving=!0,a.grabbingBubble()&&(c.preventDefault(),a.dragging=!0),b=setTimeout(function(){return a.moving=!1},50)}}(),this.e_grab=function(b){return null!=a.bubble?(b.preventDefault(),a.bubble.grabbed=!0,a.diff=a.current.diff(a.bubble.position),a.current=null):void 0},this.e_release=function(b){return a.grabbingBubble()&&(b.preventDefault(),a.bubble.grabbed=!1,a.diff=null,a.dragging||"undefined"!=typeof window&&null!==window&&null!=a.bubble.href&&(window.location.href=a.bubble.href),a.dragging=!1),"mouseout"===b.type?a.current=null:void 0}}return a.prototype.grabbingBubble=function(){return null!=this.bubble&&this.bubble.grabbed},a.prototype.getPixelRatio=function(a){var b;return b=1,null!=window.devicePixelRatio&&a.context.webkitBackingStorePixelRatio<2&&(b=window.devicePixelRatio),b},a.prototype.getPosition=function(){var a,b;return b={},a={},function(c){var d,e,f,g,h;if(d=c.target||c.srcElement,e=d.id,f=this.getPixelRatio(d),null==b[e]||null==a[e])for(b[e]=0,a[e]=0;;)if(b[e]+=d.offsetTop||0,a[e]+=d.offsetLeft||0,d=d.offsetParent,!d)break;return c.touches&&c.touches.length>0?(g=c.touches[0].pageX-a[e],h=c.touches[0].pageY-b[e]):(g=c.pageX-a[e],h=c.pageY-b[e]),new BubbleChart.Point(g*f,h*f)}}(),a}()}.call(this),function(){BubbleChart.Popover=function(){function a(a,b){this.bubble=a,this.fillColor=b.fillColor||"#333",this.textColor=b.textColor||"#fff",this.textFont=b.textFont||"helvetica",this.opacity=b.opacity||.8,this.lineHeight=20,this.last_draw=null}return a.prototype.clear=function(a){return null!=this.last_draw?(a.clearRect(this.last_draw.x,this.last_draw.y,this.last_draw.w,this.last_draw.h),this.last_draw=null):void 0},a.prototype.paint=function(a,b){var c,d,e,f,g,h,i,j;if(null!=a.current)return b.font="17px '"+this.textFont+"'",g=b.measureText(this.bubble.label),i=b.measureText(""+this.bubble.data+" "+this.bubble.metric),h=g.width>i.width?g.width+15:i.width+15,e=a.current.x-14,f=a.current.y-26-2*this.lineHeight,j={x:0,y:0,x2:0,y2:0,x3:0,y3:0},0>f?(f=a.current.y+26,j.y=a.current.y+26,j.y3=j.y-4):(j.y=a.current.y-16,j.y3=a.current.y-10),j.x=a.current.x-8,j.x2=j.x+16,j.y2=j.y,j.x3=j.x2-8,e+h>b.canvas.width&&(e-=e+h-b.canvas.width),b.beginPath(),b.fillStyle=this.fillColor,b.globalAlpha=this.opacity,this.last_draw={x:e,y:f,w:h,h:2*this.lineHeight+10+(j.y3-j.y)+5},b.roundedRect(e,f,h,2*this.lineHeight+10,7),b.moveTo(j.x,j.y),b.lineTo(j.x2,j.y2),b.lineTo(j.x3,j.y3),b.lineTo(j.x,j.y),b.fill(),b.globalAlpha=1,b.fillStyle=this.textColor,b.fillText(this.bubble.label,e+7,f+this.lineHeight),b.font="11px "+this.textFont,c=e+7,d=f+2*this.lineHeight,b.fillText(""+this.bubble.data+" "+this.bubble.metric,c,d),b.closePath()},a}()}.call(this),function(){BubbleChart.Spinner=function(){function a(a){this.context=a,this.running=!1,this.lines=12,this.start_date=null}return a.prototype.start=function(){return this.running=!0,this.start_date=new Date,this.paint()},a.prototype.paint=function(){var a,b,c,d,e=this;for(b=parseInt((new Date-this.start_date)/1e3*this.lines)/this.lines,this.context.save(),this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height),this.context.translate(this.context.canvas.width/2,this.context.canvas.height/2),this.context.rotate(2*Math.PI*b),this.context.scale(.4,.4),a=c=0,d=this.lines;d>=0?d>c:c>d;a=d>=0?++c:--c)this.context.beginPath(),this.context.rotate(2*Math.PI/this.lines),this.context.moveTo(this.context.canvas.width/7,0),this.context.lineTo(this.context.canvas.width/4,0),this.context.lineWidth=this.context.canvas.width/50,this.context.strokeStyle="rgba(0,0,0,"+a/this.lines+")",this.context.stroke();return this.context.restore(),this.running?requestAnimationFrame(function(){return e.paint()}):this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height)},a.prototype.stop=function(){return this.running=!1},a}()}.call(this),function(){CanvasRenderingContext2D.prototype.roundedRect=function(a,b,c,d,e){return 2*e>c&&(e=c/2),2*e>d&&(e=d/2),this.moveTo(a+e,b),this.arcTo(a+c,b,a+c,b+d,e),this.arcTo(a+c,b+d,a,b+d,e),this.arcTo(a,b+d,a,b,e),this.arcTo(a,b,a+c,b,e)},Math.randInt=function(a){return null==a&&(a=100),Math.floor(Math.random()*a)},function(){var a,b,c;for(a=0,c=["webkit","moz"];!window.requestAnimationFrame&&c.length;)b=c.pop(),window.requestAnimationFrame=window[b+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b+"CancelAnimationFrame"]||window[b+"CancelRequestAnimationFrame"];return window.requestAnimationFrame||(window.requestAnimationFrame=function(b){var c,d,e;return c=(new Date).getTime(),e=Math.max(0,16-(c-a)),d=window.setTimeout(function(){return b(c+e)},e),a=c+e,d}),window.cancelAnimationFrame?void 0:window.cancelAnimationFrame=function(a){return clearTimeout(a)}}()}.call(this);

package.json

 {
   "name": "bubblechart",
   "description": "BubbleChart is a JavaScript module for the comparative visualization of two dimensional data in a bubble chart.",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "Apache 2.0",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/jondavidjohn/bubblechart",

README.md

@@ -42,3 +42,2 @@ # BubbleChart
   gutter: 0,            // containment gutter
-  fps: 60,              // The draw rate/speed
   borderColor: "",      // Global Bubble border color
@@ -74,5 +73,55 @@ borderSize: 0,        // Global Bubble border size
   borderSize: 3,
+  img_src: 'http://.../someImage.jpg'
 }
 ```
 
+#### Images
+
+You can provide an image to be centered within the bubble by providing
+a `img_src` property in your data objects.  **Keep in mind the following:**
+
+  - Images are expected to be square, it will try to be smart and crop the
+  image respecting width over height, but providing square images will take
+  the guess work out of it.
+  - Images will be used at full size if the width of the image is less than
+  80% of the bubble diameter.
+  - Bubbles will be sized down to fit no more than 80% of the bubble area
+  - You can specify a `img_area` to adjust the display
+
+Example of a data object with an image covering 60% of the bubble:
+
+```js
+{
+  label: "Name of the thing",
+  data: 10,
+  img_src: 'http://.../image.jpg'
+  img_area: 0.6
+}
+```
+
+#### Loading Spinner
+
+There is a provided Spinner object you can use to show a loading animation if
+loading your custom data is a time consuming process.
+
+Example
+
+```js
+var chart = new BubbleChart({
+  canvasId: "bubblechart",
+  metric: "Kb",
+  usedArea: 0.35,
+  contain: true,
+  popoverOpts: {
+    textFont: "Open Sans",
+  }
+});
+
+chart.spinner.start();
+chart.data = myCustomData();
+chart.reload()
+chart.spinner.stop();
+chart.paint();
+```
+
 ## Requirements
@@ -79,0 +128,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58183

increased by33.42%

Lines of code

695

increased by32.89%

Number of lines in readme file

134

increased by57.65%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes