[TASK] Replace chroma-js with d3

README.md

@@ -22,7 +22,7 @@ _Some similar features might have been implemented/merged_
   - css and some js moved inline
 - Yarn/npm in favour of bower
   - Load only moment.js without languages (Languages are included in translations)
-  - unneeded components removed (es6-shim, tablesort, numeraljs, leaflet-providers, jshashes)
+  - unneeded components removed (es6-shim, tablesort, numeraljs, leaflet-providers, jshashes, chroma-js)
 - RBush v2 - performance boost in last versions (positions, labels and clients on the map)
 - Ruby dependency removed
 - FixedCenter is required

app.js

@@ -12,7 +12,6 @@ require.config({
     'polyglot': '../node_modules/node-polyglot/build/polyglot',
     'leaflet': '../node_modules/leaflet/dist/leaflet',
     'leaflet.label': '../node_modules/leaflet-label/dist/leaflet.label',
-    'chroma-js': '../node_modules/chroma-js/chroma.min',
     'moment': '../node_modules/moment/moment',
     // d3 modules indirect dependencies
     // by d3-zoom: d3-drag
@@ -40,10 +39,8 @@ require.config({
     'leaflet.label': ['leaflet'],
     'd3-drag': ['d3-selection'],
     'd3-force': ['d3-collection', 'd3-dispatch', 'd3-quadtree', 'd3-timer'],
-    'd3-zoom': ['d3-drag', 'd3-ease', 'd3-transition', 'd3-color', 'd3-interpolate'],
-    'tablesort': {
-      exports: 'Tablesort'
-    }
+    'd3-interpolate': ['d3-color'],
+    'd3-zoom': ['d3-drag', 'd3-ease', 'd3-transition', 'd3-interpolate']
   }
 });
 

lib/forcegraph.js

@@ -180,7 +180,7 @@ define(['d3-selection', 'd3-force', 'd3-zoom', 'd3-drag', 'utils/math', 'forcegr
           e.o = d;
           e.source = dictNodes[d.source.id];
           e.target = dictNodes[d.target.id];
-          e.color = linkScale(d.tq).hex();
+          e.color = linkScale(1 / d.tq);
 
           return e;
         });

lib/gui.js

@@ -1,8 +1,8 @@
-define(['chroma-js', 'map', 'sidebar', 'tabs', 'container', 'legend',
+define(['d3-interpolate', 'map', 'sidebar', 'tabs', 'container', 'legend',
   'linklist', 'nodelist', 'simplenodelist', 'infobox/main',
   'proportions', 'forcegraph', 'title', 'about', 'datadistributor',
   'filters/filtergui', 'filters/hostname'],
-  function (chroma, Map, Sidebar, Tabs, Container, Legend, Linklist,
+  function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist,
             Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
             Title, About, DataDistributor, FilterGUI, HostnameFilter) {
     'use strict';
@@ -12,7 +12,7 @@ define(['chroma-js', 'map', 'sidebar', 'tabs', 'container', 'legend',
       var content;
       var contentDiv;
 
-      var linkScale = chroma.scale(chroma.bezier(['#04C714', '#FF5500', '#F02311'])).domain([1, 5]);
+      var linkScale = d3Interpolate.interpolate('#F02311', '#04C714');
       var sidebar;
 
       var buttons = document.createElement('div');

lib/infobox/node.js

@@ -1,5 +1,5 @@
-define(['sorttable', 'virtual-dom', 'chroma-js', 'moment', 'helper'],
-  function (SortTable, V, chroma, moment, helper) {
+define(['sorttable', 'virtual-dom', 'd3-interpolate', 'moment', 'helper'],
+  function (SortTable, V, d3Interpolate, moment, helper) {
     'use strict';
 
     function showGeoURI(d) {
@@ -178,7 +178,7 @@ define(['sorttable', 'virtual-dom', 'chroma-js', 'moment', 'helper'],
     }
 
     return function (config, el, router, d) {
-      var linkScale = chroma.scale(chroma.bezier(['#04C714', '#FF5500', '#F02311'])).domain([1, 5]);
+      var linkScale = d3Interpolate.interpolate('#F02311', '#04C714');
 
       function renderNeighbourRow(n) {
         var icons = [];
@@ -199,7 +199,7 @@ define(['sorttable', 'virtual-dom', 'chroma-js', 'moment', 'helper'],
         var td1 = V.h('td', icons);
         var td2 = V.h('td', name);
         var td3 = V.h('td', (n.node.statistics.clients ? n.node.statistics.clients.toString() : '0'));
-        var td4 = V.h('td', { style: { color: linkScale(n.link.tq).hex() } }, helper.showTq(n.link));
+        var td4 = V.h('td', { style: { color: linkScale(1 / n.link.tq) } }, helper.showTq(n.link));
         var td5 = V.h('td', helper.showDistance(n.link));
 
         return V.h('tr', [td1, td2, td3, td4, td5]);

lib/linklist.js

@@ -36,7 +36,7 @@ define(['sorttable', 'virtual-dom', 'helper'], function (SortTable, V, helper) {
       var td1Content = [V.h('a', { href: router.getUrl({ l: d.id }), onclick: router.link(d) }, linkName(d))];
 
       var td1 = V.h('td', td1Content);
-      var td2 = V.h('td', { style: { color: linkScale(d.tq).hex() } }, helper.showTq(d));
+      var td2 = V.h('td', { style: { color: linkScale(1 / d.tq) } }, helper.showTq(d));
       var td3 = V.h('td', helper.showDistance(d));
 
       return V.h('tr', [td1, td2, td3]);

lib/map.js

@@ -93,7 +93,7 @@ define(['map/clientlayer', 'map/labelslayer',
 
       return graph.map(function (d) {
         var opts = {
-          color: d.type === 'Kabel' ? '#50B0F0' : linkScale(d.tq).hex(),
+          color: d.type === 'Kabel' ? '#50B0F0' : linkScale(1 / d.tq),
           weight: 4,
           opacity: 0.5,
           dashArray: 'none'

lib/proportions.js

@@ -1,10 +1,10 @@
-define(['chroma-js', 'virtual-dom', 'filters/genericnode', 'helper'],
-  function (Chroma, V, Filter, helper) {
+define(['d3-interpolate', 'virtual-dom', 'filters/genericnode', 'helper'],
+  function (d3Interpolate, V, Filter, helper) {
     'use strict';
 
     return function (config, filterManager) {
       var self = this;
-      var scale = Chroma.scale('YlGnBu').mode('lab');
+      var scale = d3Interpolate.interpolate('#770038', '#dc0067');
 
       var statusTable = document.createElement('table');
       statusTable.classList.add('proportion');
@@ -58,8 +58,6 @@ define(['chroma-js', 'virtual-dom', 'filters/genericnode', 'helper'],
 
         var items = data.map(function (d) {
           var v = d[1] / max;
-          var c1 = Chroma.contrast(scale(v), 'white');
-          var c2 = Chroma.contrast(scale(v), 'black');
 
           var filter = new Filter(_.t(name), d[2], d[0], d[3]);
 
@@ -69,8 +67,8 @@ define(['chroma-js', 'virtual-dom', 'filters/genericnode', 'helper'],
           var td = V.h('td', V.h('span', {
             style: {
               width: Math.round(v * 100) + '%',
-              backgroundColor: scale(v).hex(),
-              color: c1 > c2 ? 'white' : 'black'
+              backgroundColor: scale(v),
+              color: 'white'
             }
           }, d[1].toFixed(0)));
 

package.json

@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "almond": "^0.3.3",
-    "chroma-js": "^1.2.1",
     "d3-drag": "^1.0.3",
     "d3-force": "^1.0.5",
     "d3-selection": "^1.0.4",

scss/night.scss

@@ -77,13 +77,6 @@ html {
     }
   }
 
-  //@import 'modules/proportion';
-  .proportion {
-    span {
-      filter: invert(100%);
-    }
-  }
-
   //@import 'modules/tabs';
   .tabs {
     background: transparentize($color-black, .98);

yarn.lock

@@ -527,10 +527,6 @@ chokidar@1.6.1:
   optionalDependencies:
     fsevents "^1.0.0"
 
-chroma-js@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.2.2.tgz#4171ae7c468dae7380853239fa109cbbe266d5ee"
-
 circular-json@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"