Skip to content

G
gitlab-foss

李少辉-开发者 / gitlab-foss

通知 15
Star 0
Fork 0
G
gitlab-foss

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 4e0e2fd9 编写于 作者: J Jose Ivan Vargas
浏览文件
操作

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

上级 2d4d1290
隐藏空白更改
内联 并排
Showing with 81 addition and 131 deletion
app/assets/javascripts/common_d3/index.js 已删除 100644 → 0
浏览文件 @ 2d4d1290
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
浏览文件 @ 4e0e2fd9
/* 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
浏览文件 @ 4e0e2fd9
/* 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
浏览文件 @ 4e0e2fd9
<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
浏览文件 @ 4e0e2fd9
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
浏览文件 @ 4e0e2fd9
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
浏览文件 @ 4e0e2fd9
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
浏览文件 @ 4e0e2fd9
......@@ -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
浏览文件 @ 4e0e2fd9
/* 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% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或