Skip to content
GitLab
Commit e831fc06 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

improved demo page

parent 95e264d0
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 = '50vw'
function setChartSize (value) {
chartSize = value + 'vw'
window.chartSize = '30vw'
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;
}
.introduction {
width: 500px;
.controls .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>
Supports Markdown
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