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}
*/
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;
}