setup_analyser/analyser.js

var numDies = 0; // master counter for our number of dies
var outputVisible = 0; // Status of whether the output graph is displayed or not

// Arrays to store values for graphs
var dieCount = [];
var dataROA = [];
var dataElong = [];
var dataDelta = [];

///// START OF MATHS FUNCTIONS /////

// This function gets the reduction of area with two provided sizes, and returns it
function getReduction(startSize, finalSize) {
    var startArea = Math.PI * ((startSize / 2) * (startSize / 2));
    var finalArea = Math.PI * ((finalSize / 2) * (finalSize / 2));

    return ((startArea - finalArea) / startArea) * 100;
}

// This function gets the elongation
function getElongation(startSize, finalSize) {
    return (Math.pow(startSize / finalSize, 2) - 1) * 100;
}

function getDelta(startSize, finalSize, angle) {
    angle = (angle * 0.5) * (Math.PI / 180);  // Convert to semi-angle and radians
    return ((startSize + finalSize) / (startSize - finalSize)) * Math.sin(angle);
}

function toMillimetres(size) { //convert to mm
    size = Math.round((size * 100) * 25.4) / 100;
    return size;
}

function toInches(size) { //convert to inches
    size = Math.round((size * 1000) / 25.4) / 1000;
    return size;
}

///// END OF MATHS SECTION /////

///// START OF DISPLAY SECTION /////

function addReduction() {
    numDies ++; // Increment our die count

    // Create the data going into the row
    var inputLabel = "<label for=\"die" + numDies + "\" style=\"text-align:right;\">#" + (numDies) + ": </label>";
    var inputSize = "<input id=\"die" + numDies + "\" type=\"text\" autocomplete=\"off\" value=\"0.000\" size=\"4\" onchange=\"doMath()\" />";
    var inputAngle = "<input id=\"angle" + numDies + "\" type=\"text\" autocomplete=\"off\" value=\"16\" size=\"2\" onchange=\"doMath()\" style=\"text-align:center;\"/>";

    // create the row
    var table = document.getElementById("data"); // get table ID
    var row = table.insertRow(-1); // Insert a new row (the -1 means we add to the END of the table)
    var cell1 = row.insertCell(0); // Create and add a cell to the table
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = inputLabel;  // Set the values of the cells we've created
    cell2.innerHTML = inputSize
    cell3.innerHTML = inputAngle;

    if (outputVisible == 1) {  // Check if out output is visible and update immediately when adding dies
        doMath();
    }

}

function removeReduction() { // function to remove the last row
    numDies --;
    document.getElementById("data").deleteRow(-1); // delete the last row in the table

    if (outputVisible == 1) {  // Check if out output is visible and update immediately when adding dies
        doMath();
    }
}

///// END OF DISPLAY SECTION /////

///// START OF ALGORITHMS SECTION /////

