Merge pull request #1429 from slinto/reduce-d3-size

[Optimization] Reduce D3 dependency size

bower.json

@@ -22,7 +22,6 @@
     "eventemitter3": "^1.2.0",
     "lodash": "3.10.1",
     "almond": "~0.3.2",
-    "d3": "~4.1.0",
     "html2canvas": "^0.4.1"
   }
 }

karma.conf.js

@@ -35,6 +35,7 @@ module.exports = function(config) {
         // By default, files are also included in a script tag.
         files: [
             {pattern: 'bower_components/**/*.js', included: false},
+            {pattern: 'node_modules/d3-*/**/*.js', included: false},
             {pattern: 'src/**/*.js', included: false},
             {pattern: 'example/**/*.js', included: false},
             {pattern: 'example/**/*.json', included: false},

openmct.js

@@ -38,7 +38,16 @@ requirejs.config({
         "uuid": "bower_components/node-uuid/uuid",
         "zepto": "bower_components/zepto/zepto.min",
         "lodash": "bower_components/lodash/lodash",
-        "d3": "bower_components/d3/d3.min"
+        "d3-selection": "node_modules/d3-selection/build/d3-selection.min",
+        "d3-scale": "node_modules/d3-scale/build/d3-scale.min",
+        "d3-axis": "node_modules/d3-axis/build/d3-axis.min",
+        "d3-array": "node_modules/d3-array/build/d3-array.min",
+        "d3-collection": "node_modules/d3-collection/build/d3-collection.min",
+        "d3-color": "node_modules/d3-color/build/d3-color.min",
+        "d3-format": "node_modules/d3-format/build/d3-format.min",
+        "d3-interpolate": "node_modules/d3-interpolate/build/d3-interpolate.min",
+        "d3-time": "node_modules/d3-time/build/d3-time.min",
+        "d3-time-format": "node_modules/d3-time-format/build/d3-time-format.min",
     },
     "shim": {
         "angular": {
@@ -65,8 +74,15 @@ requirejs.config({
         "lodash": {
             "exports": "lodash"
         },
-        "d3": {
+        "d3-selection": {
-            "exports": "d3"
+            "exports": "d3-selection"
+        },
+        "d3-scale": {
+            "deps": ["d3-array", "d3-collection", "d3-color", "d3-format", "d3-interpolate", "d3-time", "d3-time-format"],
+            "exports": "d3-scale"
+        },
+        "d3-axis": {
+            "exports": "d3-axis"
         }
     }
 });

package.json

@@ -3,6 +3,16 @@
   "version": "0.12.1-SNAPSHOT",
   "description": "The Open MCT core platform",
   "dependencies": {
+    "d3-array": "^1.0.2",
+    "d3-axis": "^1.0.4",
+    "d3-collection": "^1.0.2",
+    "d3-color": "^1.0.2",
+    "d3-format": "^1.0.2",
+    "d3-interpolate": "^1.1.3",
+    "d3-scale": "^1.0.4",
+    "d3-selection": "^1.0.3",
+    "d3-time": "^1.0.4",
+    "d3-time-format": "^2.0.3",
     "express": "^4.13.1",
     "minimist": "^1.1.1",
     "request": "^2.69.0"

platform/features/conductor/core/src/ui/ConductorAxisController.js

@@ -22,9 +22,11 @@
 
 define(
     [
-        "d3"
+        "d3-selection",
+        "d3-scale",
+        "d3-axis"
     ],
-    function (d3) {
+    function (d3Selection, d3Scale, d3Axis) {
         var PADDING = 1;
 
         /**
@@ -70,12 +72,12 @@ define(
         ConductorAxisController.prototype.initialize = function (element) {
             this.target = element[0].firstChild;
             var height = this.target.offsetHeight;
-            var vis = d3.select(this.target)
+            var vis = d3Selection.select(this.target)
                 .append("svg:svg")
                 .attr("width", "100%")
                 .attr("height", height);
 
-            this.xAxis = d3.axisTop();
+            this.xAxis = d3Axis.axisTop();
 
             // draw x axis with labels and move to the bottom of the chart area
             this.axisElement = vis.append("g")
@@ -115,10 +117,10 @@ define(
             var bounds = this.bounds;
 
             if (timeSystem.isUTCBased()) {
-                this.xScale = this.xScale || d3.scaleUtc();
+                this.xScale = this.xScale || d3Scale.scaleUtc();
                 this.xScale.domain([new Date(bounds.start), new Date(bounds.end)]);
             } else {
-                this.xScale = this.xScale || d3.scaleLinear();
+                this.xScale = this.xScale || d3Scale.scaleLinear();
                 this.xScale.domain([bounds.start, bounds.end]);
             }
 
@@ -145,9 +147,9 @@ define(
                 //The D3 scale used depends on the type of time system as d3
                 // supports UTC out of the box.
                 if (timeSystem.isUTCBased()) {
-                    this.xScale = d3.scaleUtc();
+                    this.xScale = d3Scale.scaleUtc();
                 } else {
-                    this.xScale = d3.scaleLinear();
+                    this.xScale = d3Scale.scaleLinear();
                 }
 
                 this.xAxis.scale(this.xScale);

platform/features/conductor/core/src/ui/ConductorAxisControllerSpec.js

@@ -23,11 +23,13 @@
 define([
     './ConductorAxisController',
     'zepto',
-    'd3'
+    'd3-selection',
+    'd3-scale'
 ], function (
     ConductorAxisController,
     $,
-    d3
+    d3Selection,
+    d3Scale
 ) {
     describe("The ConductorAxisController", function () {
         var controller,
@@ -84,8 +86,8 @@ define([
                 "emit"
             ]);
 
-            spyOn(d3, 'scaleUtc').andCallThrough();
+            spyOn(d3Scale, 'scaleUtc').andCallThrough();
-            spyOn(d3, 'scaleLinear').andCallThrough();
+            spyOn(d3Scale, 'scaleLinear').andCallThrough();
 
             element = $('<div style="width: 100px;"><div style="width: 100%;"></div></div>');
             $(document).find('body').append(element);
@@ -122,15 +124,15 @@ define([
                 mockTimeSystem.isUTCBased.andReturn(true);
                 controller.changeTimeSystem(mockTimeSystem);
 
-                expect(d3.scaleUtc).toHaveBeenCalled();
+                expect(d3Scale.scaleUtc).toHaveBeenCalled();
-                expect(d3.scaleLinear).not.toHaveBeenCalled();
+                expect(d3Scale.scaleLinear).not.toHaveBeenCalled();
             });
 
             it("uses a linear scale for non-UTC time systems", function () {
                 mockTimeSystem.isUTCBased.andReturn(false);
                 controller.changeTimeSystem(mockTimeSystem);
-                expect(d3.scaleLinear).toHaveBeenCalled();
+                expect(d3Scale.scaleLinear).toHaveBeenCalled();
-                expect(d3.scaleUtc).not.toHaveBeenCalled();
+                expect(d3Scale.scaleUtc).not.toHaveBeenCalled();
             });
 
             it("sets axis domain to time conductor bounds", function () {

test-main.js

@@ -64,7 +64,16 @@ requirejs.config({
         "uuid": "bower_components/node-uuid/uuid",
         "zepto": "bower_components/zepto/zepto.min",
         "lodash": "bower_components/lodash/lodash",
-        "d3": "bower_components/d3/d3.min"
+        "d3-selection": "node_modules/d3-selection/build/d3-selection.min",
+        "d3-scale": "node_modules/d3-scale/build/d3-scale.min",
+        "d3-axis": "node_modules/d3-axis/build/d3-axis.min",
+        "d3-array": "node_modules/d3-array/build/d3-array.min",
+        "d3-collection": "node_modules/d3-collection/build/d3-collection.min",
+        "d3-color": "node_modules/d3-color/build/d3-color.min",
+        "d3-format": "node_modules/d3-format/build/d3-format.min",
+        "d3-interpolate": "node_modules/d3-interpolate/build/d3-interpolate.min",
+        "d3-time": "node_modules/d3-time/build/d3-time.min",
+        "d3-time-format": "node_modules/d3-time-format/build/d3-time-format.min"
     },
 
     "shim": {
@@ -89,8 +98,15 @@ requirejs.config({
         "lodash": {
             "exports": "lodash"
         },
-        "d3": {
+        "d3-selection": {
-            "exports": "d3"
+            "exports": "d3-selection"
+        },
+        "d3-scale": {
+            "deps": ["d3-array", "d3-collection", "d3-color", "d3-format", "d3-interpolate", "d3-time", "d3-time-format"],
+            "exports": "d3-scale"
+        },
+        "d3-axis": {
+            "exports": "d3-axis"
         }
     },