|
|
|
@ -12,83 +12,147 @@ export default { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
dataInstances: '', |
|
|
|
|
NumberofExecutions: 0, |
|
|
|
|
PositiveValue: 75, |
|
|
|
|
NegativeValue: 25, |
|
|
|
|
ValidResultsVar: [], |
|
|
|
|
scoresMean: [], |
|
|
|
|
scoresSTD: [], |
|
|
|
|
scoresPositive: [], |
|
|
|
|
scoresNegative: [], |
|
|
|
|
scoresMean2: [], |
|
|
|
|
scoresSTD2: [], |
|
|
|
|
scoresPositive2: [], |
|
|
|
|
scoresNegative2: [], |
|
|
|
|
scoresMean3: [], |
|
|
|
|
scoresSTD3: [], |
|
|
|
|
scoresPositive3: [], |
|
|
|
|
scoresNegative3: [], |
|
|
|
|
xaxis: [], |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
initializeLinePLot () { |
|
|
|
|
this.NumberofExecutions ++ |
|
|
|
|
this.xaxis.push(this.NumberofExecutions) |
|
|
|
|
|
|
|
|
|
Plotly.purge('LinePlot') |
|
|
|
|
// Under Exploration = Current |
|
|
|
|
this.scoresMean.push((JSON.parse(this.ValidResultsVar[0])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD.push((JSON.parse(this.ValidResultsVar[1])*100).toFixed(2)) |
|
|
|
|
|
|
|
|
|
this.scoresPositive.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) + parseFloat(this.scoresSTD[this.scoresSTD.length - 1])) |
|
|
|
|
this.scoresNegative.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) - parseFloat(this.scoresSTD[this.scoresSTD.length - 1])) |
|
|
|
|
|
|
|
|
|
this.scoresMean2.push((JSON.parse(this.ValidResultsVar[2])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD2.push((JSON.parse(this.ValidResultsVar[3])*100).toFixed(2)) |
|
|
|
|
|
|
|
|
|
this.scoresPositive2.push(parseFloat(this.scoresMean2[this.scoresMean2.length - 1]) + parseFloat(this.scoresSTD2[this.scoresSTD2.length - 1])) |
|
|
|
|
this.scoresNegative2.push(parseFloat(this.scoresMean2[this.scoresMean2.length - 1]) - parseFloat(this.scoresSTD2[this.scoresSTD2.length - 1])) |
|
|
|
|
|
|
|
|
|
this.scoresMean3.push((JSON.parse(this.ValidResultsVar[4])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD3.push((JSON.parse(this.ValidResultsVar[5])*100).toFixed(2)) |
|
|
|
|
|
|
|
|
|
this.scoresPositive3.push(parseFloat(this.scoresMean3[this.scoresMean3.length - 1]) + parseFloat(this.scoresSTD3[this.scoresSTD3.length - 1])) |
|
|
|
|
this.scoresNegative3.push(parseFloat(this.scoresMean3[this.scoresMean3.length - 1]) - parseFloat(this.scoresSTD3[this.scoresSTD3.length - 1])) |
|
|
|
|
|
|
|
|
|
var xaxisReversed = [] |
|
|
|
|
xaxisReversed = this.xaxis.slice().reverse() |
|
|
|
|
xaxisReversed = this.xaxis.concat(xaxisReversed) |
|
|
|
|
|
|
|
|
|
// fill in 'text' array for hover |
|
|
|
|
var text = this.scoresSTD.map (function(value, i) { |
|
|
|
|
return `STD: +/-${value}` |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
var trace1 = { |
|
|
|
|
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], |
|
|
|
|
y: [12, 22, 32, 45, 56, 67, 77, 89, 98, 100, 99, 88, 78, 66, 55, 44, 33, 23, 18, 8], |
|
|
|
|
fill: "tozerox", |
|
|
|
|
fillcolor: "rgba(160,82,45,0.2)", |
|
|
|
|
line: {color: "transparent"}, |
|
|
|
|
x: this.xaxis, |
|
|
|
|
y: this.scoresMean, |
|
|
|
|
text: text, |
|
|
|
|
line: {color: "rgb(139,69,19)"}, |
|
|
|
|
mode: "lines+markers", |
|
|
|
|
marker : { |
|
|
|
|
symbol: 'circle' }, |
|
|
|
|
name: "Accuracy", |
|
|
|
|
showlegend: false, |
|
|
|
|
type: "scatter" |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var trace2 = { |
|
|
|
|
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], |
|
|
|
|
y: [55, 29, 63, 79, 59, 29, 79, 48, 58, 53, 50, 40, 40, 70, 24, 50, 77, 60, 25, 47], |
|
|
|
|
x: xaxisReversed, |
|
|
|
|
y: this.scoresPositive.concat(this.scoresNegative), |
|
|
|
|
text: '', |
|
|
|
|
hoverinfo: 'text', |
|
|
|
|
fill: "tozerox", |
|
|
|
|
fillcolor: "rgba(0,176,246,0.2)", |
|
|
|
|
line: {color: "transparent"}, |
|
|
|
|
name: "Precision", |
|
|
|
|
fillcolor: "rgba(139,69,19,0.1)", |
|
|
|
|
mode: "lines", |
|
|
|
|
name: "Accuracy", |
|
|
|
|
showlegend: false, |
|
|
|
|
type: "scatter" |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var text = this.scoresSTD2.map (function(value, i) { |
|
|
|
|
return `STD: +/-${value}` |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
var trace3 = { |
|
|
|
|
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], |
|
|
|
|
y: [100, 85, 68, 46, 25, 30, 29, 49, 27, 94, 87, 18, 30, 25, 25, 17, 30, 55, 77, 77], |
|
|
|
|
fill: "tozerox", |
|
|
|
|
fillcolor: "rgba(231,107,243,0.2)", |
|
|
|
|
line: {color: "transparent"}, |
|
|
|
|
name: "Recall", |
|
|
|
|
showlegend: false, |
|
|
|
|
x: this.xaxis, |
|
|
|
|
y: this.scoresMean2, |
|
|
|
|
text: text, |
|
|
|
|
line: {color: "rgb(0,176,246)"}, |
|
|
|
|
mode: "lines+markers", |
|
|
|
|
marker : { |
|
|
|
|
symbol: 'square' }, |
|
|
|
|
name: "Precision", |
|
|
|
|
type: "scatter" |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var trace4 = { |
|
|
|
|
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|
|
|
|
y: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], |
|
|
|
|
line: {color: "rgb(160,82,45)"}, |
|
|
|
|
x: xaxisReversed, |
|
|
|
|
y: this.scoresPositive2.concat(this.scoresNegative2), |
|
|
|
|
text: '', |
|
|
|
|
hoverinfo: 'text', |
|
|
|
|
fill: "tozerox", |
|
|
|
|
fillcolor: "rgba(0,176,246,0.1)", |
|
|
|
|
mode: "lines", |
|
|
|
|
name: "Accuracy", |
|
|
|
|
name: "Precision", |
|
|
|
|
showlegend: false, |
|
|
|
|
type: "scatter" |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
var text = this.scoresSTD3.map (function(value, i) { |
|
|
|
|
return `STD: +/-${value}` |
|
|
|
|
}) |
|
|
|
|
var trace5 = { |
|
|
|
|
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|
|
|
|
y: [50, 26, 59, 75, 50, 25, 75, 45, 55, 50], |
|
|
|
|
line: {color: "rgb(0,176,246)"}, |
|
|
|
|
mode: "lines", |
|
|
|
|
name: "Precision", |
|
|
|
|
x: this.xaxis, |
|
|
|
|
y: this.scoresMean3, |
|
|
|
|
text: text, |
|
|
|
|
line: {color: "rgb(231,107,243)"}, |
|
|
|
|
mode: "lines+markers", |
|
|
|
|
marker : { |
|
|
|
|
symbol: 'triangle-up' }, |
|
|
|
|
name: "Recall", |
|
|
|
|
type: "scatter" |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var trace6 = { |
|
|
|
|
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], |
|
|
|
|
y: [100, 80, 60, 40, 20, 28, 20, 40, 20, 90], |
|
|
|
|
line: {color: "rgb(231,107,243)"}, |
|
|
|
|
x: xaxisReversed, |
|
|
|
|
y: this.scoresPositive3.concat(this.scoresNegative3), |
|
|
|
|
text: '', |
|
|
|
|
hoverinfo: 'text', |
|
|
|
|
fill: "tozerox", |
|
|
|
|
fillcolor: "rgba(231,107,243,0.1)", |
|
|
|
|
mode: "lines", |
|
|
|
|
name: "Recall", |
|
|
|
|
showlegend: false, |
|
|
|
|
type: "scatter" |
|
|
|
|
}; |
|
|
|
|
var data = [trace1, trace2, trace3, trace4, trace5, trace6]; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var DataforLinePlot = [trace1, trace2, trace3, trace4, trace5, trace6]; |
|
|
|
|
|
|
|
|
|
var layout = { |
|
|
|
|
height: '235', |
|
|
|
|
margin: { |
|
|
|
|
l: 55, |
|
|
|
|
r: 20, |
|
|
|
|
b: 45, |
|
|
|
|
t: 5, |
|
|
|
|
pad: 5 |
|
|
|
|
}, |
|
|
|
|
xaxis: { |
|
|
|
|
title: "Step of feature engeering", |
|
|
|
|
gridcolor: "rgb(230,230,230)", |
|
|
|
|
range: [1, 10], |
|
|
|
|
title: 'Step of the feature engineering', |
|
|
|
|
tickformat: '.0f', |
|
|
|
|
range: [0, this.scoresMean.length + 10], |
|
|
|
|
showgrid: true, |
|
|
|
|
showline: false, |
|
|
|
|
showticklabels: true, |
|
|
|
@ -97,24 +161,38 @@ export default { |
|
|
|
|
zeroline: false |
|
|
|
|
}, |
|
|
|
|
yaxis: { |
|
|
|
|
title: "Performance (%)", |
|
|
|
|
gridcolor: "rgb(230,230,230)", |
|
|
|
|
title: 'Performance (%)', |
|
|
|
|
showgrid: true, |
|
|
|
|
showline: false, |
|
|
|
|
showticklabels: true, |
|
|
|
|
tickcolor: "rgb(230,230,230)", |
|
|
|
|
ticks: "outside", |
|
|
|
|
zeroline: false |
|
|
|
|
}, |
|
|
|
|
autosize: false, |
|
|
|
|
width: '1230', |
|
|
|
|
height: '232', |
|
|
|
|
margin: { |
|
|
|
|
l: 55, |
|
|
|
|
r: 20, |
|
|
|
|
b: 45, |
|
|
|
|
t: 5, |
|
|
|
|
pad: 5 |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
Plotly.newPlot('LinePlot', data, layout); |
|
|
|
|
var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true} |
|
|
|
|
Plotly.newPlot('LinePlot', DataforLinePlot, layout, config) |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
reset () { |
|
|
|
|
Plotly.purge('LinePlot') |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
this.initializeLinePLot() |
|
|
|
|
EventBus.$on('finalResults', data => { this.ValidResultsVar = data }) |
|
|
|
|
EventBus.$on('finalResults', this.initializeLinePLot) |
|
|
|
|
|
|
|
|
|
EventBus.$on('reset', this.reset) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|