const api_url = "https://buena-sphere.s3.us-west-1.amazonaws.com/red-api.json";
const apiUrlQuickFacts = "https://buena-sphere.s3.us-west-1.amazonaws.com/sphere-bofa.json"
const apiUrlQuickFacts1 = "https://buena-sphere.s3.us-west-1.amazonaws.com/sphere-bofa-summary.json"
const user = "sphere";
const password = "g@M9APa8ftST";
const baseUrl = "https://api.bitadata.com/v1";
const baseUrlConstituents = "https://api.bitadata.com/v2";
const indexId = "SPFFXI";

var newToken;
var yGreenDiff = [];
var yRedDiff = [];
var dailyVal = [];
var valRedClose = [];
var valGreenClose = [];
var redAnnualizedVol = [];
var greenAnnualizedVol = [];
var rRRatioRedList = [];
var rRRatioGreenList = [];
var annualizedGreenReturns = [];
var annualizedRedReturns = [];

var graphRedBigListXAxis = [];
var graphRedBigListVal = [];

var threeMonthRedXAxis = [];
var threeMonthRedVal = [];

var oneYearRedXAxis = [];
var oneYearRedVal = [];

var threeYearRedXAxis = [];
var threeYearRedVal = [];

var fiveYearRedXAxis = [];
var fiveYearRedVal = [];

var tenYearRedXAxis = [];
var tenYearRedVal = [];

var allYearRedXAxis = [];
var allYearRedVal = [];

var graphGreenBigListXAxis = [];
var graphGreenBigListVal = [];

var threeMonthGreenXAxis = [];
var threeMonthGreenVal = [];

var oneYearGreenXAxis = [];
var oneYearGreenVal = [];

var threeYearGreenXAxis = [];
var threeYearGreenVal = [];

var fiveYearGreenXAxis = [];
var fiveYearGreenVal = [];

var tenYearGreenXAxis = [];
var tenYearGreenVal = [];

var allYearGreenXAxis = [];
var allYearGreenVal = [];

var data = [];
var data1 = [];

let counterGraph = 0;
var counterAnnualized = 0;


//// RAM PAGE
xGreenUSBank = [];
yGreenUSBank = [];

xRedUSBank =[];
yRedUSBank =[];

xThreeMonthRedUSBank = [];
yThreeMonthRedUSBank = [];

xThreeMonthGreenUSBank = [];
yThreeMonthGreenUSBank = [];

// 6 Month New
xSixNewMonthRedUSBank = [];
ySixNewMonthRedUSBank = [];

xSixNewMonthGreenUSBank = [];
ySixNewMonthGreenUSBank = [];

xOneYearRedUSBank = [];
yOneYearRedUSBank = [];

xOneYearGreenUSBank = [];
yOneYearGreenUSBank = [];

xThreeYearRedUSBank = [];
yThreeYearRedUSBank = [];

xThreeYearGreenUSBank = [];
yThreeYearGreenUSBank = [];

xFiveYearRedUSBank = [];
yFiveYearRedUSBank = [];

xFiveYearGreenUSBank = [];
yFiveYearGreenUSBank = [];

xTenYearRedUSBank = [];
yTenYearRedUSBank = [];

xTenYearGreenUSBank = [];
yTenYearGreenUSBank = [];

xYearToDateRedUSBank = [];
yYearToDateRedUSBank = [];

xYearToDateGreenUSBank = [];
yYearToDateGreenUSBank = [];

xAllYearRedUSBank = [];
yAllYearRedUSBank = [];

xAllYearGreenUSBank = [];
yAllYearGreenUSBank = [];

standardizedReturnRedUSBank = [];
standardizedReturnGreenUSBank = [];

annualizedReturnsRedUSBank = [];
annualizedReturnsGreenUSBank = [];

standardizedReturnAnnualizedGreenUSBank = []
standardizedReturnAnnualizedRedUSBank = []

xRedAnnRetUSBank = []
yRedAnnRetUSBank = []

xGreenAnnRetUSBank = []
yGreenAnnRetUSBank = []

let counterUSBankGrph = 0;

apiAuth();
quickFactsTable();
  
function apiAuth(){
    fetch(baseUrl + '/login/', {
        method: 'POST',
        body: JSON.stringify({
            "user": user,
            "password": password
        }),
        headers: {
            "Content-Type": "application/json"
        }
    }).then(function (response) {
            if (response.ok) {
                return response.json();
            }
            return Promise.reject(response);
        }).then(function (data) {
            newToken = data["token"];
            fetchOneYearUSBankHistoricalData();
            fetchIndexComponentDate(newToken)
        }).catch(function (error) {
            console.warn('Something went wrong.', error);
        }); 
}
  
// Method to fix initial Date of the lines issue
function fixInitialDate(xRed, xGreen, yGreen){
    var initialRedDate = xRed[xRed.length-1]
    console.log(xRed[xRed.length-1])
    //console.log(xGreen[xGreen.length-1])
    var i=0;
    for(; i<=xRed.length-1; i++){
        if(initialRedDate == xGreen[i]){
            //console.log("i:", i)
            break;
        }
    }
    xGreen = xGreen.slice(0,i+1);
    yGreen = yGreen.slice(0,i+1);

    return {xGreen, yGreen}
}

// formatting date
function formatDateGraph(DateList) {
    //console.log("User Date : ", DateList);

    let ddl = new Array();

    DateList.forEach(key => {
        var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
        var partyArray = key.split("-");
        // console.log(partyArray[0], partyArray[1], partyArray[2]);

        partyArray[2] = partyArray[2].toString(); // DD
        partyArray[1] = partyArray[1].toString(); // MM
        partyArray[0] = partyArray[0].toString(); // YYYY

        // if(partyArray[1].length == 1)   partyArray[1] = '0' + partyArray[1]
        // if(partyArray[0].length == 1)   partyArray[0] = '0' + partyArray[0]

        // console.log(partyArray[0], partyArray[1], partyArray[2]);
        // var newUserDate = new Date(partyArray[2], partyArray[1], partyArray[0]);

        // console.log("New User Date : ", newUserDate);
        // y = newUserDate.getFullYear().toString();
        y = partyArray[0].toString();
        // console.log("Year : ", y);
        // console.log(partyArray[1])
        
        // m = (newUserDate.getMonth()).toString();
        m = partyArray[1].toString();
        // console.log("Month : ", m);
        // d = newUserDate.getDate().toString();
        d = partyArray[2].toString();
        // console.log("Day : ", d);
        if(m.length == 1) m = '0' + m;
        if(d.length == 1) d = '0' + d;
        // console.log("MM/DD/YYYY : ", m, "/", d, "/", y);
        var selectedMonthName = months[parseInt(m)-1];
        ddl.push(selectedMonthName+' '+d+', '+y);
    });

    return ddl;
}

