FeatureEnVi/frontend/src/components/Results.vue

<template>
  <div id="LinePlot"></div>
</template>

<script>

import { EventBus } from '../main.js'
import * as Plotly from 'plotly.js'

export default {
  name: 'Results',
  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) 

      // 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: this.xaxis, 
        y: this.scoresMean, 
        text: text,
        line: {color: "rgb(139,69,19)"}, 
        mode: "lines+markers", 
        marker : {
          symbol: 'circle' },
        name: "Accuracy",
        type: "scatter"
      }

      var trace2 = {
        x: xaxisReversed, 
        y: this.scoresPositive.concat(this.scoresNegative), 
        text: '',
        hoverinfo: 'text',
        fill: "tozerox", 
        fillcolor: "rgba(139,69,19,0.1)", 
        line: {color: "transparent"}, 
        name: "Accuracy", 
        showlegend: false, 
        type: "scatter"
      }

      var text = this.scoresSTD2.map (function(value, i) {
          return `STD: +/-${value}`
      })

      var trace3 = {
        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: xaxisReversed, 
        y: this.scoresPositive2.concat(this.scoresNegative2), 
        text: '',
        hoverinfo: 'text',
        fill: "tozerox", 
        fillcolor: "rgba(0,176,246,0.1)", 
        line: {color: "transparent"}, 
        name: "Precision", 
        showlegend: false, 
        type: "scatter"
      }
      var text = this.scoresSTD3.map (function(value, i) {
          return `STD: +/-${value}`
      })
      var trace5 = {
        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: xaxisReversed, 
        y: this.scoresPositive3.concat(this.scoresNegative3), 
        text: '',
        hoverinfo: 'text',
        fill: "tozerox", 
        fillcolor: "rgba(231,107,243,0.1)", 
        line: {color: "transparent"}, 
        name: "Recall", 
        showlegend: false, 
        type: "scatter"
      }

      var DataforLinePlot = [trace1, trace2, trace3, trace4, trace5, trace6];

      var layout = {
        xaxis: {
            gridcolor: "rgb(230,230,230)",
            title: 'Step of the feature engineering',
            tickformat: '.0f',
            range: [0, this.scoresMean.length + 5], 
            showgrid: true, 
            showline: false, 
            showticklabels: true, 
            tickcolor: "rgb(230,230,230)", 
            ticks: "outside", 
            zeroline: false
        }, 
        yaxis: {
            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
        },
      }
      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 () {
    EventBus.$on('finalResults', data => { this.ValidResultsVar = data })
    EventBus.$on('finalResults', this.initializeLinePLot)
    
    EventBus.$on('reset', this.reset)
  }
}
</script>

<style>

text {
  font-family: sans-serif;
}

svg {
  display: block;
}

.nodeHighlighted {
  stroke: 'orange'
}

.modebar{
  display: none !important;
}

</style>