Commit d7154552 authored by Phil Hughes's avatar Phil Hughes

Rather than looping data ourselves, d3 loops it

parent 05dc1407
......@@ -4,12 +4,13 @@ export default class Deployments {
constructor(width, height) {
this.width = width;
this.height = height;
this.data = [];
this.dateFormat = d3.time.format('%b %d, %Y');
this.timeFormat = d3.time.format('%H:%M%p');
this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
Deployments.createGradientDef();
this.createGradientDef();
}
init(chartData) {
......@@ -29,15 +30,12 @@ export default class Deployments {
dataType: 'JSON',
})
.done((data) => {
this.data = [];
data.deployments.forEach((deployment) => {
const minInSeconds = 1000 * 60;
let time = new Date(deployment.created_at);
time = new Date(Math.round(time.getTime() / minInSeconds) * minInSeconds);
time.setSeconds(this.chartData[0].time.getSeconds());
const time = new Date(deployment.created_at);
const xPos = Math.floor(this.x(time));
time.setSeconds(this.chartData[0].time.getSeconds());
if (xPos >= 0) {
this.data.push({
id: deployment.id,
......@@ -65,7 +63,7 @@ export default class Deployments {
});
}
static createGradientDef() {
createGradientDef() {
const defs = d3.select('body')
.append('svg')
.attr({
......@@ -84,9 +82,7 @@ export default class Deployments {
'stop-color': '#000',
'stop-opacity': 0.4,
})
.select(function selectParentNode() {
return this.parentNode;
})
.select(this.selectParentNode)
.append('stop')
.attr({
offset: '100%',
......@@ -116,9 +112,7 @@ export default class Deployments {
width: 3,
fill: 'url(#shadow-gradient)',
})
.select(function selectParentNode() {
return this.parentNode;
})
.select(this.selectParentNode)
.append('line')
.attr({
class: 'deployment-line',
......@@ -130,60 +124,52 @@ export default class Deployments {
}
createDeployInfoBox(chart, key) {
this.data.forEach((d) => {
const group = chart.select(`.deploy-info-${d.id}-${key}`)
chart.selectAll('.deploy-info')
.selectAll('.js-deploy-info-box')
.data(this.data)
.enter()
.select(d => document.querySelector(`.deploy-info-${d.id}-${key}`))
.append('svg')
.attr({
class: 'js-deploy-info-box hidden',
x: 3,
y: 0,
width: 92,
height: 60,
});
const rect = group.append('rect')
})
.append('rect')
.attr({
class: 'rect-text-metric deploy-info-rect rect-metric',
x: 1,
y: 1,
rx: 2,
height: group.attr('height') - 2,
});
const textGroup = group.append('g')
width: 90,
height: 58,
})
.select(this.selectParentNode)
.append('g')
.attr({
transform: 'translate(5, 2)',
});
textGroup.append('text')
})
.append('text')
.attr({
class: 'deploy-info-text text-metric-bold',
})
.text(() => {
const isTag = d.tag;
const refText = isTag ? d.ref : d.sha.slice(0, 6);
return refText;
});
textGroup.append('text')
.text(Deployments.refText)
.select(this.selectParentNode)
.append('text')
.attr({
class: 'deploy-info-text',
y: 18,
})
.text(() => this.dateFormat(d.time));
textGroup.append('text')
.text(d => this.dateFormat(d.time))
.select(this.selectParentNode)
.append('text')
.attr({
class: 'deploy-info-text text-metric-bold',
y: 38,
})
.text(() => this.timeFormat(d.time));
group.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 14);
rect.attr('width', Math.floor(textGroup.node().getBoundingClientRect().width) + 10);
group.attr('class', 'js-deploy-info-box hidden');
});
.text(d => this.timeFormat(d.time));
}
static toggleDeployTextbox(deploy, key, showInfoBox) {
......@@ -208,4 +194,16 @@ export default class Deployments {
return dataFound;
}
/* `this` is bound to the D3 node */
selectParentNode() {
return this.parentNode;
}
static refText(d) {
const isTag = d.tag;
const refText = isTag ? d.ref : d.sha.slice(0, 6);
return refText;
}
}
......@@ -110,4 +110,24 @@ describe('Metrics deployments', () => {
graphElement().querySelector('.deploy-info-1-cpu_values .js-deploy-info-box.hidden'),
).not.toBeNull();
});
describe('refText', () => {
it('returns shortened SHA', () => {
expect(
Deployments.refText({
tag: false,
sha: '123456789',
}),
).toBe('123456');
});
it('returns tag name', () => {
expect(
Deployments.refText({
tag: true,
ref: 'v1.0',
}),
).toBe('v1.0');
});
});
});
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