Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Fractalis
fractal.js
Commits
3b9b9ee3
Commit
3b9b9ee3
authored
Jul 11, 2017
by
Sascha Herzinger
Browse files
New attempt at getting tooltips fixed
parent
7c967715
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/vue/charts/Boxplot.vue
View file @
3b9b9ee3
...
...
@@ -190,22 +190,14 @@
.
call
(
newAxis
.
y
)
})
}
},
'
results
'
:
{
handler
:
function
()
{
// Vue reuses elements, so when additional boxplots are added the tooltips might reference the
// the wrong boxes. This resets all tooltips when new back end data come in.
Object
.
keys
(
this
.
tooltips
).
forEach
(
label
=>
this
.
tooltips
[
label
].
forEach
(
d
=>
d
.
tip
.
destroyAll
()))
this
.
tooltips
=
{}
}
}
},
methods
:
{
showTooltip
(
label
)
{
if
(
typeof
this
.
tooltips
[
label
]
!==
'
undefined
'
)
{
this
.
tooltips
[
label
].
forEach
(
d
=>
d
.
tip
.
show
(
d
.
tip
.
getPopperElement
(
d
.
el
)))
return
}
// https://github.com/atomiks/tippyjs/issues/74
Object
.
keys
(
this
.
tooltips
).
forEach
(
label
=>
this
.
tooltips
[
label
].
forEach
(
d
=>
d
.
tip
.
destroyAll
(
)))
this
.
tooltips
=
{}
const
defaultOptions
=
{
performance
:
true
,
theme
:
'
light
'
,
...
...
src/vue/charts/CorrelationAnalysis.vue
View file @
3b9b9ee3
...
...
@@ -7,9 +7,9 @@
v-on:update=
"update_xyData"
>
</data-box>
<data-box
class=
"fjs-data-box"
header=
"
Annotation
s"
header=
"
Categorie
s"
dataType=
"categorical"
v-on:update=
"update_
annotation
Data"
>
v-on:update=
"update_
category
Data"
>
</data-box>
</div>
...
...
@@ -51,9 +51,10 @@
:cx=
"scales.x(point.x)"
:cy=
"scales.y(point.y)"
r=
"4"
:fill=
"
annotationColors[annotations.indexOf(point.annotation) % annotation
Colors.length]"
:fill=
"
categoryColors[categories.indexOf(point.category) % category
Colors.length]"
:stroke=
"subsetColors[point.subset]"
:title=
"point.tooltip"
:data-test=
"point.tooltip"
v-for=
"point in shownPoints.all"
>
</circle>
<line
class=
"fjs-lin-reg-line"
...
...
@@ -130,8 +131,8 @@
width
:
0
,
height
:
0
,
xyData
:
[],
annotation
Data
:
[],
annotation
Colors
:
d3
.
schemeCategory10
,
category
Data
:
[],
category
Colors
:
d3
.
schemeCategory10
,
subsetColors
:
d3
.
schemeCategory10
.
slice
().
reverse
(),
params
:
{
method
:
'
pearson
'
...
...
@@ -177,7 +178,7 @@
id_filter
:
this
.
selectedPoints
.
map
(
d
=>
d
.
id
),
method
:
this
.
params
.
method
,
subsets
:
store
.
getters
.
subsets
,
annotations
:
this
.
annotation
Data
categories
:
this
.
category
Data
}
}
,
margin
()
{
...
...
@@ -192,61 +193,58 @@
const
height
=
this
.
height
-
this
.
margin
.
top
-
this
.
margin
.
bottom
return
{
width
,
height
}
}
,
annotation
s
()
{
return
this
.
shownPoints
.
annotation
s
.
filter
((
d
,
i
,
arr
)
=>
arr
.
indexOf
(
d
)
===
i
)
// make unique
categorie
s
()
{
return
this
.
shownPoints
.
categorie
s
.
filter
((
d
,
i
,
arr
)
=>
arr
.
indexOf
(
d
)
===
i
)
// make unique
}
,
shownPoints
()
{
const
xs
=
[]
const
ys
=
[]
const
ids
=
[]
const
subsets
=
[]
const
annotation
s
=
[]
const
categorie
s
=
[]
const
all
=
this
.
shownResults
.
data
.
map
(
d
=>
{
const
x
=
d
[
this
.
shownResults
.
x_label
]
const
y
=
d
[
this
.
shownResults
.
y_label
]
const
id
=
d
.
id
const
subset
=
d
.
subset
const
annotation
=
d
.
annotation
const
category
=
d
.
category
let
tooltip
=
`
<div>
<p>${[this.shownResults.x_label]
}
: ${x
}
</p>
<p>${[this.shownResults.y_label]
}
: ${y
}
</p>
<p>Subset: ${subset
}
</p>
${typeof
annotation
!== 'undefined' ? '<p>
Annotation:' + annotation
+ '</p>' : ''
}
${typeof
category
!== 'undefined' ? '<p>
Category: ' + category
+ '</p>' : ''
}
</div>
`
if
(
typeof
annotation
!==
'
undefined
'
)
{
tooltip
+=
`<Annotation: ${annotation
}
`
}
xs
.
push
(
x
)
ys
.
push
(
y
)
ids
.
push
(
id
)
subsets
.
push
(
subset
)
annotations
.
push
(
annotation
)
return
{
x
,
y
,
id
,
subset
,
annotation
,
tooltip
}
categories
.
push
(
category
)
return
{
x
,
y
,
id
,
subset
,
category
,
tooltip
}
}
)
return
{
xs
,
ys
,
ids
,
subsets
,
annotation
s
,
all
}
return
{
xs
,
ys
,
ids
,
subsets
,
categorie
s
,
all
}
}
,
tmpPoints
()
{
const
xs
=
[]
const
ys
=
[]
const
ids
=
[]
const
subsets
=
[]
const
annotation
s
=
[]
const
categorie
s
=
[]
const
all
=
this
.
tmpResults
.
data
.
map
(
d
=>
{
const
x
=
d
[
this
.
tmpResults
.
x_label
]
const
y
=
d
[
this
.
tmpResults
.
y_label
]
const
id
=
d
.
id
const
subset
=
d
.
subset
const
annotation
=
d
.
annotation
const
category
=
d
.
category
xs
.
push
(
x
)
ys
.
push
(
y
)
ids
.
push
(
id
)
subsets
.
push
(
subset
)
annotations
.
push
(
annotation
)
return
{
x
,
y
,
id
,
subset
,
annotation
}
categories
.
push
(
category
)
return
{
x
,
y
,
id
,
subset
,
category
}
}
)
return
{
xs
,
ys
,
ids
,
subsets
,
annotation
s
,
all
}
return
{
xs
,
ys
,
ids
,
subsets
,
categorie
s
,
all
}
}
,
scales
()
{
const
x
=
d3
.
scaleLinear
()
...
...
@@ -380,8 +378,12 @@
watch
:
{
'
shownPoints
'
:
{
handler
:
function
()
{
// https://github.com/atomiks/tippyjs/issues/74
if
(
typeof
this
.
tooltips
.
points
!==
'
undefined
'
)
{
this
.
tooltips
.
points
.
destroyAll
()
}
this
.
$nextTick
(()
=>
{
t
ippy
(
'
.fjs-scatterplot-point:not([data-tooltipped])
'
,
{
t
his
.
tooltips
.
points
=
tippy
(
`.fjs-vm-uid-${this._uid
}
.fjs-scatterplot-point:not([data-tooltipped])
`
,
{
performance
:
true
,
theme
:
'
light
'
,
arrow
:
true
...
...
@@ -392,11 +394,12 @@
'
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-lin-reg-line:not([data-tooltipped])
'
,
{
this
.
tooltips
.
regLine
=
tippy
(
`.fjs-vm-uid-${this._uid
}
.fjs-lin-reg-line:not([data-tooltipped])
`
,
{
theme
:
'
light
'
,
arrow
:
true
,
followCursor
:
true
...
...
@@ -426,7 +429,7 @@
// if our data selection change we will want to re-initialize the current view
const
init
=
newArgs
.
x
!==
oldArgs
.
x
||
newArgs
.
y
!==
oldArgs
.
y
||
JSON
.
stringify
(
newArgs
.
annotation
s
)
!==
JSON
.
stringify
(
oldArgs
.
annotation
s
)
JSON
.
stringify
(
newArgs
.
categorie
s
)
!==
JSON
.
stringify
(
oldArgs
.
categorie
s
)
const
args
=
this
.
args
args
.
id_filter
=
init
?
[]
:
args
.
id_filter
if
(
this
.
validArgs
)
{
...
...
@@ -503,8 +506,8 @@
update_xyData
(
ids
)
{
this
.
xyData
=
ids
}
,
update_
annotation
Data
(
ids
)
{
this
.
annotation
Data
=
ids
update_
category
Data
(
ids
)
{
this
.
category
Data
=
ids
}
}
}
...
...
@@ -554,7 +557,7 @@
stroke
-
width
:
1
px
fill
:
#
ffd100
.
fjs
-
scatterplot
-
point
stroke
-
width
:
2
stroke
-
width
:
1
.
fjs
-
scatterplot
-
point
:
hover
fill
:
#
f00
.
fjs
-
brush
...
...
test/charts/boxplot/boxplot.html
View file @
3b9b9ee3
...
...
@@ -17,7 +17,7 @@
</body>
<script>
/* eslint-disable
no-undef
*/
/* eslint-disable */
const
fjs
=
fractal
.
init
({
handler
:
'
ada
'
,
...
...
@@ -31,23 +31,55 @@
fjs
.
loadData
([
{
dictionary
:
{
name
:
'
VITALHTCM
'
,
projection
:
'
VITALHTCM
'
,
label
:
'
Height
'
,
fieldType
:
'
Integer
'
,
name
:
'
Geschlecht
'
,
projection
:
'
Geschlecht
'
,
label
:
'
Gender
'
,
fieldType
:
'
Enum
'
,
numValues
:
{
"
0
"
:
"
female
"
,
"
1
"
:
"
male
"
},
isArray
:
false
},
data_set
:
'
denopa.clinical_baseline
'
},
{
dictionary
:
{
name
:
'
a_CRF_Bildung
'
,
projection
:
'
a_CRF_Bildung
'
,
label
:
'
Education
'
,
fieldType
:
'
Enum
'
,
numValues
:
{
"
0
"
:
"
High School Degree
"
,
"
1
"
:
"
High School degree
"
,
"
2
"
:
"
High school / elementary school
"
,
"
3
"
:
"
Realschule / GCSE
"
},
isArray
:
false
},
data_set
:
'
denopa.clinical_baseline
'
},
{
dictionary
:
{
name
:
'
a_AESD_S_mean
'
,
projection
:
'
a_AESD_S_mean
'
,
label
:
'
AESD S Mean
'
,
fieldType
:
'
Double
'
,
isArray
:
false
},
data_set
:
'
ppmi
.clinical_
visit
'
data_set
:
'
denopa
.clinical_
baseline
'
},
{
dictionary
:
{
name
:
'
VITALWGTKG
'
,
projection
:
'
VITALWGTKG
'
,
label
:
'
Weight
'
,
name
:
'
a_AESD_I_mean
'
,
projection
:
'
a_AESD_I_mean
'
,
label
:
'
AESD I Mean
'
,
fieldType
:
'
Double
'
,
isArray
:
false
},
data_set
:
'
ppmi.clinical_visit
'
data_set
:
'
denopa.clinical_baseline
'
},
{
dictionary
:
{
name
:
'
a_Alter
'
,
projection
:
'
a_Alter
'
,
label
:
'
Age
'
,
fieldType
:
'
Integer
'
,
isArray
:
false
},
data_set
:
'
denopa.clinical_baseline
'
}
])
}
...
...
test/charts/correlationAnalysis/correlation-analysis.html
View file @
3b9b9ee3
...
...
@@ -17,7 +17,7 @@
</body>
<script>
/* eslint-disable
no-undef
*/
/* eslint-disable */
const
fjs
=
fractal
.
init
({
handler
:
'
ada
'
,
...
...
@@ -31,23 +31,55 @@
fjs
.
loadData
([
{
dictionary
:
{
name
:
'
VITALHTCM
'
,
projection
:
'
VITALHTCM
'
,
label
:
'
Height
'
,
fieldType
:
'
Integer
'
,
name
:
'
Geschlecht
'
,
projection
:
'
Geschlecht
'
,
label
:
'
Gender
'
,
fieldType
:
'
Enum
'
,
numValues
:
{
"
0
"
:
"
female
"
,
"
1
"
:
"
male
"
},
isArray
:
false
},
data_set
:
'
denopa.clinical_baseline
'
},
{
dictionary
:
{
name
:
'
a_CRF_Bildung
'
,
projection
:
'
a_CRF_Bildung
'
,
label
:
'
Education
'
,
fieldType
:
'
Enum
'
,
numValues
:
{
"
0
"
:
"
High School Degree
"
,
"
1
"
:
"
High School degree
"
,
"
2
"
:
"
High school / elementary school
"
,
"
3
"
:
"
Realschule / GCSE
"
},
isArray
:
false
},
data_set
:
'
denopa.clinical_baseline
'
},
{
dictionary
:
{
name
:
'
a_AESD_S_mean
'
,
projection
:
'
a_AESD_S_mean
'
,
label
:
'
AESD S Mean
'
,
fieldType
:
'
Double
'
,
isArray
:
false
},
data_set
:
'
ppmi
.clinical_
visit
'
data_set
:
'
denopa
.clinical_
baseline
'
},
{
dictionary
:
{
name
:
'
VITALWGTKG
'
,
projection
:
'
VITALWGTKG
'
,
label
:
'
Weight
'
,
name
:
'
a_AESD_I_mean
'
,
projection
:
'
a_AESD_I_mean
'
,
label
:
'
AESD I Mean
'
,
fieldType
:
'
Double
'
,
isArray
:
false
},
data_set
:
'
ppmi.clinical_visit
'
data_set
:
'
denopa.clinical_baseline
'
},
{
dictionary
:
{
name
:
'
a_Alter
'
,
projection
:
'
a_Alter
'
,
label
:
'
Age
'
,
fieldType
:
'
Integer
'
,
isArray
:
false
},
data_set
:
'
denopa.clinical_baseline
'
}
])
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment