const wlayout = {
'autosize': true,
'barmode': 'relative',
'title': {'text': ''}, 
'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':''}, 
'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
'margin': {'l': 50, 'r': 50, 't': 10, 'b': 50},
'legend': {'yanchor': 'bottom', 'y': 1.3, 'xanchor': 'left', 'x': 0, 'orientation':'h',
            'font': {'size':8}
}
};
const rlayout = {
    'autosize': true,
    'title': {'text': ''}, 
    'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':'', 'rangeslider': {'visible': true}
    }, 
    'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
    'margin': {'l': 40, 'r': 20, 't': 30, 'b': 50},
    'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01, 'orientation':'h'}
};
const blayout = {
    'autosize': true,
    'title': {'text': ''}, 
    'xaxis': {'anchor': 'y', 'domain': [0.0, 1.0], 'title':''}, 
    'yaxis': {'anchor': 'x', 'domain': [0.0, 1.0], 'title':''},
    'margin': {'l': 40, 'r': 20, 't': 50, 'b': 70},
    'legend': {'yanchor': 'top', 'y': 1.3, 'xanchor': 'left', 'x': 0.01, 'orientation':'h'}
};
var w = {{ data.weight|safe }};
var r = {{ data.ret|safe }};
var b = {{ data.bar|safe }};
Plotly.newPlot("weight", w.data, wlayout, {responsive: true});
Plotly.newPlot("price", r.data, rlayout, {responsive: true});
Plotly.newPlot("bar", b.data, blayout, {responsive: true});

$('#copy-port').click(function(event) {
    var stockList = [];
    $('.asset').each(function(){
        stockList.push($(this).text());
    });
    // alert(currentList.includes(texts));
    if (stockList.length > 0) {
        $.ajax({
            url: '/copyPort', //todo create_strategy
            method: 'POST',
            data: { stockList: JSON.stringify(stockList) },
            success: function(response) {
                console.log('success');
                document.write(response);
            },
            error: function(xhr) {
                console.log('Error submitting stock list: ' + xhr.responseText);
            }
        });
    }
});