From 69073c9d997ca48e1f994c3678b2eb6ca7dff5f5 Mon Sep 17 00:00:00 2001
From: Alex Blewitt <alex.blewitt@gmail.com>
Date: Sun, 7 Feb 2021 15:51:20 +0000
Subject: [PATCH 1/2] Add ASCII output for frequency table

When showing results in the frequency distribution table, it's quite
helpful to see the distribution of the ASCII letters, if any. Provide an
option to show this to show the characters alongside the code.

Fixes #1169.

Signed-off-by: Alex Blewitt <alex.blewitt@gmail.com>
---
 src/core/operations/FrequencyDistribution.mjs | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/core/operations/FrequencyDistribution.mjs b/src/core/operations/FrequencyDistribution.mjs
index 685694cc..0c4c1563 100644
--- a/src/core/operations/FrequencyDistribution.mjs
+++ b/src/core/operations/FrequencyDistribution.mjs
@@ -31,6 +31,11 @@ class FrequencyDistribution extends Operation {
                 "name": "Show 0%s",
                 "type": "boolean",
                 "value": true
+            },
+            {
+                "name": "Show ASCII",
+                "type": "boolean",
+                "value": true
             }
         ];
     }
@@ -77,6 +82,7 @@ class FrequencyDistribution extends Operation {
      */
     present(freq, args) {
         const showZeroes = args[0];
+        const showAscii = args[1];
         // Print
         let output = `<canvas id='chart-area'></canvas><br>
 Total data length: ${freq.dataLength}
@@ -97,7 +103,17 @@ Byte   Percentage
 
         for (let i = 0; i < 256; i++) {
             if (freq.distribution[i] || showZeroes) {
-                output += " " + Utils.hex(i, 2) + "    (" +
+                let c = " ";
+                if (showAscii) {
+                    if (i <= 32) {
+                        c = String.fromCharCode(0x2400 + i);
+                    } else  if (i === 127) {
+                        c = String.fromCharCode(0x2421);
+                    } else {
+                        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";
             }

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 2/2] 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;
     }