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
88ab546f
Commit
88ab546f
authored
May 17, 2017
by
Sascha Herzinger
Browse files
namespaced css to avoid conflicts
parent
5c952c50
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/DataBox.vue
View file @
88ab546f
<
template
>
<div
id=
"data-box
"
>
<label
for=
"data-window"
:tooltip=
"tooltip"
>
{{
header
}}
</label>
<div
id=
"data-window"
>
<div
class=
"data-entry-container"
<div
:class=
"`fjs-vm-root fjs-vm-root-$
{_uid}`
">
<label
:
for=
"
`fjs-
data-window
-$
{_uid}`
" :tooltip="tooltip">
{{
header
}}
</label>
<div
:
id=
"
`fjs-data-window-$
{_uid}`" class="fjs-
data-window">
<div
class=
"
fjs-
data-entry-container"
:data-state=
"item.etl_state"
v-for=
"item in items"
>
<div
class=
"data-entry-header"
<div
class=
"
fjs-
data-entry-header"
:data-state=
"item.etl_state"
>
<span
class=
"cross"
v-if=
"item.etl_state === 'FAILURE'"
>
×
</span>
<input
type=
"checkbox
"
:id=
"'data-check-' + item.task_id
"
<span
class=
"
fjs-
cross"
v-if=
"item.etl_state === 'FAILURE'"
>
×
</span>
<input
:id=
"`fjs-checkbox-$
{item.task_id}-${_uid}`
"
type="checkbox
"
:value="item.task_id"
v-model="selectedIDs"
v-if="item.etl_state === 'SUCCESS'"/>
<label
:for=
"'data-check-' + item.task_id"
>
{{
item
.
label
}}
</label>
<span
class=
"options"
@
click=
"toggleDataEntryBody(item.task_id)"
>
☰
</span>
<label
:for=
"`fjs-checkbox-$
{item.task_id}-${_uid}`">
{{
item
.
label
}}
</label>
<span
class=
"fjs-options"
@
click=
"toggleDataEntryBody(item.task_id)"
>
☰
</span>
</div>
<div
class=
"data-entry-body"
:data-state=
"item.etl_state"
:data-id=
"item.task_id"
>
<div
class=
"action-btns"
>
<button
class=
"reload-btn"
@
click=
"reloadData(item.task_id)"
>
↻
</button>
<button
class=
"delete-btn"
@
click=
"deleteData(item.task_id)"
>
×
</button><br/>
<div
class=
"fjs-data-entry-body"
:data-state=
"item.etl_state"
:data-id=
"item.task_id"
>
<div
class=
"fjs-action-btns"
>
<button
class=
"fjs-reload-btn"
@
click=
"reloadData(item.task_id)"
>
↻
</button>
<button
class=
"fjs-delete-btn"
@
click=
"deleteData(item.task_id)"
>
×
</button><br/>
</div>
{{
item
.
etl_message
}}
</div>
...
...
@@ -69,7 +66,7 @@
},
methods
:
{
toggleDataEntryBody
(
taskID
)
{
const
$body
=
$
(
`.data-entry-body[data-id="
${
taskID
}
"]`
)
const
$body
=
$
(
`.
fjs-vm-root-
${
this
.
_uid
}
.fjs-
data-entry-body[data-id="
${
taskID
}
"]`
)
$body
.
slideToggle
(
500
)
},
reloadData
(
taskID
)
{
...
...
@@ -83,13 +80,13 @@
</
script
>
<
style
lang=
"sass"
scoped
>
#data-box
.fjs-vm-root
width
:
40%
height
:
90%
margin
:
10px
>
label
font-size
:
16px
#
data-window
.fjs-
data-window
height
:
80%
width
:
100%
border
:
1px
solid
#ccc
...
...
@@ -97,7 +94,7 @@
font-size
:
14px
overflow-y
:
scroll
padding
:
5px
.data-entry-header
.
fjs-
data-entry-header
background-color
:
#eee
padding
:
5px
margin
:
2px
...
...
@@ -120,12 +117,12 @@
.options
cursor
:
pointer
white-space
:
nowrap
.data-entry-body
.
fjs-
data-entry-body
display
:
none
padding
:
3px
&
[
data-state
=
"FAILURE"
]
background-color
:
#ffcbcb
.action-btns
.
fjs-
action-btns
text-align
:
center
button
height
:
25px
...
...
src/components/charts/CorrelationAnalysis.vue
View file @
88ab546f
<
template
>
<div
id=
"root
"
>
<div
:class=
"`fjs-vm-root fjs-vm-root-$
{this._uid}`
">
<div
id=
"
data-box-section"
>
<div
class=
"fjs-
data-box-section"
>
<data-box
header=
"X and Y variables"
dataType=
"numerical"
v-on:update=
"update_xyData"
>
...
...
@@ -12,8 +12,8 @@
</data-box>
</div>
<div
id=
"
controls-section"
>
<button
id=
"
run-analysis-btn"
<div
class=
"fjs-
controls-section"
>
<button
class=
"fjs-
run-analysis-btn"
type=
"button"
@
click=
"runAnalysisWrapper(
{init: true})"
:disabled="disabled">
▶
</button><br/>
...
...
@@ -21,8 +21,8 @@
<span>
{{
error
}}
</span>
</div>
<div
id=
"
visualisation-section"
>
<table
class=
"stats-table"
v-show=
"!shownAnalysisResults.init"
>
<div
class=
"fjs-
visualisation-section"
>
<table
class=
"
fjs-
stats-table"
v-show=
"!shownAnalysisResults.init"
>
<tr>
<td>
Corr. Coef.
</td>
<td>
{{
tmpAnalysisResults
.
coef
}}
</td>
...
...
@@ -48,11 +48,11 @@
:height=
"height"
v-show=
"!shownAnalysisResults.init"
>
<g
:transform=
"`translate($
{margin.left}, ${margin.top})`">
<g
id=
"x-axis-1"
class=
"fjs-corr-axis"
:transform=
"`translate(0, $
{padded.height})`">
</g>
<g
id=
"x-axis-2"
class=
"fjs-corr-axis"
></g>
<g
id=
"y-axis-1"
class=
"fjs-corr-axis"
></g>
<g
id=
"y-axis-2"
class=
"fjs-corr-axis"
:transform=
"`translate($
{padded.width}, 0)`">
</g>
<g
id=
"
brush"
></g>
<g
class=
"fjs-corr-axis
fjs-x-axis-1
"
:transform=
"`translate(0, $
{padded.height})`">
</g>
<g
class=
"fjs-corr-axis
fjs-x-axis-2
"
></g>
<g
class=
"fjs-corr-axis
fjs-y-axis-1
"
></g>
<g
class=
"fjs-corr-axis
fjs-y-axis-2
"
:transform=
"`translate($
{padded.width}, 0)`">
</g>
<g
class=
"fjs-
brush"
></g>
<text
:x=
"padded.width / 2"
y=
"-10"
text-anchor=
"middle"
...
...
@@ -66,7 +66,7 @@
:transform=
"`rotate(90 $
{padded.width + 10} ${padded.height / 2})`">
{{
shownAnalysisResults
.
y_label
}}
</text>
<circle
class=
"scatterplot-point"
<circle
class=
"
fjs-
scatterplot-point"
:cx=
"scales.x(point.x)"
:cy=
"scales.y(point.y)"
r=
"4"
...
...
@@ -74,21 +74,21 @@
v-for=
"(point, idx) in shownPoints.all"
v-svgtooltip=
"point.tooltip"
>
</circle>
<line
id=
"
lin-reg-line"
<line
class=
"fjs-
lin-reg-line"
:x1=
"tweened.regLine.x1"
:x2=
"tweened.regLine.x2"
:y1=
"tweened.regLine.y1"
:y2=
"tweened.regLine.y2"
v-svgtooltip=
"regLine.tooltip"
>
</line>
<rect
class=
"histogram-rect"
<rect
class=
"
fjs-
histogram-rect"
:x=
"attr.x"
:y=
"attr.y"
:width=
"attr.width"
:height=
"attr.height"
v-for=
"attr in tweened.histogramAttr.xAttr"
>
</rect>
<rect
class=
"histogram-rect"
<rect
class=
"
fjs-
histogram-rect"
:x=
"attr.x"
:y=
"attr.y"
:width=
"attr.width"
...
...
@@ -365,15 +365,15 @@
watch
:
{
'
axis
'
:
{
handler
:
function
(
newAxis
)
{
d3
.
select
(
'
#
x-axis-1
'
).
call
(
newAxis
.
x1
)
d3
.
select
(
'
#
x-axis-2
'
).
call
(
newAxis
.
x2
)
d3
.
select
(
'
#
y-axis-1
'
).
call
(
newAxis
.
y1
)
d3
.
select
(
'
#
y-axis-2
'
).
call
(
newAxis
.
y2
)
d3
.
select
(
`.fjs-vm-root-
${
this
.
_uid
}
.fjs-
x-axis-1
`
).
call
(
newAxis
.
x1
)
d3
.
select
(
`.fjs-vm-root-
${
this
.
_uid
}
.fjs-
x-axis-2
`
).
call
(
newAxis
.
x2
)
d3
.
select
(
`.fjs-vm-root-
${
this
.
_uid
}
.fjs-
y-axis-1
`
).
call
(
newAxis
.
y1
)
d3
.
select
(
`.fjs-vm-root-
${
this
.
_uid
}
.fjs-
y-axis-2
`
).
call
(
newAxis
.
y2
)
}
},
'
brush
'
:
{
handler
:
function
(
newBrush
)
{
d3
.
select
(
'
#
brush
'
).
call
(
newBrush
)
d3
.
select
(
`.fjs-vm-root-
${
this
.
_uid
}
.fjs-
brush
`
).
call
(
newBrush
)
}
},
'
regLine
'
:
{
...
...
@@ -446,8 +446,8 @@
.
catch
(
error
=>
console
.
error
(
error
))
},
onResize
()
{
const
tableHeight
=
$
(
this
.
$el
.
querySelector
(
'
table
'
)).
outerHeight
(
true
)
const
section
=
this
.
$el
.
querySelector
(
'
#
visualisation-section
'
)
const
tableHeight
=
$
(
this
.
$el
.
querySelector
(
`.fjs-vm-root-
${
this
.
_uid
}
.fjs-stats-
table
`
)).
outerHeight
(
true
)
const
section
=
this
.
$el
.
querySelector
(
`.fjs-vm-root-
${
this
.
_uid
}
.fjs-
visualisation-section
`
)
const
height
=
section
.
clientHeight
-
tableHeight
const
width
=
section
.
clientWidth
this
.
height
=
height
>
width
?
width
:
height
// we want to have a square
...
...
@@ -471,57 +471,57 @@
*
font-family
:
Roboto
,
sans-serif
#
root
.fjs-vm-
root
height
:
100%
width
:
100%
#
data-box-section
text-align
:
center
height
:
15%
>
*
display
:
inline-block
.fjs-
data-box-section
text-align
:
center
height
:
15%
>
*
display
:
inline-block
#
controls-section
height
:
5%
text-align
:
center
#
run-analysis-btn
margin
:
10px
width
:
100px
height
:
30px
box-shadow
:
2px
2px
4px
0
#999
font-size
:
20px
#
run-analysis-btn
:not
([
disabled
])
:hover
cursor
:
pointer
.fjs-
controls-section
height
:
5%
text-align
:
center
.fjs-
run-analysis-btn
margin
:
10px
width
:
100px
height
:
30px
box-shadow
:
2px
2px
4px
0
#999
font-size
:
20px
.fjs-
run-analysis-btn
:not
([
disabled
])
:hover
cursor
:
pointer
#
visualisation-section
height
:
80%
#
lin-reg-line
stroke
:
#ff5e00
stroke-width
:
4px
#
lin-reg-line
:hover
opacity
:
0
.4
.
histogram-rect
stroke
:
#fff
shape-rendering
:
crispEdges
stroke-width
:
0px
fill
:
#ffd100
.
stats-table
margin
:
5px
border-spacing
:
0
border-collapse
:
collapse
font-size
:
14px
float
:
right
.
stats-table
tr
:nth-child
(
even
)
background-color
:
#ddd
.
stats-table
,
.stats-table
td
,
.stats-table
th
border
:
1px
#ccc
solid
border-collapse
:
collapse
padding
:
5px
.
scatterplot-point
:hover
fill
:
#f00
opacity
:
0
.4
#
brush
stroke-width
:
0
.fjs-
visualisation-section
height
:
80%
.fjs-
lin-reg-line
stroke
:
#ff5e00
stroke-width
:
4px
.fjs-
lin-reg-line
:hover
opacity
:
0
.4
.fjs-
histogram-rect
stroke
:
#fff
shape-rendering
:
crispEdges
stroke-width
:
0px
fill
:
#ffd100
.fjs-
stats-table
margin
:
5px
border-spacing
:
0
border-collapse
:
collapse
font-size
:
14px
float
:
right
.fjs-
stats-table
tr
:nth-child
(
even
)
background-color
:
#ddd
.fjs-
stats-table
,
.
fjs-
stats-table
td
,
.
fjs-
stats-table
th
border
:
1px
#ccc
solid
border-collapse
:
collapse
padding
:
5px
.fjs-
scatterplot-point
:hover
fill
:
#f00
opacity
:
0
.4
.fjs-
brush
stroke-width
:
0
</
style
>
<!--CSS for dynamically created components-->
...
...
test/charts/test-chart.html
View file @
88ab546f
...
...
@@ -7,7 +7,10 @@
<body>
<div
style=
"height: 1200px; width: 1200px"
>
<div
id=
"placeholder"
></div>
<div
id=
"placeholder1"
></div>
</div>
<div
style=
"height: 1200px; width: 1200px"
>
<div
id=
"placeholder2"
></div>
</div>
</body>
...
...
@@ -57,5 +60,6 @@
}
}
])
fjs
.
setChart
({
chart
:
'
correlation-analysis
'
,
selector
:
'
#placeholder
'
})
fjs
.
setChart
({
chart
:
'
correlation-analysis
'
,
selector
:
'
#placeholder1
'
})
fjs
.
setChart
({
chart
:
'
correlation-analysis
'
,
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