Added a summary display to show total and average reductions, etc.

Bugfixes, including removing elements from the graph when removing entries, and three-decimal formatting our inches.

Layout changes, in both code and webpage. Some edits to the print layout to improve printing and readability

analyser.css

@@ -89,6 +89,17 @@
 }
 
 .footer {
+    display: inline;
+    position: relative;
+    bottom: 15px;
+    width: 100%;
+    font-size: 75%;
+    margin: auto;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.printFooter {
+    display: none;
     position: relative;
     bottom: 15px;
     width: 100%;
@@ -117,6 +128,57 @@
     text-align: center;
 }
 
+#spacer1 {
+    display: none;
+}
+
+#spacer2 {
+    display: none;
+}
+
+#spacer3 {
+    display: none;
+}
+
+#statistics {
+    font-size: 90%;
+}
+
+#statistics h5 {
+    font-size: 100%;
+}
+
+#statsSummaryHeader {
+    color: rgba(0,0,0,0.5);
+}
+
+#statsTable {
+    margin: auto;
+}
+
+#statsCol1 {
+    text-align: right;
+}
+
+#statsCol2 {
+    text-align: left;
+    padding-left: 2%;
+}
+
+#statsCol3 {
+    width: 20%;
+}
+
+#statsCol4 {
+    text-align: right;
+}
+
+#statsCol5 {
+    text-align: left;
+    padding-left: 2%;
+}
+
+
 @media print {
     @page {
         margin-top: 0;
@@ -133,4 +195,19 @@
     .printHeader {
         display: inline;
     }
+    .footer {
+        display: none;
+    }
+    .printFooter {
+        display: inline;
+    }
+    .output {
+        font-size:80%;
+    }
+    #statistics {
+        font-size: 68%;
+    }
+    .content {
+        margin-top: 5%;
+    }
 }

analyser.js

@@ -1,5 +1,5 @@
 var numDies = 0; // master counter for our number of dies
-var outputVisible = 0; // Status of whether the output graph is displayed or not
+var outputVisible = 0; // Status of whether the output is displayed or not
 
 // Arrays to store values for graphs
 var dieCount = [];
