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
0e956a41
Commit
0e956a41
authored
Apr 12, 2017
by
Sascha Herzinger
Browse files
Showing first scatter plot demo
parent
9e5e6fb5
Changes
5
Hide whitespace changes
Inline
Side-by-side
package.json
View file @
0e956a41
...
...
@@ -40,6 +40,9 @@
"
jasmine-core
"
:
"
^2.5.2
"
,
"
karma-jasmine
"
:
"
^1.1.0
"
,
"
jsdoc
"
:
"
^3.4.3
"
"
jsdoc
"
:
"
^3.4.3
"
,
"
d3
"
:
"
^4.7.4
"
,
"
d3-tip
"
:
"
^0.7.1
"
}
}
\ No newline at end of file
src/components/DataBox.vue
View file @
0e956a41
<
template
>
<div>
<div
id=
"data-box"
>
<label
for=
"data-container"
:tooltip=
"tooltip"
>
{{
header
}}
</label>
<div
id=
"data-container"
>
<div
id=
"data-container"
style=
"height: 80%;"
>
<div
class=
"data-item"
v-for=
"(item, index) in items"
>
<input
type=
"checkbox"
:id=
"'data-check-' + index"
...
...
@@ -51,11 +51,13 @@
</
script
>
<
style
scoped
>
#data-box
{
width
:
30%
;
}
#data-container
{
border
:
1px
solid
#ccc
;
border-radius
:
8px
;
width
:
300px
;
height
:
200px
;
overflow-y
:
scroll
;
padding
:
5px
5px
5px
5px
;
}
...
...
src/components/charts/CorrelationAnalysis.vue
View file @
0e956a41
<
template
>
<div>
<div
class=
"data-box-container"
>
<div
style=
"height: 100%; width: 100%"
>
<div
id=
"data-box-section"
style=
"height: 25%;"
>
<data-box
header=
"X and Y variables"
dataType=
"numerical"
v-on:update=
"update_xyData"
>
...
...
@@ -10,12 +11,21 @@
v-on:update=
"update_annotationData"
>
</data-box>
</div>
<input
id=
"run-analysis-btn"
type=
"button"
@
click=
"createPlot"
value=
"Run Analysis"
:disabled=
"disabled"
/>
<input
id=
"run-analysis-btn"
type=
"button"
@
click=
"runAnalysisWrapper"
value=
"Run Analysis"
:disabled=
"disabled"
/>
<div
id=
"visualisation-section"
style=
"height: 75%;"
>
<svg
width=
"100%"
height=
"100%"
>
<g
:style=
"
{transform: `translate(${margin.left}px, ${margin.top}px)`}">
<circle
:cx=
"scales.x(point.x)"
:cy=
"scales.y(point.y)"
r=
"4"
v-for=
"point in points"
></circle>
</g>
</svg>
</div>
</div>
</
template
>
...
...
@@ -23,10 +33,13 @@
<
script
>
import
DataBox
from
'
../DataBox.vue
'
import
requestHandling
from
'
../mixins/request-handling
'
import
*
as
d3
from
'
d3
'
export
default
{
name
:
'
correlation-analysis
'
,
data
()
{
return
{
width
:
0
,
height
:
0
,
xyData
:
[],
annotationData
:
[],
get
args
()
{
...
...
@@ -34,14 +47,43 @@
x
:
`$
${
this
.
xyData
[
0
]}
$`
,
y
:
`$
${
this
.
xyData
[
1
]}
$`
}
}
},
margin
:
{
left
:
50
,
top
:
50
,
right
:
50
,
bottom
:
50
},
analysisResults
:
{},
scales
:
{
x
:
null
,
y
:
null
},
points
:
[]
}
},
computed
:
{
disabled
()
{
return
this
.
xyData
.
length
!==
2
},
padded
()
{
const
width
=
this
.
width
-
this
.
margin
.
left
-
this
.
margin
.
right
const
height
=
this
.
height
-
this
.
margin
.
top
-
this
.
margin
.
bottom
return
{
width
,
height
}
}
},
watch
:
{
analysisResults
:
function
()
{
this
.
updateChart
()
}
},
mounted
()
{
window
.
addEventListener
(
'
resize
'
,
this
.
onResize
)
this
.
onResize
()
// initial call
},
beforeDestroy
()
{
window
.
removeEventListener
(
'
resize
'
,
this
.
onResize
)
},
components
:
{
DataBox
},
...
...
@@ -49,21 +91,41 @@
requestHandling
],
methods
:
{
createPlot
()
{
runAnalysisWrapper
()
{
// function made available via requestHandling mixin
this
.
runAnalysis
({
job_name
:
'
compute-correlation
'
,
args
:
this
.
args
})
.
then
(
response
=>
{
console
.
log
(
response
)
})
.
catch
(
error
=>
{
console
.
error
(
error
)
const
results
=
JSON
.
parse
(
response
)
results
.
data
=
JSON
.
parse
(
results
.
data
)
this
.
analysisResults
=
results
})
.
catch
(
error
=>
console
.
error
(
error
))
},
onResize
()
{
const
section
=
this
.
$el
.
querySelector
(
'
#visualisation-section
'
)
this
.
height
=
section
.
clientHeight
this
.
width
=
section
.
clientWidth
},
update_xyData
(
ids
)
{
this
.
xyData
=
ids
},
update_annotationData
(
ids
)
{
this
.
annotationData
=
ids
},
updateChart
()
{
this
.
points
=
Object
.
keys
(
this
.
analysisResults
.
data
.
id
).
map
(
key
=>
{
return
{
x
:
this
.
analysisResults
.
data
[
this
.
analysisResults
.
x_label
][
key
],
y
:
this
.
analysisResults
.
data
[
this
.
analysisResults
.
y_label
][
key
],
id
:
this
.
analysisResults
.
data
.
id
[
key
]
}
})
this
.
scales
.
x
=
d3
.
scaleLinear
()
.
domain
(
d3
.
extent
(
this
.
points
.
map
(
d
=>
d
.
x
)))
.
range
([
0
,
this
.
padded
.
width
])
this
.
scales
.
y
=
d3
.
scaleLinear
()
.
domain
(
d3
.
extent
(
this
.
points
.
map
(
d
=>
d
.
y
)))
.
range
([
this
.
padded
.
height
,
0
])
}
}
}
...
...
@@ -71,7 +133,7 @@
<
style
scoped
>
.
data-box-
container
{
#
data-box-
section
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-around
;
...
...
src/components/mixins/request-handling.js
View file @
0e956a41
...
...
@@ -6,11 +6,13 @@ export default {
function
timeout
(
ms
)
{
return
new
Promise
(
resolve
=>
setTimeout
(
resolve
,
ms
))
}
const
jobID
=
await
store
.
getters
.
requestManager
.
createAnalysis
({
job_name
,
args
})
const
rv1
=
await
store
.
getters
.
requestManager
.
createAnalysis
({
job_name
,
args
})
const
jobID
=
rv1
.
data
.
job_id
let
counter
=
0
while
(
counter
<
1000
)
{
await
timeout
(
++
counter
*
200
)
const
jobInfo
=
await
store
.
getters
.
requestManager
.
getAnalysisStatus
({
jobID
})
const
rv2
=
await
store
.
getters
.
requestManager
.
getAnalysisStatus
({
jobID
})
const
jobInfo
=
rv2
.
data
if
(
jobInfo
.
state
===
'
SUCCESS
'
)
{
return
jobInfo
.
result
}
else
if
(
jobInfo
.
state
===
'
FAILURE
'
)
{
...
...
test/charts/test-chart.html
View file @
0e956a41
...
...
@@ -6,7 +6,9 @@
</head>
<body>
<div
style=
"height: 1000px; width: 1000px"
>
<div
id=
"placeholder"
></div>
</div>
</body>
<script>
...
...
@@ -15,8 +17,8 @@
thisBaseURL
:
'
http://10.79.2.192:8080
'
,
fractalisBaseURL
:
'
http://127.0.0.1:5000
'
,
getAuth
()
{
return
credentials
}
return
credentials
}
})
fjs
.
loadData
([
{
...
...
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