Skip to content

Commit b9dd06c

Browse files
MainRoMainRo
committed
Re-enabled tooltip and removed sidebar for better readability
1 parent 984a375 commit b9dd06c

File tree

7 files changed

+146
-80
lines changed

7 files changed

+146
-80
lines changed

‎source/EventPlot/EventPlot.css

+56-13
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,6 @@
55
shape-rendering: crispEdges;
66
}
77

8-
div.tooltip {
9-
position: absolute;
10-
text-align: left;
11-
width: 30ex;
12-
height: 5em;
13-
padding: 2px;
14-
font: 12px sans-serif;
15-
background: lightsteelblue;
16-
border: 1px;
17-
border-radius: 8px;
18-
/* pointer-events: none; This line needs to be removed */
19-
}
20-
218
.dot {
229
fill: #fff;
2310
stroke: darkgray;
@@ -39,3 +26,59 @@ div.tooltip {
3926
fill-opacity: .125;
4027
shape-rendering: crispEdges;
4128
}
29+
30+
.d3-tip {
31+
line-height: 1;
32+
padding: 3px;
33+
background: #4c4c4c;
34+
color: #fff;
35+
border-radius: 5px;
36+
pointer-events: none;
37+
border: none;
38+
}
39+
40+
/* Creates a small triangle extender for the tooltip */
41+
.d3-tip:after {
42+
box-sizing: border-box;
43+
display: inline;
44+
font-size: 10px;
45+
width: 100%;
46+
line-height: 1;
47+
color: #4c4c4c;
48+
position: absolute;
49+
pointer-events: none;
50+
}
51+
52+
/* Northward tooltips */
53+
.d3-tip.n:after {
54+
content: "\25BC";
55+
margin: -1px 0 0 0;
56+
top: 100%;
57+
left: 0;
58+
text-align: center;
59+
}
60+
61+
/* Eastward tooltips */
62+
.d3-tip.e:after {
63+
content: "\25C0";
64+
margin: -4px 0 0 0;
65+
top: 50%;
66+
left: -8px;
67+
}
68+
69+
/* Southward tooltips */
70+
.d3-tip.s:after {
71+
content: "\25B2";
72+
margin: 0 0 1px 0;
73+
top: -8px;
74+
left: 0;
75+
text-align: center;
76+
}
77+
78+
/* Westward tooltips */
79+
.d3-tip.w:after {
80+
content: "\25B6";
81+
margin: -4px 0 0 -1px;
82+
top: 50%;
83+
left: 100%;
84+
}

‎source/EventPlot/EventPlot.js

+63-50
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,19 @@ enyo.kind({
44
kind: enyo.Control,
55

66
published: {
7-
data: undefined,
8-
tooltipListener: undefined,
7+
data: undefined
98
},
109

1110
components : [
1211
{ tag : "div", name : "context"},
1312
{ tag : "div", name : "focus"}
1413
],
14+
tooltipView: undefined,
15+
16+
create: function() {
17+
this.inherited(arguments);
18+
this.tooltipView = new edvent.InfoView();
19+
},
1520

1621
plot: function() {
1722

@@ -48,6 +53,24 @@ enyo.kind({
4853
.call(axis);
4954
};
5055

56+
tip = d3.tip().attr('class', 'd3-tip')
57+
.render( enyo.bind(this, function(node, d) {
58+
this.tooltipView.setTo(d);
59+
this.tooltipView.renderInto(node);
60+
})
61+
);
62+
63+
tip.offset(function(width) {
64+
return function(d) {
65+
return this.getBoundingClientRect().left > width / 2 ? [0, -10] : [0, 10];
66+
}
67+
}(width))
68+
.direction(function(width) {
69+
return function(d) {
70+
return this.getBoundingClientRect().left > width / 2 ? "w" : "e";
71+
}
72+
}(width));
73+
5174
brushed = function() {
5275
x.domain(brush.empty() ? x2.domain() : brush.extent());
5376
svg.selectAll(".line")
@@ -142,6 +165,7 @@ enyo.kind({
142165
.append("g")
143166
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
144167

168+
svg.call(tip);
145169
svg.append("defs").append("clipPath")
146170
.attr("transform", "translate(" + 0 + "," + -7 + ")")
147171
.attr("id", "clip")
@@ -174,6 +198,37 @@ enyo.kind({
174198
.style("text-anchor", "end")
175199
.text(function(d, index) { return class_list[index].key;});
176200

201+
// lines
202+
var line = d3.svg.line()
203+
.interpolate("step-after")
204+
.x(function(d) { return x(d.index); })
205+
.y(function(d) { return yList[d.class_index](d.method); });
206+
207+
var objects = function(d, index) {
208+
return colorList[index].domain().map(function(obj) {
209+
return {
210+
obj: obj,
211+
class_index : index,
212+
values: d.values.filter(function(e) {
213+
return e.obj == obj;
214+
})
215+
};
216+
});
217+
};
218+
219+
var object = svg.selectAll(".object")
220+
.data(objects)
221+
.enter().append("g")
222+
.attr("class", "object");
223+
224+
object.append("path")
225+
.attr("clip-path", "url(#clip)")
226+
.attr("class", "line")
227+
.attr("d", function(d) { return line(d.values); })
228+
.style("stroke", function(d) {
229+
return colorList[d.class_index](d.obj);
230+
});
231+
177232
// scatter plot
178233
var shapes = svg.append("g")
179234
.attr("clip-path", "url(#clip)")
@@ -189,12 +244,8 @@ enyo.kind({
189244
.attr("cx", function(d) { return x(d.index); })
190245
.attr("cy", function(d) { return yList[d.class_index](d.method); })
191246
.style("fill", function(d) { return colorList[d.class_index](d.obj); })
192-
193-
.on("mouseover", enyo.bind(this, function(d) {
194-
if(this.tooltipListener != undefined)
195-
this.tooltipListener(d);
196-
}));
197-
247+
.on('mouseover', tip.show)
248+
.on('mouseout', tip.hide);
198249

199250
// entry
200251
shapes.append("rect")
@@ -205,11 +256,8 @@ enyo.kind({
205256
.attr("width", 10)
206257
.attr("height", 10)
207258
.style("fill", function(d) { return colorList[d.class_index](d.obj); })
208-
209-
.on("mouseover", enyo.bind(this, function(d) {
210-
if(this.tooltipListener != undefined)
211-
this.tooltipListener(d);
212-
}));
259+
.on('mouseover', tip.show)
260+
.on('mouseout', tip.hide);
213261

214262
// exit
215263
shapes.append("rect")
@@ -223,43 +271,8 @@ enyo.kind({
223271
.attr("width", 10)
224272
.attr("height", 10)
225273
.style("fill", function(d) { return colorList[d.class_index](d.obj); })
226-
227-
.on("mouseover", enyo.bind(this, function(d) {
228-
if(this.tooltipListener != undefined)
229-
this.tooltipListener(d);
230-
}));
231-
232-
// lines
233-
var line = d3.svg.line()
234-
.interpolate("step-after")
235-
.x(function(d) { return x(d.index); })
236-
.y(function(d) { return yList[d.class_index](d.method); });
237-
238-
var objects = function(d, index) {
239-
return colorList[index].domain().map(function(obj) {
240-
return {
241-
obj: obj,
242-
class_index : index,
243-
values: d.values.filter(function(e) {
244-
return e.obj == obj;
245-
})
246-
};
247-
});
248-
};
249-
250-
var object = svg.selectAll(".object")
251-
.data(objects)
252-
.enter().append("g")
253-
.attr("class", "object");
254-
255-
object.append("path")
256-
.attr("clip-path", "url(#clip)")
257-
.attr("class", "line")
258-
.attr("d", function(d) { return line(d.values); })
259-
.style("stroke", function(d) {
260-
return colorList[d.class_index](d.obj);
261-
});
262-
274+
.on('mouseover', tip.show)
275+
.on('mouseout', tip.hide);
263276
}
264277

265278

‎source/package.js

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ enyo.depends(
22
// Layout library
33
"$lib/layout",
44
"$lib/d3.min.js",
5+
"$lib/d3-tip.js",
56
// Onyx UI library
67
"$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source,
78
// CSS/LESS style files

‎source/views/InfoView.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.edvent-infoview .onyx-groupbox {
2+
border-radius: 0;
3+
}
4+
5+
.edvent-infoview .onyx-groupbox-header {
6+
border-radius: 0;
7+
text-transform: none;
8+
}

‎source/views/InfoView.js

+17-15
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,40 @@
66

77
enyo.kind({
88
name: "edvent.InfoView",
9-
classes: "onyx",
9+
classes: "onyx edvent-infoview",
10+
11+
published: {
12+
entry: undefined
13+
},
14+
1015
components:[
1116
{kind: "onyx.Groupbox", components: [
12-
{kind: "onyx.GroupboxHeader", content: "Object"},
13-
{name:"cls", content: "", style: "padding: 8px;"},
14-
{name:"method", content: "", style: "padding: 8px;"},
15-
{name:"object", content: "", style: "padding: 8px;"},
16-
{name:"type", content: "", style: "padding: 8px;"}
17+
{name:"method", kind: "onyx.GroupboxHeader", content: ""},
18+
{name:"cls", content: "", style: "padding: 3px;"},
19+
{name:"object", content: "", style: "padding: 3px;"},
20+
{name:"type", content: "", style: "padding: 3px;"}
1721
]},
18-
{tag: "br"},
19-
{kind: "onyx.Groupbox", components: [
20-
{kind: "onyx.GroupboxHeader", content: "Links"},
21-
{content: "I'm a group item!", style: "padding: 8px;"},
22-
{content: "I'm a group item!", style: "padding: 8px;"}
23-
]},
24-
{tag: "br"},
2522
{kind: "onyx.Groupbox", components: [
2623
{kind: "onyx.GroupboxHeader", content: "Attributes"},
2724
{name:"keys", components: [
2825
]},
2926
]},
3027
],
3128

29+
entryChanged: function() {
30+
this.setTo(this.entry);
31+
},
32+
3233
setTo : function(entry) {
33-
console.log("setTo");
3434
this.$.cls.setContent(entry.class);
3535
this.$.method.setContent(entry.method);
3636
this.$.object.setContent(entry.obj);
3737
this.$.type.setContent(entry.type);
3838

39+
this.$.keys.destroyComponents();
3940
for(key in entry.data) {
40-
//this.$.keys.createComponent({content:"Foo", style: "padding: 8px;"});
41+
this.$.keys.createComponent({content: "" + key + ": " + entry.data[key],
42+
style: "padding: 3px;"});
4143
}
4244
}
4345
});

‎source/views/package.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
enyo.depends(
22
"views.js",
3+
"InfoView.css",
34
"InfoView.js"
45
);

‎source/views/views.js

-2
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,13 @@ enyo.kind({
1717
]},
1818
{
1919
kind: 'FittableColumns', fit: true, components: [
20-
{ kind:"edvent.InfoView", name:"infoView", style:"width:20ex"},
2120
{kind: "enyo.Scroller", fit: true, components: [
2221
{kind: "edvent.EventPlot", name: "plot"}
2322
]}
2423
]}
2524
],
2625
create: function() {
2726
this.inherited(arguments);
28-
this.$.plot.setTooltipListener(enyo.bind(this.$.infoView, "setTo"));
2927
},
3028
customSelected: function(inSender, inEvent) {
3129
var file = inEvent.files[0];

0 commit comments

Comments
 (0)