Modified contributors graph to use d3 v4

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 d3 from 'd3';
 import { dateTickFormat } from '../lib/utils/tick_formats';
+import {
+  extent as d3Extent,
+  max as d3Max,
+  select as d3Select,
+  selectAll as d3SelectAll,
+  scaleTime as d3ScaleTime,
+  scaleLinear as d3ScaleLinear,
+  axisLeft as d3AxisLeft,
+  axisBottom as d3AxisBottom,
+  area as d3Area,
+  brush as d3Brush,
+  timeParse as d3TimeParse,
+} from 'd3';
 
 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;
@@ -28,21 +40,21 @@ export const ContributorsGraph = (function() {
 
   ContributorsGraph.set_y_domain = function(data) {
     return ContributorsGraph.prototype.y_domain = [
-      0, d3.max(data, function(d) {
+      0, d3Max(data, function(d) {
         return d.commits = d.commits || d.additions || d.deletions;
       })
     ];
   };
 
   ContributorsGraph.init_x_domain = function(data) {
-    return ContributorsGraph.prototype.x_domain = d3.extent(data, function(d) {
+    return ContributorsGraph.prototype.x_domain = d3Extent(data, function(d) {
       return d.date;
     });
   };
 
   ContributorsGraph.init_y_domain = function(data) {
     return ContributorsGraph.prototype.y_domain = [
-      0, d3.max(data, function(d) {
+      0, d3Max(data, function(d) {
         return d.commits = d.commits || d.additions || d.deletions;
       })
     ];
@@ -71,8 +83,8 @@ export const ContributorsGraph = (function() {
   };
 
   ContributorsGraph.prototype.create_scale = function(width, height) {
-    this.x = d3.time.scale().range([0, width]).clamp(true);
-    return this.y = d3.scale.linear().range([height, 0]).nice();
+    this.x = d3ScaleTime().range([0, width]).clamp(true);
+    return this.y = d3ScaleLinear().range([height, 0]).nice();
   };
 
   ContributorsGraph.prototype.draw_x_axis = function() {
@@ -124,7 +136,7 @@ export const ContributorsMasterGraph = (function(superClass) {
 
   ContributorsMasterGraph.prototype.parse_dates = function(data) {
     var parseDate;
-    parseDate = d3.time.format("%Y-%m-%d").parse;
+    parseDate = d3TimeParse("%Y-%m-%d");
     return data.forEach(function(d) {
       return d.date = parseDate(d.date);
     });
@@ -135,19 +147,18 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.create_axes = function() {
-    this.x_axis = d3.svg.axis()
+    this.x_axis = d3AxisBottom()
       .scale(this.x)
-      .orient('bottom')
       .tickFormat(dateTickFormat);
-    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+    return this.y_axis = d3AxisLeft().scale(this.y).ticks(5);
   };
 
   ContributorsMasterGraph.prototype.create_svg = function() {
-    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 + ")");
+    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 + ")");
   };
 
   ContributorsMasterGraph.prototype.create_area = function(x, y) {
-    return this.area = d3.svg.area().x(function(d) {
+    return this.area = d3Area().x(function(d) {
       return x(d.date);
     }).y0(this.height).y1(function(d) {
       d.commits = d.commits || d.additions || d.deletions;
@@ -156,7 +167,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.create_brush = function() {
-    return this.brush = d3.svg.brush().x(this.x).on("brushend", this.update_content);
+    return this.brush = d3Brush().x(this.x).on("brushend", this.update_content);
   };
 
   ContributorsMasterGraph.prototype.draw_path = function(data) {
@@ -226,18 +237,17 @@ export const ContributorsAuthorGraph = (function(superClass) {
   };
 
   ContributorsAuthorGraph.prototype.create_axes = function() {
-    this.x_axis = d3.svg.axis()
+    this.x_axis = d3AxisBottom()
       .scale(this.x)
-      .orient('bottom')
       .ticks(8)
       .tickFormat(dateTickFormat);
-    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+    return this.y_axis = d3AxisLeft().scale(this.y).ticks(5);
   };
 
   ContributorsAuthorGraph.prototype.create_area = function(x, y) {
-    return this.area = d3.svg.area().x(function(d) {
+    return this.area = d3Area().x(function(d) {
       var parseDate;
-      parseDate = d3.time.format("%Y-%m-%d").parse;
+      parseDate = d3TimeParse("%Y-%m-%d");
       return x(parseDate(d));
     }).y0(this.height).y1((function(_this) {
       return function(d) {
@@ -251,8 +261,8 @@ export const ContributorsAuthorGraph = (function(superClass) {
   };
 
   ContributorsAuthorGraph.prototype.create_svg = function() {
-    this.list_item = d3.selectAll(".person")[0].pop();
-    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 + ")");
+    this.list_item = d3SelectAll(".person")[0].pop();
+    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 + ")");
   };
 
   ContributorsAuthorGraph.prototype.draw_path = function(data) {

app/assets/javascripts/users/activity_calendar.js

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

spec/javascripts/graphs/stat_graph_contributors_graph_spec.js

 /* eslint-disable quotes, jasmine/no-suite-dupes, vars-on-top, no-var */
 
-import d3 from 'd3';
+import {
+  scaleLinear as d3ScaleLinear,
+  scaleTime as d3ScaleTime,
+  timeParse as d3TimeParse,
+} from 'd3';
 import { ContributorsGraph, ContributorsMasterGraph } from '~/graphs/stat_graph_contributors_graph';
 
 describe("ContributorsGraph", function () {
@@ -53,7 +57,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 = d3.time.scale().range([0, 100]).clamp(true);
+      instance.x = d3ScaleTime().range([0, 100]).clamp(true);
       spyOn(instance.x, 'domain');
       instance.set_x_domain();
       expect(instance.x.domain).toHaveBeenCalledWith(20);
@@ -64,7 +68,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 = d3.scale.linear().range([100, 0]).nice();
+      instance.y = d3ScaleLinear().range([100, 0]).nice();
       spyOn(instance.y, 'domain');
       instance.set_y_domain();
       expect(instance.y.domain).toHaveBeenCalledWith(30);
@@ -118,7 +122,7 @@ describe("ContributorsMasterGraph", function () {
   describe("#parse_dates", function () {
     it("parses the dates", function () {
       var graph = new ContributorsMasterGraph();
-      var parseDate = d3.time.format("%Y-%m-%d").parse;
+      var parseDate = d3TimeParse("%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);