Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Gitlab will go into maintenance Friday 3rd February from 9:00 to 10:00
Open sidebar
Fractalis
fractal.js
Commits
52c3d8aa
Commit
52c3d8aa
authored
Aug 04, 2017
by
Sascha Herzinger
Browse files
Added switch feature for control panel
parent
e2c766cf
Changes
10
Hide whitespace changes
Inline
Side-by-side
src/store/actions.js
View file @
52c3d8aa
...
...
@@ -73,5 +73,13 @@ export default {
*/
unsetTask
:
(
context
,
{
taskID
})
=>
{
context
.
commit
(
types
.
UNSET_TASK
,
{
taskID
})
},
/**
* Commits a control panel vm for keeping track of all such instances.
* @param context The context of the action.
* @param taskID The id of the task to remove.
*/
addControlPanel
:
(
context
,
vm
)
=>
{
context
.
commit
(
types
.
ADD_CONTROL_PANEL
,
{
vm
})
}
}
src/store/getters.js
View file @
52c3d8aa
...
...
@@ -3,5 +3,6 @@ export default {
tasks
:
state
=>
state
.
tasks
,
subsets
:
state
=>
state
.
subsets
,
requestManager
:
state
=>
state
.
requestManager
,
controlPanels
:
state
=>
state
.
controlPanels
,
filter
:
state
=>
name
=>
state
.
filters
[
name
]
}
src/store/mutation-types.js
View file @
52c3d8aa
...
...
@@ -4,5 +4,6 @@ export default {
SET_SUBSETS
:
'
SET_SUBSETS
'
,
SET_FILTER
:
'
SET_FILTER
'
,
SET_TASK
:
'
SET_TASK
'
,
UNSET_TASK
:
'
UNSET_TASK
'
UNSET_TASK
:
'
UNSET_TASK
'
,
ADD_CONTROL_PANEL
:
'
ADD_CONTROL_PANEL
'
}
src/store/mutations.js
View file @
52c3d8aa
...
...
@@ -27,5 +27,8 @@ export default {
},
[
types
.
UNSET_TASK
]
(
state
,
{
taskID
})
{
Vue
.
delete
(
state
.
tasks
,
taskID
)
},
[
types
.
ADD_CONTROL_PANEL
]
(
state
,
{
vm
})
{
state
.
controlPanels
.
push
(
vm
)
}
}
src/store/store.js
View file @
52c3d8aa
...
...
@@ -10,6 +10,7 @@ const state = {
data
:
[],
tasks
:
{},
requestManager
:
null
,
controlPanels
:
[],
subsets
:
[],
filters
:
{
ids
:
[]
...
...
src/vue/charts/Boxplot.vue
View file @
52c3d8aa
<
template
>
<div
class=
"fjs-boxplot"
>
<div
class=
"fjs-boxplot"
@
click=
"$emit('focus')"
>
<control-panel
class=
"fjs-control-panel"
>
<control-panel
class=
"fjs-control-panel"
focus=
"focus"
>
<data-box
class=
"fjs-data-box"
header=
"Numerical Variables"
dataType=
"numerical"
...
...
@@ -23,6 +23,7 @@
<input
id=
"fjs-show-kde-check"
type=
"checkbox"
v-model=
"params.showKDE"
/>
<label
for=
"fjs-show-kde-check"
>
Show Density Est.
</label>
</div>
<task-view></task-view>
</control-panel>
<div
class=
"fjs-vis-container"
>
...
...
@@ -114,7 +115,6 @@
</g>
</svg>
</div>
<task-view></task-view>
</div>
</
template
>
...
...
@@ -124,11 +124,11 @@
import
runAnalysis
from
'
../mixins/run-analysis
'
import
*
as
d3
from
'
d3
'
import
{
TweenLite
}
from
'
gsap
'
import
TaskView
from
'
../components/TaskView.vue
'
import
deepFreeze
from
'
deep-freeze-strict
'
import
{
truncateTextUntil
}
from
'
../mixins/utils
'
import
tooltip
from
'
../directives/tooltip
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
import
TaskView
from
'
../components/TaskView.vue
'
export
default
{
name
:
'
boxplot
'
,
data
()
{
...
...
@@ -364,9 +364,9 @@
}
},
components
:
{
TaskView
,
ControlPanel
,
DataBox
,
TaskView
DataBox
},
directives
:
{
tooltip
...
...
src/vue/charts/CorrelationAnalysis.vue
View file @
52c3d8aa
<
template
>
<div
class=
"fjs-correlation-analysis"
>
<div
class=
"fjs-correlation-analysis"
@
click=
"$emit('focus')"
>
<control-panel
class=
"fjs-control-panel"
>
<control-panel
class=
"fjs-control-panel"
focus=
"focus"
>
<data-box
class=
"fjs-data-box"
header=
"X and Y variables"
dataType=
"numerical"
...
...
@@ -24,6 +24,7 @@
<input
type=
"radio"
id=
"fjs-param-method-3"
value=
"kendall"
v-model=
"params.method"
>
<label
for=
"fjs-param-method-3"
>
Kendall
</label>
</fieldset>
<task-view></task-view>
</control-panel>
<div
class=
"fjs-vis-container"
>
...
...
@@ -121,6 +122,7 @@
import
tooltip
from
'
../directives/tooltip.js
'
import
deepFreeze
from
'
deep-freeze-strict
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
import
TaskView
from
'
../components/TaskView.vue
'
export
default
{
name
:
'
correlation-analysis
'
,
data
()
{
...
...
@@ -450,6 +452,7 @@
window
.
removeEventListener
(
'
resize
'
,
this
.
handleResize
)
}
,
components
:
{
TaskView
,
ControlPanel
,
DataBox
}
,
...
...
src/vue/charts/Heatmap.vue
View file @
52c3d8aa
<
template
>
<div
class=
"fjs-heatmap"
>
<control-panel>
<div
class=
"fjs-heatmap"
@
click=
"$emit('focus')"
>
<control-panel
focus=
"focus"
>
<data-box
class=
"fjs-data-box"
header=
"Numerical Array Data"
dataType=
"numerical_array"
v-on:update=
"update_numericArrayData"
>
</data-box>
<task-view></task-view>
</control-panel>
<div
class=
"fjs-vis-container"
>
...
...
@@ -46,7 +47,6 @@
</g>
</svg>
</div>
<task-view></task-view>
</div>
</
template
>
...
...
@@ -56,10 +56,10 @@
import
runAnalysis
from
'
../mixins/run-analysis
'
import
*
as
d3
from
'
d3
'
import
tooltip
from
'
../directives/tooltip.js
'
import
TaskView
from
'
../components/TaskView.vue
'
import
deepFreeze
from
'
deep-freeze-strict
'
import
{
truncateTextUntil
}
from
'
../mixins/utils
'
import
ControlPanel
from
'
../components/ControlPanel.vue
'
import
TaskView
from
'
../components/TaskView.vue
'
export
default
{
name
:
'
heatmap
'
,
data
()
{
...
...
@@ -223,9 +223,9 @@
window
.
removeEventListener
(
'
resize
'
,
this
.
handleResize
)
},
components
:
{
TaskView
,
ControlPanel
,
DataBox
,
TaskView
DataBox
},
directives
:
{
tooltip
...
...
src/vue/components/ControlPanel.vue
View file @
52c3d8aa
<
template
>
<div
class=
"fjs-control-panel"
:style=
"
{left: tweened.position.left + 'px'}"
@mouseover="showPanel"
@mouseout="hidePanel">
v-show="focused"
@mouseover="locked ? noop() : show()"
@mouseout="locked ? noop() : hide()">
<span
class=
"fjs-lock-btn"
v-html=
"lockIcon"
@
click=
"toggleLock"
></span>
<slot></slot>
<task-view></task-view>
...
...
@@ -13,11 +14,20 @@
<
script
>
import
TaskView
from
'
./TaskView.vue
'
import
{
TweenLite
}
from
'
gsap
'
import
store
from
'
../../store/store
'
export
default
{
name
:
'
control-panel
'
,
props
:
{
focus
:
{
type
:
String
,
required
:
true
}
},
data
()
{
return
{
focused
:
true
,
locked
:
false
,
expanded
:
false
,
tweened
:
{
position
:
{
left
:
0
...
...
@@ -31,30 +41,58 @@
}
},
methods
:
{
noop
()
{},
toggleLock
()
{
this
.
locked
=
!
this
.
locked
this
.
propagateState
()
},
showPanel
()
{
if
(
this
.
locked
)
{
return
}
show
(
animate
)
{
animate
=
typeof
animate
===
'
undefined
'
?
true
:
animate
const
panelWidth
=
window
.
innerWidth
-
this
.
$el
.
getBoundingClientRect
().
width
return
TweenLite
.
to
(
this
.
tweened
.
position
,
0.75
,
{
left
:
panelWidth
})
this
.
expanded
=
true
this
.
propagateState
()
return
TweenLite
.
to
(
this
.
tweened
.
position
,
animate
?
0.75
:
0
,
{
left
:
panelWidth
})
},
hidePanel
()
{
if
(
this
.
locked
)
{
return
}
return
TweenLite
.
to
(
this
.
tweened
.
position
,
0.75
,
{
left
:
window
.
innerWidth
*
0.98
})
hide
(
animate
)
{
animate
=
typeof
animate
===
'
undefined
'
?
true
:
animate
this
.
expanded
=
false
this
.
propagateState
()
return
TweenLite
.
to
(
this
.
tweened
.
position
,
animate
?
0.75
:
0
,
{
left
:
window
.
innerWidth
*
0.98
})
},
unFocus
()
{
this
.
focused
=
false
},
unfocusAll
()
{
store
.
getters
.
controlPanels
.
forEach
(
panel
=>
{
panel
.
unFocus
()
})
},
propagateState
()
{
store
.
getters
.
controlPanels
.
forEach
(
panel
=>
{
panel
.
locked
=
this
.
locked
panel
.
expanded
=
this
.
expanded
})
}
},
mounted
()
{
window
.
addEventListener
(
'
resize
'
,
()
=>
{
this
.
locked
=
false
this
.
hide
Panel
()
this
.
hide
()
})
this
.
tweened
.
position
.
left
=
window
.
innerWidth
this
.
showPanel
().
eventCallback
(
'
onComplete
'
,
this
.
hidePanel
)
this
.
show
().
eventCallback
(
'
onComplete
'
,
this
.
hide
)
},
created
()
{
store
.
dispatch
(
'
addControlPanel
'
,
this
)
this
.
$parent
.
$on
(
this
.
focus
,
()
=>
{
this
.
unfocusAll
()
this
.
focused
=
true
this
.
$nextTick
(()
=>
{
this
.
expanded
?
this
.
show
(
false
)
:
this
.
hide
(
false
)
})
})
this
.
unfocusAll
()
this
.
focused
=
true
},
components
:
{
TaskView
...
...
@@ -75,7 +113,7 @@
height
:
100%
min-width
:
15vw
.fjs-lock-btn
margin-bottom
:
5
0%
margin-bottom
:
2
0%
cursor
:
pointer
.fjs-balancer
margin-top
:
auto
...
...
test/charts/correlationAnalysis/correlation-analysis.html
View file @
52c3d8aa
...
...
@@ -11,6 +11,9 @@
<div
style=
"height: 50%; width: 50%"
>
<div
id=
"placeholder1"
></div>
</div>
<div
style=
"height: 50%; width: 50%"
>
<div
id=
"placeholder2"
></div>
</div>
</body>
<script>
...
...
@@ -86,4 +89,5 @@
}
fjs
.
setChart
({
chart
:
'
correlation-analysis
'
,
selector
:
'
#placeholder1
'
})
fjs
.
setChart
({
chart
:
'
boxplot
'
,
selector
:
'
#placeholder2
'
})
</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