Initial commit

static/css/main.css

@@ -0,0 +1,51 @@
+.github-corner svg{
+    position: absolute;
+    right: 0;
+    top: 0;
+    mix-blend-mode: darken;
+    color: #ffffff;
+    fill: #000000;
+}
+
+.github-corner:hover .octo-arm {
+    animation:octocat-wave .56s;
+}
+
+@keyframes octocat-wave{
+    0%, 100% {
+        transform:rotate(0);
+    }
+    20%, 60% {
+        transform:rotate(-20deg);
+    }
+    40%, 80% {
+        transform:rotate(10deg);
+    }
+}
+
+#chart-wrapper {
+
+    height: 50%;
+    width: 50%;
+    display: inline-block;
+}
+
+#info-table {
+    display: inline-block;
+    vertical-align: top;
+}
+
+#info-table th {
+    text-align: left;
+}
+
+#info-table td {
+    text-align: right;
+}
+
+#report_wrapper {
+    text-align: center;
+    background-color: whitesmoke;
+    display: block;
+    padding: 30px 0;
+}

static/js/report.js

@@ -0,0 +1,95 @@
+var xhttp = new XMLHttpRequest();
+
+xhttp.onreadystatechange = function() {
+    if (this.readyState === 4 && this.status === 200) {
+
+        console.log("Received: " + this.responseText);
+
+        drawCharts(JSON.parse(this.responseText))
+    }
+};
+xhttp.open("GET", "./json_chart", true);
+xhttp.send();
+
+function drawCharts(rData) {
+
+    var dataSetSize = [];
+    var dataSetCount = [];
+    var labels = [];
+    var colors = [];
+
+    var otherSize = 0;
+    var otherCount = 0;
+
+    for(var ext in rData["ext_sizes"]) {
+        //Ignore file sizes below 0.5%
+        if (rData["ext_sizes"][ext] < 0.005 * rData["total_size"]) {
+
+            otherSize += rData["ext_sizes"][ext];
+            otherCount += rData["ext_count"][ext];
+
+        } else {
+            dataSetSize.push(rData["ext_sizes"][ext]);
+            dataSetCount.push(rData["ext_count"][ext]);
+            labels.push(ext + " x" + rData["ext_count"][ext] + " (" + humanFileSize(rData["ext_sizes"][ext]) + ")");
+            colors.push(getRandomColor())
+        }
+    }
+
+    if(otherCount !== 0) {
+        colors.push(getRandomColor());
+        labels.push("other x" + otherCount + " (" + humanFileSize(otherSize) + ")");
+        dataSetSize.push(otherSize);
+    }
+
+    var ctx = document.getElementById('typesChart').getContext('2d');
+
+    var fileTypePieChart = new Chart(ctx,{
+        type: 'pie',
+        data: {
+            datasets: [{
+                data: rData["total_size"] === 0 ? dataSetCount : dataSetSize,
+                backgroundColor: colors
+            }],
+
+            labels: labels
+
+        },
+        options: {
+            title: {
+                display: true,
+                text: "File types for " + rData["base_url"] + " - " + humanFileSize(rData["total_size"])
+            }
+        }
+    });
+}
+
+/**
+ * https://stackoverflow.com/questions/1484506
+ */
+function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+/**
+ * https://stackoverflow.com/questions/10420352
+ */
+function humanFileSize(bytes) {
+    var thresh = 1000;
+    if(Math.abs(bytes) < thresh) {
+        return bytes + ' B';
+    }
+    var units = ['kB','MB','GB','TB','PB','EB','ZB','YB'];
+    var u = -1;
+    do {
+        bytes /= thresh;
+        ++u;
+    } while(Math.abs(bytes) >= thresh && u < units.length - 1);
+
+    return bytes.toFixed(1) + ' ' + units[u];
+}