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"