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

Finally a working tooltip library

parent e264fa75
......@@ -25,6 +25,7 @@
"gsap": "^1.20.2",
"jquery": "^3.2.1",
"tippy.js": "^1.1.0",
"uuid": "^3.1.0",
"vue": "^2.3.3",
"vue-template-compiler": "^2.3.3",
"vuex": "^2.3.1"
......
......@@ -53,12 +53,11 @@
r="4"
:fill="categoryColors[categories.indexOf(point.category) % categoryColors.length]"
:stroke="subsetColors[point.subset]"
:title="point.tooltip"
:data-test="point.tooltip"
v-tooltip="{title: point.tooltip, options: {theme: 'light', arrow: true}}"
v-for="point in shownPoints.all">
</circle>
<line class="fjs-lin-reg-line"
:title="regLine.tooltip"
v-tooltip="{title: regLine.tooltip, options: {theme: 'light', arrow: true, followCursor: true}}"
:x1="tweened.regLine.x1"
:x2="tweened.regLine.x2"
:y1="tweened.regLine.y1"
......@@ -120,9 +119,9 @@
import requestHandling from '../methods/run-analysis'
import * as d3 from 'd3'
import { TweenLite } from 'gsap'
import tooltip from '../directives/tooltip.js'
import TaskView from '../components/TaskView.vue'
import deepFreeze from 'deep-freeze-strict'
import tippy from 'tippy.js'
export default {
name: 'correlation-analysis',
data () {
......@@ -158,7 +157,6 @@
data: []
},
selectedPoints: [],
tooltips: {},
tweened: {
regLine: {x1: 0, x2: 0, y1: 0, y2: 0}
}
......@@ -376,35 +374,9 @@
// statement. This helps with the integration into the Vue component lifecycle. E.g.: an animation can't be
// applied to an element that does not exist yet.
watch: {
'shownPoints': {
handler: function () {
// https://github.com/atomiks/tippyjs/issues/74
if (typeof this.tooltips.points !== 'undefined') {
this.tooltips.points.destroyAll()
}
this.$nextTick(() => {
this.tooltips.points = tippy(`.fjs-vm-uid-${this._uid} .fjs-scatterplot-point:not([data-tooltipped])`, {
performance: true,
theme: 'light',
arrow: true
})
})
}
},
'regLine': {
handler: function (newRegLine) {
TweenLite.to(this.tweened.regLine, 0.5, newRegLine)
// https://github.com/atomiks/tippyjs/issues/74
if (typeof this.tooltips.regLine !== 'undefined') {
this.tooltips.regLine.destroyAll()
}
this.$nextTick(() => {
this.tooltips.regLine = tippy(`.fjs-vm-uid-${this._uid} .fjs-lin-reg-line:not([data-tooltipped])`, {
theme: 'light',
arrow: true,
followCursor: true
})
})
}
},
'histPolyPoints': {
......@@ -474,11 +446,14 @@
},
components: {
DataBox,
TaskView
TaskView,
},
mixins: [
requestHandling
],
directives: {
tooltip
},
methods: {
runAnalysisWrapper ({init, args}) {
// function made available via requestHandling mixin
......
import tippy from 'tippy.js'
import uuid4 from 'uuid/v4'
export default {
update: function (el, binding, vnode) {
if (typeof vnode.context.$options._tippyInstances === 'undefined') {
vnode.context.$options._tippyInstances = {}
}
if (!el.hasAttribute('data-tooltipped')) {
const uuid = uuid4()
el.setAttribute('title', binding.value.title)
el.setAttribute('data-uuid', uuid)
const tip = tippy(el, Object.assign(binding.value.options, {
performance: true
}))
vnode.context.$options._tippyInstances[uuid] = tip
} else {
const uuid = el.getAttribute('data-uuid')
const tip = vnode.context.$options._tippyInstances[uuid]
const popper = tip.getPopperElement(el)
el.setAttribute('title', binding.value.title)
tip.update(popper)
}
}
}
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