@@ -68,6 +68,12 @@ function addReduction() {
 function removeReduction() { // function to remove the last row
     numDies --;
     document.getElementById("data").deleteRow(-1); // delete the last row in the table
+    
+    // Remove the last item in each array to remove the tick from the graph
+    dieCount.splice(-1);
+    dataROA.splice(-1);
+    dataElong.splice(-1);
+    dataDelta.splice(-1);
 
     if (outputVisible == 1) {  // Check if out output is visible and update immediately when adding dies
         doMath();
@@ -91,23 +97,23 @@ function doMath() {
     var row = [];
     row[0] = outputTable.insertRow(0);
     row[0].id = "outputHeader"; // set the header row
-    var r1c1 = row[0].insertCell(0); //blank
+    var cell1 = row[0].insertCell(0); //blank
-    var r1c2 = row[0].insertCell(1); // "Start -> Finish"
+    var cell2 = row[0].insertCell(1); // "Start -> Finish"
-    var r1c3 = row[0].insertCell(2); // "ROA"
+    var cell3 = row[0].insertCell(2); // "ROA"
-    var r1c4 = row[0].insertCell(3); // "Elong"
+    var cell4 = row[0].insertCell(3); // "Elong"
-    var r1c5 = row[0].insertCell(4); // "Delta"
+    var cell5 = row[0].insertCell(4); // "Delta"
 
     // Create the header of the table
-    r1c1.innerHTML = "Draft";
+    cell1.innerHTML = "Draft";
-    r1c1.id = "reductionNumHeader";
+    cell1.id = "reductionNumHeader";
-    r1c2.innerHTML = "Start -> Finish";
+    cell2.innerHTML = "Start -> Finish";
-    r1c2.id = "startFinish";
+    cell2.id = "startFinish";
-    r1c3.innerHTML = "ROA (%)";
+    cell3.innerHTML = "ROA (%)";
-    r1c3.id = "roa";
+    cell3.id = "roa";
-    r1c4.innerHTML = "Elong (%)";
+    cell4.innerHTML = "Elong (%)";
-    r1c4.id = "elong";
+    cell4.id = "elong";
-    r1c5.innerHTML = "Δ Factor";
+    cell5.innerHTML = "Δ Factor";
-    r1c5.id = "delta";
+    cell5.id = "delta";
 
     for (var i = 1; i < numDies + 1; i++) {
         inSize = document.getElementById("die" + (i - 1)).value; // the input size
@@ -136,25 +142,25 @@ function doMath() {
 
         // 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 = row[i].insertCell(0);
         cell1.id = "reductionNum";
-        var cell2 = row[i].insertCell(1);
+        cell2 = row[i].insertCell(1);
         cell2.id = "startFinish";
-        var cell3 = row[i].insertCell(2);
+        cell3 = row[i].insertCell(2);
         cell3.id = "roa";
-        var cell4 = row[i].insertCell(3);
+        cell4 = row[i].insertCell(3);
         cell4.id = "elong";
-        var cell5 = row[i].insertCell(4);
+        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;
+        dataROA[i - 1] = (Math.round(getReduction(inSize, outSize) * 100) / 100).toFixed(2);
-        dataElong[i - 1] = Math.round(getElongation(inSize, outSize) * 100) / 100;
+        dataElong[i - 1] = (Math.round(getElongation(inSize, outSize) * 100) / 100).toFixed(2);
-        dataDelta[i - 1] = Math.round(getDelta(inSize, outSize, angle) * 100) / 100;
+        dataDelta[i - 1] = (Math.round(getDelta(inSize, outSize, angle) * 100) / 100).toFixed(2);
 
         // Set the values of the cells in our table 
         cell1.innerHTML = "#" + i + ": &nbsp;&nbsp;";
-        cell2.innerHTML = inSize + "\" (" + toMillimetres(inSize) + " mm) -> " + outSize + "\" (" + toMillimetres(outSize) + " mm)";
+        cell2.innerHTML = inSize.toFixed(3) + "\" (" + toMillimetres(inSize) + " mm) -> " + outSize.toFixed(3) + "\" (" + toMillimetres(outSize) + " mm)";
         cell3.innerHTML = dataROA[i - 1];
         cell4.innerHTML = dataElong[i - 1];
         cell5.innerHTML = dataDelta[i - 1];
@@ -162,6 +168,12 @@ function doMath() {
         dieCount[i - 1] = i;
     }
     drawGraph();
+    getStatistics();
+    
+    // Add spacers
+    document.getElementById("spacer1").style.display = 'block';
+    document.getElementById("spacer2").style.display = 'block';
+    document.getElementById("spacer3").style.display = 'block';
 }
 
 function drawGraph() {
@@ -257,6 +269,145 @@ function drawGraph() {
       });
 }
 
+function getStatistics() {
+    // Get data from page
+    var div = document.getElementById("statistics");
+    var startSize = formatCheck(document.getElementById("die0").value);
+    var finalSize = formatCheck(document.getElementById("die" + numDies).value);
+
+    // Check if the start size is metric/rod and convert to inches
+    if (document.getElementById("metric").checked == true) {
+        startSize = toInches(startSize);
+    }
+
+    // We'll do a lot of the heavy math-lifting here to make things easier to read below
+    var avgDelta = 0;
+    var avgROA = 0;
+    var avgElong = 0;
+    var totalROA = Math.round(getReduction(startSize, finalSize) * 100) / 100;
+    var totalElong = Math.round(getElongation(startSize, finalSize) * 100) / 100;
+
+    // Get average ROA
+    for (var i = 0; i < numDies; i++) {
+        avgROA += Number(dataROA[i]);
+    }
+    avgROA = (Math.round((avgROA / numDies) * 100) / 100).toFixed(2);
+
+    // Get average Elong
+    for (var i = 0; i < numDies; i++) {
+        avgElong += Number(dataElong[i]);
+    }
+    avgElong = (Math.round((avgElong / numDies) * 100) / 100).toFixed(2);
+    
+    // Get average delta
+    for (var i = 0; i < numDies; i++) {
+        avgDelta += Number(dataDelta[i]);
+    }
+    avgDelta = (Math.round((avgDelta / numDies) * 100) / 100).toFixed(2);
+
+    // Create the table to display statistics
+    div.innerHTML = "<p></p><h5 align=\"center\" id=\"statsSummaryHeader\">Summary</h5><table id=\"statsTable\"></table>";
+
+    var statsTable = document.getElementById("statsTable");
+
+
+    ////  ROW 1  ////
+    var row = statsTable.insertRow(0);
+    
+    var c1 = row.insertCell(0); 
+    var c2 = row.insertCell(1); 
+    var c3 = row.insertCell(2);
+    var c4 = row.insertCell(3); 
+    var c5 = row.insertCell(4); 
+    
+    // COL 1
+    c1.innerHTML = "# Of Reductions: ";
+    c1.id = "statsCol1";
+    c2.innerHTML = numDies;
+    c2.id = "statsCol2";
+    //
+    c3.innerHTML = "&nbsp;";
+    c3.id = "statsCol3";
+    // COL 2
+    c4.innerHTML = "Avg. Δ Factor: ";
+    c4.id = "statsCol4";
+    c5.innerHTML = avgDelta;
+    c5.id = "statsCol5";
+
+
+    ////  ROW 2  ////
+    row = statsTable.insertRow(1);
+    
+    c1 = row.insertCell(0); 
+    c2 = row.insertCell(1); 
+    c3 = row.insertCell(2);
+    c4 = row.insertCell(3); 
+    c5 = row.insertCell(4); 
+    
+    // COL 1
+    c1.innerHTML = "Total R. Of Diameter: ";
+    c1.id = "statsCol4";
+    c2.innerHTML = (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(3) + "\"";
+    c2.id = "statsCol5";
+    //
+    c3.innerHTML = "&nbsp;";
+    c3.id = "statsCol3";
+    // COL 2
+    c4.innerHTML = "------";
+    c4.id = "statsCol4";
+    c5.innerHTML = "---";
+    c5.id = "statsCol5";
+
+
+    ////  ROW 3  ////
+    row = statsTable.insertRow(2);
+    
+    c1 = row.insertCell(0); 
+    c2 = row.insertCell(1); 
+    c3 = row.insertCell(2);
+    c4 = row.insertCell(3); 
+    c5 = row.insertCell(4); 
+    
+    // COL 1
+    c1.innerHTML = "Total R. Of Area: ";
+    c1.id = "statsCol1";
+    c2.innerHTML = totalROA + "%";
+    c2.id = "statsCol2";
+    //
+    c3.innerHTML = "&nbsp;";
+    c3.id = "statsCol3";
+    // COL 2
+    c4.innerHTML = "Avg. R. of Area: ";
+    c4.id = "statsCol4";
+    c5.innerHTML = avgROA + "%";
+    c5.id = "statsCol5";
+
+
+    ////  ROW 4  ////
+    row = statsTable.insertRow(3);
+    
+    c1 = row.insertCell(0); 
+    c2 = row.insertCell(1); 
+    c3 = row.insertCell(2);
+    c4 = row.insertCell(3); 
+    c5 = row.insertCell(4); 
+    
+    // COL 1
+    c1.innerHTML = "Total Elong.: ";
+    c1.id = "statsCol1";
+    c2.innerHTML = totalElong + "%";
+    c2.id = "statsCol2";
+    //
+    c3.innerHTML = "&nbsp;";
+    c3.id = "statsCol3";
+    // COL 2
+    c4.innerHTML = "Avg. Elongation: ";
+    c4.id = "statsCol4";
+    c5.innerHTML = avgElong + "%";
+    c5.id = "statsCol5";
+
+}
+
 function clearScreen() {
     // Reset variables back to defaults
     numDies = 0;
@@ -278,6 +429,14 @@ function clearScreen() {
     outputGraph = document.getElementById("outputChart");
     outputGraph.innerHTML = "";
 
+    statistics = document.getElementById("statistics");
+    statistics.innerHTML = "";
+    
+    // Delete the spacers
+    document.getElementById("spacer1").style.display = 'none';
+    document.getElementById("spacer2").style.display = 'none';
+    document.getElementById("spacer3").style.display = 'none';
+
     // Add two fresh entries
     addReduction();
     addReduction();
@@ -294,32 +453,23 @@ function printScreen() {
 
     // Get input size, and format it
     var inputSize = document.getElementById("die0").value;
-    if (inputSize < 10.0 && inputSize > 0) {  // If we have a 'proper' number i.e. ".130"
+    
-        inputSize = Number(inputSize);
-    } else {  // re-format the number if it's 'wrong' i.e. "130"
-        inputSize = inputSize / 1000;
-    }
     
     // If our start size is metric show that, otherwise swap them to show 'murican first
     if (document.getElementById("metric").checked) {
         var inputText = inputSize + " mm (" + toInches(inputSize) + "\")";
     } else {
-        var inputText = inputSize + "\" (" + toMillimetres(inputSize) + " mm)";
+        var inputText = formatCheck(inputSize) + "\" (" + toMillimetres(formatCheck(inputSize)) + " mm)";
     }
 
 
     // Get the final size and format it
     var outputSize = document.getElementById("die" + numDies).value;
-    if (outputSize < 10.0 && outputSize > 0) {  // If we have a 'proper' number i.e. ".130"
+    outputSize = formatCheck(outputSize).toFixed(3);
-        outputSize = Number(outputSize);
+    var outputText = (outputSize) + "\" (" + toMillimetres(outputSize) + " mm)";
-    } else {  // re-format the number if it's 'wrong' i.e. "130"
-        outputSize = outputSize / 1000;
-    }
-    var outputText = outputSize + "\" (" + toMillimetres(outputSize) + " mm)";
     
     // Create and set the header
     subtitle.innerHTML = "For " + inputText + " to " + outputText;
-    reductionCount.innerHTML = "Across " + numDies + " reductions";
 
     // Change the name of the window to save the file with the same
     var pageTitle = document.getElementById("pageTitle");
@@ -331,4 +481,13 @@ function printScreen() {
 
     // Reset the page title back to normal
     pageTitle.innerHTML = title;
-}
+}
+
+function formatCheck(value) {
+    if (value < 10.0 && value > 0) {  // If we have a 'proper' number i.e. ".130"
+        value = Number(value);
+    } else {  // re-format the number if it's 'wrong' i.e. "130"
+        value = value / 1000;
+    }
+    return value;
+}

index.html

@@ -14,11 +14,8 @@
     <div class="content">
         <div class="printHeader">
             <p id="vanity">Taylor Courage's</p>
-            <h1>Draft Analysis</h1>
+            <h2>Draft Analysis</h2>
-            <h3 id="subtitle"></h3>
+            <h4 id="subtitle"></h4>
-            <p id="numReductions"></p>
-            <p>&HorizontalLine;</p>
-            <p></p>
         </div>
         <div class="header">
             <p id="vanity">Taylor Courage's</p>
@@ -54,11 +51,19 @@
                 <p>&nbsp;</p>
                 <p></p>
             </div>
+            <p><hr id="spacer1" /></p>
             <table class="output" id="output"></table>
-            <p>&nbsp;</p>
+            <p><hr id="spacer2" /></p>
-            <p id="outputChart"></p>
+            <div id="outputChart"></div>
+            <p><hr id="spacer3" /></p>
+            <div id="statistics"></div>
+            <p></p>
         </div>
     </div>
+    <div class="printFooter" align="center">
+        <p>&nbsp;</p>
+        <p>&copy; 2025 Taylor Courage</p>
+    </div>
     <div class="footer" align="center">
         <p>&nbsp;</p>
         <p>&copy; 2025 <a href="http://git.taylorcourage.net/Taylor">Taylor Courage</a></p>