From c4383aabb90489777fb630d8f2c00f0d85d65e16 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils@nilsschneider.net>
Date: Thu, 2 Apr 2015 22:07:00 +0200
Subject: [PATCH] make proportions.setData idempotent

---
 app.js             |  5 ++++-
 lib/proportions.js | 35 ++++++++++++++++++++---------------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app.js b/app.js
index aebbce3..1b8f9f9 100644
--- a/app.js
+++ b/app.js
@@ -18,7 +18,10 @@ require.config({
     "tablesort": {
       exports: "Tablesort"
     },
-    "numeral-intl": ["numeral"],
+    "numeral-intl": {
+      deps: ["numeral"],
+      exports: "numeral"
+    },
     "tablesort.numeric": ["tablesort"],
     "helper": ["numeral-intl"]
   }
diff --git a/lib/proportions.js b/lib/proportions.js
index 569f2f6..a0040c6 100644
--- a/lib/proportions.js
+++ b/lib/proportions.js
@@ -1,4 +1,6 @@
-define(["chroma-js"], function (Chroma) {
+define(["chroma-js", "virtual-dom", "numeral-intl"],
+  function (Chroma, V, numeral) {
+
   return function () {
     var self = this
     var fwTable, hwTable, autoTable, gwTable
@@ -23,30 +25,33 @@ define(["chroma-js"], function (Chroma) {
     }
 
     function fillTable(table, data) {
+      if (!table.last)
+        table.last = V.h("table")
+
       var max = 0
       data.forEach(function (d) {
         if (d[1] > max)
           max = d[1]
       })
 
-      data.forEach(function (d) {
+      var items = data.map(function (d) {
         var v = d[1] / max
-        var row = document.createElement("tr")
-        var th = document.createElement("th")
-        var td = document.createElement("td")
-        var span = document.createElement("span")
-        th.textContent = d[0]
-        span.style.width = Math.round(v * 100) + "%"
-        span.style.backgroundColor = scale(v).hex()
         var c1 = Chroma.contrast(scale(v), "white")
         var c2 = Chroma.contrast(scale(v), "black")
-        span.style.color = c1 > c2 ? "white" : "black"
-        span.textContent = d[1]
-        td.appendChild(span)
-        row.appendChild(th)
-        row.appendChild(td)
-        table.appendChild(row)
+
+        var th = V.h("th", d[0])
+        var td = V.h("td", V.h("span", {style: {
+                                         width: Math.round(v * 100) + "%",
+                                         backgroundColor: scale(v).hex(),
+                                         color: c1 > c2 ? "white" : "black"
+                                       }}, numeral(d[1]).format("0,0")))
+
+        return V.h("tr", [th, td])
       })
+
+      var tableNew = V.h("table", items)
+      table = V.patch(table, V.diff(table.last, tableNew))
+      table.last = tableNew
     }
 
     self.setData = function (data) {