summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJose Ivan Vargas <jvargas@gitlab.com>2017-11-28 13:33:17 -0600
committerJose Ivan Vargas <jvargas@gitlab.com>2017-12-18 16:15:17 -0600
commit4e0e2fd9d297319f323b987944b58bfd3a14ba58 (patch)
tree68d45e533737ebbc18c19bc8778e8519ea10cec3
parent2d4d1290f0ab7baad94af93904c1a3c81fddfe37 (diff)
downloadgitlab-ce-4e0e2fd9d297319f323b987944b58bfd3a14ba58.tar.gz
Refactored d3 modules to instead of having a common_d3 dir, to use the micro modules instead
-rw-r--r--app/assets/javascripts/common_d3/index.js41
-rw-r--r--app/assets/javascripts/graphs/stat_graph_contributors.js6
-rw-r--r--app/assets/javascripts/graphs/stat_graph_contributors_graph.js54
-rw-r--r--app/assets/javascripts/monitoring/components/graph.vue33
-rw-r--r--app/assets/javascripts/monitoring/utils/date_time_formatters.js11
-rw-r--r--app/assets/javascripts/monitoring/utils/multiple_time_series.js34
-rw-r--r--app/assets/javascripts/users/activity_calendar.js15
-rw-r--r--config/webpack.config.js2
-rw-r--r--spec/javascripts/graphs/stat_graph_contributors_graph_spec.js16
9 files changed, 81 insertions, 131 deletions
diff --git a/app/assets/javascripts/common_d3/index.js b/app/assets/javascripts/common_d3/index.js
deleted file mode 100644
index 9087c5eb597..00000000000
--- a/app/assets/javascripts/common_d3/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-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';
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors.js b/app/assets/javascripts/graphs/stat_graph_contributors.js
index 151a4ce012c..6170a897a2f 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors.js
@@ -1,10 +1,16 @@
/* 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' });
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
index f13990ebedd..38406aa6574 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
@@ -1,19 +1,15 @@
/* 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) {
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index b767c6957a6..dbc778310f3 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -1,13 +1,8 @@
<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
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
index 66f826a0e12..53d0e2916a0 100644
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -1,8 +1,7 @@
-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;
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index 5161a0ffe67..4ce3dad440c 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -1,14 +1,10 @@
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];
diff --git a/app/assets/javascripts/users/activity_calendar.js b/app/assets/javascripts/users/activity_calendar.js
index 9f25803e2f3..0581239d5a5 100644
--- a/app/assets/javascripts/users/activity_calendar.js
+++ b/app/assets/javascripts/users/activity_calendar.js
@@ -1,11 +1,10 @@
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) {
diff --git a/config/webpack.config.js b/config/webpack.config.js
index e607043b309..bca27b0a41b 100644
--- a/config/webpack.config.js
+++ b/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',
diff --git a/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js b/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
index ead674b7735..6599839a526 100644
--- a/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
+++ b/spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
@@ -1,12 +1,10 @@
/* 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);