From 2ba30096d26174f22851feb8d35f287b8db772e3 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Thu, 23 Nov 2017 15:35:49 -0600 Subject: [PATCH] Modified contributors graph to use d3 v4 --- .../graphs/stat_graph_contributors_graph.js | 50 +++++++++++-------- .../javascripts/users/activity_calendar.js | 12 +++-- .../stat_graph_contributors_graph_spec.js | 12 +++-- 3 files changed, 46 insertions(+), 28 deletions(-) diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js index 187f3c008e8..9fbd0f110fb 100644 --- a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js +++ b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js @@ -1,7 +1,19 @@ /* 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) { diff --git a/app/assets/javascripts/users/activity_calendar.js b/app/assets/javascripts/users/activity_calendar.js index 4fa8c680580..c888c67396a 100644 --- a/app/assets/javascripts/users/activity_calendar.js +++ b/app/assets/javascripts/users/activity_calendar.js @@ -1,5 +1,9 @@ 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}
${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) { diff --git a/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js b/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js index 861f26e162f..c48c587174d 100644 --- a/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js +++ b/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js @@ -1,6 +1,10 @@ /* 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);