Commit 711a08dc authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Some css and eye candy

parent 170a5d96
......@@ -6,3 +6,10 @@
font-weight: 400
font-size: 14px
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2')
*
font-family: Roboto, sans-serif
.fjs-seperator
width: 100%
margin: 20px 0 20px 0
\ No newline at end of file
......@@ -25,7 +25,7 @@
</div>
</control-panel>
<div class="fjs-vis-container">
<chart class="fjs-chart">
<svg :width="width"
:height="height">
<g :transform="`translate(${margin.left}, ${margin.top})`">
......@@ -113,12 +113,14 @@
</g>
</g>
</svg>
</div>
</chart>
</div>
</template>
<script>
import DataBox from '../components/DataBox.vue'
import ControlPanel from '../components/ControlPanel.vue'
import Chart from '../components/Chart.vue'
import store from '../../store/store'
import runAnalysis from '../mixins/run-analysis'
import * as d3 from 'd3'
......@@ -126,7 +128,6 @@
import deepFreeze from 'deep-freeze-strict'
import { truncateTextUntil } from '../mixins/utils'
import tooltip from '../directives/tooltip'
import ControlPanel from '../components/ControlPanel.vue'
export default {
name: 'boxplot',
data () {
......@@ -343,7 +344,7 @@
this.catData = ids
},
handleResize () {
const container = this.$el.querySelector('.fjs-vis-container svg')
const container = this.$el.querySelector('.fjs-chart svg')
// noinspection JSSuspiciousNameCombination
this.height = container.getBoundingClientRect().width
this.width = container.getBoundingClientRect().width
......@@ -363,7 +364,8 @@
},
components: {
ControlPanel,
DataBox
DataBox,
Chart
},
directives: {
tooltip
......@@ -381,19 +383,13 @@
<style lang="sass" scoped>
@import './src/assets/base.sass'
*
font-family: Roboto, sans-serif
.fjs-boxplot
height: 100%
width: 100%
display: flex
flex-direction: column
.fjs-control-panel
hr
width: 100%
margin: 20px 0 20px 0
.fjs-vis-container
.fjs-chart
flex: 1
display: flex
.fjs-tooltip
......
......@@ -26,7 +26,7 @@
</fieldset>
</control-panel>
<div class="fjs-vis-container">
<chart class="fjs-chart">
<svg :height="height" :width="width">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<g class="fjs-corr-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
......@@ -108,19 +108,20 @@
</tr>
</table>
</div>
</div>
</chart>
</div>
</template>
<script>
import DataBox from '../components/DataBox.vue'
import ControlPanel from '../components/ControlPanel.vue'
import Chart from '../components/Chart.vue'
import store from '../../store/store'
import runAnalysis from '../mixins/run-analysis'
import * as d3 from 'd3'
import { TweenLite } from 'gsap'
import tooltip from '../directives/tooltip.js'
import deepFreeze from 'deep-freeze-strict'
import ControlPanel from '../components/ControlPanel.vue'
export default {
name: 'correlation-analysis',
data () {
......@@ -451,7 +452,8 @@
},
components: {
ControlPanel,
DataBox
DataBox,
Chart
},
directives: {
tooltip
......@@ -475,7 +477,7 @@
.catch(error => console.error(error))
},
handleResize () {
const container = this.$el.querySelector(`.fjs-vis-container svg`)
const container = this.$el.querySelector(`.fjs-chart svg`)
// noinspection JSSuspiciousNameCombination
this.height = container.getBoundingClientRect().width
this.width = container.getBoundingClientRect().width
......@@ -494,18 +496,12 @@
<style lang="sass" scoped>
@import './src/assets/base.sass'
*
font-family: Roboto, sans-serif
.fjs-correlation-analysis
height: 100%
width: 100%
display: flex
flex-direction: column
.fjs-control-panel
hr
width: 100%
margin: 20px 0 20px 0
.fjs-correlation-method
white-space: nowrap
border: solid 1px #fff
......@@ -513,7 +509,7 @@
border-radius: 8px
margin: 1%
.fjs-vis-container
.fjs-chart
flex: 1
display: flex
svg
......@@ -540,7 +536,6 @@
flex-direction: column
.fjs-stats-table
width: 100%
margin: 1%
border-spacing: 0
border-collapse: collapse
font-size: 0.875rem
......
......@@ -7,9 +7,10 @@
v-on:update="update_numericArrayData">
</data-box>
<hr class="fjs-seperator"/>
</control-panel>
<div class="fjs-vis-container">
<chart class="fjs-chart">
<svg height="100%" width="100%">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<text class="fjs-id-label"
......@@ -46,19 +47,20 @@
</rect>
</g>
</svg>
</div>
</chart>
</div>
</template>
<script>
import DataBox from '../components/DataBox.vue'
import ControlPanel from '../components/ControlPanel.vue'
import Chart from '../components/Chart.vue'
import store from '../../store/store'
import runAnalysis from '../mixins/run-analysis'
import * as d3 from 'd3'
import tooltip from '../directives/tooltip.js'
import deepFreeze from 'deep-freeze-strict'
import { truncateTextUntil } from '../mixins/utils'
import ControlPanel from '../components/ControlPanel.vue'
export default {
name: 'heatmap',
data () {
......@@ -80,12 +82,16 @@
numerical_arrays: this.numericArrayDataIds,
numericals: [],
categoricals: [],
id_filter: this.idFilter,
subsets: store.getters.subsets
}
},
validArgs () {
return this.numericArrayDataIds.length > 0
},
idFilter () {
return store.getters.filter('ids')
},
margin () {
const left = this.width / 5
const top = this.height / 10
......@@ -197,7 +203,7 @@
})
},
handleResize () {
const container = this.$el.querySelector('.fjs-vis-container svg')
const container = this.$el.querySelector('.fjs-chart svg')
this.height = container.getBoundingClientRect().height
this.width = container.getBoundingClientRect().width
},
......@@ -223,7 +229,8 @@
},
components: {
ControlPanel,
DataBox
DataBox,
Chart
},
directives: {
tooltip
......@@ -234,9 +241,6 @@
<style lang="sass" scoped>
@import './src/assets/base.sass'
*
font-family: Roboto, sans-serif
.fjs-heatmap
height: 100%
width: 100%
......@@ -244,11 +248,8 @@
flex-direction: column
.fjs-control-panel
hr
width: 100%
margin: 20px 0 20px 0
.fjs-vis-container
.fjs-chart
flex: 1
display: flex
svg
......
<template>
<div class="fjs-chart">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'chart'
}
</script>
<style lang="sass" scoped>
.fjs-chart
border: 2px solid rgba(0, 0, 0, 0)
&:hover
border: 2px solid #29d5ff
</style>
......@@ -100,6 +100,8 @@
</script>
<style lang="sass" scoped>
@import './src/assets/base.sass'
.fjs-control-panel
background: rgba(0, 0, 0, 0.8)
color: white
......@@ -111,9 +113,7 @@
padding: 20px
height: 100%
min-width: 15vw
hr
width: 100%
margin: 20px 0 20px 0
.fjs-lock-btn
margin-bottom: 5vh
cursor: pointer
......
......@@ -69,8 +69,6 @@
handler: function (newItems) {
const existingIDs = newItems.map(d => d.task_id)
// this removes selected IDs when they expired in the back end
console.log(existingIDs)
console.log(this.selectedIDs.filter(id => existingIDs.indexOf(id) !== -1))
this.selectedIDs = this.selectedIDs.filter(id => existingIDs.indexOf(id) !== -1)
}
}
......
......@@ -40,10 +40,13 @@
</script>
<style lang="sass" scoped>
@import './src/assets/base.sass'
.fjs-task-view
display: flex
flex-direction: column
justify-content: flex-start
.fjs-state-container
width: 100%
display: flex
......
......@@ -25,7 +25,7 @@
}
})
fjs.setSubsets([['59810bf1f700004b0430179f', '59810bf1f700004b043017a0', '59810bf1f700004b043017a1', '59810bf1f700004b043017a2', '59810bf1f700004b043017a3', '59810bf1f700004b043017a4', '59810bf1f700004b043017a5', '59810bf1f700004b043017a6', '59810bf1f700004b043017a7', '59810bf1f700004b043017a8', '59810bf1f700004b043017a9', '59810bf1f700004b043017aa', '59810bf1f700004b043017ab', '59810bf1f700004b043017ac', '59810bf1f700004b043017ad', '59810bf1f700004b043017ae', '59810bf1f700004b043017af', '59810bf1f700004b043017b0', '59810bf1f700004b043017b1', '59810bf1f700004b043017b2', '59810bf1f700004b043017b3', '59810bf1f700004b043017b4', '59810bf1f700004b043017b5'], ['59810bf1f700004b043017b6', '59810bf1f700004b043017b7', '59810bf1f700004b043017b8', '59810bf1f700004b043017b9', '59810bf1f700004b043017ba', '59810bf1f700004b043017bb', '59810bf1f700004b043017bc', '59810bf1f700004b043017bd', '59810bf1f700004b043017be', '59810bf1f700004b043017bf', '59810bf1f700004b043017c0', '59810bf1f700004b043017c1', '59810bf1f700004b043017c2', '59810bf1f700004b043017c3', '59810bf1f700004b043017c4', '59810bf1f700004b043017c5', '59810bf1f700004b043017c6', '59810bf1f700004b043017c7', '59810bf1f700004b043017c8', '59810bf1f700004b043017c9', '59810bf1f700004b043017ca', '59810bf1f700004b043017cb', '59810bf1f700004b043017cc', '59810bf1f700004b043017cd', '59810bf1f700004b043017ce', '59810bf1f700004b043017cf', '59810bf1f700004b043017d0', '59810bf1f700004b043017d1', '59810bf1f700004b043017d2', '59810bf1f700004b043017d3', '59810bf1f700004b043017d4', '59810bf1f700004b043017d5', '59810bf1f700004b043017d6', '59810bf1f700004b043017d7', '59810bf1f700004b043017d8', '59810bf1f700004b043017d9', '59810bf1f700004b043017da', '59810bf1f700004b043017db', '59810bf1f700004b043017dc', '59810bf2f700004b043017dd', '59810bf2f700004b043017de', '59810bf2f700004b043017df', '59810bf2f700004b043017e0', '59810bf2f700004b043017e1', '59810bf2f700004b043017e2', '59810bf2f700004b043017e3', '59810bf2f700004b043017e4', '59810bf2f700004b043017e5', '59810bf2f700004b043017e6', '59810bf2f700004b043017e7', '59810bf2f700004b043017e8']])
fjs.setSubsets([['5983aef1f70000250130194a', '5983aef1f70000250130194b', '5983aef1f70000250130194c', '5983aef1f70000250130194d', '5983aef1f70000250130194e', '5983aef1f70000250130194f', '5983aef1f700002501301950', '5983aef1f700002501301951', '5983aef1f700002501301952', '5983aef1f700002501301953', '5983aef1f700002501301954', '5983aef1f700002501301955', '5983aef1f700002501301956', '5983aef1f700002501301957', '5983aef1f700002501301958', '5983aef1f700002501301959', '5983aef1f70000250130195a', '5983aef1f70000250130195b', '5983aef1f70000250130195c', '5983aef1f70000250130195d', '5983aef1f70000250130195e', '5983aef1f70000250130195f', '5983aef1f700002501301960', '5983aef1f700002501301961', '5983aef1f700002501301962', '5983aef1f700002501301963', '5983aef1f700002501301964', '5983aef1f700002501301965', '5983aef1f700002501301966', '5983aef1f700002501301967', '5983aef1f700002501301968', '5983aef1f700002501301969', '5983aef1f70000250130196a', '5983aef1f70000250130196b'], ['5983aef1f70000250130196c', '5983aef1f70000250130196d', '5983aef1f70000250130196e', '5983aef1f70000250130196f', '5983aef1f700002501301970', '5983aef1f700002501301971', '5983aef1f700002501301972', '5983aef1f700002501301973', '5983aef1f700002501301974', '5983aef1f700002501301975', '5983aef1f700002501301976', '5983aef1f700002501301977', '5983aef1f700002501301978', '5983aef1f700002501301979', '5983aef1f70000250130197a', '5983aef1f70000250130197b', '5983aef1f70000250130197c', '5983aef1f70000250130197d', '5983aef1f70000250130197e', '5983aef1f70000250130197f', '5983aef1f700002501301980', '5983aef1f700002501301981', '5983aef1f700002501301982', '5983aef1f700002501301983', '5983aef1f700002501301984', '5983aef1f700002501301985', '5983aef1f700002501301986', '5983aef1f700002501301987', '5983aef1f700002501301988', '5983aef1f700002501301989', '5983aef1f70000250130198a', '5983aef1f70000250130198b', '5983aef1f70000250130198c', '5983aef1f70000250130198d', '5983aef1f70000250130198e', '5983aef1f70000250130198f', '5983aef1f700002501301990', '5983aef1f700002501301991', '5983aef1f700002501301992', '5983aef1f700002501301993']])
function loadData () {
fjs.loadData([
......
<!doctype html>
<head>
<script src="http://localhost:8080/credentials.js"></script>
<script src="http://localhost:8080/fractal.js"></script>
</head>
<body>
<input type="button" onclick="loadData()" value="load data"/>
<input type="button" onclick="deleteData()" value="delete data"/>
<div style="height: 50%; width: 50%">
<div id="placeholder1"></div>
</div>
<div style="height: 50%; width: 50%">
<div id="placeholder2"></div>
</div>
<div style="height: 50%; width: 50%">
<div id="placeholder3"></div>
</div>
</body>
<script>
/* eslint-disable */
const fjs = fractal.init({
handler: 'ada',
thisBaseURL: 'https://ada.parkinson.lu',
fractalisBaseURL: 'http://127.0.0.1:5000',
getAuth () {
return credentials1
}
})
function loadData () {
fjs.loadData([
{
dictionary: {
name: 'cadenceR',
projection: 'cadenceR',
label: 'Cadence Right',
fieldType: 'Double',
isArray: false
},
data_set: 'egait.features'
},
{
dictionary: {
name: 'cadenceL',
projection: 'cadenceL',
label: 'Cadence Left',
fieldType: 'Double',
isArray: false
},
data_set: 'egait.features'
},
{
dictionary: {
name: 'entropyR',
projection: 'entropyR',
label: 'Entropy Right',
fieldType: 'Double',
isArray: true
},
data_set: 'egait.features'
},
{
dictionary: {
name: 'entropyL',
projection: 'entropyL',
label: 'Entropy Left',
fieldType: 'Double',
isArray: true
},
data_set: 'egait.features'
}
])
}
function deleteData () {
fjs.clearCache()
}
fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder1'})
fjs.setChart({chart: 'boxplot', selector: '#placeholder2'})
fjs.setChart({chart: 'heatmap', selector: '#placeholder3'})
</script>
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