Refactored d3 modules to instead of having a common_d3 dir, to use the micro modules instead

app/assets/javascripts/common_d3/index.js

-export {
-  select,
-  selectAll,
-  event,
-} from 'd3-selection';
-
-export {
-  scaleLinear,
-  scaleTime,
-  scaleThreshold,
-} from 'd3-scale';
-
-export {
-  extent,
-  max,
-  bisector,
-} from 'd3-array';
-
-export {
-  timeFormat,
-  timeParse,
-} from 'd3-time-format';
-
-export {
-  line,
-  area,
-  curveLinear,
-} from 'd3-shape';
-
-export {
-  timeMinute,
-} from 'd3-time';
-
-export {
-  axisBottom,
-  axisLeft,
-} from 'd3-axis';
-
-export {
-  brushX,
-} from 'd3-brush';

app/assets/javascripts/graphs/stat_graph_contributors.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, no-shadow */
 
 import _ from 'underscore';
+<<<<<<< HEAD
+=======
+import { timeFormat } from 'd3-time-format';
+>>>>>>> Refactored d3 modules to instead of having a common_d3 dir, to use the micro modules instead
 import { ContributorsGraph, ContributorsAuthorGraph, ContributorsMasterGraph } from './stat_graph_contributors_graph';
 import ContributorsStatGraphUtil from './stat_graph_contributors_util';
 import { n__, s__, createDateTimeFormat, sprintf } from '../locale';
 
