|
|
|
|
@ -1,5 +1,8 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<div id="HistoryPlot"></div> |
|
|
|
|
<div id="LinePlot"></div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -11,148 +14,333 @@ export default { |
|
|
|
|
name: 'Results', |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
dataInstances: '', |
|
|
|
|
NumberofExecutions: 0, |
|
|
|
|
PositiveValue: 75, |
|
|
|
|
NegativeValue: 25, |
|
|
|
|
ValidResultsVar: [], |
|
|
|
|
globalStep: 0, |
|
|
|
|
featuresReceived: [], |
|
|
|
|
scoresMean: [], |
|
|
|
|
scoresSTD: [], |
|
|
|
|
scoresPositive: [], |
|
|
|
|
scoresNegative: [], |
|
|
|
|
scoresMean2: [], |
|
|
|
|
scoresSTD2: [], |
|
|
|
|
scoresPositive2: [], |
|
|
|
|
scoresNegative2: [], |
|
|
|
|
scoresMean3: [], |
|
|
|
|
scoresSTD3: [], |
|
|
|
|
scoresPositive3: [], |
|
|
|
|
scoresNegative3: [], |
|
|
|
|
scoresMeanBest: [], |
|
|
|
|
scoresSTDBest: [], |
|
|
|
|
xaxis: [], |
|
|
|
|
valuesGlobal: [1, 0, 0, 0], // initial |
|
|
|
|
previousState: [], |
|
|
|
|
flag: true |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
initializeLinePLot () { |
|
|
|
|
this.NumberofExecutions ++ |
|
|
|
|
this.xaxis.push(this.NumberofExecutions) |
|
|
|
|
HistoryPun() { |
|
|
|
|
var state = this.globalStep + 1 |
|
|
|
|
|
|
|
|
|
var svg = d3.select("#HistoryPlot"); |
|
|
|
|
svg.selectAll("*").remove(); |
|
|
|
|
|
|
|
|
|
// 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)) |
|
|
|
|
var margin = {top: 0, right: 0, bottom: 0, left: 0} |
|
|
|
|
var width = 390 - margin.left - margin.right |
|
|
|
|
var height = 570 - margin.top - margin.bottom |
|
|
|
|
var padding = 3 |
|
|
|
|
var xLabelHeight = 30 |
|
|
|
|
var yLabelWidth = 80 |
|
|
|
|
var borderWidth = 2 |
|
|
|
|
var duration = 50 |
|
|
|
|
|
|
|
|
|
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])) |
|
|
|
|
var chart = d3.select('#HistoryPlot').append('svg') |
|
|
|
|
.attr('width', width + margin.left + margin.right) |
|
|
|
|
.attr('height', height + margin.top + margin.bottom) |
|
|
|
|
.append('g') |
|
|
|
|
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') |
|
|
|
|
|
|
|
|
|
this.scoresMean2.push((JSON.parse(this.ValidResultsVar[2])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD2.push((JSON.parse(this.ValidResultsVar[3])*100).toFixed(2)) |
|
|
|
|
var border = chart.append('rect') |
|
|
|
|
.attr('x', yLabelWidth) |
|
|
|
|
.attr('y', xLabelHeight) |
|
|
|
|
.style('fill-opacity', 0) |
|
|
|
|
.style('stroke', '#000') |
|
|
|
|
.style('stroke-width', borderWidth) |
|
|
|
|
.style('shape-rendering', 'crispEdges') |
|
|
|
|
|
|
|
|
|
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])) |
|
|
|
|
var color = JSON.parse(this.ValidResultsVar[12]) |
|
|
|
|
|
|
|
|
|
this.scoresMean3.push((JSON.parse(this.ValidResultsVar[4])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD3.push((JSON.parse(this.ValidResultsVar[5])*100).toFixed(2)) |
|
|
|
|
var data = [] |
|
|
|
|
var features = this.featuresReceived[0] |
|
|
|
|
var labelsX = ['Add', 'Remove', 'Combine', 'Round'] |
|
|
|
|
for (let i=0; i< features.length; i++) { |
|
|
|
|
data.push({ |
|
|
|
|
label: features[i], |
|
|
|
|
values: this.valuesGlobal |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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 allValues = Array.prototype.concat.apply([], data.map(function(d) { return d.values })) |
|
|
|
|
var maxWidth = d3.max(data.map(function(d) { return d.values.length })) |
|
|
|
|
var maxR = d3.min([(width - yLabelWidth) / maxWidth, (height - xLabelHeight) / data.length]) / 2 |
|
|
|
|
|
|
|
|
|
var xaxisReversed = [] |
|
|
|
|
xaxisReversed = this.xaxis.slice().reverse() |
|
|
|
|
xaxisReversed = this.xaxis.concat(xaxisReversed) |
|
|
|
|
var r = function(d) { |
|
|
|
|
|
|
|
|
|
// fill in 'text' array for hover |
|
|
|
|
var text = this.scoresSTD.map (function(value, i) { |
|
|
|
|
return `STD: +/-${value}` |
|
|
|
|
}) |
|
|
|
|
var f = d3.scale.sqrt() |
|
|
|
|
.domain([d3.min(allValues), d3.max(allValues)]) |
|
|
|
|
.rangeRound([0, maxR - padding]) |
|
|
|
|
|
|
|
|
|
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" |
|
|
|
|
return f(d) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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 c = d3.scale.ordinal() |
|
|
|
|
.domain([0, 1]) |
|
|
|
|
.range(["#D3D3D3", "#e76bf3"]); |
|
|
|
|
|
|
|
|
|
var text = this.scoresSTD2.map (function(value, i) { |
|
|
|
|
return `STD: +/-${value}` |
|
|
|
|
}) |
|
|
|
|
var rows = chart.selectAll('.row') |
|
|
|
|
.data(data, function(d){ return d.label }) |
|
|
|
|
|
|
|
|
|
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" |
|
|
|
|
} |
|
|
|
|
rows.enter().append('g') |
|
|
|
|
.attr('class', 'row') |
|
|
|
|
|
|
|
|
|
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 = { |
|
|
|
|
rows.exit() |
|
|
|
|
.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.style('fill-opacity', 0) |
|
|
|
|
.remove() |
|
|
|
|
|
|
|
|
|
rows.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('transform', function(d, i){ return 'translate(' + yLabelWidth + ',' + (maxR * i * 2 + maxR + xLabelHeight) + ')' }) |
|
|
|
|
|
|
|
|
|
var dots = rows.selectAll('circle') |
|
|
|
|
.data(function(d){ return d.values }) |
|
|
|
|
|
|
|
|
|
dots.enter().append('circle') |
|
|
|
|
.attr('cy', 0) |
|
|
|
|
.attr('r', 0) |
|
|
|
|
.style('fill', '#ffffff') |
|
|
|
|
.text(function(d){ return d }) |
|
|
|
|
|
|
|
|
|
dots.exit() |
|
|
|
|
.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('r', 0) |
|
|
|
|
.remove() |
|
|
|
|
|
|
|
|
|
var previously = this.previousState |
|
|
|
|
|
|
|
|
|
var testLoc = this.flag |
|
|
|
|
|
|
|
|
|
dots.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('r', function(d){ return r(d) }) |
|
|
|
|
.attr('cx', function(d, i){ return i * maxR * 2 + maxR }) |
|
|
|
|
.style('fill', function(d){ |
|
|
|
|
if (testLoc) { |
|
|
|
|
if (d == state) { |
|
|
|
|
previously.push(c(color)) |
|
|
|
|
return c(color); |
|
|
|
|
} else { |
|
|
|
|
previously.push(c(0)) |
|
|
|
|
return c(0) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
return c(0) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.flag = false |
|
|
|
|
this.previousState = previously |
|
|
|
|
|
|
|
|
|
var dotLabels = rows.selectAll('.dot-label') |
|
|
|
|
.data(function(d){ return d.values }) |
|
|
|
|
|
|
|
|
|
var dotLabelEnter = dotLabels.enter().append('g') |
|
|
|
|
.attr('class', 'dot-label') |
|
|
|
|
.on('mouseover', function(d){ |
|
|
|
|
var selection = d3.select(this) |
|
|
|
|
selection.select('rect').transition().duration(100).style('opacity', 1) |
|
|
|
|
selection.select("text").transition().duration(100).style('opacity', 1) |
|
|
|
|
}) |
|
|
|
|
.on('mouseout', function(d){ |
|
|
|
|
var selection = d3.select(this) |
|
|
|
|
selection.select('rect').transition().style('opacity', 0) |
|
|
|
|
selection.select("text").transition().style('opacity', 0) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
dotLabelEnter.append('rect') |
|
|
|
|
.style('fill', '#000000') |
|
|
|
|
.style('opacity', 0) |
|
|
|
|
|
|
|
|
|
dotLabelEnter.append('text') |
|
|
|
|
.style('text-anchor', 'middle') |
|
|
|
|
.style('fill', '#ffffff') |
|
|
|
|
.style('opacity', 0) |
|
|
|
|
|
|
|
|
|
dotLabels.exit().remove() |
|
|
|
|
|
|
|
|
|
dotLabels |
|
|
|
|
.attr('transform', function(d, i){ return 'translate(' + (i * maxR * 2) + ',' + (-maxR) + ')' }) |
|
|
|
|
.select('text') |
|
|
|
|
.text(function(d){ return d }) |
|
|
|
|
.attr('y', maxR + 4) |
|
|
|
|
.attr('x', maxR) |
|
|
|
|
|
|
|
|
|
dotLabels |
|
|
|
|
.select('rect') |
|
|
|
|
.attr('width', maxR * 2) |
|
|
|
|
.attr('height', maxR * 2) |
|
|
|
|
|
|
|
|
|
var xLabels = chart.selectAll('.xLabel') |
|
|
|
|
.data(labelsX) |
|
|
|
|
|
|
|
|
|
xLabels.enter().append('text') |
|
|
|
|
.attr('y', xLabelHeight) |
|
|
|
|
.attr('transform', 'translate(0,-6)') |
|
|
|
|
.attr('class', 'xLabel') |
|
|
|
|
.style('text-anchor', 'middle') |
|
|
|
|
.style('fill-opacity', 0) |
|
|
|
|
|
|
|
|
|
xLabels.exit() |
|
|
|
|
.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.style('fill-opacity', 0) |
|
|
|
|
.remove() |
|
|
|
|
|
|
|
|
|
xLabels.transition() |
|
|
|
|
.text(function (d) { return d }) |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth }) |
|
|
|
|
.style('fill-opacity', 1) |
|
|
|
|
|
|
|
|
|
var yLabels = chart.selectAll('.yLabel') |
|
|
|
|
.data(data, function(d){ return d.label }) |
|
|
|
|
|
|
|
|
|
yLabels.enter().append('text') |
|
|
|
|
.text(function (d) { return d.label }) |
|
|
|
|
.attr('x', yLabelWidth) |
|
|
|
|
.attr('class', 'yLabel') |
|
|
|
|
.style('text-anchor', 'end') |
|
|
|
|
.style('fill-opacity', 0) |
|
|
|
|
|
|
|
|
|
yLabels.exit() |
|
|
|
|
.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.style('fill-opacity', 0) |
|
|
|
|
.remove() |
|
|
|
|
|
|
|
|
|
yLabels.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight }) |
|
|
|
|
.attr('transform', 'translate(-6,' + maxR / 2.5 + ')') |
|
|
|
|
.style('fill-opacity', 1) |
|
|
|
|
|
|
|
|
|
var vert = chart.selectAll('.vert') |
|
|
|
|
.data(labelsX) |
|
|
|
|
|
|
|
|
|
vert.enter().append('line') |
|
|
|
|
.attr('class', 'vert') |
|
|
|
|
.attr('y1', xLabelHeight + borderWidth / 2) |
|
|
|
|
.attr('stroke', '#888') |
|
|
|
|
.attr('stroke-width', 1) |
|
|
|
|
.style('shape-rendering', 'crispEdges') |
|
|
|
|
.style('stroke-opacity', 0) |
|
|
|
|
|
|
|
|
|
vert.exit() |
|
|
|
|
.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.style('stroke-opacity', 0) |
|
|
|
|
.remove() |
|
|
|
|
|
|
|
|
|
vert.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('x1', function(d, i){ return maxR * i * 2 + yLabelWidth }) |
|
|
|
|
.attr('x2', function(d, i){ return maxR * i * 2 + yLabelWidth }) |
|
|
|
|
.attr('y2', maxR * 2 * data.length + xLabelHeight - borderWidth / 2) |
|
|
|
|
.style('stroke-opacity', function(d, i){ return i ? 1 : 0 }) |
|
|
|
|
|
|
|
|
|
var horiz = chart.selectAll('.horiz'). |
|
|
|
|
data(data, function(d){ return d.label }) |
|
|
|
|
|
|
|
|
|
horiz.enter().append('line') |
|
|
|
|
.attr('class', 'horiz') |
|
|
|
|
.attr('x1', yLabelWidth + borderWidth / 2) |
|
|
|
|
.attr('stroke', '#888') |
|
|
|
|
.attr('stroke-width', 1) |
|
|
|
|
.style('shape-rendering', 'crispEdges') |
|
|
|
|
.style('stroke-opacity', 0) |
|
|
|
|
|
|
|
|
|
horiz.exit() |
|
|
|
|
.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.style('stroke-opacity', 0) |
|
|
|
|
.remove() |
|
|
|
|
|
|
|
|
|
horiz.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('x2', maxR * 2 * labelsX.length + yLabelWidth - borderWidth / 2) |
|
|
|
|
.attr('y1', function(d, i){ return i * maxR * 2 + xLabelHeight }) |
|
|
|
|
.attr('y2', function(d, i){ return i * maxR * 2 + xLabelHeight }) |
|
|
|
|
.style('stroke-opacity', function(d, i){ return i ? 1 : 0 }) |
|
|
|
|
|
|
|
|
|
border.transition() |
|
|
|
|
.duration(duration) |
|
|
|
|
.attr('width', maxR * 2 * labelsX.length) |
|
|
|
|
.attr('height', maxR * 2 * data.length) |
|
|
|
|
}, |
|
|
|
|
initializeLinePLot () { |
|
|
|
|
|
|
|
|
|
Plotly.purge('LinePlot') |
|
|
|
|
this.scoresMean = [] |
|
|
|
|
this.scoresSTD = [] |
|
|
|
|
this.scoresMeanBest = [] |
|
|
|
|
this.scoresSTDBest = [] |
|
|
|
|
|
|
|
|
|
this.xaxis.push('Accuracy') |
|
|
|
|
this.xaxis.push('Precision') |
|
|
|
|
this.xaxis.push('Recall') |
|
|
|
|
|
|
|
|
|
this.scoresMean.push((JSON.parse(this.ValidResultsVar[0])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD.push((JSON.parse(this.ValidResultsVar[1])*100).toFixed(2)) |
|
|
|
|
this.scoresMean.push((JSON.parse(this.ValidResultsVar[2])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD.push((JSON.parse(this.ValidResultsVar[3])*100).toFixed(2)) |
|
|
|
|
this.scoresMean.push((JSON.parse(this.ValidResultsVar[4])*100).toFixed(2)) |
|
|
|
|
this.scoresSTD.push((JSON.parse(this.ValidResultsVar[5])*100).toFixed(2)) |
|
|
|
|
|
|
|
|
|
this.scoresMeanBest.push((JSON.parse(this.ValidResultsVar[6])*100).toFixed(2)) |
|
|
|
|
this.scoresSTDBest.push((JSON.parse(this.ValidResultsVar[7])*100).toFixed(2)) |
|
|
|
|
this.scoresMeanBest.push((JSON.parse(this.ValidResultsVar[8])*100).toFixed(2)) |
|
|
|
|
this.scoresSTDBest.push((JSON.parse(this.ValidResultsVar[9])*100).toFixed(2)) |
|
|
|
|
this.scoresMeanBest.push((JSON.parse(this.ValidResultsVar[10])*100).toFixed(2)) |
|
|
|
|
this.scoresSTDBest.push((JSON.parse(this.ValidResultsVar[11])*100).toFixed(2)) |
|
|
|
|
|
|
|
|
|
var trace1 = { |
|
|
|
|
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" |
|
|
|
|
y: this.scoresMean, |
|
|
|
|
error_y: { |
|
|
|
|
type: 'data', |
|
|
|
|
array: this.scoresSTD, |
|
|
|
|
visible: true |
|
|
|
|
}, |
|
|
|
|
marker: { |
|
|
|
|
color: "rgb(0,255,255)" |
|
|
|
|
}, |
|
|
|
|
name: "Current", |
|
|
|
|
type: "bar" |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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 trace2 = { |
|
|
|
|
x: this.xaxis, |
|
|
|
|
y: this.scoresMeanBest, |
|
|
|
|
error_y: { |
|
|
|
|
type: 'data', |
|
|
|
|
array: this.scoresSTDBest, |
|
|
|
|
visible: true |
|
|
|
|
}, |
|
|
|
|
marker: { |
|
|
|
|
color: "rgb(231,107,243)" |
|
|
|
|
}, |
|
|
|
|
name: "Best", |
|
|
|
|
type: "bar" |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var DataforLinePlot = [trace1, trace2, trace3, trace4, trace5, trace6]; |
|
|
|
|
var DataforLinePlot = [trace1, trace2]; |
|
|
|
|
|
|
|
|
|
var layout = { |
|
|
|
|
xaxis: { |
|
|
|
|
gridcolor: "rgb(230,230,230)", |
|
|
|
|
title: 'Step of the feature engineering', |
|
|
|
|
title: 'Validation metric', |
|
|
|
|
tickformat: '.0f', |
|
|
|
|
range: [0, this.scoresMean.length + 5], |
|
|
|
|
showgrid: true, |
|
|
|
|
showline: false, |
|
|
|
|
showticklabels: true, |
|
|
|
|
@ -170,22 +358,32 @@ export default { |
|
|
|
|
ticks: "outside", |
|
|
|
|
zeroline: false |
|
|
|
|
}, |
|
|
|
|
barmode: 'group', |
|
|
|
|
autosize: false, |
|
|
|
|
width: '1230', |
|
|
|
|
height: '232', |
|
|
|
|
width: '400', |
|
|
|
|
height: '350', |
|
|
|
|
margin: { |
|
|
|
|
l: 55, |
|
|
|
|
r: 20, |
|
|
|
|
b: 45, |
|
|
|
|
r: 5, |
|
|
|
|
b: 50, |
|
|
|
|
t: 5, |
|
|
|
|
pad: 5 |
|
|
|
|
}, |
|
|
|
|
legend:{ |
|
|
|
|
xanchor:"center", |
|
|
|
|
yanchor:"top", |
|
|
|
|
y:-0.2, // play with it |
|
|
|
|
x:0.5, // play with it |
|
|
|
|
orientation: "h" |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true} |
|
|
|
|
Plotly.newPlot('LinePlot', DataforLinePlot, layout, config) |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
reset () { |
|
|
|
|
var svg = d3.select("#HistoryPlot"); |
|
|
|
|
svg.selectAll("*").remove(); |
|
|
|
|
Plotly.purge('LinePlot') |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
@ -193,6 +391,9 @@ export default { |
|
|
|
|
EventBus.$on('finalResults', data => { this.ValidResultsVar = data }) |
|
|
|
|
EventBus.$on('finalResults', this.initializeLinePLot) |
|
|
|
|
|
|
|
|
|
EventBus.$on('quad', data => { this.featuresReceived = data }) |
|
|
|
|
EventBus.$on('finalResults', this.HistoryPun) |
|
|
|
|
|
|
|
|
|
EventBus.$on('reset', this.reset) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -202,6 +403,9 @@ export default { |
|
|
|
|
|
|
|
|
|
text { |
|
|
|
|
font-family: sans-serif; |
|
|
|
|
fill: black; |
|
|
|
|
font: 16px sans-serif; |
|
|
|
|
cursor: default; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
svg { |
|
|
|
|
@ -216,4 +420,12 @@ svg { |
|
|
|
|
display: none !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
body { |
|
|
|
|
background-color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.dot-label text { |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |
