From 6ee16a02d7a6a361e4cdb4d38f96c3bd6b7610ce Mon Sep 17 00:00:00 2001
From: stoffu <stoffu@protonmail.ch>
Date: Fri, 24 Aug 2018 15:49:38 +0900
Subject: [PATCH] ring-size: stop averaging, factor common code

---
 aeon-ring-size.html    | 175 ++++----------------------------------
 monero-ring-size.html  | 189 +++++------------------------------------
 ring-size.js           | 144 +++++++++++++++++++++++++++++++
 wownero-ring-size.html | 155 ++-------------------------------
 4 files changed, 188 insertions(+), 475 deletions(-)
 create mode 100644 ring-size.js

diff --git a/aeon-ring-size.html b/aeon-ring-size.html
index 577d8c3..c3bab73 100644
--- a/aeon-ring-size.html
+++ b/aeon-ring-size.html
@@ -24,168 +24,25 @@
 <script src="aeon-data-7.js"></script>
 <script src="aeon-data-8.js"></script>
 <script src="aeon-data-9.js"></script>
+<script src="ring-size.js"></script>
 
 <!-- Chart code -->
 <script>
-var chartData = chartData_0;
-chartData.shift();
-chartData = chartData.concat(chartData_1);
-chartData = chartData.concat(chartData_2);
-chartData = chartData.concat(chartData_3);
-chartData = chartData.concat(chartData_4);
-chartData = chartData.concat(chartData_5);
-chartData = chartData.concat(chartData_6);
-chartData = chartData.concat(chartData_7);
-chartData = chartData.concat(chartData_8);
-chartData = chartData.concat(chartData_9);
-
-var chartData_rs = [];
-var last_date = null;
-var histogram = [];
-histogram.length = 30;
-histogram.fill(0);
-
-for (var i = 0; i < chartData.length; ++i) {
-    var block_date = new Date(1000 * chartData[i][0]);
-    block_date.setHours(0);
-    block_date.setMinutes(0);
-    block_date.setSeconds(0);
-    if (last_date === null) {
-        last_date = block_date;
-    }
-    if (last_date < block_date || i == chartData.length - 1) {
-        chartData_rs.push({
-            "date": last_date,
-            "histogram": histogram.slice(),
-        });
-        last_date = block_date;
-        histogram.fill(0);
-    } else {
-        for (var j = 0; j < chartData[i][4].length; ++j) {
-            var ring_size = chartData[i][4][j][3];
-            if (ring_size >= histogram.length) {
-                var offset = histogram.length;
-                histogram.length = ring_size + 1;
-                for (var k = offset; k < histogram.length; ++k)
-                    histogram[k] = 0;
-            }
-            histogram[ring_size] += 1;
-        }
-    }
-}
-
-var chart = AmCharts.makeChart("chartdiv", {
-    "type": "serial",
-    "theme": "light",
-    "marginRight": 80,
-    "autoMarginOffset": 20,
-    "marginTop": 7,
-    "dataProvider": chartData_rs,
-    "valueAxes": [{
-        "stackType": "100%",
-        "axisAlpha": 0.2,
-        "dashLength": 1,
-        "position": "left",
-        "title": "percent",
-    }],
-    "legend": {
-        "align": "center",
-        "equalWidths": false,
-        "valueAlign": "left",
-        "valueText": "[[percents]]%",
-        "valueWidth": 100
-    },
-    "mouseWheelZoomEnabled": true,
-    "graphs": [],
-    "chartScrollbar": {
-        "autoGridCount": true,
-        "graph": "g",
-        "scrollbarHeight": 40
-    },
-    "chartCursor": {
-       "pan": false
-    },
-    "categoryField": "date",
-    "categoryAxis": {
-        "parseDates": true,
-        "axisColor": "#DADADA",
-        "dashLength": 1,
-        "minorGridEnabled": true
-    },
-    "export": {
-        "enabled": true
-    }
-});
-
-var average_days = 7;
-var levels = [1,2,3,4,5,6,7,8,9,10,15,20,50,100];
-for (var i = 0; i < chartData_rs.length; ++i) {
-    var count_per_level = new Uint32Array(levels.length + 1);
-    for (var j = 0; j < average_days; ++j) {
-        if (i < j)
-            continue;
-        for (var k = 1; k < histogram.length; ++k) {
-            var l = 0;
-            while (l < levels.length && k > levels[l])
-                ++l;
-            count_per_level[l] += chartData_rs[i - j].histogram[k];
-        }
-    }
-    for (var l = 0; l <= levels.length; ++l) {
-        chartData_rs[i]["level" + l] = count_per_level[l];
-    }
-}
-
-var color_table = [
-    "#d77575",
-    "#d7be75",
-    "#a6d775",
-    "#75d78d",
-    "#75d7d7",
-    "#758dd7",
-    "#a675d7",
-    "#d775be",
-];
-
-function get_label(l) {
-    if (l == 0)
-        return levels[0] == 1 ? "1" : ("1~" + levels[0])
-    else if (l == levels.length)
-        return ">" + levels[l - 1];
-    else if (levels[l - 1] + 1 < levels[l])
-        return (levels[l - 1] + 1) + "~" + levels[l];
-    else
-        return levels[l];
-}
-
-chart.graphs = [];
-for (var l = 0; l <= levels.length; ++l) {
-    chart.graphs.push({
-        "id": "g"+l,
-        "lineColor": color_table[l % color_table.length],
-        "showBalloon" : false,
-        "bullet": "round",
-        "bulletBorderAlpha": 1,
-        "bulletColor": "#FFFFFF",
-        "fillAlphas": 0.5,
-        "hideBulletsCount": 50,
-        "valueField": "level" + l,
-        "title": get_label(l) + ": ",
-        "useLineColorForBulletBorder": true,
-        "balloon":{
-            "cornerRadius": 10,
-        }
-    });
-}
-
-chart.addListener("rendered", zoomChart);
-zoomChart();
-
-// this method is called when chart is first inited as we listen for "rendered" event
-function zoomChart() {
-    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
-    chart.zoomToIndexes(0, chartData.length - 1);
-}
+var chart = get_chart(
+    [].concat(
+        chartData_0,
+        chartData_1,
+        chartData_2,
+        chartData_3,
+        chartData_4,
+        chartData_5,
+        chartData_6,
+        chartData_7,
+        chartData_8,
+        chartData_9,
+    ),
+    [1,2,3,4,5,6,7,8,9,10,15,20,50,100]
+);
 
 function togglePan() {
   chart.chartCursor.pan = document.getElementById("pan").checked;
diff --git a/monero-ring-size.html b/monero-ring-size.html
index 636918d..f49ebe6 100644
--- a/monero-ring-size.html
+++ b/monero-ring-size.html
@@ -31,175 +31,32 @@
 <script src="monero-data-14.js"></script>
 <script src="monero-data-15.js"></script>
 <script src="monero-data-16.js"></script>
+<script src="ring-size.js"></script>
 
 <!-- Chart code -->
 <script>
-var chartData = chartData_0;
-chartData.shift();
-chartData = chartData.concat(chartData_1);
-chartData = chartData.concat(chartData_2);
-chartData = chartData.concat(chartData_3);
-chartData = chartData.concat(chartData_4);
-chartData = chartData.concat(chartData_5);
-chartData = chartData.concat(chartData_6);
-chartData = chartData.concat(chartData_7);
-chartData = chartData.concat(chartData_8);
-chartData = chartData.concat(chartData_9);
-chartData = chartData.concat(chartData_10);
-chartData = chartData.concat(chartData_11);
-chartData = chartData.concat(chartData_12);
-chartData = chartData.concat(chartData_13);
-chartData = chartData.concat(chartData_14);
-chartData = chartData.concat(chartData_15);
-chartData = chartData.concat(chartData_16);
-
-var chartData_rs = [];
-var last_date = null;
-var histogram = [];
-histogram.length = 30;
-histogram.fill(0);
-
-for (var i = 0; i < chartData.length; ++i) {
-    var block_date = new Date(1000 * chartData[i][0]);
-    block_date.setHours(0);
-    block_date.setMinutes(0);
-    block_date.setSeconds(0);
-    if (last_date === null) {
-        last_date = block_date;
-    }
-    if (last_date < block_date || i == chartData.length - 1) {
-        chartData_rs.push({
-            "date": last_date,
-            "histogram": histogram.slice(),
-        });
-        last_date = block_date;
-        histogram.fill(0);
-    } else {
-        for (var j = 0; j < chartData[i][4].length; ++j) {
-            var ring_size = chartData[i][4][j][3];
-            if (ring_size >= histogram.length) {
-                var offset = histogram.length;
-                histogram.length = ring_size + 1;
-                for (var k = offset; k < histogram.length; ++k)
-                    histogram[k] = 0;
-            }
-            histogram[ring_size] += 1;
-        }
-    }
-}
-
-var chart = AmCharts.makeChart("chartdiv", {
-    "type": "serial",
-    "theme": "light",
-    "marginRight": 80,
-    "autoMarginOffset": 20,
-    "marginTop": 7,
-    "dataProvider": chartData_rs,
-    "valueAxes": [{
-        "stackType": "100%",
-        "axisAlpha": 0.2,
-        "dashLength": 1,
-        "position": "left",
-        "title": "percent",
-    }],
-    "legend": {
-        "align": "center",
-        "equalWidths": false,
-        "valueAlign": "left",
-        "valueText": "[[percents]]%",
-        "valueWidth": 100
-    },
-    "mouseWheelZoomEnabled": true,
-    "graphs": [],
-    "chartScrollbar": {
-        "autoGridCount": true,
-        "graph": "g",
-        "scrollbarHeight": 40
-    },
-    "chartCursor": {
-       "pan": false
-    },
-    "categoryField": "date",
-    "categoryAxis": {
-        "parseDates": true,
-        "axisColor": "#DADADA",
-        "dashLength": 1,
-        "minorGridEnabled": true
-    },
-    "export": {
-        "enabled": true
-    }
-});
-
-var average_days = 7;
-var levels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,20,30,40,50,100];
-for (var i = 0; i < chartData_rs.length; ++i) {
-    var count_per_level = new Uint32Array(levels.length + 1);
-    for (var j = 0; j < average_days; ++j) {
-        if (i < j)
-            continue;
-        for (var k = 1; k < histogram.length; ++k) {
-            var l = 0;
-            while (l < levels.length && k > levels[l])
-                ++l;
-            count_per_level[l] += chartData_rs[i - j].histogram[k];
-        }
-    }
-    for (var l = 0; l <= levels.length; ++l) {
-        chartData_rs[i]["level" + l] = count_per_level[l];
-    }
-}
-
-var color_table = [
-    "#d77575",
-    "#d7be75",
-    "#a6d775",
-    "#75d78d",
-    "#75d7d7",
-    "#758dd7",
-    "#a675d7",
-    "#d775be",
-];
-
-function get_label(l) {
-    if (l == 0)
-        return levels[0] == 1 ? "1" : ("1~" + levels[0])
-    else if (l == levels.length)
-        return ">" + levels[l - 1];
-    else if (levels[l - 1] + 1 < levels[l])
-        return (levels[l - 1] + 1) + "~" + levels[l];
-    else
-        return levels[l];
-}
-
-chart.graphs = [];
-for (var l = 0; l <= levels.length; ++l) {
-    chart.graphs.push({
-        "id": "g"+l,
-        "lineColor": color_table[l % color_table.length],
-        "showBalloon" : false,
-        "bullet": "round",
-        "bulletBorderAlpha": 1,
-        "bulletColor": "#FFFFFF",
-        "fillAlphas": 0.5,
-        "hideBulletsCount": 50,
-        "valueField": "level" + l,
-        "title": get_label(l) + ": ",
-        "useLineColorForBulletBorder": true,
-        "balloon":{
-            "cornerRadius": 10,
-        }
-    });
-}
-
-chart.addListener("rendered", zoomChart);
-zoomChart();
-
-// this method is called when chart is first inited as we listen for "rendered" event
-function zoomChart() {
-    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
-    chart.zoomToIndexes(0, chartData.length - 1);
-}
+var chart = get_chart(
+    [].concat(
+        chartData_0,
+        chartData_1,
+        chartData_2,
+        chartData_3,
+        chartData_4,
+        chartData_5,
+        chartData_6,
+        chartData_7,
+        chartData_8,
+        chartData_9,
+        chartData_10,
+        chartData_11,
+        chartData_12,
+        chartData_13,
+        chartData_14,
+        chartData_15,
+        chartData_16,
+    ),
+    [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,20,30,40,50,100]
+);
 
 function togglePan() {
   chart.chartCursor.pan = document.getElementById("pan").checked;
diff --git a/ring-size.js b/ring-size.js
new file mode 100644
index 0000000..e121118
--- /dev/null
+++ b/ring-size.js
@@ -0,0 +1,144 @@
+function get_chart(chartData, levels) {
+    chartData.shift();
+    var chartData_rs = [];
+    var block_date = null;
+    var num_txes_per_day = {};
+
+    for (var i = 0; i < chartData.length; ++i) {
+        var block_date_new = new Date(1000 * chartData[i][0]);
+        block_date_new.setHours(0);
+        block_date_new.setMinutes(0);
+        block_date_new.setSeconds(0);
+        if (block_date === null || block_date < block_date_new) {
+            block_date = block_date_new;
+            chartData_rs.push({
+                "date": block_date,
+                "histogram": [],
+            });
+            num_txes_per_day[block_date] = 0;
+        }
+        var e = chartData_rs[chartData_rs.length - 1];
+        var num_txes = chartData[i][4].length;
+        if (num_txes > 0) {
+            var ring_size = chartData[i][4][0][3];
+            while (ring_size >=  e.histogram.length) {
+                e.histogram.push(0);
+            }
+            e.histogram[ring_size] += num_txes;
+            num_txes_per_day[block_date] += num_txes;
+        }
+    }
+
+    for (var i = 0; i < chartData_rs.length; ++i) {
+        var count_per_level = new Uint32Array(levels.length + 1);
+        for (var k = 1; k < chartData_rs[i].histogram.length; ++k) {
+            var l = 0;
+            while (l < levels.length && k > levels[l])
+                ++l;
+            count_per_level[l] += chartData_rs[i].histogram[k];
+        }
+        for (var l = 0; l <= levels.length; ++l) {
+            chartData_rs[i]["level" + l] = count_per_level[l];
+        }
+    }
+
+    var chart = AmCharts.makeChart("chartdiv", {
+        "type": "serial",
+        "theme": "light",
+        "marginRight": 80,
+        "autoMarginOffset": 20,
+        "marginTop": 7,
+        "dataProvider": chartData_rs,
+        "valueAxes": [{
+            "stackType": "100%",
+            "axisAlpha": 0.2,
+            "dashLength": 1,
+            "position": "left",
+            "title": "percent",
+        }],
+        "legend": {
+            "align": "center",
+            "equalWidths": false,
+            "valueAlign": "left",
+            "valueText": "[[value]] ([[percents]]%)",
+            "equalWidths": true,
+            "fontSize": 14,
+            "valueWidth": 100
+        },
+        "mouseWheelZoomEnabled": true,
+        "graphs": [],
+        "chartScrollbar": {
+            "autoGridCount": true,
+            "graph": "g",
+            "scrollbarHeight": 40
+        },
+        "chartCursor": {
+            "pan": false,
+            categoryBalloonFunction: function(date) {
+                var num_txes = num_txes_per_day[date];
+                return AmCharts.formatDate(date, "DD MMM, YYYY") + "<br><b>" + num_txes + "</b> transaction" + (num_txes == 1 ? "" : "s");
+            },
+        },
+        "categoryField": "date",
+        "categoryAxis": {
+            "parseDates": true,
+            "axisColor": "#DADADA",
+            "dashLength": 1,
+            "minorGridEnabled": true
+        },
+        "export": {
+            "enabled": true
+        }
+    });
+
+    var color_table = [
+        "#d77575",
+        "#d7be75",
+        "#a6d775",
+        "#75d78d",
+        "#75d7d7",
+        "#758dd7",
+        "#a675d7",
+        "#d775be",
+    ];
+
+    function get_label(l) {
+        if (l == 0)
+            return levels[0] == 1 ? "1" : ("1~" + levels[0])
+        else if (l == levels.length)
+            return ">" + levels[l - 1];
+        else if (levels[l - 1] + 1 < levels[l])
+            return (levels[l - 1] + 1) + "~" + levels[l];
+        else
+            return levels[l];
+    }
+
+    for (var l = 0; l <= levels.length; ++l) {
+        chart.graphs.push({
+            "id": "g"+l,
+            "lineColor": color_table[l % color_table.length],
+            "showBalloon" : false,
+            "bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "fillAlphas": 0.5,
+            "hideBulletsCount": 50,
+            "valueField": "level" + l,
+            "title": get_label(l) + ": ",
+            "useLineColorForBulletBorder": true,
+            "balloon":{
+                "cornerRadius": 10,
+            }
+        });
+    }
+
+    // this method is called when chart is first inited as we listen for "rendered" event
+    function zoomChart() {
+        // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
+        chart.zoomToIndexes(0, chartData.length - 1);
+    }
+    chart.addListener("rendered", zoomChart);
+    zoomChart();
+
+    return chart;
+}
diff --git a/wownero-ring-size.html b/wownero-ring-size.html
index af1eecb..6bfc7fb 100644
--- a/wownero-ring-size.html
+++ b/wownero-ring-size.html
@@ -15,159 +15,14 @@
 <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
 <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
 <script src="wownero-data-0.js"></script>
+<script src="ring-size.js"></script>
 
 <!-- Chart code -->
 <script>
-var chartData = chartData_0;
-chartData.shift();
-
-var chartData_rs = [];
-var last_date = null;
-var histogram = [];
-histogram.length = 30;
-histogram.fill(0);
-
-for (var i = 0; i < chartData.length; ++i) {
-    var block_date = new Date(1000 * chartData[i][0]);
-    block_date.setHours(0);
-    block_date.setMinutes(0);
-    block_date.setSeconds(0);
-    if (last_date === null) {
-        last_date = block_date;
-    }
-    if (last_date < block_date || i == chartData.length - 1) {
-        chartData_rs.push({
-            "date": last_date,
-            "histogram": histogram.slice(),
-        });
-        last_date = block_date;
-        histogram.fill(0);
-    } else {
-        for (var j = 0; j < chartData[i][4].length; ++j) {
-            var ring_size = chartData[i][4][j][3];
-            if (ring_size >= histogram.length) {
-                var offset = histogram.length;
-                histogram.length = ring_size + 1;
-                for (var k = offset; k < histogram.length; ++k)
-                    histogram[k] = 0;
-            }
-            histogram[ring_size] += 1;
-        }
-    }
-}
-
-var chart = AmCharts.makeChart("chartdiv", {
-    "type": "serial",
-    "theme": "light",
-    "marginRight": 80,
-    "autoMarginOffset": 20,
-    "marginTop": 7,
-    "dataProvider": chartData_rs,
-    "valueAxes": [{
-        "stackType": "100%",
-        "axisAlpha": 0.2,
-        "dashLength": 1,
-        "position": "left",
-        "title": "percent",
-    }],
-    "legend": {
-        "align": "center",
-        "equalWidths": false,
-        "valueAlign": "left",
-        "valueText": "[[percents]]%",
-        "valueWidth": 100
-    },
-    "mouseWheelZoomEnabled": true,
-    "graphs": [],
-    "chartScrollbar": {
-        "autoGridCount": true,
-        "graph": "g",
-        "scrollbarHeight": 40
-    },
-    "chartCursor": {
-       "pan": false
-    },
-    "categoryField": "date",
-    "categoryAxis": {
-        "parseDates": true,
-        "axisColor": "#DADADA",
-        "dashLength": 1,
-        "minorGridEnabled": true
-    },
-    "export": {
-        "enabled": true
-    }
-});
-
-var average_days = 3;
-var levels = [1,7,8,9,10,11,12,13,14,15,20,50,100];
-for (var i = 0; i < chartData_rs.length; ++i) {
-    var count_per_level = new Uint32Array(levels.length + 1);
-    for (var j = 0; j < average_days; ++j) {
-        if (i < j)
-            continue;
-        for (var k = 1; k < histogram.length; ++k) {
-            var l = 0;
-            while (l < levels.length && k > levels[l])
-                ++l;
-            count_per_level[l] += chartData_rs[i - j].histogram[k];
-        }
-    }
-    for (var l = 0; l <= levels.length; ++l) {
-        chartData_rs[i]["level" + l] = count_per_level[l];
-    }
-}
-
-var color_table = [
-    "#d77575",
-    "#d7be75",
-    "#a6d775",
-    "#75d78d",
-    "#75d7d7",
-    "#758dd7",
-    "#a675d7",
-    "#d775be",
-];
-
-function get_label(l) {
-    if (l == 0)
-        return levels[0] == 1 ? "1" : ("1~" + levels[0])
-    else if (l == levels.length)
-        return ">" + levels[l - 1];
-    else if (levels[l - 1] + 1 < levels[l])
-        return (levels[l - 1] + 1) + "~" + levels[l];
-    else
-        return levels[l];
-}
-
-chart.graphs = [];
-for (var l = 0; l <= levels.length; ++l) {
-    chart.graphs.push({
-        "id": "g"+l,
-        "lineColor": color_table[l % color_table.length],
-        "showBalloon" : false,
-        "bullet": "round",
-        "bulletBorderAlpha": 1,
-        "bulletColor": "#FFFFFF",
-        "fillAlphas": 0.5,
-        "hideBulletsCount": 50,
-        "valueField": "level" + l,
-        "title": get_label(l) + ": ",
-        "useLineColorForBulletBorder": true,
-        "balloon":{
-            "cornerRadius": 10,
-        }
-    });
-}
-
-chart.addListener("rendered", zoomChart);
-zoomChart();
-
-// this method is called when chart is first inited as we listen for "rendered" event
-function zoomChart() {
-    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
-    chart.zoomToIndexes(0, chartData.length - 1);
-}
+var chart = get_chart(
+    chartData_0,
+    [1,7,8,9,10,11,12,13,14,15,20,50,100]
+);
 
 function togglePan() {
   chart.chartCursor.pan = document.getElementById("pan").checked;