Commit e831fc06 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

improved demo page

parent 95e264d0
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="http://localhost:8080/fractal.js"></script> <script src="http://localhost:8080/fractal.js"></script>
</head> </head>
...@@ -43,23 +44,40 @@ ...@@ -43,23 +44,40 @@
to learn how these tools are used. to learn how these tools are used.
</p> </p>
<h2>To get started</h2> <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"> <div class="controls">
<select id="chart-select"> <span class="headline">1. Select chart(s): </span>
<option selected disabled>-- Select Chart --</option> <div class="chart-button-container">
</select> <button class="custom-button" onclick="addChart(this.value)" value="scatterplot">Scatter Plot</button>
<input type="button" value="Add Chart" onclick="addChart()"/> <button class="custom-button" onclick="addChart(this.value)" value="boxplot">Box Plot</button>
<label> <button class="custom-button" onclick="addChart(this.value)" value="Survival Plot">Survival Plot</button>
Zoom: <button class="custom-button" onclick="addChart(this.value)" value="pca">PCA</button>
<input id="chart-size-range" type="range" min="10" max="100" value="50" oninput="setChartSize(this.value)"/> <button class="custom-button" onclick="addChart(this.value)" value="Histogram">Histogram</button>
</label> <button class="custom-button" onclick="addChart(this.value)" value="Heatmap">Heat Map</button>
<input type="button" onclick="loadData()" value="Prepare analysis cache"/> <button class="custom-button" onclick="addChart(this.value)" value="volcanoplot">Volcano PLot</button>
<input type="button" onclick="deleteData()" value="Clear All"/> <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> </div>
<div class="charts"> <div class="charts">
...@@ -83,34 +101,29 @@ ...@@ -83,34 +101,29 @@
} }
}) })
const selection = document.querySelector('#chart-select') function clearView() {
fjs.getAvailableCharts().forEach(chartName => { fjs.removeAllCharts()
const el = document.createElement('option') document.querySelector('.charts').innerHTML = ''
el.setAttribute('value', chartName) }
el.innerHTML = chartName
selection.appendChild(el)
})
function deleteData () { function clearCache() {
fjs.clearCache() fjs.clearCache()
fjs.removeAllCharts()
} }
let chartSize = '50vw' window.chartSize = '30vw'
function setChartSize (value) { function zoom (value) {
chartSize = value + 'vw' window.chartSize = value + 'vw'
Array.prototype.forEach.call(document.querySelectorAll('.charts > div'), chart => { Array.prototype.forEach.call(document.querySelectorAll('.charts > div'), chart => {
chart.style.height = chartSize chart.style.height = window.chartSize
chart.style.width = chartSize chart.style.width = window.chartSize
}) })
} }
function addChart () { function addChart (chart) {
const chart = document.querySelector('#chart-select').value
const container = document.querySelector('.charts') const container = document.querySelector('.charts')
const chartDiv = document.createElement('div') const chartDiv = document.createElement('div')
chartDiv.style.width = chartSize chartDiv.style.width = window.chartSize
chartDiv.style.height = chartSize chartDiv.style.height = window.chartSize
container.appendChild(chartDiv) container.appendChild(chartDiv)
chartDiv.id = `chart-${container.childNodes.length}` chartDiv.id = `chart-${container.childNodes.length}`
fjs.setChart(chart, '#' + chartDiv.id) fjs.setChart(chart, '#' + chartDiv.id)
...@@ -157,6 +170,15 @@ ...@@ -157,6 +170,15 @@
</script> </script>
<style> <style>
* {
font-family: 'Roboto', sans-serif;
}
.introduction {
width: 50%;
margin: auto;
}
.charts > div { .charts > div {
float: left; float: left;
} }
...@@ -167,18 +189,71 @@ ...@@ -167,18 +189,71 @@
.do-table table, .do-table th, .do-table td { .do-table table, .do-table th, .do-table td {
border: 1px solid black; border: 1px solid black;
padding: 4px;
} }
.introduction { .controls .headline {
width: 500px; font-size: 1.25em;
} }
.controls { .chart-button-container {
width: 200px;
display: flex; 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> </style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment