From 0592008c3a1820c72c10fb366b86a56f1b171c48 Mon Sep 17 00:00:00 2001
From: Taylor Courage <taylorjamescourage@gmail.com>
Date: Wed, 22 Jan 2025 13:33:04 -0500
Subject: [PATCH] Slight formatting change, bringing the summary to the top of
 the page and the graph to the bottom

---
 analyser.css | 10 +++++++++-
 analyser.js  | 32 ++++++++++++++++----------------
 index.html   |  8 ++++----
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/analyser.css b/analyser.css
index 8a88938..d6622b3 100644
--- a/analyser.css
+++ b/analyser.css
@@ -154,28 +154,36 @@
 
 #statsTable {
     margin: auto;
+    width: 90%;
+    padding-right: 13%;
 }
 
 #statsCol1 {
+    width: 28%;
     text-align: right;
 }
 
 #statsCol2 {
+    width: 5%;
     text-align: left;
     padding-left: 2%;
 }
 
 #statsCol3 {
-    width: 20%;
+    width: 11%;
+    text-align: right;
 }
 
 #statsCol4 {
+    width: 22%;
     text-align: right;
 }
 
 #statsCol5 {
+    width: 10%;
     text-align: left;
     padding-left: 2%;
+    padding-right: 15%;
 }
 
 
diff --git a/analyser.js b/analyser.js
index ab9c3a4..fa07106 100644
--- a/analyser.js
+++ b/analyser.js
@@ -167,8 +167,8 @@ function doMath() {
 
         dieCount[i - 1] = i;
     }
-    drawGraph();
     getStatistics();
+    drawGraph();
     
     // Add spacers
     document.getElementById("spacer1").style.display = 'block';
@@ -306,7 +306,7 @@ function getStatistics() {
     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>";
+    div.innerHTML = "<h5 align=\"center\" id=\"statsSummaryHeader\">Summary</h5><table id=\"statsTable\"></table>";
 
     var statsTable = document.getElementById("statsTable");
 
@@ -323,15 +323,15 @@ function getStatistics() {
     // COL 1
     c1.innerHTML = "# Of Reductions: ";
     c1.id = "statsCol1";
-    c2.innerHTML = numDies;
+    c2.innerHTML = "<b>" + numDies + "</b>";
     c2.id = "statsCol2";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
     c4.innerHTML = "Avg. Δ Factor: ";
     c4.id = "statsCol4";
-    c5.innerHTML = avgDelta;
+    c5.innerHTML = "<b>" + avgDelta + "</b>";
     c5.id = "statsCol5";
 
 
@@ -347,15 +347,15 @@ function getStatistics() {
     // COL 1
     c1.innerHTML = "Total R. Of Diameter: ";
     c1.id = "statsCol4";
-    c2.innerHTML = (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(3) + "\"";
+    c2.innerHTML = "<b>" + (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(3) + "\"</b>";
     c2.id = "statsCol5";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
-    c4.innerHTML = "------";
+    c4.innerHTML = "";
     c4.id = "statsCol4";
-    c5.innerHTML = "---";
+    c5.innerHTML = "";
     c5.id = "statsCol5";
 
 
@@ -371,15 +371,15 @@ function getStatistics() {
     // COL 1
     c1.innerHTML = "Total R. Of Area: ";
     c1.id = "statsCol1";
-    c2.innerHTML = totalROA + "%";
+    c2.innerHTML = "<b>" + totalROA + "%</b>";
     c2.id = "statsCol2";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
     c4.innerHTML = "Avg. R. of Area: ";
     c4.id = "statsCol4";
-    c5.innerHTML = avgROA + "%";
+    c5.innerHTML = "<b>" + avgROA + "%</b>";
     c5.id = "statsCol5";
 
 
@@ -393,17 +393,17 @@ function getStatistics() {
     c5 = row.insertCell(4); 
     
     // COL 1
-    c1.innerHTML = "Total Elong.: ";
+    c1.innerHTML = "Total Elongation: ";
     c1.id = "statsCol1";
-    c2.innerHTML = totalElong + "%";
+    c2.innerHTML = "<b>" + totalElong + "%</b>";
     c2.id = "statsCol2";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
     c4.innerHTML = "Avg. Elongation: ";
     c4.id = "statsCol4";
-    c5.innerHTML = avgElong + "%";
+    c5.innerHTML = "<b>" + avgElong + "%</b>";
     c5.id = "statsCol5";
 
 }
diff --git a/index.html b/index.html
index f648b8b..22ef76e 100644
--- a/index.html
+++ b/index.html
@@ -52,11 +52,11 @@
                 <p></p>
             </div>
             <p><hr id="spacer1" /></p>
-            <table class="output" id="output"></table>
-            <p><hr id="spacer2" /></p>
-            <div id="outputChart"></div>
-            <p><hr id="spacer3" /></p>
             <div id="statistics"></div>
+            <p><hr id="spacer2" /></p>
+            <table class="output" id="output"></table>
+            <p><hr id="spacer3" /></p>
+            <div id="outputChart"></div>
             <p></p>
         </div>
     </div>