+const d3 = { timeFormat };
+
 export default (function() {
   function ContributorsStatGraph() {
     this.dateFormat = createDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' });

app/assets/javascripts/graphs/stat_graph_contributors_graph.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
 import _ from 'underscore';
 import { dateTickFormat } from '../lib/utils/tick_formats';
-import {
-  extent as d3Extent,
-  max as d3Max,
-  select as d3Select,
-  scaleTime as d3ScaleTime,
-  scaleLinear as d3ScaleLinear,
-  axisLeft as d3AxisLeft,
-  axisBottom as d3AxisBottom,
-  area as d3Area,
-  brushX as d3BrushX,
-  timeParse as d3TimeParse,
-  event as d3Event,
-} from '../common_d3/index';
+import { extent, max } from 'd3-array';
+import { select, event as d3Event } from 'd3-selection';
+import { scaleTime, scaleLinear } from 'd3-scale';
+import { axisLeft, axisBottom } from 'd3-axis';
+import { area } from 'd3-shape';
+import { brushX } from 'd3-brush';
+import { timeParse } from 'd3-time-format';
+
+const d3 = { extent, max, select, scaleTime, scaleLinear, axisLeft, axisBottom, area, brushX, timeParse };
 
 const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 const hasProp = {}.hasOwnProperty;
@@ -40,21 +36,21 @@ export const ContributorsGraph = (function() {
 
   ContributorsGraph.set_y_domain = function(data) {
     return ContributorsGraph.prototype.y_domain = [
-      0, d3Max(data, function(d) {
+      0, d3.max(data, function(d) {
         return d.commits = d.commits || d.additions || d.deletions;
       })
     ];
   };
 
   ContributorsGraph.init_x_domain = function(data) {
-    return ContributorsGraph.prototype.x_domain = d3Extent(data, function(d) {
+    return ContributorsGraph.prototype.x_domain = d3.extent(data, function(d) {
       return d.date;
     });
   };
 
   ContributorsGraph.init_y_domain = function(data) {
     return ContributorsGraph.prototype.y_domain = [
-      0, d3Max(data, function(d) {
+      0, d3.max(data, function(d) {
         return d.commits = d.commits || d.additions || d.deletions;
       })
     ];
@@ -83,8 +79,8 @@ export const ContributorsGraph = (function() {
   };
 
   ContributorsGraph.prototype.create_scale = function(width, height) {
-    this.x = d3ScaleTime().range([0, width]).clamp(true);
-    return this.y = d3ScaleLinear().range([height, 0]).nice();
+    this.x = d3.scaleTime().range([0, width]).clamp(true);
+    return this.y = d3.scaleLinear().range([height, 0]).nice();
   };
 
   ContributorsGraph.prototype.draw_x_axis = function() {
@@ -136,7 +132,7 @@ export const ContributorsMasterGraph = (function(superClass) {
 
   ContributorsMasterGraph.prototype.parse_dates = function(data) {
     var parseDate;
-    parseDate = d3TimeParse("%Y-%m-%d");
+    parseDate = d3.timeParse("%Y-%m-%d");
     return data.forEach(function(d) {
       return d.date = parseDate(d.date);
     });
@@ -147,18 +143,18 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.create_axes = function() {
-    this.x_axis = d3AxisBottom()
+    this.x_axis = d3.axisBottom()
       .scale(this.x)
       .tickFormat(dateTickFormat);
-    return this.y_axis = d3AxisLeft().scale(this.y).ticks(5);
+    return this.y_axis = d3.axisLeft().scale(this.y).ticks(5);
   };
 
   ContributorsMasterGraph.prototype.create_svg = function() {
-    return this.svg = d3Select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    return this.svg = d3.select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
   };
 
   ContributorsMasterGraph.prototype.create_area = function(x, y) {
-    return this.area = d3Area().x(function(d) {
+    return this.area = d3.area().x(function(d) {
       return x(d.date);
     }).y0(this.height).y1(function(d) {
       d.commits = d.commits || d.additions || d.deletions;
@@ -167,7 +163,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.create_brush = function() {
-    return this.brush = d3BrushX(this.x).extent([[this.x.range()[0], 0], [this.x.range()[1], this.height]]).on("end", this.update_content);
+    return this.brush = d3.brushX(this.x).extent([[this.x.range()[0], 0], [this.x.range()[1], this.height]]).on("end", this.update_content);
   };
 
   ContributorsMasterGraph.prototype.draw_path = function(data) {
@@ -242,17 +238,17 @@ export const ContributorsAuthorGraph = (function(superClass) {
   };
 
   ContributorsAuthorGraph.prototype.create_axes = function() {
-    this.x_axis = d3AxisBottom()
+    this.x_axis = d3.axisBottom()
       .scale(this.x)
       .ticks(8)
       .tickFormat(dateTickFormat);
-    return this.y_axis = d3AxisLeft().scale(this.y).ticks(5);
+    return this.y_axis = d3.axisLeft().scale(this.y).ticks(5);
   };
 
   ContributorsAuthorGraph.prototype.create_area = function(x, y) {
-    return this.area = d3Area().x(function(d) {
+    return this.area = d3.area().x(function(d) {
       var parseDate;
-      parseDate = d3TimeParse("%Y-%m-%d");
+      parseDate = d3.timeParse("%Y-%m-%d");
       return x(parseDate(d));
     }).y0(this.height).y1((function(_this) {
       return function(d) {
@@ -268,7 +264,7 @@ export const ContributorsAuthorGraph = (function(superClass) {
   ContributorsAuthorGraph.prototype.create_svg = function() {
     var persons = document.querySelectorAll('.person');
     this.list_item = persons[persons.length - 1];
-    return this.svg = d3Select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+    return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
   };
 
   ContributorsAuthorGraph.prototype.draw_path = function(data) {

app/assets/javascripts/monitoring/components/graph.vue

 <script>
-  import {
-    scaleLinear as d3ScaleLinear,
-    scaleTime as d3ScaleTime,
-    axisLeft as d3AxisLeft,
-    axisBottom as d3AxisBottom,
-    max as d3Max,
-    extent as d3Extent,
-    select as d3Select,
-    } from '../../common_d3/index';
+  import { scaleLinear, scaleTime } from 'd3-scale';
+  import { axisLeft, axisBottom } from 'd3-axis';
+  import { max, extent } from 'd3-array';
+  import { select } from 'd3-selection';
   import GraphLegend from './graph/legend.vue';
   import GraphFlag from './graph/flag.vue';
   import GraphDeployment from './graph/deployment.vue';
@@ -19,6 +14,8 @@
   import createTimeSeries from '../utils/multiple_time_series';
   import bp from '../../breakpoints';
 
+  const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select };
+
   export default {
     props: {
       graphData: {
@@ -164,30 +161,30 @@
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
         }
 
-        const axisXScale = d3ScaleTime()
+        const axisXScale = d3.scaleTime()
           .range([0, this.graphWidth - 70]);
-        const axisYScale = d3ScaleLinear()
+        const axisYScale = d3.scaleLinear()
           .range([this.graphHeight - this.graphHeightOffset, 0]);
 
         const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
-        axisXScale.domain(d3Extent(allValues, d => d.time));
-        axisYScale.domain([0, d3Max(allValues.map(d => d.value))]);
+        axisXScale.domain(d3.extent(allValues, d => d.time));
+        axisYScale.domain([0, d3.max(allValues.map(d => d.value))]);
 
-        const xAxis = d3AxisBottom()
+        const xAxis = d3.axisBottom()
           .scale(axisXScale);
 
-        const yAxis = d3AxisLeft()
+        const yAxis = d3.axisLeft()
           .scale(axisYScale)
           .ticks(measurements.yTicks);
 
-        d3Select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
+        d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
 
         const width = this.graphWidth;
-        d3Select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
+        d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
           .selectAll('.tick')
           .each(function createTickLines(d, i) {
             if (i > 0) {
-              d3Select(this).select('line')
+              d3.select(this).select('line')
                 .attr('x2', width)
                 .attr('class', 'axis-tick');
             } // Avoid adding the class to the first tick, to prevent coloring

app/assets/javascripts/monitoring/utils/date_time_formatters.js

-import {
-  timeFormat as d3TimeFormat,
-  bisector } from '../../common_d3/index';
+import { timeFormat as time } from 'd3-time-format';
+import { bisector } from 'd3-array';
 
-export const dateFormat = d3TimeFormat('%b %-d, %Y');
-export const timeFormat = d3TimeFormat('%-I:%M%p');
-export const dateFormatWithName = d3TimeFormat('%a, %b %-d');
+export const dateFormat = time('%b %-d, %Y');
+export const timeFormat = time('%-I:%M%p');
+export const dateFormatWithName = time('%a, %b %-d');
 export const bisectDate = bisector(d => d.time).left;

app/assets/javascripts/monitoring/utils/multiple_time_series.js

 import _ from 'underscore';
-import {
-  scaleLinear as d3ScaleLinear,
-  scaleTime as d3ScaleTime,
-  line as d3Line,
-  area as d3Area,
-  extent as d3Extent,
-  max as d3Max,
-  timeMinute as d3TimeMinute,
-  curveLinear as d3CurveLinear,
-} from '../../common_d3/index';
+import { scaleLinear, scaleTime } from 'd3-scale';
+import { line, area, curveLinear } from 'd3-shape';
+import { extent, max } from 'd3-array';
+import { timeMinute } from 'd3-time';
+
+const d3 = { scaleLinear, scaleTime, line, area, curveLinear, extent, max, timeMinute };
 
 const defaultColorPalette = {
   blue: ['#1f78d1', '#8fbce8'],
@@ -47,27 +43,27 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     let lineColor = '';
     let areaColor = '';
 
-    const timeSeriesScaleX = d3ScaleTime()
+    const timeSeriesScaleX = d3.scaleTime()
       .range([0, graphWidth - 70]);
 
-    const timeSeriesScaleY = d3ScaleLinear()
+    const timeSeriesScaleY = d3.scaleLinear()
       .range([graphHeight - graphHeightOffset, 0]);
 
     timeSeriesScaleX.domain(xDom);
-    timeSeriesScaleX.ticks(d3TimeMinute, 60);
+    timeSeriesScaleX.ticks(d3.timeMinute, 60);
     timeSeriesScaleY.domain(yDom);
 
     const defined = d => !isNaN(d.value) && d.value != null;
 
-    const lineFunction = d3Line()
+    const lineFunction = d3.line()
       .defined(defined)
-      .curve(d3CurveLinear) // d3 v4 uses curbe instead of interpolate
+      .curve(d3.curveLinear) // d3 v4 uses curbe instead of interpolate
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
-    const areaFunction = d3Area()
+    const areaFunction = d3.area()
       .defined(defined)
-      .curve(d3CurveLinear)
+      .curve(d3.curveLinear)
       .x(d => timeSeriesScaleX(d.time))
       .y0(graphHeight - graphHeightOffset)
       .y1(d => timeSeriesScaleY(d.value));
@@ -106,8 +102,8 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
     query.result.reduce((allResults, result) => allResults.concat(result.values), []),
   ), []);
 
-  const xDom = d3Extent(allValues, d => d.time);
-  const yDom = [0, d3Max(allValues.map(d => d.value))];
+  const xDom = d3.extent(allValues, d => d.time);
+  const yDom = [0, d3.max(allValues.map(d => d.value))];
 
   return queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];

app/assets/javascripts/users/activity_calendar.js

 import _ from 'underscore';
-import {
-  select as d3Select,
-  scaleLinear as d3ScaleLinear,
-  scaleThreshold as d3ScaleThreshold,
-} from '../common_d3/index';
+import { scaleLinear, scaleThreshold } from 'd3-scale';
+import { select } from 'd3-selection';
 import { getDayName, getDayDifference } from '../lib/utils/datetime_utility';
 
+const d3 = { select, scaleLinear, scaleThreshold };
+
 const LOADING_HTML = `
   <div class="text-center">
     <i class="fa fa-spinner fa-spin user-calendar-activities-loading"></i>
@@ -32,7 +31,7 @@ function formatTooltipText({ date, count }) {
   return `${contribText}<br />${dateDayName} ${dateText}`;
 }
 
-const initColorKey = () => d3ScaleLinear().range(['#acd5f2', '#254e77']).domain([0, 3]);
+const initColorKey = () => d3.scaleLinear().range(['#acd5f2', '#254e77']).domain([0, 3]);
 
 export default class ActivityCalendar {
   constructor(container, timestamps, calendarActivitiesPath, utcOffset = 0) {
@@ -107,7 +106,7 @@ export default class ActivityCalendar {
 
   renderSvg(container, group) {
     const width = ((group + 1) * this.daySizeWithSpace) + this.getExtraWidthPadding(group);
-    return d3Select(container)
+    return d3.select(container)
       .append('svg')
         .attr('width', width)
         .attr('height', 167)
@@ -209,7 +208,7 @@ export default class ActivityCalendar {
 
   initColor() {
     const colorRange = ['#ededed', this.colorKey(0), this.colorKey(1), this.colorKey(2), this.colorKey(3)];
-    return d3ScaleThreshold().domain([0, 10, 20, 30]).range(colorRange);
+    return d3.scaleThreshold().domain([0, 10, 20, 30]).range(colorRange);
   }
 
   clickDay(stamp) {

config/webpack.config.js

@@ -32,7 +32,7 @@ var config = {
     boards:               './boards/boards_bundle.js',
     common:               './commons/index.js',
     common_vue:           './vue_shared/vue_resource_interceptor.js',
-    common_d3:            './common_d3/index.js',
+    common_d3:            ['d3-selection', 'd3-scale', 'd3-array', 'd3-time-format', 'd3-shape', 'd3-time', 'd3-axis', 'd3-brush'],
     cycle_analytics:      './cycle_analytics/cycle_analytics_bundle.js',
     commit_pipelines:     './commit/pipelines/pipelines_bundle.js',
     deploy_keys:          './deploy_keys/index.js',

spec/javascripts/graphs/stat_graph_contributors_graph_spec.js

 /* eslint-disable quotes, jasmine/no-suite-dupes, vars-on-top, no-var */
-
-import {
-  scaleLinear as d3ScaleLinear,
-  scaleTime as d3ScaleTime,
-  timeParse as d3TimeParse,
-} from '~/common_d3/index';
+import { scaleLinear, scaleTime } from 'd3-scale';
+import { timeParse } from 'd3-time-format';
 import { ContributorsGraph, ContributorsMasterGraph } from '~/graphs/stat_graph_contributors_graph';
 
+const d3 = { scaleLinear, scaleTime, timeParse };
+
 describe("ContributorsGraph", function () {
   describe("#set_x_domain", function () {
     it("set the x_domain", function () {
@@ -57,7 +55,7 @@ describe("ContributorsGraph", function () {
     it("sets the instance's x domain using the prototype's x_domain", function () {
       ContributorsGraph.prototype.x_domain = 20;
       var instance = new ContributorsGraph();
-      instance.x = d3ScaleTime().range([0, 100]).clamp(true);
+      instance.x = d3.scaleTime().range([0, 100]).clamp(true);
       spyOn(instance.x, 'domain');
       instance.set_x_domain();
       expect(instance.x.domain).toHaveBeenCalledWith(20);
@@ -68,7 +66,7 @@ describe("ContributorsGraph", function () {
     it("sets the instance's y domain using the prototype's y_domain", function () {
       ContributorsGraph.prototype.y_domain = 30;
       var instance = new ContributorsGraph();
-      instance.y = d3ScaleLinear().range([100, 0]).nice();
+      instance.y = d3.scaleLinear().range([100, 0]).nice();
       spyOn(instance.y, 'domain');
       instance.set_y_domain();
       expect(instance.y.domain).toHaveBeenCalledWith(30);
@@ -122,7 +120,7 @@ describe("ContributorsMasterGraph", function () {
   describe("#parse_dates", function () {
     it("parses the dates", function () {
       var graph = new ContributorsMasterGraph();
-      var parseDate = d3TimeParse("%Y-%m-%d");
+      var parseDate = d3.timeParse("%Y-%m-%d");
       var data = [{ date: "2013-01-01" }, { date: "2012-12-15" }];
       var correct = [{ date: parseDate(data[0].date) }, { date: parseDate(data[1].date) }];
       graph.parse_dates(data);