From 70d78e37428573526a3856df60a758cca649b8db Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils@nilsschneider.net>
Date: Thu, 16 Apr 2015 20:16:14 +0200
Subject: [PATCH] forcegraph: backport client circles from ffmap-d3

---
 CHANGELOG.md      |  1 +
 lib/forcegraph.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ff4e7d..54d3a03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - map: locate user
 - map: adding custom layers from leaflet.providers
 - nodelist: sort by uptime fixed
+- graph: circles for clients
 
 ### Fixed bugs:
 
diff --git a/lib/forcegraph.js b/lib/forcegraph.js
index aa11d59..6189ff9 100644
--- a/lib/forcegraph.js
+++ b/lib/forcegraph.js
@@ -266,6 +266,39 @@ define(["d3"], function (d3) {
                       xExtent[1] - xExtent[0] + 2 * margin,
                       yExtent[1] - yExtent[0] + 2 * margin)
 
+      ctx.beginPath()
+      nodes.filter(visibleNodes).forEach(function (d) {
+        var clients = d.o.node.statistics.clients
+        if (d.clients === 0)
+          return
+
+        var distance = 16
+        var radius = 3
+        var a = 1.2
+        var startAngle = Math.PI
+        var angle = startAngle
+
+        for (var i = 0; i < clients; i++) {
+          if ((angle - startAngle) > 2 * Math.PI) {
+            angle = startAngle
+            distance += 2 * radius * a
+          }
+
+          var x = d.x + distance * Math.cos(angle)
+          var y = d.y + distance * Math.sin(angle)
+
+          ctx.moveTo(x, y)
+          ctx.arc(x, y, radius, 0, 2 * Math.PI)
+
+          var n = Math.floor((Math.PI * distance) / (a * radius))
+          var angleDelta = 2 * Math.PI / n
+          angle += angleDelta
+        }
+      })
+
+      ctx.fillStyle = "#73A7CC"
+      ctx.fill()
+
       if (highlightedLinks.length) {
         ctx.save()
         ctx.lineWidth = 10