Implemented round function as a replacement for d3.round

Removed d3 from vendors

client/app/scripts/charts/edge-container.js

@@ -5,6 +5,7 @@ import { Motion, spring } from 'react-motion';
 import { Map as makeMap } from 'immutable';
 import { line, curveBasis } from 'd3-shape';
 
+import { round } from '../utils/math-utils';
 import Edge from './edge';
 
 const animConfig = [80, 20]; // stiffness, damping
@@ -23,7 +24,7 @@ const buildPath = (points, layoutPrecision) => {
     if (!extracted[index]) {
       extracted[index] = {};
     }
-    extracted[index][axis] = Math.round(value, layoutPrecision);
+    extracted[index][axis] = round(value, layoutPrecision);
   });
   return extracted;
 };

client/app/scripts/charts/node-container.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Motion, spring } from 'react-motion';
 
+import { round } from '../utils/math-utils';
 import Node from './node';
 
 class NodeContainer extends React.Component {
@@ -19,8 +20,8 @@ class NodeContainer extends React.Component {
         f: spring(scaleFactor, animConfig)
       }}>
         {interpolated => {
-          const transform = `translate(${Math.round(interpolated.x, -layoutPrecision)},`
-            + `${Math.round(interpolated.y, -layoutPrecision)})`;
+          const transform = `translate(${round(interpolated.x, layoutPrecision)},`
+            + `${round(interpolated.y, layoutPrecision)})`;
           return <Node {...other} transform={transform} scaleFactor={interpolated.f} />;
         }}
       </Motion>

client/app/scripts/charts/nodes-chart.js