function doMath() {
    outputVisible = 1; // set visible status to enabled
    outputTable = document.getElementById("output"); // Select our output data table
    outputTable.innerHTML = "";

    // Make the output graph visible
    outputGraph = document.getElementById("outputChart");
    outputGraph.innerHTML = "<canvas id=\"outputData\"></canvas>";


    var row = [];
    row[0] = outputTable.insertRow(0);
    row[0].id = "outputHeader"; // set the header row
    var r1c1 = row[0].insertCell(0); //blank
    var r1c2 = row[0].insertCell(1); // "Start -> Finish"
    var r1c3 = row[0].insertCell(2); // "ROA"
    var r1c4 = row[0].insertCell(3); // "Elong"
    var r1c5 = row[0].insertCell(4); // "Delta"

    // Create the header of the table
    r1c1.innerHTML = "Draft";
    r1c1.id = "reductionNumHeader";
    r1c2.innerHTML = "Start -> Finish";
    r1c2.id = "startFinish";
    r1c3.innerHTML = "ROA (%)";
    r1c3.id = "roa";
    r1c4.innerHTML = "Elong (%)";
    r1c4.id = "elong";
    r1c5.innerHTML = "Δ Factor";
    r1c5.id = "delta";

    for (var i = 1; i < numDies + 1; i++) {
        inSize = document.getElementById("die" + (i - 1)).value; // the input size
        outSize = document.getElementById("die" + i).value; // output size
        angle = document.getElementById("angle" + i).value;

        if (i == 1 && document.getElementById("metric").checked == true) {
            // If this is the first die in the setup, check if it's a metric/rod start and convert it
            inSize = toInches(inSize);
        }
            
        // Format our numbers to prevent maximum user stupidity
        if (inSize < 10.0 && inSize > 0) {  // If we have a 'proper' number i.e. ".130"
            inSize = Number(inSize);
        } else {  // re-format the number if it's 'wrong' i.e. "130"
            inSize = inSize / 1000;
        }
        if (outSize < 10.0 && outSize > 0) {  // If we have a 'proper' number i.e. ".130"
            outSize = Number(outSize);
        } else {  // re-format the number if it's 'wrong' i.e. "130"
            outSize = outSize / 1000;
        }

        row[i] = outputTable.insertRow(i); // Add a new row to the END of the table


        // Add all our cells to the table
        // We also give them HTML ID's to format things with CSS nicely
        var cell1 = row[i].insertCell(0);
        cell1.id = "reductionNum";
        var cell2 = row[i].insertCell(1);
        cell2.id = "startFinish";
        var cell3 = row[i].insertCell(2);
        cell3.id = "roa";
        var cell4 = row[i].insertCell(3);
        cell4.id = "elong";
        var cell5 = row[i].insertCell(4);
        cell5.id = "delta";

        // These next lines calculate and round the data to two decimal places
        dataROA[i - 1] = Math.round(getReduction(inSize, outSize) * 100) / 100;
        dataElong[i - 1] = Math.round(getElongation(inSize, outSize) * 100) / 100;
        dataDelta[i - 1] = Math.round(getDelta(inSize, outSize, angle) * 100) / 100;

        // Set the values of the cells in our table 
        cell1.innerHTML = "#" + i + ": &nbsp;&nbsp;";
        cell2.innerHTML = inSize + "\" (" + toMillimetres(inSize) + " mm) -> " + outSize + "\" (" + toMillimetres(outSize) + " mm)";
        cell3.innerHTML = dataROA[i - 1];
        cell4.innerHTML = dataElong[i - 1];
        cell5.innerHTML = dataDelta[i - 1];

        dieCount[i - 1] = i;
    }
    drawGraph();
}

function drawGraph() {
    // Documentation for the following chart-building command can be found at https://chartjs.org
    const outputData = new Chart("outputData", {
        type: "line",
        data: {
            labels: dieCount,
            datasets: [{
                data: dataROA,
                label: "Reduction of Area",
                borderColor: "green",
                fill: false,
                pointStyle: 'circle',
                pointRadius: 4,
                pointHoverRadius: 7,
                yAxisID: 'y',
                tension: 0
            },{
                data: dataElong,
                label: "Elongation",
                borderColor: "blue",
                fill: false,
                pointStyle: 'rect',
                pointRadius: 5,
                pointHoverRadius: 8,
                yAxisID: 'y',
                tension: 0
            },{
                data: dataDelta,
                label: "Δ Factor",
                borderColor: "red",
                fill: false,
                pointStyle: 'triangle',
                pointRadius: 5,
                pointHoverRadius: 8,
                yAxisID: 'y1',
                tension: 0
            }],
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            stacked: false,
            plugins: {
                title: {
                    display: true,
                    text: "Draft Analysis"
                },
                legend: {
                    labels: {
                        usePointStyle: true
                    }
                }
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: "% (RoA/Elong)"
                    },
                    suggestedMin: 0,
                    suggestedMax: 30,
                }, 
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: "Δ Factor"
                    },
                    suggestedMin: 0,
                    suggestedMax: 6,
                    grid: {
                      drawOnChartArea: false
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: "Draft #"
                    },
                }
            },
        },
      });
}

function clearScreen() {
    // Reset variables back to defaults
    numDies = 2;
    outputVisible = 0;

    // Delete the table
    outputTable = document.getElementById("output");
    outputTable.innerHTML = "";

    // Delete the output graph
    outputGraph = document.getElementById("outputChart");
    outputGraph.innerHTML = "&nbsp;";

}


///// START OF ALGORITHMS SECTION /////