let statsresult = new Promise(function (resolve, reject) {
    $.ajax({
        url: "/api/stats",
        dataType: "json",
        error: () => reject('API Call Failed.'),
        success: function (result) {
            resolve(result)
        },
    });
});

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawColumnChart);
google.charts.setOnLoadCallback(drawTrendChart);
google.charts.setOnLoadCallback(drawCrossChart);

async function drawCrossChart() {
    let cross = $("#cross_div");
    let table = cross.append("<table></table>").children().last();
    table.css('border-collapse', 'collapse');
    let result;
    try {
        result = await statsresult;
    } catch (err) {
        alert(err);
        return;
    }
    let radius = result.radius;
    let distance = result.distance;
    let max = 0;
    let names = [];
    for (let name in radius) {
        if (radius[name] > max) {
            max = radius[name];
        }
        names.push(name);
    }
    let colors = palette('mpn65', names.length);
    let tr = table.append("<tr></tr>").children().last();
    tr.append("<td></td>");
    for (let [i, name] of names.entries()) {
        let td = tr.append("<td>" + name + "</td>").children().last();
        td.css('border', '0.5px solid black');
        td.css(`background-color`, '#' + colors[i]);
        td.css(`color`, 'white');
    }
    for (let [i, name] of names.entries()) {
        let tr = table.append("<tr></tr>").children().last();
        let td = tr.append("<td>" + name + "</td>").children().last();
        td.css('border', '0.5px solid black');
        td.css(`background-color`, '#' + colors[i]);
        td.css(`color`, 'white');
        for (let [j, n] of names.entries()) {
            td = tr.append("<td></td>").children().last();
            td.css('border', '0.5px solid black');
            let id = name + n;
            td.append("<div id=" + id + "></div>");
            if (name !== n) {
                let r = radius[name];
                let chart = d3.select("#" + id).append("svg")
                    .attr("width", 200)
                    .attr("height", 100);
                chart.append('circle')
                    .style("opacity", 0.5)
                    .style("fill", '#' + colors[i])
                    .attr("cx", 50)
                    .attr("cy", 50)
                    .attr("r", r * 50 / max);
                let d = distance[name + "*" + n] || distance[n + "*" + name];
                if (d) {
                    d = parseFloat(d);
                    r = radius[n];
                    chart.append('circle')
                        .style("opacity", 0.5)
                        .style("fill", '#' + colors[j])
                        .attr("cx", 50 + d * 50 / max)
                        .attr("cy", 50)
                        .attr("r", r * 50 / max);
                }
            }
        }
    }
}

async function drawTrendChart() {
    let result;
    try {
        result = await statsresult;
    } catch (err) {
        alert(err);
        return;
    }
    let numbers = result.pubDateMonth.name;
    let data = new google.visualization.DataTable();
    data.addColumn('string', 'month');
    let names = [];
    let ms = {};
    for (let name in numbers) {
        data.addColumn('number', name);
        names.push(name);
        for (let m in numbers[name]) {
            ms[m]++;
        }
    }
    for (let m of Object.keys(ms).sort()) {
        let row = [];
        row.push(m);
        for (let name of names) {
            let n = numbers[name][m];
            if (n === undefined) {
                n = 0;
            }
            row.push(n);
        }
        data.addRow(row);
    }
    let options = {
        title: 'Number of Signitures',
        hAxis: { Title: 'Published Month by NIST', showTextEvery: 1, slantedText: true, slantedTextAngle: 70 },
    };
    let trenddiv = document.getElementById("trend_div");
    let chart = new google.visualization.LineChart(trenddiv);
    let x = document.body.scrollWidth;
    let chartWidth = x - (3 * 2);
    if (chartWidth > 600) {
        trenddiv.setAttribute("style", "width : " + chartWidth + "px;" + "height : " + chartWidth / 2 + "px;")
    }
    chart.draw(data, options);
}

async function drawColumnChart() {
    let result;
    try {
        result = await statsresult;
    } catch (err) {
        alert(err);
        return;
    }
    let numbers = result.name;
    let data = new google.visualization.DataTable();
    data.addColumn('string', 'name');
    data.addColumn('number', 'number');
    for (let name in numbers) {
        let row = [];
        let n = parseInt(numbers[name]);
        row.push(name);
        row.push(n);
        data.addRow(row);
    }
    let options = {
        title: 'Number of Signitures',
        hAxis: { title: 'Vendor Name', showTextEvery: 1, slantedText: true, slantedTextAngle: 70 },
        bar: { groupWidth: "65%" },
        legend: { position: "none" },
    };
    let columndiv = document.getElementById("column_div");
    let chart = new google.visualization.ColumnChart(columndiv);
    let x = document.body.scrollWidth;
    let chartWidth = x - (3 * 2);
    if (chartWidth > 600) {
        columndiv.setAttribute("style", "width : " + chartWidth + "px;" + "height : " + chartWidth / 2 + "px;")
    }
    chart.draw(data, options);
}