Skip to content
Snippets Groups Projects
Commit 2ba30096 authored by Jose Ivan Vargas Lopez's avatar Jose Ivan Vargas Lopez
Browse files

Modified contributors graph to use d3 v4

parent 36ba5f82
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/assets/javascripts/graphs/stat_graph_contributors_graph.js
+ 30
− 20
View file @ 2ba30096
/* 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
+ 8
− 4
View file @ 2ba30096
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
+ 8
− 4
View file @ 2ba30096
/* 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);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment