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

Possibility to display real data

parent 32863f7b
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
</div> </div>
<div class="fjs-parameter-container"> <div class="fjs-parameter-container">
<label for="fjs-show-data-check">Show Data Points</label>
<input id="fjs-show-data-check" type="checkbox" v-model="params.showData"/>
</div> </div>
<div class="fjs-vis-container"> <div class="fjs-vis-container">
...@@ -81,6 +83,12 @@ ...@@ -81,6 +83,12 @@
:width="boxplotWidth" :width="boxplotWidth"
:height="scales.y(results.statistics[label].l_qrt) - scales.y(results.statistics[label].median)"> :height="scales.y(results.statistics[label].l_qrt) - scales.y(results.statistics[label].median)">
</rect> </rect>
<circle class="fjs-points"
:cy="scales.y(point)"
r="4"
v-for="point in points[label]"
v-if="params.showData">
</circle>
</g> </g>
</g> </g>
</svg> </svg>
...@@ -107,6 +115,9 @@ ...@@ -107,6 +115,9 @@
numData: [], numData: [],
catData: [], catData: [],
tooltips: {}, tooltips: {},
params: {
showData: false
},
results: { results: {
data: [], data: [],
statistics: {} statistics: {}
...@@ -137,6 +148,17 @@ ...@@ -137,6 +148,17 @@
const height = this.height - this.margin.top - this.margin.bottom const height = this.height - this.margin.top - this.margin.bottom
return { width, height } return { width, height }
}, },
points () {
const points = {}
Object.keys(this.results.statistics).forEach(label => {
let [variable, category, subset] = label.split('//')
subset = parseInt(subset.substring(1)) - 1 // revert subset string formatting
points[label] = this.results.data
.filter(d => d.subset === subset && d.category === category)
.map(d => d[variable])
})
return points
},
numOfBoxplots () { numOfBoxplots () {
return Object.keys(this.results.statistics).length return Object.keys(this.results.statistics).length
}, },
...@@ -308,6 +330,7 @@ ...@@ -308,6 +330,7 @@
stroke: none stroke: none
fill: rgb(180, 221, 253) fill: rgb(180, 221, 253)
shape-rendering: crispEdges shape-rendering: crispEdges
.fjs-points
</style> </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