Add a (ugly) Browser UI (#6)

Should display the same infos as the command line tools.

demo.js

@@ -0,0 +1,187 @@
+let NB_ITEMS = 5;
+let documentStats = null;
+
+function handleFileSelect(evt) {
+    const file = evt.target.files[0]; // FileList object
+
+    if (file.type !== "application/json") {
+        alert("Please select an JSON file");
+        return;
+    }
+    var reader = new FileReader();
+    // Closure to capture the file information.
+    reader.onload = function() {
+        processRaw(reader.result);
+        setTimeout(() => {
+            elId("area").value = "Inserting file content ...";
+            setTimeout(() => {
+                elId("area").value = reader.result;
+            }, 100);
+        }, 0);
+    };
+
+    // Read in the image file as a data URL.
+    reader.readAsText(file);
+}
+
+elId("file").addEventListener("change", handleFileSelect, false);
+
+elId("sub").onclick = () => {
+    processRaw(elId("area").value);
+};
+
+elId("nbItems").onchange = (e) => {
+    NB_ITEMS = e.target.value;
+    displayResults();
+};
+
+function processRaw(raw) {
+    documentStats = JSONSizeExplorer(raw);
+    displayResults();
+}
+
+function displayResults() {
+    if (!documentStats) {
+        return;
+    }
+    elId("res").style.display = "block";
+    elId("general").innerText =
+        "Total document size " + thousands(documentStats.totalLength);
+    addToList("keyStats", [
+        "Number of keys: " + thousands(documentStats.nbOfKey()),
+        "Number of unique keys: " +
+            thousands(Object.keys(documentStats.keys).length),
+        "Key size: " +
+            thousands(documentStats.keySize()) +
+            " - " +
+            documentStats.perc(documentStats.keySize()) +
+            "%",
+    ]);
+    drawMostFrequentKeys();
+    drawHeaviestKeys();
+    drawMostFrequentValues();
+    drawHeaviestValues();
+    drawMostFreqDup();
+    drawHeaviestDup();
+}
+
+function drawMostFrequentKeys() {
+    drawTableBody("freqKeys", "keySortedByCount", (k) => {
+        const size = k.length * documentStats.keys[k];
+        return [
+            limitLen(k),
+            thousands(documentStats.keys[k]),
+            thousands(size),
+            documentStats.perc(size),
+        ];
+    });
+}
+
+function drawHeaviestKeys() {
+    drawTableBody("heavyKeys", "keySortedBySize", (k) => {
+        const size = k.length * documentStats.keys[k];
+        return [
+            k,
+            thousands(documentStats.keys[k]),
+            thousands(size),
+            documentStats.perc(size),
+        ];
+    });
+}
+
+function drawMostFrequentValues() {
+    drawTableBody("freqValue", "valuesSortedByCount", (k) => {
+        const size = documentStats.values[k].length * k.length;
+        return [
+            limitLen(k),
+            thousands(documentStats.values[k].length),
+            thousands(size),
+            documentStats.perc(size) + "%",
+        ];
+    });
+}
+
+function drawHeaviestValues() {
+    drawTableBody("heavyValue", "valuesSortedBySize", (k) => {
+        const size = documentStats.values[k].length * k.length;
+        return [
+            limitLen(k),
+            thousands(documentStats.values[k].length),
+            thousands(size),
+            documentStats.perc(size) + "%",
+        ];
+    });
+}
+
+function drawMostFreqDup() {
+    drawTableBody("dupFreq", "freqDupsValue", (k) => {
+        const size = documentStats.keyValue[k] * (k.length - 3);
+        return [
+            limitLen(k),
+            thousands(documentStats.keyValue[k]),
+            thousands(size),
+            documentStats.perc(size) + "%",
+        ];
+    });
+}
+
+function drawHeaviestDup() {
+    drawTableBody("heavyDup", "biggestDupsValue", (k) => {
+        const size = documentStats.keyValue[k] * (k.length - 3);
+        return [
+            limitLen(k),
+            thousands(documentStats.keyValue[k]),
+            thousands(size),
+            documentStats.perc(size) + "%",
+        ];
+    });
+}
+
+function elId(id) {
+    return document.getElementById(id);
+}
+
+function drawTableBody(containerID, method, processor) {
+    let frag = document.createDocumentFragment();
+    documentStats[method]()
+        .slice(-NB_ITEMS)
+        .map(processor)
+        .forEach((row) => {
+            const tr = buildRow(row);
+            frag.appendChild(tr);
+        });
+
+    const node = elId(containerID);
+    node.innerHTML = "";
+    node.appendChild(frag);
+}
+
+function buildRow(arr) {
+    const tr = document.createElement("tr");
+    arr.forEach((item) => {
+        const td = document.createElement("td");
+        td.innerText = item;
+        tr.appendChild(td);
+    });
+    return tr;
+}
+
+function thousands(input) {
+    return new Intl.NumberFormat(navigator.language).format(input);
+}
+
+function limitLen(input) {
+    return input.length > 60 ? input.substr(0, 60) + "..." : input;
+}
+
+function addToList(containerId, items) {
+    const frag = document.createDocumentFragment();
+    items.forEach((item) => {
+        const li = document.createElement("li");
+        li.appendChild(document.createTextNode(item));
+        frag.appendChild(li);
+    });
+    const node = elId(containerId);
+    node.innerHTML = "";
+    node.appendChild(frag);
+}

index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>JSON Size Explorer</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+</head>
+<body>
+<input type="file" id="file"/>
+<textarea id="area"></textarea>
+<button id="sub">Submit</button>
+<input type="number" id="nbItems" value="5">
+<div id="res" class="container" style="display: none;">
+
+        <div class="flex-row">
+            <h2>General</h2>
+            <div id="general">
+            </div>
+        </div>
+        <div class="flex-row">
+            <h2>Keys</h2>
+            <div>
+                <ul id="keyStats">
+
+                </ul>
+            </div>
+            <h3>Most Frequently used keys</h3>
+            <table class="table table-striped table-sm">
+                <thead>
+                <tr>
+                    <th>Key Name</th>
+                    <th>Count</th>
+                    <th>Total Size</th>
+                    <th>%</th>
+                </tr>
+                </thead>
+                <tbody id="freqKeys"></tbody>
+            </table>
+            <h3>Heaviest keys</h3>
+            <table class="table table-striped table-sm">
+                <thead>
+                <tr>
+                    <th>Key Name</th>
+                    <th>Count</th>
+                    <th>Total Size</th>
+                    <th>%</th>
+                </tr>
+                </thead>
+                <tbody id="heavyKeys"></tbody>
+            </table>
+        </div>
+        <div class="flex-row">
+            <h2>Values</h2>
+            <div id="valueStats"></div>
+            <h3>Most Frequent Values</h3>
+            <table class="table table-striped table-sm">
+                <thead>
+                <tr>
+                    <th>Value</th>
+                    <th>Count</th>
+                    <th>Total Size</th>
+                    <th>%</th>
+                </tr>
+                </thead>
+                <tbody id="freqValue"></tbody>
+            </table>
+            <h3>Heaviest Values</h3>
+            <table class="table table-striped table-sm">
+                <thead>
+                <tr>
+                    <th>Value</th>
+                    <th>Count</th>
+                    <th>Total Size</th>
+                    <th>%</th>
+                </tr>
+                </thead>
+                <tbody id="heavyValue"></tbody>
+            </table>
+        </div>
+        <div class="flex-row">
+            <h2>Duplicates Key/Values</h2>
+            <h3>Most Frequent Values</h3>
+            <table class="table table-striped table-sm">
+                <thead>
+                <tr>
+                    <th>Key @#@ Value</th>
+                    <th>Count</th>
+                    <th>Total Size</th>
+                    <th>%</th>
+                </tr>
+                </thead>
+                <tbody id="dupFreq"></tbody>
+            </table>
+            <h3>Heaviest Values</h3>
+            <table class="table table-striped table-sm">
+                <thead>
+                <tr>
+                    <th>Key @#@ Value</th>
+                    <th>Count</th>
+                    <th>Total Size</th>
+                    <th>%</th>
+                </tr>
+                </thead>
+                <tbody id="heavyDup"></tbody>
+            </table>
+        </div>
+    </div>
+    <script src="dist/json-size-explorer.js" type="application/javascript"></script>
+    <script src="demo.js" type="application/javascript"></script>
+</body>
+</html>