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
e831fc06
Commit
e831fc06
authored
Aug 20, 2018
by
Sascha Herzinger
Browse files
improved demo page
parent
95e264d0
Changes
1
Hide whitespace changes
Inline
Side-by-side
test/demo/demo.html
View file @
e831fc06
...
...
@@ -2,6 +2,7 @@
<meta
charset=
"UTF-8"
>
<head>
<link
href=
"https://fonts.googleapis.com/css?family=Roboto"
rel=
"stylesheet"
>
<script
src=
"http://localhost:8080/fractal.js"
></script>
</head>
...
...
@@ -43,23 +44,40 @@
to learn how these tools are used.
</p>
<h2>
To get started
</h2>
<p>
1. Add one or more charts you want to see from the --Select Chart-- field below.
<br/>
2. You will see a control panel on the right without variables, because no data have been loaded yet.
<br/>
3. Click the "Prepare analysis cache" button and wait for the variables become available.
<br/>
4. Select parameters and variables to run an analysis.
<br/>
</p>
<div
class=
"controls"
>
<select
id=
"chart-select"
>
<option
selected
disabled
>
-- Select Chart --
</option>
</select>
<input
type=
"button"
value=
"Add Chart"
onclick=
"addChart()"
/>
<label>
Zoom:
<input
id=
"chart-size-range"
type=
"range"
min=
"10"
max=
"100"
value=
"50"
oninput=
"setChartSize(this.value)"
/>
</label>
<input
type=
"button"
onclick=
"loadData()"
value=
"Prepare analysis cache"
/>
<input
type=
"button"
onclick=
"deleteData()"
value=
"Clear All"
/>
<span
class=
"headline"
>
1. Select chart(s):
</span>
<div
class=
"chart-button-container"
>
<button
class=
"custom-button"
onclick=
"addChart(this.value)"
value=
"scatterplot"
>
Scatter Plot
</button>
<button
class=
"custom-button"
onclick=
"addChart(this.value)"
value=
"boxplot"
>
Box Plot
</button>
<button
class=
"custom-button"
onclick=
"addChart(this.value)"
value=
"Survival Plot"
>
Survival Plot
</button>
<button
class=
"custom-button"
onclick=
"addChart(this.value)"
value=
"pca"
>
PCA
</button>
<button
class=
"custom-button"
onclick=
"addChart(this.value)"
value=
"Histogram"
>
Histogram
</button>
<button
class=
"custom-button"
onclick=
"addChart(this.value)"
value=
"Heatmap"
>
Heat Map
</button>
<button
class=
"custom-button"
onclick=
"addChart(this.value)"
value=
"volcanoplot"
>
Volcano PLot
</button>
<button
class=
"delete-button"
onclick=
"clearView()"
>
Clear View
</button>
</div>
<br/>
<span
class=
"headline"
>
2. Set zoom level:
</span>
<div
class=
"zoom-button-container"
>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"10"
>
10%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"20"
>
20%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"30"
>
30%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"40"
>
40%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"50"
>
50%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"60"
>
60%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"70"
>
70%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"80"
>
80%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"90"
>
90%
</button>
<button
class=
"custom-button"
onclick=
"zoom(this.value)"
value=
"100"
>
100%
</button>
</div>
<br/>
<span
class=
"headline"
>
3. Prepare cache
</span>
<div
class=
"cache-button-container"
>
<button
class=
"custom-button"
onclick=
"loadData()"
>
Prepare Cache
</button>
<button
class=
"delete-button"
onclick=
"clearCache()"
>
Clear Cache
</button>
</div>
<br/>
<span
class=
"headline"
>
4. Select variables in the control panel on the right ->
</span>
</div>
</div>
<div
class=
"charts"
>
...
...
@@ -83,34 +101,29 @@
}
})
const
selection
=
document
.
querySelector
(
'
#chart-select
'
)
fjs
.
getAvailableCharts
().
forEach
(
chartName
=>
{
const
el
=
document
.
createElement
(
'
option
'
)
el
.
setAttribute
(
'
value
'
,
chartName
)
el
.
innerHTML
=
chartName
selection
.
appendChild
(
el
)
})
function
clearView
()
{
fjs
.
removeAllCharts
()
document
.
querySelector
(
'
.charts
'
).
innerHTML
=
''
}
function
deleteData
()
{
function
clearCache
()
{
fjs
.
clearCache
()
fjs
.
removeAllCharts
()
}
let
chartSize
=
'
5
0vw
'
function
setChartSize
(
value
)
{
chartSize
=
value
+
'
vw
'
window
.
chartSize
=
'
3
0vw
'
function
zoom
(
value
)
{
window
.
chartSize
=
value
+
'
vw
'
Array
.
prototype
.
forEach
.
call
(
document
.
querySelectorAll
(
'
.charts > div
'
),
chart
=>
{
chart
.
style
.
height
=
chartSize
chart
.
style
.
width
=
chartSize
chart
.
style
.
height
=
window
.
chartSize
chart
.
style
.
width
=
window
.
chartSize
})
}
function
addChart
()
{
const
chart
=
document
.
querySelector
(
'
#chart-select
'
).
value
function
addChart
(
chart
)
{
const
container
=
document
.
querySelector
(
'
.charts
'
)
const
chartDiv
=
document
.
createElement
(
'
div
'
)
chartDiv
.
style
.
width
=
chartSize
chartDiv
.
style
.
height
=
chartSize
chartDiv
.
style
.
width
=
window
.
chartSize
chartDiv
.
style
.
height
=
window
.
chartSize
container
.
appendChild
(
chartDiv
)
chartDiv
.
id
=
`chart-
${
container
.
childNodes
.
length
}
`
fjs
.
setChart
(
chart
,
'
#
'
+
chartDiv
.
id
)
...
...
@@ -157,6 +170,15 @@
</script>
<style>
*
{
font-family
:
'Roboto'
,
sans-serif
;
}
.introduction
{
width
:
50%
;
margin
:
auto
;
}
.charts
>
div
{
float
:
left
;
}
...
...
@@ -167,18 +189,71 @@
.do-table
table
,
.do-table
th
,
.do-table
td
{
border
:
1px
solid
black
;
padding
:
4px
;
}
.
i
ntro
duction
{
width
:
500px
;
.
co
ntro
ls
.headline
{
font-size
:
1.25em
;
}
.controls
{
width
:
200px
;
.chart-button-container
{
display
:
flex
;
flex-direction
:
column
;
}
.controls
>
*
{
margin-bottom
:
5px
;
.zoom-button-container
{
display
:
flex
;
}
.cache-button-container
{
display
:
flex
;
}
.delete-button
{
display
:
inline-block
;
padding
:
6px
12px
;
margin-bottom
:
0
;
font-size
:
14px
;
font-weight
:
400
;
line-height
:
1.42857143
;
text-align
:
center
;
white-space
:
nowrap
;
vertical-align
:
middle
;
touch-action
:
manipulation
;
cursor
:
pointer
;
user-select
:
none
;
border-radius
:
4px
;
border
:
1px
solid
#c0341d
;
color
:
#fff
;
background
:
#db3b21
none
;
margin-left
:
0.5vw
;
}
.delete-button
:hover
{
border
:
1px
solid
#a62d19
;
color
:
#fff
;
background
:
#c0341d
none
;
}
.custom-button
{
display
:
inline-block
;
padding
:
6px
12px
;
margin-bottom
:
0
;
font-size
:
14px
;
font-weight
:
400
;
line-height
:
1.42857143
;
text-align
:
center
;
white-space
:
nowrap
;
vertical-align
:
middle
;
touch-action
:
manipulation
;
cursor
:
pointer
;
user-select
:
none
;
border
:
1px
solid
#ccc
;
border-radius
:
4px
;
color
:
#333
;
background
:
#fff
none
;
}
.custom-button
:hover
{
background
:
#ddd
none
;
}
</style>
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