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
2d814533
Commit
2d814533
authored
Feb 21, 2018
by
Sascha Herzinger
Browse files
Fixed some DataBox related bugs
parent
4781e075
Pipeline
#3753
failed with stages
in 1 minute and 15 seconds
Changes
9
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/vue/charts/Boxplot.vue
View file @
2d814533
...
...
@@ -4,12 +4,12 @@
<control-panel
class=
"fjs-control-panel"
name=
"Boxplot Panel"
>
<data-box
class=
"fjs-data-box"
header=
"Numerical Variables"
dataType=
"numerical"
:
dataType
s
=
"
['
numerical
']
"
v-on:update=
"update_numData"
>
</data-box>
<data-box
class=
"fjs-data-box"
header=
"Categorical Variables"
dataType=
"categorical"
:
dataType
s
=
"
['
categorical
']
"
v-on:update=
"update_catData"
>
</data-box>
<hr
class=
"fjs-seperator"
/>
...
...
@@ -113,7 +113,7 @@
:width=
"boxplotWidth"
:height=
"boxes[label].l_qrt - boxes[label].median"
>
</rect>
<image
:href=
"dataUrls[label]"
<image
:xlink
:href=
"dataUrls[label]"
:data-label=
"label"
:height=
"padded.height"
:width=
"boxplotWidth / 2"
>
...
...
src/vue/charts/CorrelationAnalysis.vue
View file @
2d814533
...
...
@@ -4,12 +4,12 @@
<control-panel
class=
"fjs-control-panel"
name=
"Correlation Analysis"
>
<data-box
class=
"fjs-data-box"
header=
"Numerical Variables"
dataType=
"numerical
,
numerical_array"
:
dataType
s
=
"
['
numerical
', '
numerical_array
']
"
v-on:update=
"update_xyData"
>
</data-box>
<data-box
class=
"fjs-data-box"
header=
"Categorical Variables"
dataType=
"categorical"
:
dataType
s
=
"
['
categorical
']
"
v-on:update=
"update_categoryData"
>
</data-box>
<hr
class=
"fjs-seperator"
/>
...
...
@@ -57,7 +57,7 @@
<g
class=
"fjs-corr-axis"
ref=
"xAxis1"
:transform=
"`translate(0, $
{padded.height})`">
</g>
<g
class=
"fjs-corr-axis"
ref=
"yAxis1"
></g>
<crosshair
:width=
"padded.width"
:height=
"padded.height"
/>
<image
:href=
"dataUrl"
:width=
"padded.width"
:height=
"padded.height"
></image>
<image
:xlink
:href=
"dataUrl"
:width=
"padded.width"
:height=
"padded.height"
></image>
<g
class=
"fjs-brush"
ref=
"brush"
></g>
<text
class=
"fjs-axis-label"
:x=
"padded.width / 2"
...
...
src/vue/charts/Heatmap.vue
View file @
2d814533
...
...
@@ -3,7 +3,7 @@
<control-panel
class=
"fjs-control-panel"
name=
"Heatmap Panel"
>
<data-box
class=
"fjs-data-box"
header=
"Numerical Variables"
dataType=
"numerical_array"
:
dataType
s
=
"
['
numerical_array
']
"
v-on:update=
"update_numericArrayData"
>
</data-box>
<hr
class=
"fjs-seperator"
/>
...
...
@@ -155,7 +155,7 @@
<svg
:height=
"height"
:width=
"width"
>
<g
:transform=
"`translate($
{margin.left}, ${margin.top})`">
<image
:href=
"dataUrl"
:width=
"padded.width"
:height=
"padded.height"
></image>
<image
:xlink
:href=
"dataUrl"
:width=
"padded.width"
:height=
"padded.height"
></image>
<rect
class=
"fjs-sig-bar"
:x=
"bar.x"
:y=
"bar.y"
...
...
src/vue/charts/PCA.vue
View file @
2d814533
...
...
@@ -4,12 +4,12 @@
<control-panel
class=
"fjs-control-panel"
name=
"PCA Panel"
>
<data-box
class=
"fjs-data-box"
header=
"Numerical Variables"
dataType=
"numerical
,
numerical_array"
:
dataType
s
=
"
['
numerical
', '
numerical_array
']
"
v-on:update=
"update_featureData"
>
</data-box>
<data-box
class=
"fjs-data-box"
header=
"Categorical Variables"
dataType=
"categorical"
:
dataType
s
=
"
['
categorical
']
"
v-on:update=
"update_categoryData"
>
</data-box>
<hr
class=
"fjs-seperator"
/>
...
...
@@ -59,7 +59,7 @@
<g
class=
"fjs-axis"
ref=
"xAxis1"
:transform=
"`translate(0, $
{padded.height})`">
</g>
<g
class=
"fjs-axis"
ref=
"yAxis1"
></g>
<crosshair
:width=
"padded.width"
:height=
"padded.height"
/>
<image
:href=
"dataUrls.main"
:width=
"padded.width"
:height=
"padded.height"
></image>
<image
:xlink
:href=
"dataUrls.main"
:width=
"padded.width"
:height=
"padded.height"
></image>
<g
class=
"fjs-brush"
ref=
"brush"
></g>
<text
:x=
"padded.width / 2"
:y=
"- margin.top / 2"
...
...
@@ -88,7 +88,7 @@
<g
class=
"fjs-pc-distribution fjs-pc-x-distribution"
:transform=
"`translate(0, $
{padded.height + margin.bottom / 2})`">
<line
:x2=
"padded.width"
></line>
<image
:href=
"dataUrls.xDist"
<image
:xlink
:href=
"dataUrls.xDist"
:y=
"-pointSize / 2"
:width=
"padded.width"
:height=
"pointSize"
>
...
...
@@ -97,7 +97,7 @@
<g
class=
"fjs-pc-distribution fjs-pc-y-distribution"
:transform=
"`translate($
{- margin.left / 2}, 0)`">
<line
:y2=
"padded.height"
></line>
<image
:href=
"dataUrls.yDist"
<image
:xlink
:href=
"dataUrls.yDist"
:x=
"-pointSize / 2"
:width=
"pointSize"
:height=
"padded.height"
>
...
...
src/vue/components/ControlPanel.vue
View file @
2d814533
...
...
@@ -9,7 +9,7 @@
<span
v-show=
"expanded"
>
{{
name
}}
</span>
<i
class=
"fjs-lock-btn material-icons"
@
click=
"toggleLock"
>
{{
lockIcon
}}
</i>
</div>
<div
v-show=
"expanded"
>
<div
class=
"fjs-panel-content"
v-show=
"expanded"
>
<slot/>
<hr
class=
"fjs-seperator"
/>
<task-view/>
...
...
src/vue/components/DataBox.vue
View file @
2d814533
...
...
@@ -5,10 +5,11 @@
<div
class=
"fjs-item"
v-for=
"item in items"
>
<div
class=
"fjs-item-head"
>
<input
type=
"checkbox"
:value=
"item.task_id"
v-model=
"checkedIds"
/>
<span
class=
"fjs-item-label"
:data-state=
"item.state"
@
click=
"toggleTaskId(item.task_id)"
>
<input
type=
"checkbox"
:value=
"item.task_id"
v-model=
"checkedIds"
:disabled=
"item.state === 'SUBMITTED'"
/>
<span
class=
"fjs-item-label"
:data-state=
"item.state"
>
{{
item
.
label
}}
</span>
<span
class=
"fjs-item-options"
@
click=
"toggleItemBody(item.task_id)"
>
☰
</span>
...
...
@@ -33,10 +34,11 @@
<
script
>
import
store
from
'
../../store/store
'
import
'
devbridge-autocomplete
'
import
Autocomplete
from
'
./Autocomplete.vue
'
export
default
{
components
:
{
Autocomplete
},
components
:
{
Autocomplete
},
name
:
'
data-box
'
,
data
()
{
return
{
...
...
@@ -46,8 +48,8 @@
}
},
props
:
{
dataType
:
{
type
:
String
,
dataType
s
:
{
type
:
Array
,
required
:
true
},
header
:
{
...
...
@@ -57,8 +59,10 @@
},
computed
:
{
items
()
{
return
store
.
getters
.
data
.
filter
(
item
=>
~
this
.
dataType
.
split
(
'
,
'
).
map
(
s
=>
s
.
trim
()).
indexOf
(
item
.
data_type
))
return
store
.
getters
.
data
.
filter
(
item
=>
{
return
this
.
dataTypes
.
includes
(
item
.
data_type
)
&&
[
'
SUBMITTED
'
,
'
SUCCESS
'
,
'
FAILURE
'
].
includes
(
item
.
etl_state
)
})
},
transformedIDs
()
{
return
this
.
checkedIds
.
map
(
id
=>
`$
${
JSON
.
stringify
({
id
,
filters
:
{
feature
:
this
.
featureFilter
[
id
]
}})}
$`
)
...
...
@@ -72,24 +76,9 @@
this
.
$emit
(
'
update
'
,
newTransformedIDs
)
}
}
},
'
items
'
:
{
handler
:
function
(
newItems
)
{
const
existingIDs
=
newItems
.
map
(
d
=>
d
.
task_id
)
// this removes selected IDs when they expired in the back end
this
.
checkedIds
=
this
.
checkedIds
.
filter
(
existingIDs
.
includes
)
}
}
},
methods
:
{
toggleTaskId
(
taskID
)
{
const
idx
=
this
.
checkedIds
.
indexOf
(
taskID
)
if
(
~
idx
)
{
this
.
checkedIds
.
splice
(
idx
,
1
)
}
else
{
this
.
checkedIds
.
push
(
taskID
)
}
},
featureGetter
(
taskID
)
{
return
async
()
=>
{
const
metaData
=
await
store
.
getters
.
requestManager
.
getMetaData
(
taskID
)
...
...
@@ -128,8 +117,11 @@
flex-direction
:
column
.fjs-item-head
display
:
flex
cursor
:
pointer
padding
:
0
.25vh
0
0
.25vh
0
.25vw
input
cursor
:
pointer
.fjs-item-options
cursor
:
pointer
.fjs-item-label
text-overflow
:
ellipsis
display
:
inline-flex
...
...
test/charts/multi/multi-chart.html
View file @
2d814533
...
...
@@ -2,8 +2,8 @@
<meta
charset=
"UTF-8"
>
<head>
<script
src=
"http://localhost:808
0
/credentials.js"
></script>
<script
src=
"http://localhost:808
0
/fractal.js"
></script>
<script
src=
"http://localhost:808
2
/credentials.js"
></script>
<script
src=
"http://localhost:808
2
/fractal.js"
></script>
</head>
<body>
...
...
@@ -81,7 +81,9 @@
function
loadState
()
{
document
.
querySelector
(
'
.state-ids
'
).
value
.
split
(
'
+
'
).
forEach
((
id
,
i
)
=>
{
fjs
.
id2chart
(
`.copy-
${
i
+
1
}
`
,
id
)
if
(
id
.
length
)
{
fjs
.
id2chart
(
`.copy-
${
i
+
1
}
`
,
id
)
}
})
}
...
...
@@ -107,13 +109,12 @@
<style>
.containers
{
display
:
flex
;
flex-wrap
:
wrap
;
display
:
flex
;
flex-wrap
:
wrap
;
}
.container
{
width
:
200px
;
height
:
200px
;
flex
:
1
;
width
:
50%
;
height
:
50vh
;
}
</style>
test/control-panel-test.js
View file @
2d814533
...
...
@@ -52,10 +52,10 @@ describe('ControlPanel', () => {
})
it
(
'
adapts width when expanded state changes
'
,
()
=>
{
expect
(
vm
.
width
).
toBe
(
'
1vw
'
)
expect
(
vm
.
$el
.
querySelector
(
'
.fjs-panel-content
'
).
style
.
display
).
toBe
(
'
none
'
)
store
.
dispatch
(
'
setControlPanel
'
,
{
expanded
:
true
})
Vue
.
nextTick
(()
=>
{
expect
(
vm
.
width
)
.
toBe
(
'
15vw
'
)
expect
(
vm
.
$el
.
querySelector
(
'
.fjs-panel-content
'
).
style
.
display
).
not
.
toBe
(
'
none
'
)
})
})
...
...
test/data-box-test.js
View file @
2d814533
...
...
@@ -13,25 +13,25 @@ describe('DataBox', () => {
it
(
'
renders 3 checkboxes for 3 elements in data
'
,
()
=>
{
store
.
state
.
data
=
[
{
data_type
:
'
numeric
'
,
label
:
''
},
{
data_type
:
'
numeric
'
,
label
:
''
},
{
data_type
:
'
numeric
'
,
label
:
''
}
{
data_type
:
'
numeric
'
,
label
:
''
,
etl_state
:
'
SUCCESS
'
},
{
data_type
:
'
numeric
'
,
label
:
''
,
etl_state
:
'
SUCCESS
'
},
{
data_type
:
'
numeric
'
,
label
:
''
,
etl_state
:
'
SUCCESS
'
}
]
const
Component
=
Vue
.
extend
(
DataBox
)
const
propsData
=
{
dataType
:
'
numeric
'
,
header
:
''
}
const
propsData
=
{
dataType
s
:
[
'
numeric
'
]
,
header
:
''
}
const
vm
=
new
Component
({
propsData
}).
$mount
()
expect
(
vm
.
$el
.
querySelectorAll
(
'
.fjs-
data-entry
-head
er
'
).
length
).
toBe
(
3
)
expect
(
vm
.
$el
.
querySelectorAll
(
'
.fjs-
item
-head
'
).
length
).
toBe
(
3
)
})
it
(
'
only renders checkboxes for data with correct type
'
,
()
=>
{
store
.
state
.
data
=
[
{
data_type
:
'
numeric
'
,
label
:
''
},
{
data_type
:
'
categoric
'
,
label
:
''
}
{
data_type
:
'
numeric
'
,
label
:
''
,
etl_state
:
'
SUCCESS
'
},
{
data_type
:
'
categoric
'
,
label
:
''
,
etl_state
:
'
SUCCESS
'
}
]
const
Component
=
Vue
.
extend
(
DataBox
)
const
propsData
=
{
dataType
:
'
numeric
'
,
header
:
''
}
const
propsData
=
{
dataType
s
:
[
'
numeric
'
]
,
header
:
''
}
const
vm
=
new
Component
({
propsData
}).
$mount
()
expect
(
vm
.
$el
.
querySelectorAll
(
'
.fjs-
data-entry
-head
er
'
).
length
).
toBe
(
1
)
expect
(
vm
.
$el
.
querySelectorAll
(
'
.fjs-
item
-head
'
).
length
).
toBe
(
1
)
})
it
(
'
checkboxes are linked to data
'
,
()
=>
{
...
...
@@ -40,12 +40,26 @@ describe('DataBox', () => {
{
data_type
:
'
numeric
'
,
label
:
''
,
task_id
:
'
B
'
,
etl_state
:
'
SUCCESS
'
}
]
const
Component
=
Vue
.
extend
(
DataBox
)
const
propsData
=
{
dataType
:
'
numeric
'
,
header
:
''
}
const
data
=
{
sel
ec
t
edI
D
s
:
[
'
A
'
]}
const
propsData
=
{
dataType
s
:
[
'
numeric
'
]
,
header
:
''
}
const
data
=
{
ch
ec
k
edI
d
s
:
[
'
A
'
]}
const
vm
=
new
Component
({
propsData
,
data
}).
$mount
()
expect
(
vm
.
$el
.
querySelectorAll
(
'
.fjs-data-entry-header
'
).
length
).
toBe
(
2
)
expect
(
vm
.
$el
.
querySelector
(
'
.fjs-data-entry-header input[data-id="A"]
'
).
checked
).
toBeTruthy
()
expect
(
vm
.
$el
.
querySelector
(
'
.fjs-data-entry-header input[data-id="B"]
'
).
checked
).
toBeFalsy
()
expect
(
vm
.
$el
.
querySelectorAll
(
'
.fjs-item-head
'
).
length
).
toBe
(
2
)
expect
(
vm
.
$el
.
querySelector
(
'
.fjs-item-head input[value="A"]
'
).
checked
).
toBeTruthy
()
expect
(
vm
.
$el
.
querySelector
(
'
.fjs-item-head input[value="B"]
'
).
checked
).
toBeFalsy
()
})
it
(
'
only shows data with state SUCCESS/FAILURE/SUBMITTED
'
,
()
=>
{
store
.
state
.
data
=
[
{
data_type
:
'
numeric
'
,
label
:
''
,
task_id
:
'
A
'
,
etl_state
:
'
SUCCESS
'
},
{
data_type
:
'
numeric
'
,
label
:
''
,
task_id
:
'
B
'
,
etl_state
:
'
FAILURE
'
},
{
data_type
:
'
numeric
'
,
label
:
''
,
task_id
:
'
C
'
,
etl_state
:
'
SUBMITTED
'
},
{
data_type
:
'
numeric
'
,
label
:
''
,
task_id
:
'
D
'
,
etl_state
:
'
PENDING
'
},
{
data_type
:
'
numeric
'
,
label
:
''
,
task_id
:
'
E
'
,
etl_state
:
'
FOO
'
}
]
const
Component
=
Vue
.
extend
(
DataBox
)
const
propsData
=
{
dataTypes
:
[
'
numeric
'
],
header
:
''
}
const
vm
=
new
Component
({
propsData
}).
$mount
()
expect
(
vm
.
$el
.
querySelectorAll
(
'
.fjs-item-head
'
).
length
).
toBe
(
3
)
})
afterAll
(()
=>
{
...
...
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