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) {