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
711a08dc
Commit
711a08dc
authored
Aug 07, 2017
by
Sascha Herzinger
Browse files
Some css and eye candy
parent
170a5d96
Changes
10
Hide whitespace changes
Inline
Side-by-side
src/assets/base.sass
View file @
711a08dc
...
...
@@ -6,3 +6,10 @@
font-weight
:
400
font-size
:
14px
src
:
local
(
'Roboto'
)
,
local
(
'Roboto-Regular'
)
,
url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2)
format
(
'woff2'
)
*
font-family
:
Roboto
,
sans-serif
.fjs-seperator
width
:
100%
margin
:
20px
0
20px
0
\ No newline at end of file
src/vue/charts/Boxplot.vue
View file @
711a08dc
...
...
@@ -25,7 +25,7 @@
</div>
</control-panel>
<
div
class=
"fjs-
vis-container
"
>
<
chart
class=
"fjs-
chart
"
>
<svg
:width=
"width"
:height=
"height"
>
<g
:transform=
"`translate($
{margin.left}, ${margin.top})`">
...
...
@@ -113,12 +113,14 @@
</g>
</g>
</svg>
</
div
>
</
chart
>
</div>
</
template
>
<
script
>
import
DataBox
from
'
../components/DataBox.vue
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
import
Chart
from
'
../components/Chart.vue
'
import
store
from
'
../../store/store
'
import
runAnalysis
from
'
../mixins/run-analysis
'
import
*
as
d3
from
'
d3
'
...
...
@@ -126,7 +128,6 @@
import
deepFreeze
from
'
deep-freeze-strict
'
import
{
truncateTextUntil
}
from
'
../mixins/utils
'
import
tooltip
from
'
../directives/tooltip
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
export
default
{
name
:
'
boxplot
'
,
data
()
{
...
...
@@ -343,7 +344,7 @@
this
.
catData
=
ids
},
handleResize
()
{
const
container
=
this
.
$el
.
querySelector
(
'
.fjs-
vis-container
svg
'
)
const
container
=
this
.
$el
.
querySelector
(
'
.fjs-
chart
svg
'
)
// noinspection JSSuspiciousNameCombination
this
.
height
=
container
.
getBoundingClientRect
().
width
this
.
width
=
container
.
getBoundingClientRect
().
width
...
...
@@ -363,7 +364,8 @@
},
components
:
{
ControlPanel
,
DataBox
DataBox
,
Chart
},
directives
:
{
tooltip
...
...
@@ -381,19 +383,13 @@
<
style
lang=
"sass"
scoped
>
@import
'./src/assets/base.sass'
*
font-family
:
Roboto
,
sans-serif
.fjs-boxplot
height
:
100%
width
:
100%
display
:
flex
flex-direction
:
column
.fjs-control-panel
hr
width
:
100%
margin
:
20px
0
20px
0
.fjs-vis-container
.fjs-chart
flex
:
1
display
:
flex
.fjs-tooltip
...
...
src/vue/charts/CorrelationAnalysis.vue
View file @
711a08dc
...
...
@@ -26,7 +26,7 @@
</fieldset>
</control-panel>
<
div
class=
"fjs-
vis-container
"
>
<
chart
class=
"fjs-
chart
"
>
<svg
:height=
"height"
:width=
"width"
>
<g
:transform=
"`translate($
{margin.left}, ${margin.top})`">
<g
class=
"fjs-corr-axis fjs-x-axis-1"
:transform=
"`translate(0, $
{padded.height})`">
</g>
...
...
@@ -108,19 +108,20 @@
<
/tr
>
<
/table
>
<
/div
>
<
/
div
>
<
/
chart
>
<
/div
>
<
/template
>
<
script
>
import
DataBox
from
'
../components/DataBox.vue
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
import
Chart
from
'
../components/Chart.vue
'
import
store
from
'
../../store/store
'
import
runAnalysis
from
'
../mixins/run-analysis
'
import
*
as
d3
from
'
d3
'
import
{
TweenLite
}
from
'
gsap
'
import
tooltip
from
'
../directives/tooltip.js
'
import
deepFreeze
from
'
deep-freeze-strict
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
export
default
{
name
:
'
correlation-analysis
'
,
data
()
{
...
...
@@ -451,7 +452,8 @@
}
,
components
:
{
ControlPanel
,
DataBox
DataBox
,
Chart
}
,
directives
:
{
tooltip
...
...
@@ -475,7 +477,7 @@
.
catch
(
error
=>
console
.
error
(
error
))
}
,
handleResize
()
{
const
container
=
this
.
$el
.
querySelector
(
`.fjs-
vis-container
svg`
)
const
container
=
this
.
$el
.
querySelector
(
`.fjs-
chart
svg`
)
// noinspection JSSuspiciousNameCombination
this
.
height
=
container
.
getBoundingClientRect
().
width
this
.
width
=
container
.
getBoundingClientRect
().
width
...
...
@@ -494,18 +496,12 @@
<
style
lang
=
"
sass
"
scoped
>
@
import
'
./src/assets/base.sass
'
*
font
-
family
:
Roboto
,
sans
-
serif
.
fjs
-
correlation
-
analysis
height
:
100
%
width
:
100
%
display
:
flex
flex
-
direction
:
column
.
fjs
-
control
-
panel
hr
width
:
100
%
margin
:
20
px
0
20
px
0
.
fjs
-
correlation
-
method
white
-
space
:
nowrap
border
:
solid
1
px
#
fff
...
...
@@ -513,7 +509,7 @@
border
-
radius
:
8
px
margin
:
1
%
.
fjs
-
vis
-
container
.
fjs
-
chart
flex
:
1
display
:
flex
svg
...
...
@@ -540,7 +536,6 @@
flex
-
direction
:
column
.
fjs
-
stats
-
table
width
:
100
%
margin
:
1
%
border
-
spacing
:
0
border
-
collapse
:
collapse
font
-
size
:
0.875
rem
...
...
src/vue/charts/Heatmap.vue
View file @
711a08dc
...
...
@@ -7,9 +7,10 @@
v-on:update=
"update_numericArrayData"
>
</data-box>
<hr
class=
"fjs-seperator"
/>
</control-panel>
<
div
class=
"fjs-
vis-container
"
>
<
chart
class=
"fjs-
chart
"
>
<svg
height=
"100%"
width=
"100%"
>
<g
:transform=
"`translate($
{margin.left}, ${margin.top})`">
<text
class=
"fjs-id-label"
...
...
@@ -46,19 +47,20 @@
</rect>
</g>
</svg>
</
div
>
</
chart
>
</div>
</
template
>
<
script
>
import
DataBox
from
'
../components/DataBox.vue
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
import
Chart
from
'
../components/Chart.vue
'
import
store
from
'
../../store/store
'
import
runAnalysis
from
'
../mixins/run-analysis
'
import
*
as
d3
from
'
d3
'
import
tooltip
from
'
../directives/tooltip.js
'
import
deepFreeze
from
'
deep-freeze-strict
'
import
{
truncateTextUntil
}
from
'
../mixins/utils
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
export
default
{
name
:
'
heatmap
'
,
data
()
{
...
...
@@ -80,12 +82,16 @@
numerical_arrays
:
this
.
numericArrayDataIds
,
numericals
:
[],
categoricals
:
[],
id_filter
:
this
.
idFilter
,
subsets
:
store
.
getters
.
subsets
}
},
validArgs
()
{
return
this
.
numericArrayDataIds
.
length
>
0
},
idFilter
()
{
return
store
.
getters
.
filter
(
'
ids
'
)
},
margin
()
{
const
left
=
this
.
width
/
5
const
top
=
this
.
height
/
10
...
...
@@ -197,7 +203,7 @@
})
},
handleResize
()
{
const
container
=
this
.
$el
.
querySelector
(
'
.fjs-
vis-container
svg
'
)
const
container
=
this
.
$el
.
querySelector
(
'
.fjs-
chart
svg
'
)
this
.
height
=
container
.
getBoundingClientRect
().
height
this
.
width
=
container
.
getBoundingClientRect
().
width
},
...
...
@@ -223,7 +229,8 @@
},
components
:
{
ControlPanel
,
DataBox
DataBox
,
Chart
},
directives
:
{
tooltip
...
...
@@ -234,9 +241,6 @@
<
style
lang=
"sass"
scoped
>
@import
'./src/assets/base.sass'
*
font-family
:
Roboto
,
sans-serif
.fjs-heatmap
height
:
100%
width
:
100%
...
...
@@ -244,11 +248,8 @@
flex-direction
:
column
.fjs-control-panel
hr
width
:
100%
margin
:
20px
0
20px
0
.fjs-
vis-container
.fjs-
chart
flex
:
1
display
:
flex
svg
...
...
src/vue/components/Chart.vue
0 → 100644
View file @
711a08dc
<
template
>
<div
class=
"fjs-chart"
>
<slot></slot>
</div>
</
template
>
<
script
>
export
default
{
name
:
'
chart
'
}
</
script
>
<
style
lang=
"sass"
scoped
>
.fjs-chart
border
:
2px
solid
rgba
(
0
,
0
,
0
,
0
)
&
:hover
border
:
2px
solid
#29d5ff
</
style
>
src/vue/components/ControlPanel.vue
View file @
711a08dc
...
...
@@ -100,6 +100,8 @@
</
script
>
<
style
lang=
"sass"
scoped
>
@import
'./src/assets/base.sass'
.fjs-control-panel
background
:
rgba
(
0
,
0
,
0
,
0
.8
)
color
:
white
...
...
@@ -111,9 +113,7 @@
padding
:
20px
height
:
100%
min-width
:
15vw
hr
width
:
100%
margin
:
20px
0
20px
0
.fjs-lock-btn
margin-bottom
:
5vh
cursor
:
pointer
...
...
src/vue/components/DataBox.vue
View file @
711a08dc
...
...
@@ -69,8 +69,6 @@
handler
:
function
(
newItems
)
{
const
existingIDs
=
newItems
.
map
(
d
=>
d
.
task_id
)
// this removes selected IDs when they expired in the back end
console
.
log
(
existingIDs
)
console
.
log
(
this
.
selectedIDs
.
filter
(
id
=>
existingIDs
.
indexOf
(
id
)
!==
-
1
))
this
.
selectedIDs
=
this
.
selectedIDs
.
filter
(
id
=>
existingIDs
.
indexOf
(
id
)
!==
-
1
)
}
}
...
...
src/vue/components/TaskView.vue
View file @
711a08dc
...
...
@@ -40,10 +40,13 @@
</
script
>
<
style
lang=
"sass"
scoped
>
@import
'./src/assets/base.sass'
.fjs-task-view
display
:
flex
flex-direction
:
column
justify-content
:
flex-start
.fjs-state-container
width
:
100%
display
:
flex
...
...
test/charts/heatmap/heatmap.html
View file @
711a08dc
...
...
@@ -25,7 +25,7 @@
}
})
fjs
.
setSubsets
([[
'
598
10b
f1f70000
4b0430179f
'
,
'
598
10b
f1f70000
4b043017a0
'
,
'
598
10b
f1f70000
4b043017a1
'
,
'
598
10b
f1f70000
4b043017a2
'
,
'
598
10b
f1f70000
4b043017a3
'
,
'
598
10b
f1f70000
4b043017a4
'
,
'
598
10b
f1f70000
4b043017a5
'
,
'
598
10b
f1f70000
4b043017a6
'
,
'
598
10b
f1f70000
4b043017a7
'
,
'
598
10b
f1f70000
4b043017a8
'
,
'
598
10b
f1f70000
4b043017a9
'
,
'
598
10b
f1f70000
4b043017aa
'
,
'
598
10b
f1f70000
4b043017ab
'
,
'
598
10b
f1f70000
4b043017ac
'
,
'
598
10b
f1f70000
4b043017ad
'
,
'
598
10b
f1f70000
4b043017ae
'
,
'
598
10b
f1f70000
4b043017af
'
,
'
598
10b
f1f70000
4b043017b0
'
,
'
598
10b
f1f70000
4b043017b1
'
,
'
598
10b
f1f70000
4b043017b2
'
,
'
598
10b
f1f70000
4b043017b3
'
,
'
598
10b
f1f70000
4b043017b4
'
,
'
598
10b
f1f70000
4b043017b5
'
]
,
[
'
598
10b
f1f70000
4b043017b6
'
,
'
598
10b
f1f70000
4b043017b7
'
,
'
598
10b
f1f70000
4b043017b8
'
,
'
598
10b
f1f70000
4b043017b9
'
,
'
598
10b
f1f70000
4b043017ba
'
,
'
598
10b
f1f70000
4b043017bb
'
,
'
598
10b
f1f70000
4b043017bc
'
,
'
598
10b
f1f70000
4b043017bd
'
,
'
598
10b
f1f70000
4b043017be
'
,
'
598
10b
f1f70000
4b043017bf
'
,
'
598
10b
f1f70000
4b043017c0
'
,
'
598
10b
f1f70000
4b043017c1
'
,
'
598
10b
f1f70000
4b043017c2
'
,
'
598
10b
f1f70000
4b043017c3
'
,
'
598
10b
f1f70000
4b043017c4
'
,
'
598
10b
f1f70000
4b043017c5
'
,
'
598
10b
f1f70000
4b043017c6
'
,
'
598
10b
f1f70000
4b043017c7
'
,
'
598
10b
f1f70000
4b043017c8
'
,
'
598
10b
f1f70000
4b043017c9
'
,
'
598
10b
f1f70000
4b043017ca
'
,
'
598
10b
f1f70000
4b043017cb
'
,
'
598
10b
f1f70000
4b043017cc
'
,
'
598
10b
f1f70000
4b043017cd
'
,
'
598
10b
f1f70000
4b043017ce
'
,
'
598
10b
f1f70000
4b043017cf
'
,
'
598
10b
f1f70000
4b043017d0
'
,
'
598
10b
f1f70000
4b043017d1
'
,
'
598
10b
f1f70000
4b04
3017d
2
'
,
'
598
10b
f1f70000
4b043017d3
'
,
'
598
10b
f1f70000
4b043017d4
'
,
'
598
10b
f1f70000
4b043017d5
'
,
'
598
10b
f1f70000
4b043017d6
'
,
'
598
10b
f1f70000
4b043017d7
'
,
'
598
10b
f1f70000
4b043017d8
'
,
'
598
10b
f1f70000
4b043017d9
'
,
'
598
10b
f1f70000
4b043017da
'
,
'
598
10b
f1f70000
4b043017db
'
,
'
598
10b
f1f70000
4b043017dc
'
,
'
598
10bf2
f70000
4b043017dd
'
,
'
598
10bf2
f70000
4b043017de
'
,
'
598
10bf2
f70000
4b043017df
'
,
'
598
10bf2
f70000
4b043017e0
'
,
'
598
10bf2
f70000
4b043017e1
'
,
'
598
10bf2
f70000
4b043017e2
'
,
'
598
10bf2
f70000
4b043017e3
'
,
'
598
10bf2
f70000
4b043017e4
'
,
'
598
10bf2
f70000
4b043017e5
'
,
'
598
10bf2
f70000
4b043017e6
'
,
'
598
10bf2
f70000
4b043017e7
'
,
'
598
10bf2
f70000
4b043017e8
'
]])
fjs
.
setSubsets
([[
'
598
3ae
f1f70000
250130194a
'
,
'
598
3ae
f1f70000
250130194b
'
,
'
598
3ae
f1f70000
250130194c
'
,
'
598
3ae
f1f70000
250130194d
'
,
'
598
3ae
f1f70000
250130194e
'
,
'
598
3ae
f1f70000
250130194f
'
,
'
598
3ae
f1f70000
2501301950
'
,
'
598
3ae
f1f70000
2501301951
'
,
'
598
3ae
f1f70000
2501301952
'
,
'
598
3ae
f1f70000
2501301953
'
,
'
598
3ae
f1f70000
2501301954
'
,
'
598
3ae
f1f70000
2501301955
'
,
'
598
3ae
f1f70000
2501301956
'
,
'
598
3ae
f1f70000
2501301957
'
,
'
598
3ae
f1f70000
2501301958
'
,
'
598
3ae
f1f70000
2501301959
'
,
'
598
3ae
f1f70000
250130195a
'
,
'
598
3ae
f1f70000
250130195b
'
,
'
598
3ae
f1f70000
250130195c
'
,
'
598
3ae
f1f70000
250130195d
'
,
'
598
3ae
f1f70000
250130195e
'
,
'
598
3ae
f1f70000
250130195f
'
,
'
598
3ae
f1f70000
2501301960
'
,
'
598
3ae
f1f70000
2501301961
'
,
'
598
3ae
f1f70000
2501301962
'
,
'
598
3ae
f1f70000
2501301963
'
,
'
598
3ae
f1f70000
2501301964
'
,
'
598
3ae
f1f70000
2501301965
'
,
'
598
3ae
f1f70000
2501301966
'
,
'
598
3ae
f1f70000
2501301967
'
,
'
598
3ae
f1f70000
2501301968
'
,
'
598
3ae
f1f70000
2501301969
'
,
'
598
3ae
f1f70000
250130196a
'
,
'
598
3ae
f1f70000
250130196b
'
]
,
[
'
598
3ae
f1f70000
250130196c
'
,
'
598
3ae
f1f70000
250130196d
'
,
'
598
3ae
f1f70000
250130196e
'
,
'
598
3ae
f1f70000
250130196f
'
,
'
598
3ae
f1f70000
2501301970
'
,
'
598
3ae
f1f70000
2501301971
'
,
'
598
3ae
f1f70000
2501301972
'
,
'
598
3ae
f1f70000
2501301973
'
,
'
598
3ae
f1f70000
2501301974
'
,
'
598
3ae
f1f70000
2501301975
'
,
'
598
3ae
f1f70000
2501301976
'
,
'
598
3ae
f1f70000
2501301977
'
,
'
598
3ae
f1f70000
2501301978
'
,
'
598
3ae
f1f70000
2501301979
'
,
'
598
3ae
f1f70000
250130197a
'
,
'
598
3ae
f1f70000
250130197b
'
,
'
598
3ae
f1f70000
250130197c
'
,
'
598
3ae
f1f70000
2501
301
9
7d
'
,
'
598
3ae
f1f70000
250130197e
'
,
'
598
3ae
f1f70000
250130197f
'
,
'
598
3ae
f1f70000
2501301980
'
,
'
598
3ae
f1f70000
2501301981
'
,
'
598
3ae
f1f70000
2501301982
'
,
'
598
3ae
f1f70000
2501301983
'
,
'
598
3ae
f1f70000
2501301984
'
,
'
598
3ae
f1f70000
2501301985
'
,
'
598
3ae
f1f70000
2501301986
'
,
'
598
3ae
f1f70000
2501301987
'
,
'
598
3aef1
f70000
2501301988
'
,
'
598
3aef1
f70000
2501301989
'
,
'
598
3aef1
f70000
250130198a
'
,
'
598
3aef1
f70000
250130198b
'
,
'
598
3aef1
f70000
250130198c
'
,
'
598
3aef1
f70000
250130198d
'
,
'
598
3aef1
f70000
250130198e
'
,
'
598
3aef1
f70000
250130198f
'
,
'
598
3aef1
f70000
2501301990
'
,
'
598
3aef1
f70000
2501301991
'
,
'
598
3aef1
f70000
2501301992
'
,
'
598
3aef1
f70000
2501301993
'
]])
function
loadData
()
{
fjs
.
loadData
([
...
...
test/charts/multi/multi-chart.html
0 → 100644
View file @
711a08dc
<!doctype html>
<head>
<script
src=
"http://localhost:8080/credentials.js"
></script>
<script
src=
"http://localhost:8080/fractal.js"
></script>
</head>
<body>
<input
type=
"button"
onclick=
"loadData()"
value=
"load data"
/>
<input
type=
"button"
onclick=
"deleteData()"
value=
"delete data"
/>
<div
style=
"height: 50%; width: 50%"
>
<div
id=
"placeholder1"
></div>
</div>
<div
style=
"height: 50%; width: 50%"
>
<div
id=
"placeholder2"
></div>
</div>
<div
style=
"height: 50%; width: 50%"
>
<div
id=
"placeholder3"
></div>
</div>
</body>
<script>
/* eslint-disable */
const
fjs
=
fractal
.
init
({
handler
:
'
ada
'
,
thisBaseURL
:
'
https://ada.parkinson.lu
'
,
fractalisBaseURL
:
'
http://127.0.0.1:5000
'
,
getAuth
()
{
return
credentials1
}
})
function
loadData
()
{
fjs
.
loadData
([
{
dictionary
:
{
name
:
'
cadenceR
'
,
projection
:
'
cadenceR
'
,
label
:
'
Cadence Right
'
,
fieldType
:
'
Double
'
,
isArray
:
false
},
data_set
:
'
egait.features
'
},
{
dictionary
:
{
name
:
'
cadenceL
'
,
projection
:
'
cadenceL
'
,
label
:
'
Cadence Left
'
,
fieldType
:
'
Double
'
,
isArray
:
false
},
data_set
:
'
egait.features
'
},
{
dictionary
:
{
name
:
'
entropyR
'
,
projection
:
'
entropyR
'
,
label
:
'
Entropy Right
'
,
fieldType
:
'
Double
'
,
isArray
:
true
},
data_set
:
'
egait.features
'
},
{
dictionary
:
{
name
:
'
entropyL
'
,
projection
:
'
entropyL
'
,
label
:
'
Entropy Left
'
,
fieldType
:
'
Double
'
,
isArray
:
true
},
data_set
:
'
egait.features
'
}
])
}
function
deleteData
()
{
fjs
.
clearCache
()
}
fjs
.
setChart
({
chart
:
'
correlation-analysis
'
,
selector
:
'
#placeholder1
'
})
fjs
.
setChart
({
chart
:
'
boxplot
'
,
selector
:
'
#placeholder2
'
})
fjs
.
setChart
({
chart
:
'
heatmap
'
,
selector
:
'
#placeholder3
'
})
</script>
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