From ced03814e1b2f45241239f95fee8d985df0fa197 Mon Sep 17 00:00:00 2001
From: Xaver Maierhofer <xaver.maierhofer@xwissen.info>
Date: Fri, 10 Mar 2017 00:53:23 +0100
Subject: [PATCH] [TASK] Replace chroma-js with d3
---
README.md | 2 +-
app.js | 7 ++-----
lib/forcegraph.js | 2 +-
lib/gui.js | 6 +++---
lib/infobox/node.js | 8 ++++----
lib/linklist.js | 2 +-
lib/map.js | 2 +-
lib/proportions.js | 12 +++++-------
package.json | 1 -
scss/night.scss | 7 -------
yarn.lock | 4 ----
11 files changed, 18 insertions(+), 35 deletions(-)
diff --git a/README.md b/README.md
index 8937220..fd25852 100644
--- a/README.md
+++ b/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
diff --git a/app.js b/app.js
index 3ac0f91..9b13e40 100644
--- a/app.js
+++ b/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']
}
});
diff --git a/lib/forcegraph.js b/lib/forcegraph.js
index e5aadee..beaf9d2 100644
--- a/lib/forcegraph.js
+++ b/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;
});
diff --git a/lib/gui.js b/lib/gui.js
index 3f89245..a4f4b64 100644
--- a/lib/gui.js
+++ b/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');
diff --git a/lib/infobox/node.js b/lib/infobox/node.js
index 8f6819a..6bd94c4 100644
--- a/lib/infobox/node.js
+++ b/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]);
diff --git a/lib/linklist.js b/lib/linklist.js
index 88dfc32..4f97974 100644
--- a/lib/linklist.js
+++ b/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]);
diff --git a/lib/map.js b/lib/map.js
index e37101d..0b3c8ac 100644
--- a/lib/map.js
+++ b/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'
diff --git a/lib/proportions.js b/lib/proportions.js
index d984f03..d5a80ea 100644
--- a/lib/proportions.js
+++ b/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)));
diff --git a/package.json b/package.json
index cdc169c..f2a3384 100644
--- a/package.json
+++ b/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",
diff --git a/scss/night.scss b/scss/night.scss
index 11a2d27..b03c3a7 100644
--- a/scss/night.scss
+++ b/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);
diff --git a/yarn.lock b/yarn.lock
index 48cf2c3..4ba6f5f 100644
--- a/yarn.lock
+++ b/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"
--
GitLab