@@ -375,7 +375,6 @@ class NodesChart extends React.Component {
   }
 
   zoomed() {
-    // debug('zoomed', d3Event.transform);
     this.isZooming = true;
     // dont pan while node is selected
     if (!this.props.selectedNodeId) {
@@ -388,13 +387,10 @@ class NodesChart extends React.Component {
     }
   }
 
-  setZoom(zoom) {
-    this.svg.call(
-      this.zoom.transform,
-      zoomIdentity
-        .scale(zoom.scale)
-        .translate(zoom.panTranslateX, zoom.panTranslateY)
-    );
+  setZoom(newZoom) {
+    this.svg.call(this.zoom.transform, zoomIdentity
+      .translate(newZoom.panTranslateX, newZoom.panTranslateY)
+      .scale(newZoom.scale));
   }
 }
 

client/app/scripts/components/sparkline.js

@@ -6,6 +6,7 @@ import { line, curveLinear } from 'd3-shape';
 import { scaleLinear } from 'd3-scale';
 
 import { formatMetricSvg } from '../utils/string-utils';
+import { round } from '../utils/math-utils';
 
 
 export default class Sparkline extends React.Component {
@@ -63,7 +64,7 @@ export default class Sparkline extends React.Component {
     const min = formatMetricSvg(d3Min(data, d => d.value), this.props);
     const max = formatMetricSvg(d3Max(data, d => d.value), this.props);
     const mean = formatMetricSvg(d3Mean(data, d => d.value), this.props);
-    const title = `Last ${Math.round((lastDate - firstDate) / 1000)} seconds, ` +
+    const title = `Last ${round((lastDate - firstDate) / 1000)} seconds, ` +
       `${data.length} samples, min: ${min}, max: ${max}, mean: ${mean}`;
 
     return {title, lastX, lastY, data};

client/app/scripts/hoc/metric-feeder.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { isoParse as parseDate } from 'd3-time-format';
 import { OrderedMap } from 'immutable';
 
+import { round } from '../utils/math-utils';
+
 const makeOrderedMap = OrderedMap;
 const sortDate = (v, d) => d;
 const DEFAULT_TICK_INTERVAL = 1000; // DEFAULT_TICK_INTERVAL + renderTime < 1000ms
@@ -102,7 +104,7 @@ export default ComposedComponent => class extends React.Component {
         let lastIndex = bufferKeys.indexOf(movingLast);
 
         // speed up the window if it falls behind
-        const step = lastIndex > 0 ? Math.round(buffer.size / lastIndex) : 1;
+        const step = lastIndex > 0 ? round(buffer.size / lastIndex) : 1;
 
         // only move first if we have enough values in window
         const windowLength = lastIndex - firstIndex;

client/app/scripts/utils/__tests__/math-utils-test.js

@@ -0,0 +1,39 @@
+
+describe('MathUtils', () => {
+  const MathUtils = require('../math-utils');
+
+  describe('module', () => {
+    const f = MathUtils.modulo;
+
+    it('it should calculate the modulo (also for negatives)', () => {
+      expect(f(5, 5)).toBe(0);
+      expect(f(4, 5)).toBe(4);
+      expect(f(3, 5)).toBe(3);
+      expect(f(2, 5)).toBe(2);
+      expect(f(1, 5)).toBe(1);
+      expect(f(0, 5)).toBe(0);
+      expect(f(-1, 5)).toBe(4);
+      expect(f(-2, 5)).toBe(3);
+      expect(f(-3, 5)).toBe(2);
+      expect(f(-4, 5)).toBe(1);
+      expect(f(-5, 5)).toBe(0);
+    });
+  });
+
+  describe('round', () => {
+    const f = MathUtils.round;
+
+    it('it should round the decimal number to given precision', () => {
+      expect(f(-173.6499023, -2)).toBe(-200);
+      expect(f(-173.6499023, -1)).toBe(-170);
+      expect(f(-173.6499023, 0)).toBe(-174);
+      expect(f(-173.6499023)).toBe(-174);
+      expect(f(-173.6499023, 1)).toBe(-173.6);
+      expect(f(-173.6499023, 2)).toBe(-173.65);
+      expect(f(0.0013, 2)).toBe(0);
+      expect(f(0.0013, 3)).toBe(0.001);
+      expect(f(0.0013, 4)).toBe(0.0013);
+      expect(f(0.0013, 5)).toBe(0.0013);
+    });
+  });
+});

client/app/scripts/utils/math-utils.js

@@ -11,7 +11,6 @@
 // modulo(0, 5) => 0
 // modulo(-1, 5) => 4
 // modulo(-2, 5) => 3
-// modulo(-2, 5) => 3
 // modulo(-3, 5) => 2
 // modulo(-4, 5) => 1
 // modulo(-5, 5) => 0
@@ -20,3 +19,9 @@ export function modulo(i, n) {
   return ((i % n) + n) % n;
 }
 
+// Does the same that the deprecated d3.round was doing.
+// Possibly imprecise: This https://github.com/d3/d3/issues/210
+export function round(value, decimals = 0) {
+  const p = Math.pow(10, decimals);
+  return Math.round(value * p) / p;
+}

client/webpack.local.config.js

@@ -49,7 +49,7 @@ module.exports = {
       'webpack/hot/only-dev-server',
       './app/scripts/terminal-main',
     ],
-    vendors: ['babel-polyfill', 'classnames', 'd3', 'dagre', 'filesize', 'immutable', 'lodash',
+    vendors: ['babel-polyfill', 'classnames', 'dagre', 'filesize', 'immutable', 'lodash',
       'moment', 'page', 'react', 'react-dom', 'react-motion', 'react-redux', 'redux',
       'redux-thunk', 'reqwest', 'xterm']
   },

client/webpack.production.config.js

@@ -34,7 +34,7 @@ module.exports = {
     'contrast-app': './app/scripts/contrast-main',
     'terminal-app': './app/scripts/terminal-main',
     // keep only some in here, to make vendors and app bundles roughly same size
-    vendors: ['babel-polyfill', 'classnames', 'd3', 'immutable',
+    vendors: ['babel-polyfill', 'classnames', 'immutable',
       'lodash', 'react', 'react-dom', 'react-redux',
       'redux', 'redux-thunk']
   },