Skip to content

Commit

Permalink
Graph updated for non inferiority
Browse files Browse the repository at this point in the history
- Non inf as Graph Y is implemented
- Setting the first graph when we change from non inferiority or to non inferiority
  • Loading branch information
Marcelo Pereira de Oliveira committed Apr 12, 2018
1 parent ef5a281 commit 494abfb
Show file tree
Hide file tree
Showing 7 changed files with 484 additions and 133 deletions.
4 changes: 4 additions & 0 deletions dist/powercalculator.css
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,10 @@
}


/* components/svg-graph-tab-item.vue */

/*# sourceMappingURL=svg-graph-tab-item.vue.map */

/* components/pc-block-field.vue */

.pc-value-field-wrapper {
Expand Down
283 changes: 228 additions & 55 deletions dist/powercalculator.js

Large diffs are not rendered by default.

45 changes: 45 additions & 0 deletions src/components/svg-graph-tab-item.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template id="svg-graph">
<label class="pc-graph-radio-label">
<input type="radio" class="pc-graph-radio-input" name="graph" :value="value" v-model="graphTypeSynced">
<span class="pc-graph-radio-text" :class="spanClass">{{graphName}}</span>
</label>
</template>


<script>
export default {
props: ['graphType', 'graphX', 'graphY', 'getMetricDisplayName'],
data () {
return {
}
},
computed: {
graphName () {
const graphXDisplay = this.getMetricDisplayName(this.graphX);
const graphYDisplay = this.getMetricDisplayName(this.graphY);
return `${graphYDisplay} / ${graphXDisplay}`
},
value () {
return `${this.graphX}-${this.graphY}`
},
spanClass () {
return {
'pc-graph-radio-selected': this.graphType == this.value
}
},
graphTypeSynced: {
get () {
return this.graphType
},
set (newValue) {
this.$emit('update:graphType', newValue)
}
}
}
}
</script>

<style>
</style>
89 changes: 61 additions & 28 deletions src/components/svg-graph.vue
Original file line number Diff line number Diff line change
@@ -1,30 +1,17 @@
<template id="svg-graph">
<div class="pc-block pc-block--graph">
<div class="pc-graph-controls">
<label class="pc-graph-radio-label" v-show="!isNonInferiorityEnabled">
<input type="radio" class="pc-graph-radio-input" name="graph-x" value="days-incrementalTrialsPerDay" v-model="graphType">
<span class="pc-graph-radio-text" :class="{'pc-graph-radio-selected': graphType == 'days-incrementalTrialsPerDay'}">{{getMetricDisplayName('incrementalTrialsPerDay')}} / {{getMetricDisplayName('days')}}</span>
</label>
<label class="pc-graph-radio-label" v-show="!isNonInferiorityEnabled">
<input type="radio" class="pc-graph-radio-input" name="graph-x" value="samplePerDay-incrementalTrials" v-model="graphType">
<span class="pc-graph-radio-text" :class="{'pc-graph-radio-selected': graphType == 'samplePerDay-incrementalTrials'}">{{getMetricDisplayName('incrementalTrials')}} / {{getMetricDisplayName('samplePerDay')}}</span>
</label>
<label class="pc-graph-radio-label" v-show="!isNonInferiorityEnabled">
<input type="radio" class="pc-graph-radio-input" name="graph-x" value="sample-impact" v-model="graphType">
<span class="pc-graph-radio-text" :class="{'pc-graph-radio-selected': graphType == 'sample-impact'}">{{getMetricDisplayName('impact')}} / {{getMetricDisplayName('sample')}}</span>
</label>
<label class="pc-graph-radio-label">
<input type="radio" class="pc-graph-radio-input" name="graph-x" value="sample-power" v-model="graphType">
<span class="pc-graph-radio-text" :class="{'pc-graph-radio-selected': graphType == 'sample-power'}">{{getMetricDisplayName('power')}} / {{getMetricDisplayName('sample')}}</span>
</label>
<label class="pc-graph-radio-label">
<input type="radio" class="pc-graph-radio-input" name="graph-x" value="samplePerDay-power" v-model="graphType">
<span class="pc-graph-radio-text" :class="{'pc-graph-radio-selected': graphType == 'samplePerDay-power'}">{{getMetricDisplayName('power')}} / {{getMetricDisplayName('samplePerDay')}}</span>
</label>
<label class="pc-graph-radio-label" v-show="!isNonInferiorityEnabled">
<input type="radio" class="pc-graph-radio-input" name="graph-x" value="impact-power" v-model="graphType">
<span class="pc-graph-radio-text" :class="{'pc-graph-radio-selected': graphType == 'impact-power'}">{{getMetricDisplayName('power')}} / {{getMetricDisplayName('impact')}}</span>
</label>

<svgGraphTabItem
v-for="graph in graphList"
v-bind:key="graph.graphX + '-' + graph.graphY"
v-bind:graphX="graph.graphX"
v-bind:graphY="graph.graphY"
v-bind:getMetricDisplayName="getMetricDisplayName"
v-bind:graphType.sync="graphType"
>
</svgGraphTabItem>

</div>
<div class="pc-graph" ref="pc-graph-size">
<div v-bind:style="style" ref="pc-graph-wrapper">
Expand All @@ -40,6 +27,7 @@
/*eslint no-undef: "error"*/
import graphDataMixin from '../js/graph-data-mixin.js'
import svgGraphTabItem from './svg-graph-tab-item.vue'
let dataDefault = [
['x', 0, 0, 0, 0, 0, 0],
Expand All @@ -65,7 +53,6 @@ document.querySelector('head').appendChild(style);
export default {
mixins: [graphDataMixin],
template: '#svg-graph',
props: [],
data () {
return {
Expand Down Expand Up @@ -120,13 +107,54 @@ export default {
},
runtime () {
return this.$store.state.attributes.runtime
},
graphList() {
let list = [
{
name: 'days-incrementalTrialsPerDay',
cond: !this.isNonInferiorityEnabled
},
{
name: 'samplePerDay-incrementalTrials',
cond: !this.isNonInferiorityEnabled
},
{
name: 'sample-impact',
cond: !this.isNonInferiorityEnabled
},
{
name: 'sample-threshold',
cond: this.isNonInferiorityEnabled
},
{
name: 'sample-power',
cond: true
},
{
name: 'samplePerDay-power',
cond: true
},
{
name: 'impact-power',
cond: !this.isNonInferiorityEnabled
},
];
return list.filter((obj) => {return obj.cond == true}).map((obj) => {
let [graphX, graphY] = obj.name.split('-');
return {
graphX,
graphY
}
})
}
},
methods: {
getDefaultGraphOption () {
let result = 'days-incrementalTrialsPerDay';
if (this.$store.state.nonInferiority.enabled) {
result = 'sample-power'
result = 'sample-threshold'
}
return result
},
Expand Down Expand Up @@ -259,6 +287,7 @@ export default {
days: '# of days',
incrementalTrialsPerDay: 'Inc. Trials per day',
threshold: 'Non Inf. Threshold',
}[metric] || ''
}
},
Expand All @@ -282,8 +311,9 @@ export default {
this.updateGraphData();
},
isNonInferiorityEnabled (bool) {
if (bool) {
this.graphType = 'sample-power'
if (this.graphList.indexOf(this.graphType) == -1) {
let { graphX, graphY } = this.graphList[0];
this.graphType = `${graphX}-${graphY}`;
}
}
},
Expand Down Expand Up @@ -359,6 +389,9 @@ export default {
});
this.updateGraphData()
},
components: {
svgGraphTabItem
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/js/graph-data-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import _days from './graph-data-days.js'
import _sample from './graph-data-sample.js'
import _samplePerDay from './graph-data-sample-per-day.js'
import _power from './graph-data-power.js'
import _threshold from './graph-data-threshold.js'


var defaultConfig = {
Expand Down Expand Up @@ -72,6 +73,7 @@ export default {
_power: Object.assign({}, defaultConfig, _power),
_incrementalTrialsPerDay: Object.assign({}, defaultConfig, _incrementalTrialsPerDay),
_days: Object.assign({}, defaultConfig, _days),
_threshold: Object.assign({}, defaultConfig, _threshold),
})
},
methods: {
Expand Down
58 changes: 58 additions & 0 deletions src/js/graph-data-threshold.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
export default {
getGraphYTicks () {
let threshold = isNaN(this.$store.state.nonInferiority.threshold) ? 0 : this.$store.state.nonInferiority.threshold,
arr = [threshold/1.50, threshold/1.25, threshold, threshold*1.25, threshold*1.50];
return arr
},
getGraphYTicksFormatted (y) {
let num = window.parseFloat(y);
if ((num % 1) !== 0) {
num = num.toFixed(2);
}

if (isNaN(num)) {
num = 0;
}

const suffix = this.$store.state.nonInferiority.selected == 'relative' ? '%' : '';

return `${num}${suffix}`
},
getCurrentYValue () {
return this.$store.state.nonInferiority.threshold
},
updateClonedValues (clonedObj, value) {
let { getters, state } = this.$store,
{ customMu, customOpts, customAlternative, customThresholdCorrectedValue } = getters;

const thresholdCorrectedValue = customThresholdCorrectedValue({
threshold: value,
selected: state.nonInferiority.selected
});

const mu = customMu({
runtime: getters.runtime,
thresholdCorrectedValue: thresholdCorrectedValue,
visitors_per_day: getters.visitorsPerDay,
base_rate: getters.extractValue('base'),
});

const opts = customOpts({
selected: state.nonInferiority.selected,
lockedField: getters.lockedField,
thresholdCorrectedValue: thresholdCorrectedValue,
runtime: getters.runtime,
visitorsPerDay: getters.visitorsPerDay,
});

const alternative = customAlternative({ type: 'noninferiority' });

Object.assign(clonedObj, {
mu,
opts,
alternative
})

return clonedObj;
},
};
Loading

0 comments on commit 494abfb

Please sign in to comment.