|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div id="exploding_boxplot" class="exploding_boxplot" ref="myClickable"></div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { EventBus } from '../main.js'
|
|
|
|
import * as d3Base from 'd3'
|
|
|
|
import * as exploding_boxplot from 'd3_exploding_boxplot'
|
|
|
|
import 'd3_exploding_boxplot/src/d3_exploding_boxplot.css'
|
|
|
|
import $ from 'jquery'
|
|
|
|
|
|
|
|
// attach all d3 plugins to the d3 library
|
|
|
|
const d3 = Object.assign(d3Base)
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Algorithms',
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
PerformanceAllModels: '',
|
|
|
|
brushedAll: [],
|
|
|
|
brushedBoxPl: [],
|
|
|
|
previousColor: 0,
|
|
|
|
selectedAlgorithm: 0,
|
|
|
|
KNNModels: 576, //KNN models
|
|
|
|
WH: [],
|
|
|
|
parameters: [],
|
|
|
|
chart: ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
boxplot () {
|
|
|
|
d3.selectAll("#exploding_boxplot > *").remove();
|
|
|
|
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
|
|
|
|
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[2])
|
|
|
|
var algorithm1 = []
|
|
|
|
var algorithm2 = []
|
|
|
|
var parameters = []
|
|
|
|
for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) {
|
|
|
|
algorithm1.push({Performance: Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + i + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance '})
|
|
|
|
parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i]))
|
|
|
|
}
|
|
|
|
var temp = i
|
|
|
|
for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) {
|
|
|
|
temp = i + j
|
|
|
|
algorithm2.push({Performance: Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + temp + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance '})
|
|
|
|
parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j]))
|
|
|
|
}
|
|
|
|
EventBus.$emit('ParametersAll', parameters)
|
|
|
|
var data = algorithm1.concat(algorithm2)
|
|
|
|
/*median.push(sum/Object.keys(PerformAlgor2['0']).length)
|
|
|
|
if (median[0] > median[1])
|
|
|
|
var data = algorithm1.concat(algorithm2)
|
|
|
|
else
|
|
|
|
var data = algorithm2.concat(algorithm1)*/
|
|
|
|
|
|
|
|
// chart(data,aes)
|
|
|
|
// aesthetic :
|
|
|
|
// y : point's value on y axis
|
|
|
|
// group : how to group data on x axis
|
|
|
|
// color : color of the point / boxplot
|
|
|
|
// label : displayed text in toolbox
|
|
|
|
this.chart = exploding_boxplot(data, {y:'Performance',group:'Algorithm',color:'Algorithm',label:'Model'})
|
|
|
|
|
|
|
|
this.chart.width(this.WH[0]*3)
|
|
|
|
this.chart.height(this.WH[1])
|
|
|
|
//call chart on a div
|
|
|
|
this.chart('#exploding_boxplot')
|
|
|
|
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
|
|
|
|
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
|
|
|
|
|
|
|
|
this.brushStatus = document.getElementsByClassName('extent')
|
|
|
|
|
|
|
|
el[0].onclick = function() {
|
|
|
|
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
//if (modelsActive.indexOf(i) == -1) {
|
|
|
|
allPoints[i].style.fill = previousColor[0]
|
|
|
|
allPoints[i].style.opacity = '1.0'
|
|
|
|
//}
|
|
|
|
}
|
|
|
|
|
|
|
|
EventBus.$emit('PCPCall', 'KNN')
|
|
|
|
}
|
|
|
|
el[1].onclick = function() {
|
|
|
|
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF')
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
//if (modelsActive.indexOf(i) == -1) {
|
|
|
|
allPoints[i].style.fill = previousColor[1]
|
|
|
|
allPoints[i].style.opacity = '1.0'
|
|
|
|
//}
|
|
|
|
}
|
|
|
|
EventBus.$emit('PCPCall', 'RF')
|
|
|
|
}
|
|
|
|
|
|
|
|
const myObserver = new ResizeObserver(entries => {
|
|
|
|
EventBus.$emit('brusheAllOn')
|
|
|
|
});
|
|
|
|
|
|
|
|
var brushRect = document.querySelector('.extent');
|
|
|
|
|
|
|
|
myObserver.observe(brushRect);
|
|
|
|
},
|
|
|
|
brushActivationAll () {
|
|
|
|
// continue here and select the correct points.
|
|
|
|
console.log(this.chart.returnBrush())
|
|
|
|
},
|
|
|
|
brushed () {
|
|
|
|
if (this.selectedAlgorithm == 'KNN') {
|
|
|
|
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
|
|
|
|
} else {
|
|
|
|
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF')
|
|
|
|
}
|
|
|
|
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
|
|
|
|
var modelsActive = []
|
|
|
|
for (let j = 0; j < this.brushedBoxPl.length; j++) {
|
|
|
|
modelsActive.push(this.brushedBoxPl[j].model)
|
|
|
|
}
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
if (this.selectedAlgorithm == 'KNN') {
|
|
|
|
allPoints[i].style.fill = previousColor[0]
|
|
|
|
} else {
|
|
|
|
allPoints[i].style.fill = previousColor[1]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (modelsActive.length == 0) {
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
//if (modelsActive.indexOf(i) == -1) {
|
|
|
|
allPoints[i].style.fill = "#d3d3d3"
|
|
|
|
allPoints[i].style.opacity = '1.0'
|
|
|
|
//}
|
|
|
|
}
|
|
|
|
} else if (modelsActive.length == allPoints.length) {
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
if (this.selectedAlgorithm == 'KNN') {
|
|
|
|
allPoints[i].style.fill = previousColor[0]
|
|
|
|
allPoints[i].style.opacity = '1.0'
|
|
|
|
} else {
|
|
|
|
allPoints[i].style.fill = previousColor[1]
|
|
|
|
allPoints[i].style.opacity = '1.0'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
allPoints[i].style.opacity = '1.0'
|
|
|
|
if (this.selectedAlgorithm == 'KNN') {
|
|
|
|
if (modelsActive.indexOf(i) == -1) {
|
|
|
|
allPoints[i].style.fill = "#d3d3d3"
|
|
|
|
allPoints[i].style.opacity = '0.4'
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (modelsActive.indexOf(i+this.KNNModels) == -1) {
|
|
|
|
allPoints[i].style.fill = "#d3d3d3"
|
|
|
|
allPoints[i].style.opacity = '0.4'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.UpdateBarChart()
|
|
|
|
},
|
|
|
|
UpdateBarChart () {
|
|
|
|
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point')
|
|
|
|
var activeModels = []
|
|
|
|
var algorithmsSelected = []
|
|
|
|
var parameters = []
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
if (allPoints[i].style.fill != "rgb(211, 211, 211)") {
|
|
|
|
activeModels.push(allPoints[i].__data__.Model)
|
|
|
|
if (allPoints[i].__data__.Algorithm === 'KNN') {
|
|
|
|
algorithmsSelected.push('KNN')
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
algorithmsSelected.push('RF')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (activeModels.length == 0){
|
|
|
|
} else {
|
|
|
|
for (let i = 0; i<activeModels.length; i++) {
|
|
|
|
var array = activeModels[i].split(';')
|
|
|
|
var temp2 = array[1].split(' ')
|
|
|
|
parameters.push(temp2[2])
|
|
|
|
}
|
|
|
|
EventBus.$emit('ReturningAlgorithmsBar', algorithmsSelected)
|
|
|
|
EventBus.$emit('ReturningBrushedPointsParamsBar', parameters)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
selectedPointsPerAlgorithm () {
|
|
|
|
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point')
|
|
|
|
var activeModels = []
|
|
|
|
var algorithmsSelected = []
|
|
|
|
var parameters = []
|
|
|
|
for (let i = 0; i < allPoints.length; i++) {
|
|
|
|
if (allPoints[i].style.fill != "rgb(211, 211, 211)") {
|
|
|
|
activeModels.push(allPoints[i].__data__.Model)
|
|
|
|
if (allPoints[i].__data__.Algorithm === 'KNN') {
|
|
|
|
algorithmsSelected.push('KNN')
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
algorithmsSelected.push('RF')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (activeModels.length == 0){
|
|
|
|
alert('No models selected, please, retry!')
|
|
|
|
} else {
|
|
|
|
for (let i = 0; i<activeModels.length; i++) {
|
|
|
|
var array = activeModels[i].split(';')
|
|
|
|
var temp2 = array[1].split(' ')
|
|
|
|
parameters.push(temp2[2])
|
|
|
|
}
|
|
|
|
EventBus.$emit('ReturningAlgorithms', algorithmsSelected)
|
|
|
|
EventBus.$emit('ReturningBrushedPointsParams', parameters)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
previousBoxPlotState () {
|
|
|
|
var el = document.getElementsByClassName('d3-exploding-boxplot box')
|
|
|
|
if (document.getElementById('PCP').style.display == 'none') {
|
|
|
|
|
|
|
|
} else {
|
|
|
|
if (this.selectedAlgorithm == 'KNN') {
|
|
|
|
$(el)[0].dispatchEvent(new Event('click'))
|
|
|
|
} else if (this.selectedAlgorithm == 'RF') {
|
|
|
|
$(el)[2].dispatchEvent(new Event('click'))
|
|
|
|
} else {
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
EventBus.$on('emittedEventCallingModelBrushed', this.selectedPointsPerAlgorithm)
|
|
|
|
EventBus.$on('emittedEventCallingAllAlgorithms', data => {
|
|
|
|
this.PerformanceAllModels = data})
|
|
|
|
EventBus.$on('emittedEventCallingAllAlgorithms', this.boxplot)
|
|
|
|
EventBus.$on('emittedEventCallingBrushedBoxPlot', data => {
|
|
|
|
this.brushedBoxPl = data})
|
|
|
|
EventBus.$on('emittedEventCallingBrushedBoxPlot', this.brushed),
|
|
|
|
EventBus.$on('Responsive', data => {
|
|
|
|
this.WH = data})
|
|
|
|
EventBus.$on('ResponsiveandChange', data => {
|
|
|
|
this.WH = data})
|
|
|
|
EventBus.$on('ResponsiveandChange', this.boxplot)
|
|
|
|
EventBus.$on('ResponsiveandChange', this.previousBoxPlotState)
|
|
|
|
EventBus.$on('emittedEventCallingSelectedALgorithm', data => {
|
|
|
|
this.selectedAlgorithm = data})
|
|
|
|
EventBus.$on('brusheAllOn', this.brushActivationAll)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|