BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 4e0e2fd9 by Jose Ivan Vargas
Options

Refactored d3 modules to instead of having a common_d3 dir, to use the micro modules instead

parent 2d4d1290
Showing with 81 additions and 131 deletions
app/assets/javascripts/common_d3/index.js deleted 100644 → 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';
app/assets/javascripts/graphs/stat_graph_contributors.js
/* 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' });
......
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 { 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) {
......
app/assets/javascripts/monitoring/components/graph.vue
<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
......
app/assets/javascripts/monitoring/utils/date_time_formatters.js
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;
app/assets/javascripts/monitoring/utils/multiple_time_series.js
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];
......
app/assets/javascripts/users/activity_calendar.js
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) {
......
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',
......
spec/javascripts/graphs/stat_graph_contributors_graph_spec.js
/* 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);
......
Markdown is supported
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