-
-
Notifications
You must be signed in to change notification settings - Fork 688
/
DurationChartView.js
108 lines (87 loc) · 3.01 KB
/
DurationChartView.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import BaseChartView from '../../components/graph-base/BaseChartView';
import {scaleLinear, scaleSqrt} from 'd3-scale';
import {histogram, max} from 'd3-array';
import PopoverView from '../../components/popover/PopoverView';
import escape from '../../utils/escape';
import duration from '../../helpers/duration';
import translate from '../../helpers/t';
export default class DurationChart extends BaseChartView {
initialize() {
this.collection = this.model;
this.getChartData();
}
getChartData() {
this.data = this.collection.map(testResult => ({
value: testResult.time.duration,
name: testResult.name
})).filter(testResult => {
return testResult.value !== null;
});
}
onAttach() {
if (this.data && this.data.length) {
this.doShow();
} else {
this.$el.html(`<div class="widget__noitems">${translate('chart.duration.empty')}</div>`);
}
super.onAttach();
}
doShow() {
this.x = scaleLinear();
this.y = scaleSqrt();
this.tooltip = new PopoverView({position: 'right'});
this.setupViewport();
this.x.range([0, this.width]);
this.y.range([this.height, 0], 1);
const maxDuration = max(this.data, d => d.value);
this.x.domain([0, Math.max(maxDuration, 10)]).nice();
const bins = histogram()
.value(d => d.value)
.domain(this.x.domain())
.thresholds(this.x.ticks())(this.data)
.map(bin => ({
x0: bin.x0,
x1: bin.x1,
y: bin.length,
testResults: bin
}));
const maxY = max(bins, d => d.y);
this.y.domain([0, maxY]).nice();
this.makeBottomAxis({
scale: this.x,
tickFormat: time => duration(time, 1)
});
this.makeLeftAxis({
scale: this.y,
ticks: Math.min(10, maxY)
});
let bars = this.plot.selectAll('.chart__bar')
.data(bins).enter()
.append('rect').classed('chart__bar', true);
this.bindTooltip(bars);
bars.attrs({
x: d => this.x(d.x0) + 2,
y: this.height,
width: d => Math.max(this.x(d.x1) - this.x(d.x0) - 2, 0),
height: 0
});
if(this.firstRender) {
bars = bars.transition().duration(500);
}
bars.attrs({
y: d => this.y(d.y),
height: d => this.height - this.y(d.y)
});
}
getTooltipContent({testResults}) {
const LIST_LIMIT = 10;
const items = testResults.slice(0, LIST_LIMIT);
const overLimit = testResults.length - items.length;
return `<b>${testResults.length} test cases</b><br>
<ul class="popover__list">
${items.map(testResult => escape`<li>${testResult.name}</li>`).join('')}
</ul>
${overLimit ? `...and ${overLimit} more` : ''}
`;
}
}