Skip to content

Commit 2538ccf

Browse files
rueckstiessrueckstiess
committed
pulled in d3-tip so we can fix a bug
see caged/d3-tip#96
1 parent 1812ed6 commit 2538ccf

File tree

5 files changed

+329
-5
lines changed

5 files changed

+329
-5
lines changed

‎scout-ui/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
"ampersand-view-switcher": "^2.0.0",
5050
"bootstrap": "https://github.com/twbs/bootstrap/archive/v3.3.2.tar.gz",
5151
"d3": "^3.5.5",
52-
"d3-tip": "^0.6.7",
5352
"debug": "^2.0.0",
5453
"domready": "^1.0.7",
5554
"event-stream": "^3.3.0",

‎scout-ui/src/minicharts/d3-tip.js‎

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
// d3.tip
2+
// Copyright (c) 2013 Justin Palmer
3+
//
4+
// Tooltips for d3.js SVG visualizations
5+
6+
(function (root, factory) {
7+
if (typeof define === 'function' && define.amd) {
8+
// AMD. Register as an anonymous module with d3 as a dependency.
9+
define(['d3'], factory)
10+
} else if (typeof module === 'object' && module.exports) {
11+
// CommonJS
12+
module.exports = function(d3) {
13+
d3.tip = factory(d3)
14+
return d3.tip
15+
}
16+
} else {
17+
// Browser global.
18+
root.d3.tip = factory(root.d3)
19+
}
20+
}(this, function (d3) {
21+
22+
// Public - contructs a new tooltip
23+
//
24+
// Returns a tip
25+
return function() {
26+
var direction = d3_tip_direction,
27+
offset = d3_tip_offset,
28+
html = d3_tip_html,
29+
node = initNode(),
30+
svg = null,
31+
point = null,
32+
target = null
33+
34+
function tip(vis) {
35+
svg = getSVGNode(vis)
36+
if (!svg) return;
37+
point = svg.createSVGPoint()
38+
document.body.appendChild(node)
39+
}
40+
41+
// Public - show the tooltip on the screen
42+
//
43+
// Returns a tip
44+
tip.show = function() {
45+
var args = Array.prototype.slice.call(arguments)
46+
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
47+
48+
var content = html.apply(this, args),
49+
poffset = offset.apply(this, args),
50+
dir = direction.apply(this, args),
51+
nodel = getNodeEl(),
52+
i = directions.length,
53+
coords,
54+
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
55+
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
56+
57+
nodel.html(content)
58+
.style({ opacity: 1, 'pointer-events': 'all' })
59+
60+
while(i--) nodel.classed(directions[i], false)
61+
coords = direction_callbacks.get(dir).apply(this)
62+
nodel.classed(dir, true).style({
63+
top: (coords.top + poffset[0]) + scrollTop + 'px',
64+
left: (coords.left + poffset[1]) + scrollLeft + 'px'
65+
})
66+
67+
return tip
68+
}
69+
70+
// Public - hide the tooltip
71+
//
72+
// Returns a tip
73+
tip.hide = function() {
74+
var nodel = getNodeEl()
75+
nodel.style({ opacity: 0, 'pointer-events': 'none' })
76+
return tip
77+
}
78+
79+
// Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value.
80+
//
81+
// n - name of the attribute
82+
// v - value of the attribute
83+
//
84+
// Returns tip or attribute value
85+
tip.attr = function(n, v) {
86+
if (arguments.length < 2 && typeof n === 'string') {
87+
return getNodeEl().attr(n)
88+
} else {
89+
var args = Array.prototype.slice.call(arguments)
90+
d3.selection.prototype.attr.apply(getNodeEl(), args)
91+
}
92+
93+
return tip
94+
}
95+
96+
// Public: Proxy style calls to the d3 tip container. Sets or gets a style value.
97+
//
98+
// n - name of the property
99+
// v - value of the property
100+
//
101+
// Returns tip or style property value
102+
tip.style = function(n, v) {
103+
if (arguments.length < 2 && typeof n === 'string') {
104+
return getNodeEl().style(n)
105+
} else {
106+
var args = Array.prototype.slice.call(arguments)
107+
d3.selection.prototype.style.apply(getNodeEl(), args)
108+
}
109+
110+
return tip
111+
}
112+
113+
// Public: Set or get the direction of the tooltip
114+
//
115+
// v - One of n(north), s(south), e(east), or w(west), nw(northwest),
116+
// sw(southwest), ne(northeast) or se(southeast)
117+
//
118+
// Returns tip or direction
119+
tip.direction = function(v) {
120+
if (!arguments.length) return direction
121+
direction = v == null ? v : d3.functor(v)
122+
123+
return tip
124+
}
125+
126+
// Public: Sets or gets the offset of the tip
127+
//
128+
// v - Array of [x, y] offset
129+
//
130+
// Returns offset or
131+
tip.offset = function(v) {
132+
if (!arguments.length) return offset
133+
offset = v == null ? v : d3.functor(v)
134+
135+
return tip
136+
}
137+
138+
// Public: sets or gets the html value of the tooltip
139+
//
140+
// v - String value of the tip
141+
//
142+
// Returns html value or tip
143+
tip.html = function(v) {
144+
if (!arguments.length) return html
145+
html = v == null ? v : d3.functor(v)
146+
147+
return tip
148+
}
149+
150+
// Public: destroys the tooltip and removes it from the DOM
151+
//
152+
// Returns a tip
153+
tip.destroy = function() {
154+
if(node) {
155+
getNodeEl().remove();
156+
node = null;
157+
}
158+
return tip;
159+
}
160+
161+
function d3_tip_direction() { return 'n' }
162+
function d3_tip_offset() { return [0, 0] }
163+
function d3_tip_html() { return ' ' }
164+
165+
var direction_callbacks = d3.map({
166+
n: direction_n,
167+
s: direction_s,
168+
e: direction_e,
169+
w: direction_w,
170+
nw: direction_nw,
171+
ne: direction_ne,
172+
sw: direction_sw,
173+
se: direction_se
174+
}),
175+
176+
directions = direction_callbacks.keys()
177+
178+
function direction_n() {
179+
var bbox = getScreenBBox()
180+
return {
181+
top: bbox.n.y - node.offsetHeight,
182+
left: bbox.n.x - node.offsetWidth / 2
183+
}
184+
}
185+
186+
function direction_s() {
187+
var bbox = getScreenBBox()
188+
return {
189+
top: bbox.s.y,
190+
left: bbox.s.x - node.offsetWidth / 2
191+
}
192+
}
193+
194+
function direction_e() {
195+
var bbox = getScreenBBox()
196+
return {
197+
top: bbox.e.y - node.offsetHeight / 2,
198+
left: bbox.e.x
199+
}
200+
}
201+
202+
function direction_w() {
203+
var bbox = getScreenBBox()
204+
return {
205+
top: bbox.w.y - node.offsetHeight / 2,
206+
left: bbox.w.x - node.offsetWidth
207+
}
208+
}
209+
210+
function direction_nw() {
211+
var bbox = getScreenBBox()
212+
return {
213+
top: bbox.nw.y - node.offsetHeight,
214+
left: bbox.nw.x - node.offsetWidth
215+
}
216+
}
217+
218+
function direction_ne() {
219+
var bbox = getScreenBBox()
220+
return {
221+
top: bbox.ne.y - node.offsetHeight,
222+
left: bbox.ne.x
223+
}
224+
}
225+
226+
function direction_sw() {
227+
var bbox = getScreenBBox()
228+
return {
229+
top: bbox.sw.y,
230+
left: bbox.sw.x - node.offsetWidth
231+
}
232+
}
233+
234+
function direction_se() {
235+
var bbox = getScreenBBox()
236+
return {
237+
top: bbox.se.y,
238+
left: bbox.e.x
239+
}
240+
}
241+
242+
function initNode() {
243+
var node = d3.select(document.createElement('div'))
244+
node.style({
245+
position: 'absolute',
246+
top: 0,
247+
opacity: 0,
248+
'pointer-events': 'none',
249+
'box-sizing': 'border-box'
250+
})
251+
252+
return node.node()
253+
}
254+
255+
function getSVGNode(el) {
256+
el = el.node()
257+
if (!el) return;
258+
if(el.tagName.toLowerCase() === 'svg')
259+
return el
260+
261+
return el.ownerSVGElement
262+
}
263+
264+
function getNodeEl() {
265+
if(node === null) {
266+
node = initNode();
267+
// re-add node to DOM
268+
document.body.appendChild(node);
269+
};
270+
return d3.select(node);
271+
}
272+
273+
// Private - gets the screen coordinates of a shape
274+
//
275+
// Given a shape on the screen, will return an SVGPoint for the directions
276+
// n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest),
277+
// sw(southwest).
278+
//
279+
// +-+-+
280+
// | |
281+
// + +
282+
// | |
283+
// +-+-+
284+
//
285+
// Returns an Object {n, s, e, w, nw, sw, ne, se}
286+
function getScreenBBox() {
287+
var targetel = target || d3.event.target;
288+
289+
while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) {
290+
targetel = targetel.parentNode;
291+
}
292+
293+
var bbox = {},
294+
matrix = targetel.getScreenCTM(),
295+
tbbox = targetel.getBBox(),
296+
width = tbbox.width,
297+
height = tbbox.height,
298+
x = tbbox.x,
299+
y = tbbox.y
300+
301+
point.x = x
302+
point.y = y
303+
bbox.nw = point.matrixTransform(matrix)
304+
point.x += width
305+
bbox.ne = point.matrixTransform(matrix)
306+
point.y += height
307+
bbox.se = point.matrixTransform(matrix)
308+
point.x -= width
309+
bbox.sw = point.matrixTransform(matrix)
310+
point.y -= height / 2
311+
bbox.w = point.matrixTransform(matrix)
312+
point.x += width
313+
bbox.e = point.matrixTransform(matrix)
314+
point.x -= width / 2
315+
point.y -= height / 2
316+
bbox.n = point.matrixTransform(matrix)
317+
point.y += height
318+
bbox.s = point.matrixTransform(matrix)
319+
320+
return bbox
321+
}
322+
323+
return tip
324+
};
325+
326+
}));

‎scout-ui/src/minicharts/d3fns/date.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ var shared = require('./shared');
55
var many = require('./many');
66
var debug = require('debug')('scout-ui:minicharts:date');
77

8-
require('d3-tip')(d3);
8+
require('../d3-tip')(d3);
99

1010
function generateDefaults(n) {
1111
var doc = {};
@@ -180,4 +180,3 @@ module.exports = function(opts) {
180180
.text('\uf017');
181181

182182
};
183-

‎scout-ui/src/minicharts/d3fns/few.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var tooltipHtml = require('./tooltip.jade');
44
var shared = require('./shared');
55
var debug = require('debug')('scout-ui:minicharts:few');
66

7-
require('d3-tip')(d3);
7+
require('../d3-tip')(d3);
88

99
module.exports = function(data, g, width, height, options) {
1010

‎scout-ui/src/minicharts/d3fns/many.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var tooltipHtml = require('./tooltip.jade');
44
var shared = require('./shared');
55
var debug = require('debug')('scout-ui:minicharts:many');
66

7-
require('d3-tip')(d3);
7+
require('../d3-tip')(d3);
88

99
module.exports = function(data, g, width, height, options) {
1010

0 commit comments

Comments
 (0)