Frequency Distribution operation now displays an HTML table

This commit is contained in:
n1474335 2021-02-09 14:46:04 +00:00
parent 02a397d2ae
commit 766310e2c7
1 changed files with 13 additions and 8 deletions

View File

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