From 766310e2c731b705f53e024cc74224780f195bbd Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Tue, 9 Feb 2021 14:46:04 +0000
Subject: [PATCH] Frequency Distribution operation now displays an HTML table

---
 src/core/operations/FrequencyDistribution.mjs | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/core/operations/FrequencyDistribution.mjs b/src/core/operations/FrequencyDistribution.mjs
index 0c4c1563..a9c10390 100644
--- a/src/core/operations/FrequencyDistribution.mjs
+++ b/src/core/operations/FrequencyDistribution.mjs
@@ -81,15 +81,14 @@ class FrequencyDistribution extends Operation {
      * @returns {html}
      */
     present(freq, args) {
-        const showZeroes = args[0];
-        const showAscii = args[1];
+        const [showZeroes, showAscii] = args;
+
         // Print
         let output = `<canvas id='chart-area'></canvas><br>
 Total data length: ${freq.dataLength}
 Number of bytes represented: ${freq.bytesRepresented}
 Number of bytes not represented: ${256 - freq.bytesRepresented}
 
-Byte   Percentage
 <script>
     var canvas = document.getElementById("chart-area"),
         parentRect = canvas.parentNode.getBoundingClientRect(),
@@ -99,11 +98,13 @@ Byte   Percentage
     canvas.height = parentRect.height * 0.9;
 
     CanvasComponents.drawBarChart(canvas, scores, "Byte", "Frequency %", 16, 6);
-</script>`;
+</script>
+<table class="table table-hover table-sm">
+    <tr><th>Byte</th>${showAscii ? "<th>ASCII</th>" : ""}<th>Percentage</th><th></th></tr>`;
 
         for (let i = 0; i < 256; i++) {
             if (freq.distribution[i] || showZeroes) {
-                let c = " ";
+                let c = "";
                 if (showAscii) {
                     if (i <= 32) {
                         c = String.fromCharCode(0x2400 + i);
@@ -113,12 +114,16 @@ Byte   Percentage
                         c = String.fromCharCode(i);
                     }
                 }
-                output += " " + Utils.hex(i, 2) + "  " + c + " (" +
-                    (freq.percentages[i].toFixed(2).replace(".00", "") + "%)").padEnd(8, " ") +
-                    Array(Math.ceil(freq.percentages[i])+1).join("|") + "\n";
+                const bite = `<td>${Utils.hex(i, 2)}</td>`,
+                    ascii = showAscii ? `<td>${c}</td>` : "",
+                    percentage = `<td>${(freq.percentages[i].toFixed(2).replace(".00", "") + "%").padEnd(8, " ")}</td>`,
+                    bars = `<td>${Array(Math.ceil(freq.percentages[i])+1).join("|")}</td>`;
+
+                output += `<tr>${bite}${ascii}${percentage}${bars}</tr>`;
             }
         }
 
+        output += "</table>";
         return output;
     }