Commit c4a3af15 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

implemented tooltips

parent 6e901f33
......@@ -43,6 +43,7 @@
"jsdoc": "^3.4.3",
"d3": "^4.7.4",
"d3-tip": "^0.7.1",
"gsap": "^1.19.1"
}
}
\ No newline at end of file
.d3-tip {
z-index: 9999;
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
pointer-events: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 16px;
width: 100%;
line-height: 0.8;
color: rgba(0, 0, 0, 0.8);
position: absolute;
pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -12px;
}
/* Southward tooltips */
.d3-tip.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
\ No newline at end of file
......@@ -87,6 +87,7 @@
import DataBox from '../DataBox.vue'
import requestHandling from '../mixins/request-handling'
import * as d3 from 'd3'
import d3Tip from 'd3-tip'; d3.tip = d3Tip
import { TweenLite } from 'gsap'
export default {
name: 'correlation-analysis',
......@@ -113,7 +114,7 @@
method: '',
x_label: '',
y_label: '',
get data() {
get data () {
return {
id: [],
[this.x_label]: [],
......@@ -130,7 +131,7 @@
method: '',
x_label: '',
y_label: '',
get data() {
get data () {
return {
id: [],
[this.x_label]: [],
......@@ -164,6 +165,12 @@
const height = this.height - this.margin.top - this.margin.bottom
return { width, height }
},
tip () {
return d3.tip()
.attr('class', 'd3-tip')
.offset([-15, 0])
.html(d => d)
},
shownPoints () {
const xs = [], ys = [], ids = []
let all = []
......@@ -180,7 +187,7 @@
}
return { xs, ys, ids, all }
},
tmpPoints() {
tmpPoints () {
const xs = [], ys = [], ids = []
let all = []
if (! this.tmpAnalysisResults.init) {
......@@ -330,6 +337,19 @@
d3.select('#brush').call(newBrush)
}
},
'shownPoints': {
handler: function() {
const vm = this
vm.$nextTick(() => { // wait until `circle` is actually rendered based on new shownPoints
d3.selectAll('circle').on('mouseover', function(d) {
const circle = d3.select(this)
const idx = circle.attr('data-idx')
vm.tip.show(`<span>${idx}</span>`)
})
d3.selectAll('circle').on('mouseout', vm.tip.hide)
})
}
},
'regLine': {
handler: function(newRegLine, oldRegLine) {
const coords = oldRegLine
......@@ -360,12 +380,13 @@
}
}
},
mounted() {
mounted () {
window.addEventListener('resize', this.onResize)
this.onResize() // initial call
this.tmpAnalysisResults = this.shownAnalysisResults
d3.select('svg').call(this.tip)
},
beforeDestroy() {
beforeDestroy () {
window.removeEventListener('resize', this.onResize)
},
components: {
......@@ -444,6 +465,8 @@
</style>
<!--CSS for dynamically created components-->
<style src="../../assets/tooltip.css"></style>
<style>
.fjs-corr-axis .tick {
shape-rendering: crispEdges;
......
......@@ -38,7 +38,9 @@ module.exports = {
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/,
include: [
path.resolve(__dirname, 'src', 'components')
],
options: {
// compile the <script></script> part of vue components with babel
loaders: {
......@@ -52,8 +54,14 @@ module.exports = {
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'test')
],
exclude: /node_modules/
]
},
{
test: /\.css$/,
loader: 'css-loader',
include: [
path.resolve(__dirname, 'src', 'assets'),
]
}
]
},
......
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