Lets user adjust the amount of smoothing on distribution charts (#1705)

* variable smooth dropdown

* with drop

* Variable smooth

* keep that as is

* var name

* extra char

cmd/server/assets/realmadmin/_stats_keyserver.html

@@ -18,15 +18,15 @@ <h5 class="card-title">Publish requests by OS</h5>
     <p class="text-center font-italic w-100 mt-5">Loading chart...</p>
   </div>
   <div class="card-body">
-    <h5 class="card-title">TEK age distribution (7 day sum)</h5>
+    <h5 class="card-title">TEK age distribution <span class="sum-title">(7 day sum)</span></h5>
   </div>
   <div id="keyserver_tek_chart_div" class="h-100 w-100" style="min-height:325px;">
     <p class="text-center font-italic w-100 mt-5">Loading chart...</p>
   </div>
   <div class="slidecontainer" id="tek_slide_div">
   </div>
   <div class="card-body">
-    <h5 class="card-title">Onset to upload distribution (7 day sum)</h5>
+    <h5 class="card-title">Onset to upload distribution <span class="sum-title">(7 day sum)</span></h5>
   </div>
   <div id="keyserver_onset_chart_div" class="h-100 w-100" style="min-height:325px;">
     <p class="text-center font-italic w-100 mt-5">Loading chart...</p>
@@ -82,26 +82,46 @@ <h5 class="modal-title">Key server stats</h5>
 
 <script type="text/javascript">
   let stats;
+  let smoothing = 7;
+
+  let $slider =
+    $(`<input type="range" class="slider w-100" id="tek_slider">`);
+  let $onsetSlider =
+    $(`<input type="range" class="slider w-100" id="onset_slider">`);
+
+  $(function() {
+    let $smoothDrop = $('#smooth-drop');
+
+    $smoothDrop.on("click", function(event) {
+      event.preventDefault();
+      smoothing = $smoothDrop.val();
+      $('.sum-title').text(`(${smoothing} day sum)`)
+
+      let max = $slider.attr('max')
+      $slider.attr('min', Math.min(smoothing, max));
+      $onsetSlider.attr('min', Math.min(smoothing, max));
+      $slider.val(max);
+      $onsetSlider.val(max);
+      $slider.trigger("input");
+      $onsetSlider.trigger("input");
+    });
+  });
 
   google.charts.load('current', {
     packages: ['corechart'],
     callback: drawRealmCharts,
   });
 
-  let $slider =
-    $(`<input type="range" min="8" class="slider w-100" id="tek_slider">`);
-
-  let $onsetSlider =
-    $(`<input type="range" min="8" class="slider w-100" id="onset_slider">`);
-
   function drawRealmCharts() {
     $.ajax({
       url: '/stats/realm/key-server.json',
       dataType: 'json',
     })
     .done(function(data, status, xhr) {
+      $slider.attr('min', Math.min(smoothing, data.length));
       $slider.attr('max', data.length);
       $slider.attr('value',data.length);
+      $slider.attr('min', Math.min(smoothing, data.length));
       $onsetSlider.attr('max', data.length);
       $onsetSlider.attr('value',data.length);
 
@@ -266,7 +286,7 @@ <h5 class="modal-title">Key server stats</h5>
         showTextEvery: 1,
       },
       titlePosition: "out",
-      title: "7 days from " + stats[0].day.split("T")[0],
+      title: `${smoothing} days from ` + stats[0].day.split("T")[0],
     };
 
     tekChart = new google.visualization.ColumnChart($div.get(0));
@@ -286,10 +306,10 @@ <h5 class="modal-title">Key server stats</h5>
     dataTable.addColumn({type:'string', role:'style'})
     dataTable.addColumn({type:'string', role:'annotation'})
 
-    // sum over last 7 days for smoothing
+    // sum over last ${smoothing} days
     let table = new Array(stats[dateIndex].tek_age_distribution.length).fill(0);
     let i;
-    for (i = dateIndex; i <= dateIndex + 7 && i < stats.length; i++) {
+    for (i = dateIndex; i <= dateIndex + smoothing && i < stats.length; i++) {
       let row = stats[i];
       let j;
       for (j = 0; j < row.tek_age_distribution.length; j++) {
@@ -338,7 +358,7 @@ <h5 class="modal-title">Key server stats</h5>
         showTextEvery: 1,
       },
       titlePosition: "out",
-      title: "7 days from " + stats[0].day.split("T")[0],
+      title: `${smoothing} days from ` + stats[0].day.split("T")[0],
     };
 
     onsetChart = new google.visualization.ColumnChart($div.get(0));
@@ -358,10 +378,10 @@ <h5 class="modal-title">Key server stats</h5>
     dataTable.addColumn({type:'string', role:'style'})
     dataTable.addColumn({type:'string', role:'annotation'})
 
-    // sum over last 7 days for smoothing
+    // sum over last ${smoothing} days
     let table = new Array(stats[dateIndex].onset_to_upload_distribution.length).fill(0);
     let i;
-    for (i = dateIndex; i <= dateIndex + 7 && i < stats.length; i++) {
+    for (i = dateIndex; i <= dateIndex + smoothing && i < stats.length; i++) {
       let row = stats[i];
       let j;
       for (j = 0; j < row.onset_to_upload_distribution.length; j++) {
@@ -384,7 +404,7 @@ <h5 class="modal-title">Key server stats</h5>
     $('#tek_slide_div').append($slider)
     $slider.on("input", function(event) {
         let indx = stats.length - $slider.val();
-        tekOptions.title = "7 days from " + stats[indx].day.split("T")[0];
+        tekOptions.title = `${smoothing} days from ` + stats[indx].day.split("T")[0];
         tekOptions.animation = {
           startup: false,
           duration: 500,
@@ -398,7 +418,7 @@ <h5 class="modal-title">Key server stats</h5>
     $('#onset_slide_div').append($onsetSlider)
     $onsetSlider.on("input", function(event) {
         let indx = stats.length - $onsetSlider.val();
-        onsetOptions.title = "7 days from " + stats[indx].day.split("T")[0];
+        onsetOptions.title = `${smoothing} days from ` + stats[indx].day.split("T")[0];
         onsetOptions.animation = {
           startup: false,
           duration: 500,

cmd/server/assets/realmadmin/stats.html

@@ -21,6 +21,20 @@ <h1>Realm stats</h1>
       The data below shows realm statistics and visualizations.
     </p>
 
+  <form class="form-inline mb-2">
+    <div class="form-group">
+      <label for="smooth-drop">Distribution smoothing</label>
+      <select class="custom-select ml-1" name="smooth-drop" id="smooth-drop"
+      data-toggle="tooltip" title="Distribution graphs will be aggregated as the sum of this many days.">
+        <option value="1">1 day</option>
+        <option value="7" selected>1 week</option>
+        <option value="14">2 weeks</option>
+        <option value="28">4 weeks</option>
+      </select>
+    </div>
+  </form>
+
+
     {{template "realmadmin/_stats_codes" .}}
 
     <div class="row">

cmd/server/assets/static/js/application.js

@@ -1051,4 +1051,4 @@ function redrawCharts(chartsData, timeout) {
       c.chart.draw(c.data, c.options);
     }
   }
-}
+}