Commit 5befa886 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

added legend

parent d03442da
Pipeline #5376 passed with stages
in 6 minutes
...@@ -17,30 +17,49 @@ ...@@ -17,30 +17,49 @@
v-on:update="updateObservedVariable"> v-on:update="updateObservedVariable">
</data-box> </data-box>
<hr class="fjs-seperator"/> <hr class="fjs-seperator"/>
<fieldset class="fjs-fieldset"> <div class="fjs-settings">
<legend>Estimator</legend> <fieldset class="fjs-fieldset">
<div v-for="method in estimators"> <legend>Estimator</legend>
<div v-for="method in estimators">
<label>
<input type="radio" :value="method" v-model="estimator">
{{ method }}
</label>
</div>
</fieldset>
<div>
<label> <label>
<input type="radio" :value="method" v-model="estimator"> Ignore Subsets
{{ method }} <input type="checkbox" v-model="ignoreSubsets"/>
</label> </label>
</div> </div>
</fieldset>
<div>
<label>
Ignore Subsets
<input type="checkbox" v-model="ignoreSubsets"/>
</label>
</div> </div>
</control-panel> </control-panel>
<svg :height="height" :width="width"> <svg :height="height" :width="width">
<g :transform="`translate(${margin.left}, ${margin.top})`"> <g :transform="`translate(${margin.left}, ${margin.top})`">
<html2svg :right="padded.width">
<draggable>
<div class="fjs-legend">
<div class="fjs-legend-element" v-for="group in groups">
<svg width="1vw" height="1vw">
<rect width="1vw" height="1vw" :fill="group.color"></rect>
</svg>
<span>{{ group.name }}</span>
</div>
</div>
</draggable>
</html2svg>
<crosshair :width="padded.width" :height="padded.height"/>
<g class="fjs-axis" ref="yAxis2" :transform="`translate(${padded.width}, 0)`"></g> <g class="fjs-axis" ref="yAxis2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-axis" ref="xAxis2"></g> <g class="fjs-axis" ref="xAxis2"></g>
<g class="fjs-axis" ref="xAxis1" :transform="`translate(0, ${padded.height})`"></g> <g class="fjs-axis" ref="xAxis1" :transform="`translate(0, ${padded.height})`"></g>
<g class="fjs-axis" ref="yAxis1"></g> <g class="fjs-axis" ref="yAxis1"></g>
<crosshair :width="padded.width" :height="padded.height"/> <text :transform="`translate(${padded.width / 2}, ${padded.height + margin.bottom * 0.90})`"
text-anchor="middle">
{{ results.label }}
</text>
<g class="fjs-paths"> <g class="fjs-paths">
<path class="fjs-estimate-path" <path class="fjs-estimate-path"
:style="{stroke: path.color}" :style="{stroke: path.color}"
...@@ -65,9 +84,11 @@ ...@@ -65,9 +84,11 @@
import deepFreeze from 'deep-freeze-strict' import deepFreeze from 'deep-freeze-strict'
import * as d3 from 'd3' import * as d3 from 'd3'
import Crosshair from '../components/Crosshair.vue' import Crosshair from '../components/Crosshair.vue'
import Html2svg from '../components/HTML2SVG.vue'
import Draggable from '../components/Draggable.vue'
export default { export default {
name: 'survivalplot', name: 'survivalplot',
components: {Crosshair, DataBox, Chart, ControlPanel}, components: {Draggable, Html2svg, Crosshair, DataBox, Chart, ControlPanel},
mixins: [RunAnalysis], mixins: [RunAnalysis],
data () { data () {
return { return {
...@@ -151,14 +172,14 @@ ...@@ -151,14 +172,14 @@
return { x1, x2, y1, y2 } return { x1, x2, y1, y2 }
}, },
groups () { groups () {
const groups = {} const groups = []
this.results.categories.forEach(category => { this.results.categories.forEach(category => {
this.results.subsets.forEach(subset => { this.results.subsets.forEach(subset => {
groups[this.getGroupName(category, subset)] = {} groups.push({name: this.getGroupName(category, subset)})
}) })
}) })
Object.keys(groups).forEach((key, i) => { groups.forEach((group, i) => {
groups[key].color = this.groupColors[i % this.groupColors.length] group.color = this.groupColors[i % this.groupColors.length]
}) })
return groups return groups
}, },
...@@ -179,7 +200,7 @@ ...@@ -179,7 +200,7 @@
}) })
paths.push({ paths.push({
d: path, d: path,
color: this.groups[this.getGroupName(category, subset)].color color: this.groups.find(group => group.name === this.getGroupName(category, subset)).color
}) })
}) })
}) })
...@@ -208,7 +229,7 @@ ...@@ -208,7 +229,7 @@
}) })
paths.push({ paths.push({
d: path + backpath, d: path + backpath,
color: this.groups[this.getGroupName(category, subset)].color color: this.groups.find(group => group.name === this.getGroupName(category, subset)).color
}) })
}) })
}) })
...@@ -239,7 +260,7 @@ ...@@ -239,7 +260,7 @@
.catch(error => console.error(error)) .catch(error => console.error(error))
}, },
getGroupName (category, subset) { getGroupName (category, subset) {
return `${category} [s${subset + 1}]` return `${this.results.label} [${category}] [s${subset + 1}]`
} }
}, },
watch: { watch: {
...@@ -267,6 +288,17 @@ ...@@ -267,6 +288,17 @@
<style lang="sass" scoped> <style lang="sass" scoped>
@import '~assets/base.sass' @import '~assets/base.sass'
.fjs-control-panel
.fjs-settings > *
margin-bottom: 1vh
.fjs-legend
.fjs-legend-element
> svg
margin-right: 0.5vw
display: flex
align-items: center
svg svg
.fjs-paths .fjs-paths
path path
......
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