// Three Months Plot
async function fetchThreeMonthsUSBankHistoricalData(){

    var returnedData = fixInitialDate(xThreeMonthRedUSBank, xThreeMonthGreenUSBank, yThreeMonthGreenUSBank)
    xThreeMonthGreenUSBank = returnedData.xGreen
    yThreeMonthGreenUSBank = returnedData.yGreen

    yThreeMonthGreenUSBank[yThreeMonthGreenUSBank.length-1] = '10000'

    console.log(xThreeMonthRedUSBank, yThreeMonthRedUSBank)
    console.log(xThreeMonthGreenUSBank, yThreeMonthGreenUSBank)

    var trace1 = {
        x:xThreeMonthRedUSBank, 
        y:yThreeMonthRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xThreeMonthRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xThreeMonthGreenUSBank, 
        y:yThreeMonthGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xThreeMonthGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

// Six Month New Plot
async function fetchSixNewMonthsUSBankHistoricalData(){


    var returnedData = fixInitialDate(xSixNewMonthRedUSBank, xSixNewMonthGreenUSBank, ySixNewMonthGreenUSBank)
    xSixNewMonthGreenUSBank = returnedData.xGreen
    ySixNewMonthGreenUSBank = returnedData.yGreen

    ySixNewMonthGreenUSBank[ySixNewMonthGreenUSBank.length-1] = '10000'
    
    console.log(xSixNewMonthRedUSBank, ySixNewMonthRedUSBank)
    console.log(xSixNewMonthGreenUSBank, ySixNewMonthGreenUSBank)
    var trace1 = {
        x:xSixNewMonthRedUSBank, 
        y:ySixNewMonthRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xSixNewMonthRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xSixNewMonthGreenUSBank, 
        y:ySixNewMonthGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xSixNewMonthGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

// One Year Plot
async function fetchOneYearUSBankHistoricalData(){

    if(counterUSBankGrph == 0){
        await fetchGreenUSBankData()
        await fetchRedUSBankData()
        tablePlotUSBankData()
    }

    var returnedData = fixInitialDate(xOneYearRedUSBank, xOneYearGreenUSBank, yOneYearGreenUSBank)
    xOneYearGreenUSBank = returnedData.xGreen
    yOneYearGreenUSBank = returnedData.yGreen

    var trace1 = {
        x:xOneYearRedUSBank, 
        y:yOneYearRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xOneYearRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xOneYearGreenUSBank, 
        y:yOneYearGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xOneYearGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

// Three Year Plot
async function fetchThreeYearUSBankHistoricalData(){

    var returnedData = fixInitialDate(xThreeYearRedUSBank, xThreeYearGreenUSBank, yThreeYearGreenUSBank)
    xThreeYearGreenUSBank = returnedData.xGreen
    yThreeYearGreenUSBank = returnedData.yGreen

    var trace1 = {
        x:xThreeYearRedUSBank, 
        y:yThreeYearRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xThreeYearRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xThreeYearGreenUSBank, 
        y:yThreeYearGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xThreeYearGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

// Five Year Plot
async function fetchFiveYearUSBankHistoricalData(){

    var returnedData = fixInitialDate(xFiveYearRedUSBank, xFiveYearGreenUSBank, yFiveYearGreenUSBank)
    xFiveYearGreenUSBank = returnedData.xGreen
    yFiveYearGreenUSBank = returnedData.yGreen

    var trace1 = {
        x:xFiveYearRedUSBank, 
        y:yFiveYearRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xFiveYearRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xFiveYearGreenUSBank, 
        y:yFiveYearGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xFiveYearGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

// Ten Year Plot
async function fetchTenYearUSBankHistoricalData(){

    var returnedData = fixInitialDate(xTenYearRedUSBank, xTenYearGreenUSBank, yTenYearGreenUSBank)
    xTenYearGreenUSBank = returnedData.xGreen
    yTenYearGreenUSBank = returnedData.yGreen

    var trace1 = {
        x:xTenYearRedUSBank, 
        y:yTenYearRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xTenYearRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xTenYearGreenUSBank, 
        y:yTenYearGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xTenYearGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

// Year to Date Plot
async function fetchYearToDateUSBankHistoricalData(){

    var returnedData = fixInitialDate(xYearToDateRedUSBank, xYearToDateGreenUSBank, yYearToDateGreenUSBank)
    xYearToDateGreenUSBank = returnedData.xGreen
    yYearToDateGreenUSBank = returnedData.yGreen

    yYearToDateGreenUSBank[yYearToDateGreenUSBank.length-1] = '10000' 
    var trace1 = {
        x:xYearToDateRedUSBank, 
        y:yYearToDateRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xYearToDateRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xYearToDateGreenUSBank, 
        y:yYearToDateGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xYearToDateGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

// All Year Plot
async function fetchAllYearUSBankHistoricalData(){
    
    console.log(xAllYearRedUSBank)
    var returnedData = fixInitialDate(xAllYearRedUSBank, xAllYearGreenUSBank, yAllYearGreenUSBank)
    xAllYearGreenUSBank = returnedData.xGreen
    yAllYearGreenUSBank = returnedData.yGreen

    yAllYearGreenUSBank[yAllYearGreenUSBank.length-1] = '10000' 

    if(counterUSBankGrph == 0){
        yAllYearRedUSBank = yAllYearRedUSBank.slice(0, yAllYearRedUSBank.length);
        console.log(yAllYearRedUSBank)
        yAllYearRedUSBank[yAllYearRedUSBank.length-1] = '10000'
        console.log(xAllYearRedUSBank, yAllYearRedUSBank)
        console.log(xAllYearGreenUSBank, yAllYearGreenUSBank)
    }
    counterUSBankGrph++;

    var trace1 = {
        x:xAllYearRedUSBank, 
        y:yAllYearRedUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#CF87E6', width: '3'}, 
        name : 'SPDR S&P 500 ETF (SPY ETF)',
        text: formatDateGraph(xAllYearRedUSBank),
        //fill: 'tonexty'
    } 

    var trace2 = {
        x:xAllYearGreenUSBank, 
        y:yAllYearGreenUSBank, 
        mode: 'lines', 
        type: 'scatter',
        line: {color: '#F1A83E', width: '3'}, 
        name: 'Sphere 500 Fossil-Free Index (SPPFXI)',
        text: formatDateGraph(xAllYearGreenUSBank),
        //fill: 'tonexty'
    }

    var layout = {
        autosize: true, // set autosize to rescale
        height: 500,
        showlegend: false,
        margin: {
            l: 0,
            r: 50,
            b: 0,
            t: 0,
            pad: 0
            },
        //paper_bgcolor: '#000000',
        //plot_bgcolor: '#000000',
        xaxis: {
            fixedrange: true,
            showgrid: false,
            //tickcolor: '#fff',
            //color: '#fff',
            rangeslider: {
            },
            type: 'date',
            side:'right'
        },
        yaxis: {
            fixedrange: true,
            showgrid: true,
            color: '#fff',
            autorange: true,
            range: [86.8700008333, 138.870004167],
            type: 'linear',
            side:'right',
            tickformat: "$,.0f",
            gridcolor: '#bdbdbd'
        }
    };
    const config = {
        displayModeBar: false, // this is the line that hides the bar.
    };

    var myDiv = document.getElementById('myDivUSBank'); 
    Plotly.newPlot(myDiv, [trace1, trace2], layout, config);
    // Plotly.newPlot(myDiv, [trace1, trace2]);
}

function tablePlotUSBankData(){
    console.log(xRedUSBank, yRedUSBank)
    console.log(xGreenUSBank, yGreenUSBank)

    // Three Months
    xThreeMonthRedUSBank = xRedUSBank.slice(0,63)
    yThreeMonthRedUSBank = yRedUSBank.slice(0,63) 
    xThreeMonthGreenUSBank = xGreenUSBank.slice(0,63)
    yThreeMonthGreenUSBank = yGreenUSBank.slice(0,63)

    console.log(xThreeMonthRedUSBank, yThreeMonthRedUSBank)
    console.log(xThreeMonthGreenUSBank, yThreeMonthGreenUSBank)
    for(var i=0; i<yThreeMonthGreenUSBank.length; i++){
        yThreeMonthRedUSBank[i] = monthReturns(yThreeMonthRedUSBank[i], yThreeMonthRedUSBank[yThreeMonthRedUSBank.length-1])
        yThreeMonthGreenUSBank[i] = monthReturns(yThreeMonthGreenUSBank[i], yThreeMonthGreenUSBank[yThreeMonthGreenUSBank.length-1])
    }

    // Six Month New
    xSixNewMonthRedUSBank = xRedUSBank.slice(0,126)
    ySixNewMonthRedUSBank = yRedUSBank.slice(0,126) 
    xSixNewMonthGreenUSBank = xGreenUSBank.slice(0,126)
    ySixNewMonthGreenUSBank = yGreenUSBank.slice(0,126)

    console.log(xSixNewMonthRedUSBank, ySixNewMonthRedUSBank)
    console.log(xSixNewMonthGreenUSBank, ySixNewMonthGreenUSBank)
    for(var i=0; i<ySixNewMonthGreenUSBank.length; i++){
        ySixNewMonthRedUSBank[i] = monthReturns(ySixNewMonthRedUSBank[i], ySixNewMonthRedUSBank[ySixNewMonthRedUSBank.length-1])
        ySixNewMonthGreenUSBank[i] = monthReturns(ySixNewMonthGreenUSBank[i], ySixNewMonthGreenUSBank[ySixNewMonthGreenUSBank.length-1])
    }

    // One Year
    xOneYearRedUSBank = xRedUSBank.slice(0,252)
    yOneYearRedUSBank = yRedUSBank.slice(0,252) 
    xOneYearGreenUSBank = xGreenUSBank.slice(0,252)
    yOneYearGreenUSBank = yGreenUSBank.slice(0,252)

    console.log(xOneYearRedUSBank, yOneYearRedUSBank)
    console.log(xOneYearGreenUSBank, yOneYearGreenUSBank)
    for(var i=0; i<yOneYearGreenUSBank.length; i++){
        yOneYearRedUSBank[i] = monthReturns(yOneYearRedUSBank[i], yOneYearRedUSBank[yOneYearRedUSBank.length-1])
        yOneYearGreenUSBank[i] = monthReturns(yOneYearGreenUSBank[i], yOneYearGreenUSBank[yOneYearGreenUSBank.length-1])
    }

    // Three Year
    xThreeYearRedUSBank = xRedUSBank.slice(0,756)
    yThreeYearRedUSBank = yRedUSBank.slice(0,756) 
    xThreeYearGreenUSBank = xGreenUSBank.slice(0,756)
    yThreeYearGreenUSBank = yGreenUSBank.slice(0,756)

    //console.log(xThreeYearRedUSBank, yThreeYearRedUSBank)
    //console.log(xThreeYearGreenUSBank, yThreeYearGreenUSBank)
    for(var i=0; i<yThreeYearGreenUSBank.length; i++){
        yThreeYearRedUSBank[i] = monthReturns(yThreeYearRedUSBank[i], yThreeYearRedUSBank[yThreeYearRedUSBank.length-1])
        yThreeYearGreenUSBank[i] = monthReturns(yThreeYearGreenUSBank[i], yThreeYearGreenUSBank[yThreeYearGreenUSBank.length-1])
    }

    // Five Year
    xFiveYearRedUSBank = xRedUSBank.slice(0,1260)
    yFiveYearRedUSBank = yRedUSBank.slice(0,1260) 
    xFiveYearGreenUSBank = xGreenUSBank.slice(0,1260)
    yFiveYearGreenUSBank = yGreenUSBank.slice(0,1260)

    for(var i=0; i<yFiveYearGreenUSBank.length; i++){
        yFiveYearRedUSBank[i] = monthReturns(yFiveYearRedUSBank[i], yFiveYearRedUSBank[yFiveYearRedUSBank.length-1])
        yFiveYearGreenUSBank[i] = monthReturns(yFiveYearGreenUSBank[i], yFiveYearGreenUSBank[yFiveYearGreenUSBank.length-1])
    }

    // Ten Year
    xTenYearRedUSBank = xRedUSBank.slice(0,2520)
    yTenYearRedUSBank = yRedUSBank.slice(0,2520) 
    xTenYearGreenUSBank = xGreenUSBank.slice(0,2520)
    yTenYearGreenUSBank = yGreenUSBank.slice(0,2520)

    for(var i=0; i<yTenYearGreenUSBank.length; i++){
        yTenYearRedUSBank[i] = monthReturns(yTenYearRedUSBank[i], yTenYearRedUSBank[yTenYearRedUSBank.length-1])
        yTenYearGreenUSBank[i] = monthReturns(yTenYearGreenUSBank[i], yTenYearGreenUSBank[yTenYearGreenUSBank.length-1])
    }

    // Year To Date 
    for(var i=0; i<xGreenUSBank.length; i++){
        if('2024-01-01' < xGreenUSBank[i]){
            xYearToDateRedUSBank[i] = xRedUSBank[i]
            yYearToDateRedUSBank[i] = yRedUSBank[i] 
            xYearToDateGreenUSBank[i] = xGreenUSBank[i]
            yYearToDateGreenUSBank[i] = yGreenUSBank[i]
        }
    }

    for(var i=0; i<yYearToDateGreenUSBank.length; i++){
        yYearToDateRedUSBank[i] = monthReturns(yYearToDateRedUSBank[i], yYearToDateRedUSBank[yYearToDateRedUSBank.length-1])
        yYearToDateGreenUSBank[i] = monthReturns(yYearToDateGreenUSBank[i], yYearToDateGreenUSBank[yYearToDateGreenUSBank.length-1])
    }

    // All Year 
    xAllYearRedUSBank = xRedUSBank.slice(0, xRedUSBank.length)
    yAllYearRedUSBank = yRedUSBank.slice(0, yRedUSBank.length)
    xAllYearGreenUSBank = xGreenUSBank.slice(0, xGreenUSBank.length)
    yAllYearGreenUSBank = yGreenUSBank.slice(0, yGreenUSBank.length)

    console.log(xAllYearRedUSBank, yAllYearRedUSBank)
    console.log(xAllYearGreenUSBank, yAllYearGreenUSBank)

    for(var i=0; i<yRedUSBank.length; i++){
        yAllYearRedUSBank[i] = monthReturns(yRedUSBank[i], yRedUSBank[yRedUSBank.length-1])
        yAllYearGreenUSBank[i] = monthReturns(yGreenUSBank[i], yGreenUSBank[yGreenUSBank.length-1])
    }

    if(yGreenUSBank.length < 252){
        document.getElementById("oneYearUSBankButton").disabled = true;
        document.getElementById("oneYearUSBankButton").style['pointer-events'] = 'none';
    }
    if(yGreenUSBank.length < 756){
        document.getElementById("threeYearUSBankButton").disabled = true;
        document.getElementById("threeYearUSBankButton").style['pointer-events'] = 'none';
    }
    if(yGreenUSBank.length < 1260){
        document.getElementById("fiveYearUSBankButton").disabled = true;
        document.getElementById("fiveYearUSBankButton").style['pointer-events'] = 'none';
    }
    if(yGreenUSBank.length < 2520){
        document.getElementById("tenYearUSBankButton").disabled = true;
        document.getElementById("tenYearUSBankButton").style['pointer-events'] = 'none';
    }

    console.log(xYearToDateRedUSBank, yYearToDateRedUSBank)
    console.log(xYearToDateGreenUSBank, yYearToDateGreenUSBank)

    //// Cumulative Segment ~ Standardized Returns Segment

    // 1 Month
    yOneMonthGreenUSBank = yGreenUSBank.slice(0,21)
    yOneMonthRedUSBank = yRedUSBank.slice(0,21)
    
    // 3 Months -> {yThreeMonthGreenUSBank, yThreeMonthRedUSBank}
    yThreeMonGreenUSBank = yGreenUSBank.slice(0,63)
    yThreeMonRedUSBank = yRedUSBank.slice(0,63)

    // 6 Months
    ySixMonthGreenUSBank = yGreenUSBank.slice(0,126)
    ySixMonthRedUSBank = yRedUSBank.slice(0,126)
    
    // Year to Date -> {yYearToDateGreenUSBank, yYearToDateRedUSBank}
    yYTDGreenUSBank = []
    yYTDRedUSBank = []
    for(var i=0; i<xGreenUSBank.length; i++){
        if('2024-01-01' < xGreenUSBank[i]){
            yYTDRedUSBank[i] = yRedUSBank[i] 
            yYTDGreenUSBank[i] = yGreenUSBank[i]
        }
    }

    // All (Cumulative since inception (10/4/2021)) -> {yGreenUSBank, yRedUSBank}

    //console.log(yOneMonthGreenUSBank, yThreeMonGreenUSBank, ySixMonthGreenUSBank, yYTDGreenUSBank, yGreenUSBank)

    //console.log(xGreenUSBank, yGreenUSBank)
    // Green Line
    standardizedReturnGreenUSBank.push(cumulativeReturns(yOneMonthGreenUSBank[0], yOneMonthGreenUSBank[yOneMonthGreenUSBank.length-1]))
    standardizedReturnGreenUSBank.push(cumulativeReturns(yThreeMonGreenUSBank[0], yThreeMonGreenUSBank[yThreeMonGreenUSBank.length-1]))

    if(yGreenUSBank.length >= 126){
        standardizedReturnGreenUSBank.push(cumulativeReturns(ySixMonthGreenUSBank[0], ySixMonthGreenUSBank[ySixMonthGreenUSBank.length-1]))
    }
    if(yGreenUSBank.length < 126){
        standardizedReturnGreenUSBank.push("NaN")
    }
    
    standardizedReturnGreenUSBank.push(cumulativeReturns(yYTDGreenUSBank[0], yYTDGreenUSBank[yYTDGreenUSBank.length-1]))
    standardizedReturnGreenUSBank.push(cumulativeReturns(yGreenUSBank[0], yGreenUSBank[yGreenUSBank.length-1]))
    

    //console.log("Green Standardized Returns:"+ standardizedReturnGreenUSBank)

    // Red Line
    standardizedReturnRedUSBank.push(cumulativeReturns(yOneMonthRedUSBank[0], yOneMonthRedUSBank[yOneMonthRedUSBank.length-1]))
    standardizedReturnRedUSBank.push(cumulativeReturns(yThreeMonthRedUSBank[0], yThreeMonthRedUSBank[yThreeMonthRedUSBank.length-1]))
    standardizedReturnRedUSBank.push(cumulativeReturns(ySixMonthRedUSBank[0], ySixMonthRedUSBank[ySixMonthRedUSBank.length-1]))
    standardizedReturnRedUSBank.push(cumulativeReturns(yYearToDateRedUSBank[0], yYearToDateRedUSBank[yYearToDateRedUSBank.length-1]))
    standardizedReturnRedUSBank.push(cumulativeReturns(yRedUSBank[0], yRedUSBank[yRedUSBank.length-1]))

    //console.log("Red Standardized Returns:"+ standardizedReturnRedUSBank)

    /*
    if(standardizedReturnGreenUSBank[0] === 0){
        document.getElementById("1monthSRGreen").innerHTML = "NA";
    }
    if(standardizedReturnGreenUSBank[0] !== 0){
        document.getElementById("1monthSRGreen").innerHTML = standardizedReturnGreenUSBank[0].toFixed(2)+"%";
    }
    
    if(standardizedReturnGreenUSBank[1] === 0){
        document.getElementById("3monthSRGreen").innerHTML = "NA";
    }
    if(standardizedReturnGreenUSBank[1] !== 0){
        document.getElementById("3monthSRGreen").innerHTML = standardizedReturnGreenUSBank[1].toFixed(2)+"%";
    }
        
    if(isNaN(standardizedReturnGreenUSBank[2])){
        document.getElementById("6monthSRGreen").innerHTML = "NA";
    }
    if(!isNaN(standardizedReturnGreenUSBank[2])){
        document.getElementById("6monthSRGreen").innerHTML = standardizedReturnGreenUSBank[2].toFixed(2)+"%";
    }

    if(standardizedReturnGreenUSBank[3] === 0){
        document.getElementById("YTDSRGreen").innerHTML = "NA";
    }
    if(standardizedReturnGreenUSBank[3] !== 0){
        document.getElementById("YTDSRGreen").innerHTML = standardizedReturnGreenUSBank[3].toFixed(2)+"%";
    }

    document.getElementById("allSRGreen").innerHTML = standardizedReturnGreenUSBank[4].toFixed(2)+"%";

    if(standardizedReturnRedUSBank[0] === 0){
        document.getElementById("1monthSRRed").innerHTML = "NA";
    }
    if(standardizedReturnRedUSBank[0] !== 0){
        document.getElementById("1monthSRRed").innerHTML = standardizedReturnRedUSBank[0].toFixed(2)+"%";
    }
    
    if(standardizedReturnRedUSBank[1] === 0){
        document.getElementById("3monthSRRed").innerHTML = "NA";
    }
    if(standardizedReturnRedUSBank[1] !== 0){
        document.getElementById("3monthSRRed").innerHTML = standardizedReturnRedUSBank[1].toFixed(2)+"%";
    }
        
    if(standardizedReturnRedUSBank[2] === 0){
        document.getElementById("6monthSRRed").innerHTML = "NA";
    }
    if(standardizedReturnRedUSBank[2] !== 0){
        document.getElementById("6monthSRRed").innerHTML = standardizedReturnRedUSBank[2].toFixed(2)+"%";
    }

    if(standardizedReturnRedUSBank[3] === 0){
        document.getElementById("YTDSRRed").innerHTML = "NA";
    }
    if(standardizedReturnRedUSBank[3] !== 0){
        document.getElementById("YTDSRRed").innerHTML = standardizedReturnRedUSBank[3].toFixed(2)+"%";
    }

    document.getElementById("allSRRed").innerHTML = standardizedReturnRedUSBank[4].toFixed(2)+"%";
    */

    //// Annualized Returns Segment

    // Green
    //console.log(xGreenAnnRetUSBank, yGreenAnnRetUSBank)
    oneYearGreenAnnRet = yGreenAnnRetUSBank.slice(0, 252)
    threeYearGreenAnnRet = yGreenAnnRetUSBank.slice(0, 756)
    fiveYearGreenAnnRet = yGreenAnnRetUSBank.slice(0, 1260)
    SinceInceptionGreenAnnRet = yGreenUSBank


    standardizedReturnAnnualizedGreenUSBank.push(cumulativeReturns(oneYearGreenAnnRet[0], oneYearGreenAnnRet[oneYearGreenAnnRet.length-1]))
    standardizedReturnAnnualizedGreenUSBank.push(cumulativeReturns(threeYearGreenAnnRet[0], threeYearGreenAnnRet[threeYearGreenAnnRet.length-1]))
    standardizedReturnAnnualizedGreenUSBank.push(cumulativeReturns(fiveYearGreenAnnRet[0], fiveYearGreenAnnRet[fiveYearGreenAnnRet.length-1]))
    standardizedReturnAnnualizedGreenUSBank.push(cumulativeReturns(SinceInceptionGreenAnnRet[0], SinceInceptionGreenAnnRet[SinceInceptionGreenAnnRet.length-1]))

    //console.log(yOneYearGreenUSBank, yThreeYearGreenUSBank, yFiveYearGreenUSBank, yAllYearGreenUSBank)

    // Red
    //console.log(xRedAnnRetUSBank, yRedAnnRetUSBank)
    oneYearRedAnnRet = yRedAnnRetUSBank.slice(0, 252)
    threeYearRedAnnRet = yRedAnnRetUSBank.slice(0, 756)
    fiveYearRedAnnRet = yRedAnnRetUSBank.slice(0, 1260)
    SinceInceptionRedAnnRet = yRedUSBank

    //console.log(oneYearRedAnnRet[0], oneYearRedAnnRet[oneYearRedAnnRet.length-1], threeYearRedAnnRet[threeYearRedAnnRet.length-1], fiveYearRedAnnRet[fiveYearRedAnnRet.length-1], SinceInceptionRedAnnRet[SinceInceptionRedAnnRet.length-1])

    standardizedReturnAnnualizedRedUSBank.push(cumulativeReturns(oneYearRedAnnRet[0], oneYearRedAnnRet[oneYearRedAnnRet.length-1]))
    standardizedReturnAnnualizedRedUSBank.push(cumulativeReturns(threeYearRedAnnRet[0], threeYearRedAnnRet[threeYearRedAnnRet.length-1]))
    standardizedReturnAnnualizedRedUSBank.push(cumulativeReturns(fiveYearRedAnnRet[0], fiveYearRedAnnRet[fiveYearRedAnnRet.length-1]))
    standardizedReturnAnnualizedRedUSBank.push(cumulativeReturns(SinceInceptionRedAnnRet[0], SinceInceptionRedAnnRet[SinceInceptionRedAnnRet.length-1]))

    annualizedReturnsUSBank()
}

// Cumulative Returns Method
function cumulativeReturns(CurrentDateVal, MonthDateVal){
    // console.log(redCurrentDateVal, redMonthDateVal)
    return (((CurrentDateVal - MonthDateVal)/MonthDateVal)*100);
    // return (((CurrentDateVal/MonthDateVal))*100)-100;
}

// Annualized Returns US Bank Method
function annualizedReturnsUSBank(){
    // Stores the year
    //allDiffN = annualizedVolNValue();
    const d1 = new Date();
    const d2 = new Date('2021-10-04');
    allDiffN = new Date(new Date(d1) - new Date(d2)).getMonth();;

    //console.log(allDiffN)
    const d = new Date();
    let month = d.getMonth();

    var N = [1, 3, 5, allDiffN/12];
    //console.log(standardizedReturnAnnualizedGreenUSBank);
    // console.log(standardizedReturnRedUSBank);
    
    for(var i=0; i<N.length; i++){
        annualizedReturnsGreenUSBank[i] = (Math.pow((1+standardizedReturnAnnualizedGreenUSBank[i]/100),(1/N[i])) - 1)*100;
        annualizedReturnsRedUSBank[i] = (Math.pow((1+standardizedReturnAnnualizedRedUSBank[i]/100),(1/N[i])) - 1)*100;
    }

    //console.log("Annualized Return US Bank Green: " + annualizedReturnsGreenUSBank);
    //console.log("Annualized Return US Bank Red: " + annualizedReturnsRedUSBank);

    //

    /*
    if(isNaN(annualizedReturnsGreenUSBank[0])){
        document.getElementById("1YearARGreen").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsGreenUSBank[0])){
        document.getElementById("1YearARGreen").innerHTML = annualizedReturnsGreenUSBank[0].toFixed(2)+"%";
    }
 
    if(isNaN(annualizedReturnsGreenUSBank[1])){
        document.getElementById("3YearARGreen").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsGreenUSBank[1])){
        document.getElementById("3YearARGreen").innerHTML = annualizedReturnsGreenUSBank[1].toFixed(2)+"%";
    }

    if(isNaN(annualizedReturnsGreenUSBank[2])){
        document.getElementById("5YearARGreen").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsGreenUSBank[2])){
        document.getElementById("5YearARGreen").innerHTML = annualizedReturnsGreenUSBank[2].toFixed(2)+"%";
    }

    if(isNaN(annualizedReturnsGreenUSBank[3])){
        document.getElementById("allARGreen").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsGreenUSBank[3])){
        document.getElementById("allARGreen").innerHTML = annualizedReturnsGreenUSBank[3].toFixed(2)+"%";
    }


    if(isNaN(annualizedReturnsRedUSBank[0])){
        document.getElementById("1YearARRed").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsRedUSBank[0])){
        document.getElementById("1YearARRed").innerHTML = annualizedReturnsRedUSBank[0].toFixed(2)+"%";
    }
 
    if(isNaN(annualizedReturnsRedUSBank[1])){
        document.getElementById("3YearARRed").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsRedUSBank[1])){
        document.getElementById("3YearARRed").innerHTML = annualizedReturnsRedUSBank[1].toFixed(2)+"%";
    }

    if(isNaN(annualizedReturnsRedUSBank[2])){
        document.getElementById("5YearARRed").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsRedUSBank[2])){
        document.getElementById("5YearARRed").innerHTML = annualizedReturnsRedUSBank[2].toFixed(2)+"%";
    }

    if(isNaN(annualizedReturnsRedUSBank[3])){
        document.getElementById("allARRed").innerHTML = "NA";
    }
    if(!isNaN(annualizedReturnsRedUSBank[3])){
        document.getElementById("allARRed").innerHTML = annualizedReturnsRedUSBank[3].toFixed(2)+"%";
    }

    */

    //

    return {annualizedReturnsGreenUSBank, annualizedReturnsRedUSBank}
}

// US BANK DATA - GREEN LINE
async function fetchGreenUSBankData(){
    ///////////////////////////////////////////////////////////////////////////////////////////////
    let resUSBankJson = await fetch("https://buena-sphere.s3.us-west-1.amazonaws.com/usbank_sphere.json");
    let dataUSBank = await resUSBankJson.json()

    //console.log(dataUSBank);

    for(var key in dataUSBank){
        for(var prop in  dataUSBank[key]){
            if(prop == "Close"){
                // console.log(dataUSBank[key][prop]["Last"])
                yGreenUSBank.push(dataUSBank[key][prop]);
            }  
            if(prop =="Date"){
                // console.log(dataUSBank[key][prop]);
                greenUSBankDate = dataUSBank[key][prop]
                xGreenUSBank.push(greenUSBankDate);
            }
            xGreenAnnRetUSBank.push(dataUSBank[key][prop]);
            yGreenAnnRetUSBank.push(dataUSBank[key][prop])
        }   
    }

    //console.log(xGreenUSBank, yGreenUSBank);
    /////////////////////////////////////////////////////////////////////////////////////////////////////
}

function padTo2Digits(num) {
  return num.toString().padStart(2, '0');
}


async function fetchRedUSBankData(){

    let response = await fetch(api_url);
    let dataRedUSBank = await response.json();
    var count = 0;
    for(var key in dataRedUSBank["Time Series (Daily)"]){
        for(var prop in  dataRedUSBank["Time Series (Daily)"][key]){
            if(prop == "4. close"){
                if(key == '2021-10-01'){
                    //console.log(key)
                    count++;
                }
                if(count == 0){
                    xRedUSBank.push(key);
                    yRedUSBank.push(dataRedUSBank["Time Series (Daily)"][key][prop])
                }
                xRedAnnRetUSBank.push(key);
                yRedAnnRetUSBank.push(dataRedUSBank["Time Series (Daily)"][key][prop])
            }            
        }
    }

    const [year, month, day] = xRedUSBank[0].split('-');
    const lastTradingDay = [padTo2Digits(month), padTo2Digits(day), year].join('/')

    /*
    let date = new Date(xRedUSBank[0])
    year = date.getFullYear()
    month = date.getMonth() + 1
    dt = date.getDate() + 1
    
    if(dt < 10) {
        dt = '0' + dt;
    }
    if(month < 10) {
        month = '0' + month;
    }
    lastTradingDay = month+'/'+dt+'/'+year;
    */
    //console.log(month+'/'+dt+'/'+year)
    document.getElementById("lastTradingDay").innerHTML = lastTradingDay;
    document.getElementById("lastTradingDay2").innerHTML = lastTradingDay;

    //console.log(xRedUSBank, yRedUSBank)
}

function formatDate(userDate) {
    var partyArray = userDate.split("/");

    partyArray[2] = partyArray[2].toString(); // YYYY
    partyArray[1] = partyArray[1].toString(); // MM
    partyArray[0] = partyArray[0].toString(); // DD

    y = partyArray[2].toString();
    m = partyArray[1].toString();
    d = partyArray[0].toString();
    if(m.length == 1) m = '0' + m;
    if(d.length == 1) d = '0' + d;

    return y+'-'+m+'-'+d;
}

async function fetchIndexComponentDate(newToken){
    const nameSymbol = []
    const weightPer = []
    const name = []
    var dList = [];

    const response = await fetch(baseUrlConstituents + '/index_constituents_weights/', {
        method: 'POST',
        body: JSON.stringify({
            index_id: indexId
        }),
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${newToken}`,
        }
    });
    const data = await response.json();

    for(i in data["data"]["constituents"]){
        name.push(data["data"]["constituents"][i]["name"]);
        nameSymbol.push(data["data"]["constituents"][i]["ticker"]);
        weightPer.push(data["data"]["constituents"][i]["weight"]*100);
    }

    for(var i=0; i<name.length; i++){
        dList.push([name[i], nameSymbol[i], weightPer[i]]);
    }

    document.getElementById("cnsts1").innerHTML = name[0];
    document.getElementById("cnsts2").innerHTML = name[1];
    document.getElementById("cnsts3").innerHTML = name[2];
    document.getElementById("cnsts4").innerHTML = name[3];
    document.getElementById("cnsts5").innerHTML = name[4];
    document.getElementById("cnsts6").innerHTML = name[5];
    document.getElementById("cnsts7").innerHTML = name[6];
    document.getElementById("cnsts8").innerHTML = name[7];
    document.getElementById("cnsts9").innerHTML = name[8];
    document.getElementById("cnsts10").innerHTML = name[9];

    document.getElementById("cnstsTicker1").innerHTML = nameSymbol[0];
    document.getElementById("cnstsTicker2").innerHTML = nameSymbol[1];
    document.getElementById("cnstsTicker3").innerHTML = nameSymbol[2];
    document.getElementById("cnstsTicker4").innerHTML = nameSymbol[3];
    document.getElementById("cnstsTicker5").innerHTML = nameSymbol[4];
    document.getElementById("cnstsTicker6").innerHTML = nameSymbol[5];
    document.getElementById("cnstsTicker7").innerHTML = nameSymbol[6];
    document.getElementById("cnstsTicker8").innerHTML = nameSymbol[7];
    document.getElementById("cnstsTicker9").innerHTML = nameSymbol[8];
    document.getElementById("cnstsTicker10").innerHTML = nameSymbol[9];

    document.getElementById("cnstsPerc1").innerHTML = weightPer[0].toFixed(2)+'%';
    document.getElementById("cnstsPerc2").innerHTML = weightPer[1].toFixed(2)+'%';
    document.getElementById("cnstsPerc3").innerHTML = weightPer[2].toFixed(2)+'%';
    document.getElementById("cnstsPerc4").innerHTML = weightPer[3].toFixed(2)+'%';
    document.getElementById("cnstsPerc5").innerHTML = weightPer[4].toFixed(2)+'%';
    document.getElementById("cnstsPerc6").innerHTML = weightPer[5].toFixed(2)+'%';
    document.getElementById("cnstsPerc7").innerHTML = weightPer[6].toFixed(2)+'%';
    document.getElementById("cnstsPerc8").innerHTML = weightPer[7].toFixed(2)+'%';
    document.getElementById("cnstsPerc9").innerHTML = weightPer[8].toFixed(2)+'%';
    document.getElementById("cnstsPerc10").innerHTML = weightPer[9].toFixed(2)+'%';

    document.getElementById("cnstsBar1").style.width = weightPer[0].toFixed(2)*4+'%';
    document.getElementById("cnstsBar2").style.width = weightPer[1].toFixed(2)*4+'%';
    document.getElementById("cnstsBar3").style.width = weightPer[2].toFixed(2)*4+'%';
    document.getElementById("cnstsBar4").style.width = weightPer[3].toFixed(2)*4+'%';
    document.getElementById("cnstsBar5").style.width = weightPer[4].toFixed(2)*4+'%';
    document.getElementById("cnstsBar6").style.width = weightPer[5].toFixed(2)*4+'%';
    document.getElementById("cnstsBar7").style.width = weightPer[6].toFixed(2)*4+'%';
    document.getElementById("cnstsBar8").style.width = weightPer[7].toFixed(2)*4+'%';
    document.getElementById("cnstsBar9").style.width = weightPer[8].toFixed(2)*4+'%';
    document.getElementById("cnstsBar10").style.width = weightPer[9].toFixed(2)*4+'%'; 


    tablePlot(dList);
    var pieMapSize = name.length;
    document.getElementById("numCompanies").innerHTML = 500-pieMapSize;
    document.getElementById("numCompanies1").innerHTML = 500-pieMapSize;
    document.getElementById("holdingNum").innerHTML = pieMapSize;
}

function tablePlot(dList){
    var columns = [`AS OF ${new Date().toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"})}`, 'TICKER', 'WEIGHT'];
    var chartWidth = "500px";
    var x = d3.scaleLinear()
    .domain([0, d3.max(dList, function(d) { return Math.abs(d[2]); })])
    .range(["0%", "100%"]);

    var table = d3.select("#constituentsTable").append("table").attr("class", "table table-striped table-wrapper-scroll-y my-custom-scrollbar"); 
    
    var thead = table.append('thead');

    thead.append('tr').selectAll('th').data(columns).enter().append('th')
        .text(function (column) {return column; }).style('color', '#F1A83E');
    
    var tr = table.selectAll("tr.data").data(dList).enter().append("tbody").append("tr")
        .attr("class", "datarow");
    
    tr.append("td").attr("class", "data name")
        .text(function(d) { return d[0].toUpperCase() });
  
    tr.append("td").attr("class", "data symbolname")
        .text(function(d) { return d[1] });
        
    tr.append("td").attr("class", "data value")
        .text(function(d) { return d[2].toFixed(2)+'%'  })

    var chart = tr.append("td").attr("class", "chart").attr("width", chartWidth);
    
    chart.append("div").attr("class", "container")
    .style("float", "left").style("width", "10%")
    .append("div").attr("class", "negative");
    chart.append("div").attr("class", "container")
    .style("float", "left").style("width", "80%").attr("height", "17px")
    .append("div").attr("class", "positive");

    tr.select("div.negative")
      .style("float", "right").style("height", "17px")
      .style("background-color", "brown").transition().duration(500)
        .style("width", function(d) { return d[2] > 0 ? "0%" : x(Math.abs(d[2]));});

    tr.select("div.positive").style("background-color", "#f6cb7d")
      .style("height", "17px").transition().duration(500)
        .style("width", function(d) { return d[2] > 0 ? x(d[2]) : "0%"; });
}

function getMonthDates(currentDate){
    var dThreeMonthCurrentDate = new Date(currentDate);
    var dOneCurrentDate = new Date(currentDate);
    var dThreeCurrentDate = new Date(currentDate);
    var dFiveCurrentDate = new Date(currentDate);
    var dTenCurrentDate = new Date(currentDate);

    var dThreeMon = new Date(dThreeMonthCurrentDate.setMonth(dThreeMonthCurrentDate.getMonth()-3));
    var dOneMonth = new Date(dOneCurrentDate.setMonth(dOneCurrentDate.getMonth()-12));
    var dThreeMonth = new Date(dThreeCurrentDate.setMonth(dThreeCurrentDate.getMonth()-36));
    var dFiveMonth = new Date(dFiveCurrentDate.setMonth(dFiveCurrentDate.getMonth()-60));
    var dTenMonth = new Date(dTenCurrentDate.setMonth(dTenCurrentDate.getMonth()-120));

    dThreeMon = fixWeekends(dThreeMon);
    dOneMonth = fixWeekends(dOneMonth);
    dThreeMonth = fixWeekends(dThreeMonth);
    dFiveMonth = fixWeekends(dFiveMonth);
    dTenMonth = fixWeekends(dTenMonth);

    var tzoffset = (new Date()).getTimezoneOffset() * 60000;

    var dThreeMonFormattedDate = (new Date(dThreeMon - tzoffset)).toISOString().slice(0, 10); 
    var dOneMonthFormattedDate = (new Date(dOneMonth - tzoffset)).toISOString().slice(0, 10);
    var dThreeMonthFormattedDate = (new Date(dThreeMonth - tzoffset)).toISOString().slice(0, 10);
    var dFiveMonthFormattedDate = (new Date(dFiveMonth - tzoffset)).toISOString().slice(0, 10);
    var dTenMonthFormattedDate = (new Date(dTenMonth - tzoffset)).toISOString().slice(0, 10);

    return {dThreeMonFormattedDate, dOneMonthFormattedDate, dThreeMonthFormattedDate, dFiveMonthFormattedDate, dTenMonthFormattedDate};
}

function fixWeekends(dDateMonth){
    if(dDateMonth.getDay() == 6 || dDateMonth.getDay() == 0){
        dDateMonth.setDate(dDateMonth.getDate()-1);
    }
    if(dDateMonth.getDay() == 6 || dDateMonth.getDay() == 0) {
        dDateMonth.setDate(dDateMonth.getDate()-1);
    }
    return dDateMonth
}

function monthReturns(redCurrentDateVal, redMonthDateVal){
    return ((redCurrentDateVal/redMonthDateVal))*10000;
    //return (((redCurrentDateVal-redMonthDateVal)/redMonthDateVal)*100);
}

function annualizedReturns(){
    var allCurYear = new Date().getFullYear();
    var allFirstYear = allYearGreenXAxis[allYearGreenXAxis.length-1].substring(0,4);
    var allDiffN = allCurYear - allFirstYear;
    var N = [1,3,5,10, allDiffN];
    
    for(var i=0; i<N.length; i++){
        annualizedGreenReturns[i] = Math.pow((1+yGreenDiff[i]),(1/N[i])) - 1;
        annualizedRedReturns[i] = Math.pow((1+yRedDiff[i]),(1/N[i])) - 1;
    }

    return {annualizedGreenReturns, annualizedRedReturns}
}

function annualizedVolatility(){
    var dailyPercentVal = getDailyPercentVal();
    var annVolYearLists = getYearSpecificLists(dailyPercentVal.redDailyPercentVal, dailyPercentVal.greenDailyPercentVal);

    redAnnualizedVol.push(getStandardDeviation(annVolYearLists.redDailyPercentValYearLists.redDailyPercentValOneYearList)* Math.sqrt(252));
    redAnnualizedVol.push(getStandardDeviation(annVolYearLists.redDailyPercentValYearLists.redDailyPercentValThreeYearList)* Math.sqrt(252));
    redAnnualizedVol.push(getStandardDeviation(annVolYearLists.redDailyPercentValYearLists.redDailyPercentValFiveYearList)* Math.sqrt(252));
    redAnnualizedVol.push(getStandardDeviation(annVolYearLists.redDailyPercentValYearLists.redDailyPercentValTenYearList)* Math.sqrt(252));
    redAnnualizedVol.push(getStandardDeviation(annVolYearLists.redDailyPercentValYearLists.redDailyPercentValAllYearList)* Math.sqrt(252));

    greenAnnualizedVol.push(getStandardDeviation(annVolYearLists.greenDailyPercentValYearLists.greenDailyPercentValOneYearList)* Math.sqrt(252));
    greenAnnualizedVol.push(getStandardDeviation(annVolYearLists.greenDailyPercentValYearLists.greenDailyPercentValThreeYearList)* Math.sqrt(252));
    greenAnnualizedVol.push(getStandardDeviation(annVolYearLists.greenDailyPercentValYearLists.greenDailyPercentValFiveYearList)* Math.sqrt(252));
    greenAnnualizedVol.push(getStandardDeviation(annVolYearLists.greenDailyPercentValYearLists.greenDailyPercentValTenYearList)* Math.sqrt(252));
    greenAnnualizedVol.push(getStandardDeviation(annVolYearLists.greenDailyPercentValYearLists.greenDailyPercentValAllYearList)* Math.sqrt(252));
}

function getYearSpecificLists(redDailyPercentValList, greenDailyPercentValList){

    var redDailyPercentValOneYearList = redDailyPercentValList.slice(0, 365);
    var redDailyPercentValThreeYearList = redDailyPercentValList.slice(0, 1095);
    var redDailyPercentValFiveYearList = redDailyPercentValList.slice(0, 1825);
    var redDailyPercentValTenYearList = redDailyPercentValList.slice(0, 3650);
    var redDailyPercentValAllYearList = redDailyPercentValList;

    var redDailyPercentValYearLists = {redDailyPercentValOneYearList, redDailyPercentValThreeYearList, redDailyPercentValFiveYearList, redDailyPercentValTenYearList,redDailyPercentValAllYearList};

    var greenDailyPercentValOneYearList = greenDailyPercentValList.slice(-365);
    var greenDailyPercentValThreeYearList = greenDailyPercentValList.slice(-1095);
    var greenDailyPercentValFiveYearList = greenDailyPercentValList.slice(-1825);
    var greenDailyPercentValTenYearList = greenDailyPercentValList.slice(-3650);
    var greenDailyPercentValAllYearList = greenDailyPercentValList;

    var greenDailyPercentValYearLists = {greenDailyPercentValOneYearList, greenDailyPercentValThreeYearList, greenDailyPercentValFiveYearList, greenDailyPercentValTenYearList,
    greenDailyPercentValAllYearList};
    
    return {redDailyPercentValYearLists, greenDailyPercentValYearLists}
}

function getDailyPercentVal(){
    var redDailyPercentVal = [];
    var greenDailyPercentVal = [];
    redDailyPercentVal[valRedClose.length-1] = valRedClose[valRedClose.length-1];
    for(var i=0; i<valRedClose.length-1; i++){
        redDailyPercentVal[i] = ((valRedClose[i]-valRedClose[i+1])/valRedClose[i+1])*100;
    }
    greenDailyPercentVal[0] = valGreenClose[0];
    for(var i=valGreenClose.length-1; i>0; i--){
        greenDailyPercentVal[i] = ((valGreenClose[i]-valGreenClose[i-1])/valGreenClose[i-1])*100;
    }

    return {redDailyPercentVal, greenDailyPercentVal}
}

function getStandardDeviation (array) {
    const n = array.length
    const mean = array.reduce((a, b) => a + b) / n
    return Math.sqrt(array.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n)
}

function riskRewardRatio(){
    for(var i=0; i<annualizedRedReturns.length; i++){
        rRRatioRedList[i] = annualizedRedReturns[i]/redAnnualizedVol[i];
    }
    
    for(var i=0; i<annualizedGreenReturns.length; i++){
        rRRatioGreenList[i] = annualizedGreenReturns[i]/greenAnnualizedVol[i];
    }
}

function diffMonthsPlot(){
    var limit = 1;
    var annualizedVal = [];
    for(; counterAnnualized<limit; counterAnnualized++){
        annualizedVal = annualizedReturns();
        annualizedVolatility();
        riskRewardRatio();
    }
    var annualizedGreenReturns = annualizedVal.annualizedGreenReturns;
    var annualizedRedReturns = annualizedVal.annualizedRedReturns;

    document.getElementById("cr1SPFFXI").innerHTML = yGreenDiff[0].toFixed(2)+"%";
    document.getElementById("cr3SPFFXI").innerHTML = yGreenDiff[1].toFixed(2)+"%";
    document.getElementById("cr5SPFFXI").innerHTML = yGreenDiff[2].toFixed(2)+"%";
    document.getElementById("cr10SPFFXI").innerHTML = yGreenDiff[3].toFixed(2)+"%";
    document.getElementById("crAllSPFFXI").innerHTML = yGreenDiff[4].toFixed(2)+"%";
    document.getElementById("cr1SPY").innerHTML = yRedDiff[0].toFixed(2)+"%";
    document.getElementById("cr3SPY").innerHTML = yRedDiff[1].toFixed(2)+"%";
    document.getElementById("cr5SPY").innerHTML = yRedDiff[2].toFixed(2)+"%";
    document.getElementById("cr10SPY").innerHTML = yRedDiff[3].toFixed(2)+"%";
    document.getElementById("crAllSPY").innerHTML = yRedDiff[4].toFixed(2)+"%";

    document.getElementById("ar1SPFFXI").innerHTML = annualizedGreenReturns[0].toFixed(2)+"%";
    document.getElementById("ar3SPFFXI").innerHTML = annualizedGreenReturns[1].toFixed(2)+"%";
    document.getElementById("ar5SPFFXI").innerHTML = annualizedGreenReturns[2].toFixed(2)+"%";
    document.getElementById("ar10SPFFXI").innerHTML = annualizedGreenReturns[3].toFixed(2)+"%";
    document.getElementById("arAllSPFFXI").innerHTML = annualizedGreenReturns[4].toFixed(2)+"%";
    document.getElementById("ar1SPY").innerHTML = annualizedRedReturns[0].toFixed(2)+"%";
    document.getElementById("ar3SPY").innerHTML = annualizedRedReturns[1].toFixed(2)+"%";
    document.getElementById("ar5SPY").innerHTML = annualizedRedReturns[2].toFixed(2)+"%";
    document.getElementById("ar10SPY").innerHTML = annualizedRedReturns[3].toFixed(2)+"%";
    document.getElementById("arAllSPY").innerHTML = annualizedRedReturns[4].toFixed(2)+"%";

    document.getElementById("av1SPFFXI").innerHTML = greenAnnualizedVol[0].toFixed(2)+"%";
    document.getElementById("av3SPFFXI").innerHTML = greenAnnualizedVol[1].toFixed(2)+"%";
    document.getElementById("av5SPFFXI").innerHTML = greenAnnualizedVol[2].toFixed(2)+"%";
    document.getElementById("av10SPFFXI").innerHTML = greenAnnualizedVol[3].toFixed(2)+"%";
    document.getElementById("avAllSPFFXI").innerHTML = greenAnnualizedVol[4].toFixed(2)+"%";
    document.getElementById("av1SPY").innerHTML = redAnnualizedVol[0].toFixed(2)+"%";
    document.getElementById("av3SPY").innerHTML = redAnnualizedVol[1].toFixed(2)+"%";
    document.getElementById("av5SPY").innerHTML = redAnnualizedVol[2].toFixed(2)+"%";
    document.getElementById("av10SPY").innerHTML = redAnnualizedVol[3].toFixed(2)+"%";
    document.getElementById("avAllSPY").innerHTML = redAnnualizedVol[4].toFixed(2)+"%";

    document.getElementById("rr1SPFFXI").innerHTML = rRRatioGreenList[0].toFixed(2);
    document.getElementById("rr3SPFFXI").innerHTML = rRRatioGreenList[1].toFixed(2);
    document.getElementById("rr5SPFFXI").innerHTML = rRRatioGreenList[2].toFixed(2);
    document.getElementById("rr10SPFFXI").innerHTML = rRRatioGreenList[3].toFixed(2);
    document.getElementById("rrAllSPFFXI").innerHTML = rRRatioGreenList[4].toFixed(2);
    
    document.getElementById("rr1SPY").innerHTML = rRRatioRedList[0].toFixed(2);
    document.getElementById("rr3SPY").innerHTML = rRRatioRedList[1].toFixed(2);
    document.getElementById("rr5SPY").innerHTML = rRRatioRedList[2].toFixed(2);
    document.getElementById("rr10SPY").innerHTML = rRRatioRedList[3].toFixed(2);
    document.getElementById("rrAllSPY").innerHTML = rRRatioRedList[4].toFixed(2);
}

async function quickFactsTable(){
    const responseQuickFacts = await fetch(apiUrlQuickFacts);
    const responseQuickFacts1 = await fetch(apiUrlQuickFacts1);
    const dataQF = await responseQuickFacts.json();
    const dataQF1 = await responseQuickFacts1.json();
    document.getElementById("inceptionDateVal").textContent = new Date(dataQF1[0]["Inception Date"]).toLocaleDateString('en-us', { year:"numeric", month:"short", day:"numeric"});
    document.getElementById("netAssetsVal").textContent = dataQF[0]["NET ASSETS"];
    document.getElementById("sharesOutstandingVal").textContent = dataQF[0]["SHARES OUTSTANDING"];
    document.getElementById("navVal").textContent = dataQF[0]["NAV"];
    document.getElementById("navChangeDollarsVal").textContent = dataQF[0]["NAV CHANGE DOLLARS"];
    document.getElementById("oneDayReturnVal").textContent = dataQF[0]["ONE DAY RETURN"];
    document.getElementById("ytdPerformanceVal").textContent = dataQF[0]["YTD PERFORMANCE"];
    document.getElementById("ytdVal").textContent = dataQF1[0]["YTD"];
    document.getElementById("sinceInceptionCumulativeVal").textContent = dataQF1[0]["Since Inception Cumulative"];
    document.getElementById("sinceInceptionAnnualizedVal").textContent = dataQF1[0]["Since Inception Annualized"];
}