implemented rolling average for new case mode

eeeb76f4 · Michał Woźniak · 3f8c0d3d · eeeb76f4 · eeeb76f4 · eeeb76f4
Commit eeeb76f4 authored Mar 30, 2020 by Michał Woźniak
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ Remember this when somebody tells you again that they need Google Fonts ([nope](
 Some improvements have been suggested, no promises if and when they get implemented!

 - ~~normalize to population, show cases per million~~
- - make the new daily cases graph a rolling average with control over how many days/datapoints
+ - ~~make the new daily cases graph a rolling average with control over how many days/datapoints~~
 - chart global cases
 - chart cases requiring intensive medical care
 - chart deaths
--- a/covid.js
+++ b/covid.js
@@ -1079,6 +1079,26 @@ let updateChartData = (siteSelect) => {
        to_chart.data = to_chart.data.map(row => Math.round(row / population_ratio))
    }
    
+    // are we doing the moving average thing?
+    var avg_over = document.querySelector('input[type=number][name=chart-average]').value
+    if ( (document.querySelector('input[type=radio][name=chart-cases]:checked').value === 'new') && (avg_over > 1) ) {
+        to_chart.data = to_chart.data.reduce((acc, cur, idx, arr) => {
+            var half_avg_over = Math.floor(avg_over/2)
+            if (idx < half_avg_over) {
+                return acc;
+            }
+            if (idx >= (arr.length - half_avg_over)) {
+                return acc;
+            }
+            var mean = 0;
+            for (var j=(idx - half_avg_over); j<=(idx + half_avg_over); j++) {
+                mean += arr[j];
+            }
+            acc.push(mean/avg_over)
+            return acc
+        }, [])
+    }
+    
    // assign the data to the chart
    theChart.data.datasets[siteSelect.siteNo + 3] = to_chart
    
@@ -1245,7 +1265,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
    document.querySelectorAll('input[type=radio][name=chart-type]').forEach((node)=>{
        node.addEventListener('change', updateChartSettings)
    })
-    document.querySelectorAll('input[type=radio][name=chart-cases], input[type=radio][name=chart-start], input[type=radio][name=chart-values]').forEach((node)=>{
+    document.querySelectorAll('input[type=radio][name=chart-cases], input[type=radio][name=chart-start], input[type=radio][name=chart-values], input[type=number][name=chart-average]').forEach((node)=>{
        node.addEventListener('change', (e)=>{
            for (select_index=0; select_index<sitesSelects.length; select_index++) {
                updateChartData(sitesSelects[select_index])

--- a/index.html
+++ b/index.html
@@ -240,6 +240,27 @@
            .chart-config-container input#chart-values-per-million:checked ~ .chart-config-group .per-million {
                display:inline;
            }
+            .chart-config-group.chart-average {
+                display:none;
+            }
+            .chart-config-container input#chart-cases-new:checked ~ .chart-config-group.chart-average {
+                display:flex;
+            }
+            .chart-config-container #chart-average {
+                display: inline;
+                -webkit-appearance: none;
+                -moz-appearance: none;
+                appearance: none;
+                color:springgreen;
+                width: 4em;
+                text-align: center;
+                padding: 0.5em;
+                border: none;
+                border-radius:0.2em;
+                background:#404040;
+                box-shadow: inset 0px 0px 2px #333;
+                font-weight:bold;
+            }
        </style>
    </head>
    <body>
@@ -289,6 +310,11 @@
                <label for="chart-cases-cumulative">cumulative</label>
                <label for="chart-cases-new">new</label>
            </div>
+            <div class="chart-config-group chart-average">
+                <p>Average over:</p>
+                <input type="number" min="1" max="15" step="2" value="1" name="chart-average" id="chart-average"/>
+                <p>datapoints</p>
+            </div>
            <div class="chart-config-group">
                <p>Values:</p>
                <label for="chart-values-absolute">absolute</label>