kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Modified contributors graph to use d3 v4

This commit is contained in:
Jose Ivan Vargas 2017-11-23 15:35:49 -06:00
parent 36ba5f8272
commit 2ba30096d2
3 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/assets/javascripts/graphs/stat_graph_contributors_graph.js
View File

@ -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) {

12
app/assets/javascripts/users/activity_calendar.js
View File

@ -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}<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) {

12
spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
View File

@ -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);