test-prof 0.1.0.pre5 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +7 -0
- data/README.md +16 -4
- data/assets/flamegraph.demo.html +173 -0
- data/assets/flamegraph.template.html +196 -0
- data/assets/src/d3-tip.js +352 -0
- data/assets/src/d3-tip.min.js +1 -0
- data/assets/src/d3.flameGraph.css +92 -0
- data/assets/src/d3.flameGraph.js +459 -0
- data/assets/src/d3.flameGraph.min.css +1 -0
- data/assets/src/d3.flameGraph.min.js +1 -0
- data/assets/src/d3.v4.min.js +8 -0
- data/guides/any_fixture.md +1 -1
- data/guides/event_prof.md +30 -0
- data/guides/factory_default.md +109 -0
- data/guides/factory_prof.md +85 -0
- data/guides/rubocop.md +48 -0
- data/guides/ruby_prof.md +2 -0
- data/guides/stack_prof.md +5 -1
- data/guides/tag_prof.md +52 -0
- data/guides/tests_sampling.md +24 -0
- data/lib/test_prof.rb +31 -7
- data/lib/test_prof/cops/rspec/aggregate_failures.rb +140 -0
- data/lib/test_prof/event_prof/custom_events.rb +3 -3
- data/lib/test_prof/event_prof/custom_events/factory_create.rb +10 -8
- data/lib/test_prof/event_prof/custom_events/sidekiq_inline.rb +10 -8
- data/lib/test_prof/event_prof/custom_events/sidekiq_jobs.rb +12 -10
- data/lib/test_prof/event_prof/rspec.rb +5 -1
- data/lib/test_prof/factory_default.rb +58 -0
- data/lib/test_prof/factory_default/factory_girl_patch.rb +22 -0
- data/lib/test_prof/factory_doctor.rb +11 -9
- data/lib/test_prof/factory_doctor/rspec.rb +5 -3
- data/lib/test_prof/factory_prof.rb +140 -0
- data/lib/test_prof/factory_prof/factory_girl_patch.rb +12 -0
- data/lib/test_prof/factory_prof/printers/flamegraph.rb +71 -0
- data/lib/test_prof/factory_prof/printers/simple.rb +28 -0
- data/lib/test_prof/recipes/minitest/sample.rb +29 -0
- data/lib/test_prof/recipes/rspec/factory_default.rb +9 -0
- data/lib/test_prof/recipes/rspec/sample.rb +13 -0
- data/lib/test_prof/rspec_stamp/rspec.rb +5 -1
- data/lib/test_prof/rubocop.rb +3 -0
- data/lib/test_prof/ruby_prof.rb +6 -12
- data/lib/test_prof/stack_prof.rb +14 -7
- data/lib/test_prof/tag_prof.rb +8 -0
- data/lib/test_prof/tag_prof/rspec.rb +84 -0
- data/lib/test_prof/version.rb +1 -1
- metadata +48 -41
- data/.gitignore +0 -10
- data/.rspec +0 -2
- data/.rubocop.yml +0 -69
- data/.travis.yml +0 -5
- data/Gemfile +0 -4
- data/Rakefile +0 -8
- data/bin/setup +0 -8
- data/circle.yml +0 -11
- data/spec/integrations/any_fixture_spec.rb +0 -11
- data/spec/integrations/before_all_spec.rb +0 -11
- data/spec/integrations/event_prof_spec.rb +0 -100
- data/spec/integrations/factory_doctor_spec.rb +0 -20
- data/spec/integrations/fixtures/rspec/any_fixture_fixture.rb +0 -37
- data/spec/integrations/fixtures/rspec/before_all_fixture.rb +0 -32
- data/spec/integrations/fixtures/rspec/event_prof_factory_create_fixture.rb +0 -23
- data/spec/integrations/fixtures/rspec/event_prof_fixture.rb +0 -51
- data/spec/integrations/fixtures/rspec/event_prof_sidekiq_fixture.rb +0 -53
- data/spec/integrations/fixtures/rspec/factory_doctor_fixture.rb +0 -33
- data/spec/integrations/fixtures/rspec/rspec_stamp_fixture_tmpl.rb +0 -33
- data/spec/integrations/rspec_stamp_spec.rb +0 -53
- data/spec/spec_helper.rb +0 -38
- data/spec/support/ar_models.rb +0 -43
- data/spec/support/instrumenter_stub.rb +0 -19
- data/spec/support/integration_helpers.rb +0 -13
- data/spec/support/transactional_context.rb +0 -11
- data/spec/test_prof/any_fixture_spec.rb +0 -66
- data/spec/test_prof/event_prof_spec.rb +0 -138
- data/spec/test_prof/ext/float_duration_spec.rb +0 -12
- data/spec/test_prof/factory_doctor_spec.rb +0 -84
- data/spec/test_prof/rspec_stamp/parser_spec.rb +0 -58
- data/spec/test_prof/rspec_stamp_spec.rb +0 -281
- data/spec/test_prof/ruby_prof_spec.rb +0 -109
- data/spec/test_prof/stack_prof_spec.rb +0 -73
- data/spec/test_prof_spec.rb +0 -23
- data/test-prof.gemspec +0 -35
@@ -0,0 +1,352 @@
|
|
1
|
+
/**
|
2
|
+
* d3.tip
|
3
|
+
* Copyright (c) 2013-2017 Justin Palmer
|
4
|
+
*
|
5
|
+
* Tooltips for d3.js SVG visualizations
|
6
|
+
*/
|
7
|
+
// eslint-disable-next-line no-extra-semi
|
8
|
+
;(function(root, factory) {
|
9
|
+
if (typeof define === 'function' && define.amd) {
|
10
|
+
// AMD. Register as an anonymous module with d3 as a dependency.
|
11
|
+
define([
|
12
|
+
'd3-collection',
|
13
|
+
'd3-selection'
|
14
|
+
], factory)
|
15
|
+
} else if (typeof module === 'object' && module.exports) {
|
16
|
+
/* eslint-disable global-require */
|
17
|
+
// CommonJS
|
18
|
+
var d3Collection = require('d3-collection'),
|
19
|
+
d3Selection = require('d3-selection')
|
20
|
+
module.exports = factory(d3Collection, d3Selection)
|
21
|
+
/* eslint-enable global-require */
|
22
|
+
} else {
|
23
|
+
// Browser global.
|
24
|
+
var d3 = root.d3
|
25
|
+
// eslint-disable-next-line no-param-reassign
|
26
|
+
root.d3.tip = factory(d3, d3)
|
27
|
+
}
|
28
|
+
}(this, function(d3Collection, d3Selection) {
|
29
|
+
// Public - contructs a new tooltip
|
30
|
+
//
|
31
|
+
// Returns a tip
|
32
|
+
return function() {
|
33
|
+
var direction = d3TipDirection,
|
34
|
+
offset = d3TipOffset,
|
35
|
+
html = d3TipHTML,
|
36
|
+
rootElement = document.body,
|
37
|
+
node = initNode(),
|
38
|
+
svg = null,
|
39
|
+
point = null,
|
40
|
+
target = null
|
41
|
+
|
42
|
+
function tip(vis) {
|
43
|
+
svg = getSVGNode(vis)
|
44
|
+
if (!svg) return
|
45
|
+
point = svg.createSVGPoint()
|
46
|
+
rootElement.appendChild(node)
|
47
|
+
}
|
48
|
+
|
49
|
+
// Public - show the tooltip on the screen
|
50
|
+
//
|
51
|
+
// Returns a tip
|
52
|
+
tip.show = function() {
|
53
|
+
var args = Array.prototype.slice.call(arguments)
|
54
|
+
if (args[args.length - 1] instanceof SVGElement) target = args.pop()
|
55
|
+
|
56
|
+
var content = html.apply(this, args),
|
57
|
+
poffset = offset.apply(this, args),
|
58
|
+
dir = direction.apply(this, args),
|
59
|
+
nodel = getNodeEl(),
|
60
|
+
i = directions.length,
|
61
|
+
coords,
|
62
|
+
scrollTop = document.documentElement.scrollTop ||
|
63
|
+
rootElement.scrollTop,
|
64
|
+
scrollLeft = document.documentElement.scrollLeft ||
|
65
|
+
rootElement.scrollLeft
|
66
|
+
|
67
|
+
nodel.html(content)
|
68
|
+
.style('opacity', 1).style('pointer-events', 'all')
|
69
|
+
|
70
|
+
while (i--) nodel.classed(directions[i], false)
|
71
|
+
coords = directionCallbacks.get(dir).apply(this)
|
72
|
+
nodel.classed(dir, true)
|
73
|
+
.style('top', (coords.top + poffset[0]) + scrollTop + 'px')
|
74
|
+
.style('left', (coords.left + poffset[1]) + scrollLeft + 'px')
|
75
|
+
|
76
|
+
return tip
|
77
|
+
}
|
78
|
+
|
79
|
+
// Public - hide the tooltip
|
80
|
+
//
|
81
|
+
// Returns a tip
|
82
|
+
tip.hide = function() {
|
83
|
+
var nodel = getNodeEl()
|
84
|
+
nodel.style('opacity', 0).style('pointer-events', 'none')
|
85
|
+
return tip
|
86
|
+
}
|
87
|
+
|
88
|
+
// Public: Proxy attr calls to the d3 tip container.
|
89
|
+
// Sets or gets attribute value.
|
90
|
+
//
|
91
|
+
// n - name of the attribute
|
92
|
+
// v - value of the attribute
|
93
|
+
//
|
94
|
+
// Returns tip or attribute value
|
95
|
+
// eslint-disable-next-line no-unused-vars
|
96
|
+
tip.attr = function(n, v) {
|
97
|
+
if (arguments.length < 2 && typeof n === 'string') {
|
98
|
+
return getNodeEl().attr(n)
|
99
|
+
}
|
100
|
+
|
101
|
+
var args = Array.prototype.slice.call(arguments)
|
102
|
+
d3Selection.selection.prototype.attr.apply(getNodeEl(), args)
|
103
|
+
return tip
|
104
|
+
}
|
105
|
+
|
106
|
+
// Public: Proxy style calls to the d3 tip container.
|
107
|
+
// Sets or gets a style value.
|
108
|
+
//
|
109
|
+
// n - name of the property
|
110
|
+
// v - value of the property
|
111
|
+
//
|
112
|
+
// Returns tip or style property value
|
113
|
+
// eslint-disable-next-line no-unused-vars
|
114
|
+
tip.style = function(n, v) {
|
115
|
+
if (arguments.length < 2 && typeof n === 'string') {
|
116
|
+
return getNodeEl().style(n)
|
117
|
+
}
|
118
|
+
|
119
|
+
var args = Array.prototype.slice.call(arguments)
|
120
|
+
d3Selection.selection.prototype.style.apply(getNodeEl(), args)
|
121
|
+
return tip
|
122
|
+
}
|
123
|
+
|
124
|
+
// Public: Set or get the direction of the tooltip
|
125
|
+
//
|
126
|
+
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
|
127
|
+
// sw(southwest), ne(northeast) or se(southeast)
|
128
|
+
//
|
129
|
+
// Returns tip or direction
|
130
|
+
tip.direction = function(v) {
|
131
|
+
if (!arguments.length) return direction
|
132
|
+
direction = v == null ? v : functor(v)
|
133
|
+
|
134
|
+
return tip
|
135
|
+
}
|
136
|
+
|
137
|
+
// Public: Sets or gets the offset of the tip
|
138
|
+
//
|
139
|
+
// v - Array of [x, y] offset
|
140
|
+
//
|
141
|
+
// Returns offset or
|
142
|
+
tip.offset = function(v) {
|
143
|
+
if (!arguments.length) return offset
|
144
|
+
offset = v == null ? v : functor(v)
|
145
|
+
|
146
|
+
return tip
|
147
|
+
}
|
148
|
+
|
149
|
+
// Public: sets or gets the html value of the tooltip
|
150
|
+
//
|
151
|
+
// v - String value of the tip
|
152
|
+
//
|
153
|
+
// Returns html value or tip
|
154
|
+
tip.html = function(v) {
|
155
|
+
if (!arguments.length) return html
|
156
|
+
html = v == null ? v : functor(v)
|
157
|
+
|
158
|
+
return tip
|
159
|
+
}
|
160
|
+
|
161
|
+
// Public: sets or gets the root element anchor of the tooltip
|
162
|
+
//
|
163
|
+
// v - root element of the tooltip
|
164
|
+
//
|
165
|
+
// Returns root node of tip
|
166
|
+
tip.rootElement = function(v) {
|
167
|
+
if (!arguments.length) return rootElement
|
168
|
+
rootElement = v == null ? v : functor(v)
|
169
|
+
|
170
|
+
return tip
|
171
|
+
}
|
172
|
+
|
173
|
+
// Public: destroys the tooltip and removes it from the DOM
|
174
|
+
//
|
175
|
+
// Returns a tip
|
176
|
+
tip.destroy = function() {
|
177
|
+
if (node) {
|
178
|
+
getNodeEl().remove()
|
179
|
+
node = null
|
180
|
+
}
|
181
|
+
return tip
|
182
|
+
}
|
183
|
+
|
184
|
+
function d3TipDirection() { return 'n' }
|
185
|
+
function d3TipOffset() { return [0, 0] }
|
186
|
+
function d3TipHTML() { return ' ' }
|
187
|
+
|
188
|
+
var directionCallbacks = d3Collection.map({
|
189
|
+
n: directionNorth,
|
190
|
+
s: directionSouth,
|
191
|
+
e: directionEast,
|
192
|
+
w: directionWest,
|
193
|
+
nw: directionNorthWest,
|
194
|
+
ne: directionNorthEast,
|
195
|
+
sw: directionSouthWest,
|
196
|
+
se: directionSouthEast
|
197
|
+
}),
|
198
|
+
directions = directionCallbacks.keys()
|
199
|
+
|
200
|
+
function directionNorth() {
|
201
|
+
var bbox = getScreenBBox()
|
202
|
+
return {
|
203
|
+
top: bbox.n.y - node.offsetHeight,
|
204
|
+
left: bbox.n.x - node.offsetWidth / 2
|
205
|
+
}
|
206
|
+
}
|
207
|
+
|
208
|
+
function directionSouth() {
|
209
|
+
var bbox = getScreenBBox()
|
210
|
+
return {
|
211
|
+
top: bbox.s.y,
|
212
|
+
left: bbox.s.x - node.offsetWidth / 2
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
function directionEast() {
|
217
|
+
var bbox = getScreenBBox()
|
218
|
+
return {
|
219
|
+
top: bbox.e.y - node.offsetHeight / 2,
|
220
|
+
left: bbox.e.x
|
221
|
+
}
|
222
|
+
}
|
223
|
+
|
224
|
+
function directionWest() {
|
225
|
+
var bbox = getScreenBBox()
|
226
|
+
return {
|
227
|
+
top: bbox.w.y - node.offsetHeight / 2,
|
228
|
+
left: bbox.w.x - node.offsetWidth
|
229
|
+
}
|
230
|
+
}
|
231
|
+
|
232
|
+
function directionNorthWest() {
|
233
|
+
var bbox = getScreenBBox()
|
234
|
+
return {
|
235
|
+
top: bbox.nw.y - node.offsetHeight,
|
236
|
+
left: bbox.nw.x - node.offsetWidth
|
237
|
+
}
|
238
|
+
}
|
239
|
+
|
240
|
+
function directionNorthEast() {
|
241
|
+
var bbox = getScreenBBox()
|
242
|
+
return {
|
243
|
+
top: bbox.ne.y - node.offsetHeight,
|
244
|
+
left: bbox.ne.x
|
245
|
+
}
|
246
|
+
}
|
247
|
+
|
248
|
+
function directionSouthWest() {
|
249
|
+
var bbox = getScreenBBox()
|
250
|
+
return {
|
251
|
+
top: bbox.sw.y,
|
252
|
+
left: bbox.sw.x - node.offsetWidth
|
253
|
+
}
|
254
|
+
}
|
255
|
+
|
256
|
+
function directionSouthEast() {
|
257
|
+
var bbox = getScreenBBox()
|
258
|
+
return {
|
259
|
+
top: bbox.se.y,
|
260
|
+
left: bbox.se.x
|
261
|
+
}
|
262
|
+
}
|
263
|
+
|
264
|
+
function initNode() {
|
265
|
+
var div = d3Selection.select(document.createElement('div'))
|
266
|
+
div
|
267
|
+
.style('position', 'absolute')
|
268
|
+
.style('top', 0)
|
269
|
+
.style('opacity', 0)
|
270
|
+
.style('pointer-events', 'none')
|
271
|
+
.style('box-sizing', 'border-box')
|
272
|
+
|
273
|
+
return div.node()
|
274
|
+
}
|
275
|
+
|
276
|
+
function getSVGNode(element) {
|
277
|
+
var svgNode = element.node()
|
278
|
+
if (!svgNode) return null
|
279
|
+
if (svgNode.tagName.toLowerCase() === 'svg') return svgNode
|
280
|
+
return svgNode.ownerSVGElement
|
281
|
+
}
|
282
|
+
|
283
|
+
function getNodeEl() {
|
284
|
+
if (node == null) {
|
285
|
+
node = initNode()
|
286
|
+
// re-add node to DOM
|
287
|
+
rootElement.appendChild(node)
|
288
|
+
}
|
289
|
+
return d3Selection.select(node)
|
290
|
+
}
|
291
|
+
|
292
|
+
// Private - gets the screen coordinates of a shape
|
293
|
+
//
|
294
|
+
// Given a shape on the screen, will return an SVGPoint for the directions
|
295
|
+
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast),
|
296
|
+
// nw(northwest), sw(southwest).
|
297
|
+
//
|
298
|
+
// +-+-+
|
299
|
+
// | |
|
300
|
+
// + +
|
301
|
+
// | |
|
302
|
+
// +-+-+
|
303
|
+
//
|
304
|
+
// Returns an Object {n, s, e, w, nw, sw, ne, se}
|
305
|
+
function getScreenBBox() {
|
306
|
+
var targetel = target || d3Selection.event.target
|
307
|
+
|
308
|
+
while (targetel.getScreenCTM == null && targetel.parentNode == null) {
|
309
|
+
targetel = targetel.parentNode
|
310
|
+
}
|
311
|
+
|
312
|
+
var bbox = {},
|
313
|
+
matrix = targetel.getScreenCTM(),
|
314
|
+
tbbox = targetel.getBBox(),
|
315
|
+
width = tbbox.width,
|
316
|
+
height = tbbox.height,
|
317
|
+
x = tbbox.x,
|
318
|
+
y = tbbox.y
|
319
|
+
|
320
|
+
point.x = x
|
321
|
+
point.y = y
|
322
|
+
bbox.nw = point.matrixTransform(matrix)
|
323
|
+
point.x += width
|
324
|
+
bbox.ne = point.matrixTransform(matrix)
|
325
|
+
point.y += height
|
326
|
+
bbox.se = point.matrixTransform(matrix)
|
327
|
+
point.x -= width
|
328
|
+
bbox.sw = point.matrixTransform(matrix)
|
329
|
+
point.y -= height / 2
|
330
|
+
bbox.w = point.matrixTransform(matrix)
|
331
|
+
point.x += width
|
332
|
+
bbox.e = point.matrixTransform(matrix)
|
333
|
+
point.x -= width / 2
|
334
|
+
point.y -= height / 2
|
335
|
+
bbox.n = point.matrixTransform(matrix)
|
336
|
+
point.y += height
|
337
|
+
bbox.s = point.matrixTransform(matrix)
|
338
|
+
|
339
|
+
return bbox
|
340
|
+
}
|
341
|
+
|
342
|
+
// Private - replace D3JS 3.X d3.functor() function
|
343
|
+
function functor(v) {
|
344
|
+
return typeof v === 'function' ? v : function() {
|
345
|
+
return v
|
346
|
+
}
|
347
|
+
}
|
348
|
+
|
349
|
+
return tip
|
350
|
+
}
|
351
|
+
// eslint-disable-next-line semi
|
352
|
+
}));
|
@@ -0,0 +1 @@
|
|
1
|
+
!function(t,e){if("function"==typeof define&&define.amd)define(["d3-collection","d3-selection"],e);else if("object"==typeof module&&module.exports){var n=require("d3-collection"),r=require("d3-selection");module.exports=e(n,r)}else{var o=t.d3;t.d3.tip=e(o,o)}}(this,function(t,e){return function(){function n(t){(C=m(t))&&(H=C.createSVGPoint(),b.appendChild(E))}function r(){return"n"}function o(){return[0,0]}function l(){return" "}function i(){var t=x();return{top:t.n.y-E.offsetHeight,left:t.n.x-E.offsetWidth/2}}function f(){var t=x();return{top:t.s.y,left:t.s.x-E.offsetWidth/2}}function u(){var t=x();return{top:t.e.y-E.offsetHeight/2,left:t.e.x}}function s(){var t=x();return{top:t.w.y-E.offsetHeight/2,left:t.w.x-E.offsetWidth}}function a(){var t=x();return{top:t.nw.y-E.offsetHeight,left:t.nw.x-E.offsetWidth}}function c(){var t=x();return{top:t.ne.y-E.offsetHeight,left:t.ne.x}}function p(){var t=x();return{top:t.sw.y,left:t.sw.x-E.offsetWidth}}function y(){var t=x();return{top:t.se.y,left:t.se.x}}function d(){var t=e.select(document.createElement("div"));return t.style("position","absolute").style("top",0).style("opacity",0).style("pointer-events","none").style("box-sizing","border-box"),t.node()}function m(t){var e=t.node();return e?"svg"===e.tagName.toLowerCase()?e:e.ownerSVGElement:null}function h(){return null==E&&(E=d(),b.appendChild(E)),e.select(E)}function x(){for(var t=S||e.event.target;null==t.getScreenCTM&&null==t.parentNode;)t=t.parentNode;var n={},r=t.getScreenCTM(),o=t.getBBox(),l=o.width,i=o.height,f=o.x,u=o.y;return H.x=f,H.y=u,n.nw=H.matrixTransform(r),H.x+=l,n.ne=H.matrixTransform(r),H.y+=i,n.se=H.matrixTransform(r),H.x-=l,n.sw=H.matrixTransform(r),H.y-=i/2,n.w=H.matrixTransform(r),H.x+=l,n.e=H.matrixTransform(r),H.x-=l/2,H.y-=i/2,n.n=H.matrixTransform(r),H.y+=i,n.s=H.matrixTransform(r),n}function v(t){return"function"==typeof t?t:function(){return t}}var g=r,w=o,T=l,b=document.body,E=d(),C=null,H=null,S=null;n.show=function(){var t=Array.prototype.slice.call(arguments);t[t.length-1]instanceof SVGElement&&(S=t.pop());var e,r=T.apply(this,t),o=w.apply(this,t),l=g.apply(this,t),i=h(),f=A.length,u=document.documentElement.scrollTop||b.scrollTop,s=document.documentElement.scrollLeft||b.scrollLeft;for(i.html(r).style("opacity",1).style("pointer-events","all");f--;)i.classed(A[f],!1);return e=W.get(l).apply(this),i.classed(l,!0).style("top",e.top+o[0]+u+"px").style("left",e.left+o[1]+s+"px"),n},n.hide=function(){return h().style("opacity",0).style("pointer-events","none"),n},n.attr=function(t,r){if(arguments.length<2&&"string"==typeof t)return h().attr(t);var o=Array.prototype.slice.call(arguments);return e.selection.prototype.attr.apply(h(),o),n},n.style=function(t,r){if(arguments.length<2&&"string"==typeof t)return h().style(t);var o=Array.prototype.slice.call(arguments);return e.selection.prototype.style.apply(h(),o),n},n.direction=function(t){return arguments.length?(g=null==t?t:v(t),n):g},n.offset=function(t){return arguments.length?(w=null==t?t:v(t),n):w},n.html=function(t){return arguments.length?(T=null==t?t:v(t),n):T},n.rootElement=function(t){return arguments.length?(b=null==t?t:v(t),n):b},n.destroy=function(){return E&&(h().remove(),E=null),n};var W=t.map({n:i,s:f,e:u,w:s,nw:a,ne:c,sw:p,se:y}),A=W.keys();return n}});
|
@@ -0,0 +1,92 @@
|
|
1
|
+
.d3-flame-graph rect {
|
2
|
+
stroke: #EEEEEE;
|
3
|
+
fill-opacity: .8;
|
4
|
+
}
|
5
|
+
|
6
|
+
.d3-flame-graph rect:hover {
|
7
|
+
stroke: #474747;
|
8
|
+
stroke-width: 0.5;
|
9
|
+
cursor: pointer;
|
10
|
+
}
|
11
|
+
|
12
|
+
.d3-flame-graph .label {
|
13
|
+
pointer-events: none;
|
14
|
+
white-space: nowrap;
|
15
|
+
text-overflow: ellipsis;
|
16
|
+
overflow: hidden;
|
17
|
+
font-size: 12px;
|
18
|
+
font-family: Verdana;
|
19
|
+
margin-left: 4px;
|
20
|
+
margin-right: 4px;
|
21
|
+
line-height: 1.5;
|
22
|
+
padding: 0 0 0;
|
23
|
+
font-weight: 400;
|
24
|
+
color: black;
|
25
|
+
text-align: left;
|
26
|
+
}
|
27
|
+
|
28
|
+
.d3-flame-graph .fade {
|
29
|
+
opacity: 0.6 !important;
|
30
|
+
}
|
31
|
+
|
32
|
+
.d3-flame-graph .title {
|
33
|
+
font-size: 20px;
|
34
|
+
font-family: Verdana;
|
35
|
+
}
|
36
|
+
|
37
|
+
.d3-flame-graph-tip {
|
38
|
+
line-height: 1;
|
39
|
+
font-family: Verdana;
|
40
|
+
font-size: 12px;
|
41
|
+
padding: 12px;
|
42
|
+
background: rgba(0, 0, 0, 0.8);
|
43
|
+
color: #fff;
|
44
|
+
border-radius: 2px;
|
45
|
+
pointer-events: none;
|
46
|
+
}
|
47
|
+
|
48
|
+
/* Creates a small triangle extender for the tooltip */
|
49
|
+
.d3-flame-graph-tip:after {
|
50
|
+
box-sizing: border-box;
|
51
|
+
display: inline;
|
52
|
+
font-size: 10px;
|
53
|
+
width: 100%;
|
54
|
+
line-height: 1;
|
55
|
+
color: rgba(0, 0, 0, 0.8);
|
56
|
+
position: absolute;
|
57
|
+
pointer-events: none;
|
58
|
+
}
|
59
|
+
|
60
|
+
/* Northward tooltips */
|
61
|
+
.d3-flame-graph-tip.n:after {
|
62
|
+
content: "\25BC";
|
63
|
+
margin: -1px 0 0 0;
|
64
|
+
top: 100%;
|
65
|
+
left: 0;
|
66
|
+
text-align: center;
|
67
|
+
}
|
68
|
+
|
69
|
+
/* Eastward tooltips */
|
70
|
+
.d3-flame-graph-tip.e:after {
|
71
|
+
content: "\25C0";
|
72
|
+
margin: -4px 0 0 0;
|
73
|
+
top: 50%;
|
74
|
+
left: -8px;
|
75
|
+
}
|
76
|
+
|
77
|
+
/* Southward tooltips */
|
78
|
+
.d3-flame-graph-tip.s:after {
|
79
|
+
content: "\25B2";
|
80
|
+
margin: 0 0 1px 0;
|
81
|
+
top: -8px;
|
82
|
+
left: 0;
|
83
|
+
text-align: center;
|
84
|
+
}
|
85
|
+
|
86
|
+
/* Westward tooltips */
|
87
|
+
.d3-flame-graph-tip.w:after {
|
88
|
+
content: "\25B6";
|
89
|
+
margin: -4px 0 0 -1px;
|
90
|
+
top: 50%;
|
91
|
+
left: 100%;
|
92
|
+
}
|
@@ -0,0 +1,459 @@
|
|
1
|
+
(function() {
|
2
|
+
'use strict';
|
3
|
+
|
4
|
+
function flameGraph() {
|
5
|
+
|
6
|
+
var w = 960, // graph width
|
7
|
+
h = 540, // graph height
|
8
|
+
c = 18, // cell height
|
9
|
+
selection = null, // selection
|
10
|
+
tooltip = true, // enable tooltip
|
11
|
+
title = "", // graph title
|
12
|
+
transitionDuration = 750,
|
13
|
+
transitionEase = d3.easeCubic, // tooltip offset
|
14
|
+
sort = true,
|
15
|
+
reversed = false, // reverse the graph direction
|
16
|
+
clickHandler = null;
|
17
|
+
|
18
|
+
var tip = d3.tip()
|
19
|
+
.direction("s")
|
20
|
+
.offset([8, 0])
|
21
|
+
.attr('class', 'd3-flame-graph-tip')
|
22
|
+
.html(function(d) { return label(d); });
|
23
|
+
|
24
|
+
var svg;
|
25
|
+
|
26
|
+
var label = function(d) {
|
27
|
+
return d.data.name + " (" + d3.format(".3f")(100 * (d.x1 - d.x0), 3) + "%, " + d.data.value + " samples)";
|
28
|
+
};
|
29
|
+
|
30
|
+
function setDetails(t) {
|
31
|
+
var details = document.getElementById("details");
|
32
|
+
if (details)
|
33
|
+
details.innerHTML = t;
|
34
|
+
}
|
35
|
+
|
36
|
+
function name(d) {
|
37
|
+
return d.data.name;
|
38
|
+
}
|
39
|
+
|
40
|
+
var colorMapper = function(d) {
|
41
|
+
return d.highlight ? "#E600E6" : colorHash(d.data);
|
42
|
+
};
|
43
|
+
|
44
|
+
function generateHash(name) {
|
45
|
+
// Return a vector (0.0->1.0) that is a hash of the input string.
|
46
|
+
// The hash is computed to favor early characters over later ones, so
|
47
|
+
// that strings with similar starts have similar vectors. Only the first
|
48
|
+
// 6 characters are considered.
|
49
|
+
var hash = 0, weight = 1, max_hash = 0, mod = 10, max_char = 6;
|
50
|
+
if (name) {
|
51
|
+
for (var i = 0; i < name.length; i++) {
|
52
|
+
if (i > max_char) { break; }
|
53
|
+
hash += weight * (name.charCodeAt(i) % mod);
|
54
|
+
max_hash += weight * (mod - 1);
|
55
|
+
weight *= 0.70;
|
56
|
+
}
|
57
|
+
if (max_hash > 0) { hash = hash / max_hash; }
|
58
|
+
}
|
59
|
+
return hash;
|
60
|
+
}
|
61
|
+
|
62
|
+
function colorHash(data) {
|
63
|
+
var name = data.name;
|
64
|
+
|
65
|
+
if (data.color) {
|
66
|
+
return data.color;
|
67
|
+
}
|
68
|
+
// Return an rgb() color string that is a hash of the provided name,
|
69
|
+
// and with a warm palette.
|
70
|
+
var vector = 0;
|
71
|
+
if (name) {
|
72
|
+
name = name.replace(/.*`/, ""); // drop module name if present
|
73
|
+
name = name.replace(/\(.*/, ""); // drop extra info
|
74
|
+
vector = generateHash(name);
|
75
|
+
}
|
76
|
+
var r = 200 + Math.round(55 * vector);
|
77
|
+
var g = 0 + Math.round(230 * vector);
|
78
|
+
var b = 0 + Math.round(55 * vector);
|
79
|
+
data.color = "rgb(" + r + "," + g + "," + b + ")";
|
80
|
+
return data.color;
|
81
|
+
}
|
82
|
+
|
83
|
+
function hide(d) {
|
84
|
+
if(!d.data.original) {
|
85
|
+
d.data.original = d.data.value;
|
86
|
+
}
|
87
|
+
d.data.value = 0;
|
88
|
+
if(d.children) {
|
89
|
+
d.children.forEach(hide);
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
function show(d) {
|
94
|
+
d.data.fade = false;
|
95
|
+
if(d.data.original) {
|
96
|
+
d.data.value = d.data.original;
|
97
|
+
}
|
98
|
+
if(d.children) {
|
99
|
+
d.children.forEach(show);
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
function getSiblings(d) {
|
104
|
+
var siblings = [];
|
105
|
+
if (d.parent) {
|
106
|
+
var me = d.parent.children.indexOf(d);
|
107
|
+
siblings = d.parent.children.slice(0);
|
108
|
+
siblings.splice(me, 1);
|
109
|
+
}
|
110
|
+
return siblings;
|
111
|
+
}
|
112
|
+
|
113
|
+
function hideSiblings(d) {
|
114
|
+
var siblings = getSiblings(d);
|
115
|
+
siblings.forEach(function(s) {
|
116
|
+
hide(s);
|
117
|
+
});
|
118
|
+
if(d.parent) {
|
119
|
+
hideSiblings(d.parent);
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
function fadeAncestors(d) {
|
124
|
+
if(d.parent) {
|
125
|
+
d.parent.data.fade = true;
|
126
|
+
fadeAncestors(d.parent);
|
127
|
+
}
|
128
|
+
}
|
129
|
+
|
130
|
+
function getRoot(d) {
|
131
|
+
if(d.parent) {
|
132
|
+
return getRoot(d.parent);
|
133
|
+
}
|
134
|
+
return d;
|
135
|
+
}
|
136
|
+
|
137
|
+
function zoom(d) {
|
138
|
+
tip.hide(d);
|
139
|
+
hideSiblings(d);
|
140
|
+
show(d);
|
141
|
+
fadeAncestors(d);
|
142
|
+
update();
|
143
|
+
if (typeof clickHandler === 'function') {
|
144
|
+
clickHandler(d);
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
function searchTree(d, term) {
|
149
|
+
var re = new RegExp(term),
|
150
|
+
searchResults = [];
|
151
|
+
|
152
|
+
function searchInner(d) {
|
153
|
+
var label = d.data.name;
|
154
|
+
|
155
|
+
if (d.children) {
|
156
|
+
d.children.forEach(function (child) {
|
157
|
+
searchInner(child);
|
158
|
+
});
|
159
|
+
}
|
160
|
+
|
161
|
+
if (label.match(re)) {
|
162
|
+
d.highlight = true;
|
163
|
+
searchResults.push(d);
|
164
|
+
} else {
|
165
|
+
d.highlight = false;
|
166
|
+
}
|
167
|
+
}
|
168
|
+
|
169
|
+
searchInner(d);
|
170
|
+
return searchResults;
|
171
|
+
}
|
172
|
+
|
173
|
+
function clear(d) {
|
174
|
+
d.highlight = false;
|
175
|
+
if(d.children) {
|
176
|
+
d.children.forEach(function(child) {
|
177
|
+
clear(child);
|
178
|
+
});
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
function doSort(a, b) {
|
183
|
+
if (typeof sort === 'function') {
|
184
|
+
return sort(a, b);
|
185
|
+
} else if (sort) {
|
186
|
+
return d3.ascending(a.data.name, b.data.name);
|
187
|
+
} else {
|
188
|
+
return 0;
|
189
|
+
}
|
190
|
+
}
|
191
|
+
|
192
|
+
var partition = d3.partition();
|
193
|
+
|
194
|
+
function update() {
|
195
|
+
|
196
|
+
selection.each(function(root) {
|
197
|
+
var x = d3.scaleLinear().range([0, w]),
|
198
|
+
y = d3.scaleLinear().range([0, c]);
|
199
|
+
|
200
|
+
root.sort(doSort);
|
201
|
+
root.sum(function(d) {
|
202
|
+
if (d.fade) {
|
203
|
+
return 0;
|
204
|
+
}
|
205
|
+
// The node's self value is its total value minus all children.
|
206
|
+
var v = d.v || d.value || 0;
|
207
|
+
if (d.children) {
|
208
|
+
for (var i = 0; i < d.children.length; i++) {
|
209
|
+
v -= d.children[i].value;
|
210
|
+
}
|
211
|
+
}
|
212
|
+
return v;
|
213
|
+
});
|
214
|
+
partition(root);
|
215
|
+
|
216
|
+
var kx = w / (root.x1 - root.x0);
|
217
|
+
function width(d) { return (d.x1 - d.x0) * kx; }
|
218
|
+
|
219
|
+
var g = d3.select(this).select("svg").selectAll("g").data(root.descendants());
|
220
|
+
|
221
|
+
g.transition()
|
222
|
+
.duration(transitionDuration)
|
223
|
+
.ease(transitionEase)
|
224
|
+
.attr("transform", function(d) { return "translate(" + x(d.x0) + ","
|
225
|
+
+ (reversed ? y(d.depth) : (h - y(d.depth) - c)) + ")"; });
|
226
|
+
|
227
|
+
g.select("rect").transition()
|
228
|
+
.duration(transitionDuration)
|
229
|
+
.ease(transitionEase)
|
230
|
+
.attr("width", width);
|
231
|
+
|
232
|
+
var node = g.enter()
|
233
|
+
.append("svg:g")
|
234
|
+
.attr("transform", function(d) { return "translate(" + x(d.x0) + ","
|
235
|
+
+ (reversed ? y(d.depth) : (h - y(d.depth) - c)) + ")"; });
|
236
|
+
|
237
|
+
node.append("svg:rect").attr("width", width);
|
238
|
+
|
239
|
+
if (!tooltip)
|
240
|
+
node.append("svg:title");
|
241
|
+
|
242
|
+
node.append("foreignObject")
|
243
|
+
.append("xhtml:div");
|
244
|
+
|
245
|
+
// Now we have to re-select to see the new elements (why?).
|
246
|
+
g = d3.select(this).select("svg").selectAll("g").data(root.descendants());
|
247
|
+
|
248
|
+
g.attr("width", width)
|
249
|
+
.attr("height", function(d) { return c; })
|
250
|
+
.attr("name", function(d) { return d.data.name; })
|
251
|
+
.attr("class", function(d) { return d.data.fade ? "frame fade" : "frame"; });
|
252
|
+
|
253
|
+
g.select("rect")
|
254
|
+
.attr("height", function(d) { return c; })
|
255
|
+
.attr("fill", function(d) { return colorMapper(d); });
|
256
|
+
|
257
|
+
if (!tooltip)
|
258
|
+
g.select("title")
|
259
|
+
.text(label);
|
260
|
+
|
261
|
+
g.select("foreignObject")
|
262
|
+
.attr("width", width)
|
263
|
+
.attr("height", function(d) { return c; })
|
264
|
+
.select("div")
|
265
|
+
.attr("class", "label")
|
266
|
+
.style("display", function(d) { return (width(d) < 35) ? "none" : "block";})
|
267
|
+
.text(name);
|
268
|
+
|
269
|
+
g.on('click', zoom);
|
270
|
+
|
271
|
+
g.exit().remove();
|
272
|
+
|
273
|
+
g.on('mouseover', function(d) {
|
274
|
+
if (tooltip) tip.show(d);
|
275
|
+
setDetails(label(d));
|
276
|
+
}).on('mouseout', function(d) {
|
277
|
+
if (tooltip) tip.hide(d);
|
278
|
+
setDetails("");
|
279
|
+
});
|
280
|
+
});
|
281
|
+
}
|
282
|
+
|
283
|
+
function merge(data, samples) {
|
284
|
+
samples.forEach(function (sample) {
|
285
|
+
var node = _.find(data, function (element) {
|
286
|
+
return element.name === sample.name;
|
287
|
+
});
|
288
|
+
|
289
|
+
if (node) {
|
290
|
+
if (node.original) {
|
291
|
+
node.original += sample.value;
|
292
|
+
} else {
|
293
|
+
node.value += sample.value;
|
294
|
+
}
|
295
|
+
if (sample.children) {
|
296
|
+
if (!node.children) {
|
297
|
+
node.children = [];
|
298
|
+
}
|
299
|
+
merge(node.children, sample.children)
|
300
|
+
}
|
301
|
+
} else {
|
302
|
+
data.push(sample);
|
303
|
+
}
|
304
|
+
});
|
305
|
+
}
|
306
|
+
|
307
|
+
function chart(s) {
|
308
|
+
var root = d3.hierarchy(s.datum(), function(d) { return d.c || d.children; });
|
309
|
+
selection = s.datum(root);
|
310
|
+
|
311
|
+
if (!arguments.length) return chart;
|
312
|
+
|
313
|
+
selection.each(function(data) {
|
314
|
+
|
315
|
+
if (!svg) {
|
316
|
+
svg = d3.select(this)
|
317
|
+
.append("svg:svg")
|
318
|
+
.attr("width", w)
|
319
|
+
.attr("height", h)
|
320
|
+
.attr("class", "partition d3-flame-graph")
|
321
|
+
.call(tip);
|
322
|
+
|
323
|
+
svg.append("svg:text")
|
324
|
+
.attr("class", "title")
|
325
|
+
.attr("text-anchor", "middle")
|
326
|
+
.attr("y", "25")
|
327
|
+
.attr("x", w/2)
|
328
|
+
.attr("fill", "#808080")
|
329
|
+
.text(title);
|
330
|
+
}
|
331
|
+
});
|
332
|
+
|
333
|
+
// first draw
|
334
|
+
update();
|
335
|
+
}
|
336
|
+
|
337
|
+
chart.height = function (_) {
|
338
|
+
if (!arguments.length) { return h; }
|
339
|
+
h = _;
|
340
|
+
return chart;
|
341
|
+
};
|
342
|
+
|
343
|
+
chart.width = function (_) {
|
344
|
+
if (!arguments.length) { return w; }
|
345
|
+
w = _;
|
346
|
+
return chart;
|
347
|
+
};
|
348
|
+
|
349
|
+
chart.cellHeight = function (_) {
|
350
|
+
if (!arguments.length) { return c; }
|
351
|
+
c = _;
|
352
|
+
return chart;
|
353
|
+
};
|
354
|
+
|
355
|
+
chart.tooltip = function (_) {
|
356
|
+
if (!arguments.length) { return tooltip; }
|
357
|
+
if (typeof _ === "function") {
|
358
|
+
tip = _;
|
359
|
+
}
|
360
|
+
tooltip = true;
|
361
|
+
return chart;
|
362
|
+
};
|
363
|
+
|
364
|
+
chart.title = function (_) {
|
365
|
+
if (!arguments.length) { return title; }
|
366
|
+
title = _;
|
367
|
+
return chart;
|
368
|
+
};
|
369
|
+
|
370
|
+
chart.transitionDuration = function (_) {
|
371
|
+
if (!arguments.length) { return transitionDuration; }
|
372
|
+
transitionDuration = _;
|
373
|
+
return chart;
|
374
|
+
};
|
375
|
+
|
376
|
+
chart.transitionEase = function (_) {
|
377
|
+
if (!arguments.length) { return transitionEase; }
|
378
|
+
transitionEase = _;
|
379
|
+
return chart;
|
380
|
+
};
|
381
|
+
|
382
|
+
chart.sort = function (_) {
|
383
|
+
if (!arguments.length) { return sort; }
|
384
|
+
sort = _;
|
385
|
+
return chart;
|
386
|
+
};
|
387
|
+
|
388
|
+
chart.reversed = function (_) {
|
389
|
+
if (!arguments.length) { return reversed; }
|
390
|
+
reversed = _;
|
391
|
+
return chart;
|
392
|
+
};
|
393
|
+
|
394
|
+
chart.label = function(_) {
|
395
|
+
if (!arguments.length) { return label; }
|
396
|
+
label = _;
|
397
|
+
return chart;
|
398
|
+
};
|
399
|
+
|
400
|
+
chart.search = function(term) {
|
401
|
+
var searchResults = [];
|
402
|
+
selection.each(function(data) {
|
403
|
+
searchResults = searchTree(data, term);
|
404
|
+
update();
|
405
|
+
});
|
406
|
+
return searchResults;
|
407
|
+
};
|
408
|
+
|
409
|
+
chart.clear = function() {
|
410
|
+
selection.each(function(data) {
|
411
|
+
clear(data);
|
412
|
+
update();
|
413
|
+
});
|
414
|
+
};
|
415
|
+
|
416
|
+
chart.zoomTo = function(d) {
|
417
|
+
zoom(d);
|
418
|
+
};
|
419
|
+
|
420
|
+
chart.resetZoom = function() {
|
421
|
+
selection.each(function (data) {
|
422
|
+
zoom(data); // zoom to root
|
423
|
+
});
|
424
|
+
};
|
425
|
+
|
426
|
+
chart.onClick = function(_) {
|
427
|
+
if (!arguments.length) {
|
428
|
+
return clickHandler;
|
429
|
+
}
|
430
|
+
clickHandler = _;
|
431
|
+
return chart;
|
432
|
+
};
|
433
|
+
|
434
|
+
chart.merge = function(samples) {
|
435
|
+
var newRoot; // Need to re-create hierarchy after data changes.
|
436
|
+
selection.each(function (root) {
|
437
|
+
merge([root.data], [samples]);
|
438
|
+
newRoot = d3.hierarchy(root.data, function(d) { return d.c || d.children; });
|
439
|
+
});
|
440
|
+
selection = selection.datum(newRoot);
|
441
|
+
update();
|
442
|
+
}
|
443
|
+
|
444
|
+
chart.color = function(_) {
|
445
|
+
if (!arguments.length) { return colorMapper; }
|
446
|
+
colorMapper = _;
|
447
|
+
return chart;
|
448
|
+
};
|
449
|
+
|
450
|
+
return chart;
|
451
|
+
}
|
452
|
+
|
453
|
+
if (typeof module !== 'undefined' && module.exports){
|
454
|
+
module.exports = flameGraph;
|
455
|
+
}
|
456
|
+
else {
|
457
|
+
d3.flameGraph = flameGraph;
|
458
|
+
}
|
459
|
+
})();
|