mirror of
https://github.com/gchq/CyberChef.git
synced 2025-04-20 23:06:16 -04:00
Frequency Distribution operation now displays an HTML table
This commit is contained in:
parent
02a397d2ae
commit
766310e2c7
1 changed files with 13 additions and 8 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue