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

moved common functionality of charts into chart component

parent 108dfdf4
<template>
<div class="fjs-boxplot" @click="$emit('focus')">
<chart v-on:resize="resize">
<control-panel class="fjs-control-panel" focus="focus">
<control-panel class="fjs-control-panel">
<data-box class="fjs-data-box"
header="Numerical Variables"
dataType="numerical"
......@@ -25,96 +25,95 @@
</div>
</control-panel>
<chart class="fjs-chart">
<svg :width="width"
:height="height">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<g class="fjs-boxplot-axis fjs-x-axis" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-boxplot-axis fjs-y-axis"></g>
<g class="fjs-box"
:transform="`translate(${scales.x(label)}, 0)`"
v-tooltip="{position: 'bottom'}"
:title="label"
:data-label="label"
@mouseenter="showTooltip(label)"
@mouseleave="hideTooltip(label)"
v-for="label in labels" >
<line class="fjs-upper-whisker"
:title="results.statistics[label].u_wsk"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 6"
:y1="tweened.boxes[label].u_wsk"
:x2="boxplotWidth / 6"
:y2="tweened.boxes[label].u_wsk">
</line>
<line class="fjs-lower-whisker"
:title="results.statistics[label].l_wsk"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 6"
:y1="tweened.boxes[label].l_wsk"
:x2="boxplotWidth / 6"
:y2="tweened.boxes[label].l_wsk">
</line>
<line class="fjs-upper-quartile"
:title="results.statistics[label].u_qrt"
v-tooltip="{position: 'left'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].u_qrt"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].u_qrt">
</line>
<line class="fjs-lower-quartile"
:title="results.statistics[label].l_qrt"
v-tooltip="{position: 'left'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].l_qrt"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].l_qrt">
</line>
<line class="fjs-median"
:title="results.statistics[label].median"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].median"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].median">
</line>
<line class="fjs-antenna"
:x1="0"
:y1="tweened.boxes[label].u_wsk"
:x2="0"
:y2="tweened.boxes[label].l_wsk">
</line>
<rect class="fjs-above-median-box"
:x="- boxplotWidth / 2"
:y="tweened.boxes[label].u_qrt"
:width="boxplotWidth"
:height="tweened.boxes[label].median - tweened.boxes[label].u_qrt">
</rect>
<rect class="fjs-below-median-box"
:x="- boxplotWidth / 2"
:y="tweened.boxes[label].median"
:width="boxplotWidth"
:height="tweened.boxes[label].l_qrt - tweened.boxes[label].median">
</rect>
<circle class="fjs-points"
:title="point.tooltip"
v-tooltip="{arrow: true, theme: 'light'}"
:cx="point.jitter"
:cy="scales.y(point.value)"
r="0.4%"
v-for="point in points[label]"
v-if="params.showData">
</circle>
<polyline class="fjs-kde"
:points="kdePolyPoints[label]"
v-if="params.showKDE">
</polyline>
</g>
<svg :width="width"
:height="height">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<g class="fjs-boxplot-axis fjs-x-axis" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-boxplot-axis fjs-y-axis"></g>
<g class="fjs-box"
:transform="`translate(${scales.x(label)}, 0)`"
v-tooltip="{position: 'bottom'}"
:title="label"
:data-label="label"
@mouseenter="showTooltip(label)"
@mouseleave="hideTooltip(label)"
v-for="label in labels" >
<line class="fjs-upper-whisker"
:title="results.statistics[label].u_wsk"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 6"
:y1="tweened.boxes[label].u_wsk"
:x2="boxplotWidth / 6"
:y2="tweened.boxes[label].u_wsk">
</line>
<line class="fjs-lower-whisker"
:title="results.statistics[label].l_wsk"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 6"
:y1="tweened.boxes[label].l_wsk"
:x2="boxplotWidth / 6"
:y2="tweened.boxes[label].l_wsk">
</line>
<line class="fjs-upper-quartile"
:title="results.statistics[label].u_qrt"
v-tooltip="{position: 'left'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].u_qrt"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].u_qrt">
</line>
<line class="fjs-lower-quartile"
:title="results.statistics[label].l_qrt"
v-tooltip="{position: 'left'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].l_qrt"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].l_qrt">
</line>
<line class="fjs-median"
:title="results.statistics[label].median"
v-tooltip="{position: 'right'}"
:x1="- boxplotWidth / 2"
:y1="tweened.boxes[label].median"
:x2="boxplotWidth / 2"
:y2="tweened.boxes[label].median">
</line>
<line class="fjs-antenna"
:x1="0"
:y1="tweened.boxes[label].u_wsk"
:x2="0"
:y2="tweened.boxes[label].l_wsk">
</line>
<rect class="fjs-above-median-box"
:x="- boxplotWidth / 2"
:y="tweened.boxes[label].u_qrt"
:width="boxplotWidth"
:height="tweened.boxes[label].median - tweened.boxes[label].u_qrt">
</rect>
<rect class="fjs-below-median-box"
:x="- boxplotWidth / 2"
:y="tweened.boxes[label].median"
:width="boxplotWidth"
:height="tweened.boxes[label].l_qrt - tweened.boxes[label].median">
</rect>
<circle class="fjs-points"
:title="point.tooltip"
v-tooltip="{arrow: true, theme: 'light'}"
:cx="point.jitter"
:cy="scales.y(point.value)"
r="0.4%"
v-for="point in points[label]"
v-if="params.showData">
</circle>
<polyline class="fjs-kde"
:points="kdePolyPoints[label]"
v-if="params.showKDE">
</polyline>
</g>
</svg>
</chart>
</div>
</g>
</svg>
</chart>
</template>
<script>
......@@ -346,9 +345,9 @@
update_catData (ids) {
this.catData = ids
},
resize () {
this.height = this.$el.parentNode.getBoundingClientRect().height
this.width = this.$el.parentNode.getBoundingClientRect().width
resize ({height, width}) {
this.height = height
this.width = width
},
runAnalysisWrapper (args) {
runAnalysis({task_name: 'compute-boxplot', args})
......@@ -368,15 +367,6 @@
},
directives: {
tooltip
},
mounted () {
window.addEventListener('resize', this.resize)
window.addEventListener('load', this.resize)
this.resize()
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('load', this.resize)
}
}
</script>
......@@ -384,33 +374,31 @@
<style lang="sass" scoped>
@import './src/assets/base.sass'
.fjs-boxplot
.fjs-chart
svg
.fjs-box
.fjs-median, .fjs-lower-quartile, .fjs-upper-quartile
opacity: 1
.fjs-lower-whisker, .fjs-upper-whisker, .fjs-antenna
shape-rendering: crispEdges
stroke: black
stroke-width: 1px
.fjs-below-median-box
stroke: none
fill: rgb(205, 232, 254)
shape-rendering: crispEdges
.fjs-above-median-box
stroke: none
fill: rgb(180, 221, 253)
shape-rendering: crispEdges
.fjs-points
stroke: white
stroke-width: 1px
.fjs-points:hover
opacity: 0.4
.fjs-kde
fill: none
stroke: black
stroke-width: 0.2%
svg
.fjs-box
.fjs-median, .fjs-lower-quartile, .fjs-upper-quartile
opacity: 1
.fjs-lower-whisker, .fjs-upper-whisker, .fjs-antenna
shape-rendering: crispEdges
stroke: black
stroke-width: 1px
.fjs-below-median-box
stroke: none
fill: rgb(205, 232, 254)
shape-rendering: crispEdges
.fjs-above-median-box
stroke: none
fill: rgb(180, 221, 253)
shape-rendering: crispEdges
.fjs-points
stroke: white
stroke-width: 1px
.fjs-points:hover
opacity: 0.4
.fjs-kde
fill: none
stroke: black
stroke-width: 0.2%
</style>
......@@ -424,9 +412,9 @@
font-size: 1em
line
stroke: #999
.fjs-x-axis
.tick
text
text-anchor: start
font-size: 1em
.fjs-x-axis
.tick
text
text-anchor: start
font-size: 1em
</style>
<template>
<div class="fjs-correlation-analysis" @click="$emit('focus')">
<chart v-on:resize="resize">
<control-panel class="fjs-control-panel" focus="focus">
<control-panel class="fjs-control-panel">
<data-box class="fjs-data-box"
header="X and Y variables"
dataType="numerical"
......@@ -26,44 +26,43 @@
</fieldset>
</control-panel>
<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>
<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">
{{ shownResults.x_label }}
</text>
<text text-anchor="middle"
:transform="`translate(${padded.width + 10},${padded.height / 2})rotate(90)`">
{{ shownResults.y_label }}
</text>
<polygon class="fjs-scatterplot-point"
:points="point.shape"
:fill="categoryColors[categories.indexOf(point.category) % categoryColors.length]"
:title="point.tooltip"
v-tooltip
v-for="point in points">
</polygon>
<line class="fjs-lin-reg-line"
:title="regLine.tooltip"
v-tooltip="{followCursor: true}"
:x1="tweened.regLine.x1"
:x2="tweened.regLine.x2"
:y1="tweened.regLine.y1"
:y2="tweened.regLine.y2">
</line>
<polyline class="fjs-histogram-polyline fjs-bottom" points=""></polyline>
<polyline class="fjs-histogram-polyline fjs-left" points=""></polyline>
</g>
</svg>
</chart>
</div>
<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>
<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">
{{ shownResults.x_label }}
</text>
<text text-anchor="middle"
:transform="`translate(${padded.width + 10},${padded.height / 2})rotate(90)`">
{{ shownResults.y_label }}
</text>
<polygon class="fjs-scatterplot-point"
:points="point.shape"
:fill="categoryColors[categories.indexOf(point.category) % categoryColors.length]"
:title="point.tooltip"
v-tooltip
v-for="point in points">
</polygon>
<line class="fjs-lin-reg-line"
:title="regLine.tooltip"
v-tooltip="{followCursor: true}"
:x1="tweened.regLine.x1"
:x2="tweened.regLine.x2"
:y1="tweened.regLine.y1"
:y2="tweened.regLine.y2">
</line>
<polyline class="fjs-histogram-polyline fjs-bottom" points=""></polyline>
<polyline class="fjs-histogram-polyline fjs-left" points=""></polyline>
</g>
</svg>
</chart>
</template>
<script>
......@@ -367,15 +366,6 @@
}
}
},
mounted () {
window.addEventListener('resize', this.resize)
window.addEventListener('load', this.resize)
this.resize()
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('load', this.resize)
},
components: {
ControlPanel,
DataBox,
......@@ -401,9 +391,9 @@
})
.catch(error => console.error(error))
},
resize () {
this.height = this.$el.parentNode.getBoundingClientRect().height
this.width = this.$el.parentNode.getBoundingClientRect().width
resize ({height, width}) {
this.height = height
this.width = width
},
update_xyData (ids) {
this.xyData = ids
......@@ -417,33 +407,30 @@
<style lang="sass" scoped>
@import './src/assets/base.sass'
.fjs-correlation-analysis
.fjs-control-panel
.fjs-correlation-method
white-space: nowrap
border: solid 1px #fff
text-align: left
border-radius: 8px
margin: 1%
.fjs-chart
svg
.fjs-lin-reg-line
stroke: #ff5e00
stroke-width: 0.3%
.fjs-lin-reg-line:hover
opacity: 0.4
.fjs-histogram-polyline
shape-rendering: crispEdges
stroke-width: 0
fill: #ffd100
.fjs-scatterplot-point
stroke-width: 0
.fjs-scatterplot-point:hover
fill: #f00
.fjs-brush
stroke-width: 0
@import './src/assets/base.sass';
.fjs-control-panel
.fjs-correlation-method
white-space: nowrap
border: solid 1px #fff
text-align: left
border-radius: 8px
margin: 1%
svg
.fjs-lin-reg-line
stroke: #ff5e00
stroke-width: 0.3%
.fjs-lin-reg-line:hover
opacity: 0.4
.fjs-histogram-polyline
shape-rendering: crispEdges
stroke-width: 0
fill: #ffd100
.fjs-scatterplot-point
stroke-width: 0
.fjs-scatterplot-point:hover
fill: #f00
.fjs-brush
stroke-width: 0
</style>
<!--CSS for dynamically created components-->
......
<template>
<div class="fjs-heatmap" @click="$emit('focus')">
<control-panel class="fjs-control-panel" focus="focus">
<chart v-on:resize="resize">
<control-panel class="fjs-control-panel">
<data-box class="fjs-data-box"
header="Numerical Array Data"
dataType="numerical_array"
......@@ -125,36 +125,34 @@
</div>
</fieldset>
</div>
</control-panel>
<chart class="fjs-chart">
<svg height="100%" width="100%">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<rect class="fjs-sig-bar"
:x="bar.x"
:y="bar.y"
:height="bar.height"
:width="bar.width"
:fill="bar.fill"
:title="bar.tooltip"
v-for="bar in tweened.sigBars"
v-tooltip>
</rect>
<rect class="fjs-cell"
:x="cell.x"
:y="cell.y"
:height="cell.height"
:width="cell.width"
:fill="cell.fill"
:title="cell.tooltip"
v-for="cell in tweened.cells"
v-tooltip>
</rect>
</g>
</svg>
</chart>
</div>
<svg height="100%" width="100%">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<rect class="fjs-sig-bar"
:x="bar.x"
:y="bar.y"
:height="bar.height"
:width="bar.width"
:fill="bar.fill"
:title="bar.tooltip"
v-for="bar in tweened.sigBars"
v-tooltip>
</rect>
<rect class="fjs-cell"
:x="cell.x"
:y="cell.y"
:height="cell.height"
:width="cell.width"
:fill="cell.fill"
:title="cell.tooltip"
v-for="cell in tweened.cells"
v-tooltip>
</rect>
</g>
</svg>
</chart>
</template>
<script>
......@@ -408,9 +406,9 @@
this.cluster.results.cols = results['col_clusters']
})
},
resize () {
this.height = this.$el.parentNode.getBoundingClientRect().height
this.width = this.$el.parentNode.getBoundingClientRect().width
resize ({height, width}) {
this.height = height
this.width = width
},
update_numericArrayData (ids) {
this.numericArrayDataIds = ids
......@@ -453,15 +451,6 @@
}
}
},
mounted () {
window.addEventListener('resize', this.resize)
window.addEventListener('load', this.resize)
this.resize()
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('load', this.resize)
},
components: {
ControlPanel,
DataBox,
......@@ -476,48 +465,46 @@
<style lang="sass" scoped>
@import './src/assets/base.sass'
.fjs-heatmap
.fjs-control-panel
.fjs-param-header
text-align: center
margin: 10px 0 5px 0
.fjs-ranking-params
.fjs-control-panel
.fjs-param-header
text-align: center
margin: 10px 0 5px 0
.fjs-ranking-params
display: flex
flex-direction: column
flex-shrink: 0
fieldset
display: flex
flex-direction: column
flex-shrink: 0
fieldset
display: flex
flex-direction: row
flex-wrap: nowrap
justify-content: flex-start
.fjs-clustering-params
flex-direction: row
flex-wrap: nowrap
justify-content: flex-start
.fjs-clustering-params
display: flex
flex-direction: column
flex-shrink: 0
.fjs-cluster-algo-fieldset
div
float: left
.fjs-cluster-option-fieldset
display: flex
flex-direction: column
flex-shrink: 0
.fjs-cluster-algo-fieldset
div
float: left
.fjs-cluster-option-fieldset
div
margin-top: 8px
.fjs-hclust-selects
display: flex
flex-direction: column
div
margin-top: 8px
.fjs-hclust-selects
display: flex
flex-direction: row
justify-content: space-between
select