Stats page improvements

Various improvements to the stats page:

Added a legend of top chart items to the footer of bands and modes charts. Fixes #408

Added a (cached) count of decoded frames to the Satellites table. Fixes #400

Added a note about the cached nature of stats. Fixes #403

Signed-off-by: Corey Shields <cshields@gmail.com>

db/base/utils.py

@@ -7,7 +7,7 @@ from decimal import Decimal
 
 from django.conf import settings
 from django.core.cache import cache
-from django.db.models import Count, Max
+from django.db.models import Count, Max, Q
 from django.utils.timezone import make_aware
 from influxdb import InfluxDBClient
 from satnogsdecoders import __version__ as decoders_version
@@ -308,6 +308,8 @@ def cache_statistics():
     satellites = Satellite.objects \
                           .values('name', 'norad_cat_id', 'id') \
                           .annotate(count=Count('telemetry_data'),
+                                    decoded=Count('telemetry_data',
+                                                  filter=Q(telemetry_data__is_decoded=True)),
                                     latest_payload=Max('telemetry_data__timestamp')) \
                           .order_by('-count')
 

db/static/js/stats.js

@@ -161,13 +161,11 @@ $(document).ready(function() {
 
             // Global chart configuration
             Chart.defaults.global.legend.display = false;
-            Chart.defaults.global.title.display = true;
-            Chart.defaults.global.title.fontSize = 16;
-            Chart.defaults.global.title.fontColor= '#444';
+            Chart.defaults.global.title.display = false;
 
             //Mode Chart
             var mode_c = document.getElementById('modes');
-            new Chart(mode_c, {
+            var mode_chart = new Chart(mode_c, {
                 type: 'doughnut',
                 data: {
                     labels: data.mode_label,
@@ -189,13 +187,29 @@ $(document).ready(function() {
                             minFontSize: 1,
                             maxFontSize: 20,
                         }
+                    },
+                    legend: false,
+                    legendCallback: function(chart) {
+                        var legendHtml = [];
+                        legendHtml.push('<dl class="row my-0">');
+                        var item = chart.data.datasets[0];
+                        for (var i=0; i < item.data.length; i++) {
+                            if (item.data[i] > 9) {
+                                legendHtml.push('<dt class="col-sm-8">' + chart.data.labels[i] + '</dt>');
+                                legendHtml.push('<dd class="col-sm-4 my-0">' + item.data[i] + '</dd>');
+                            }
+                        }
+            
+                        legendHtml.push('</dl>');
+                        return legendHtml.join('');
                     }
                 }
             });
+            $('#modes-footer').html(mode_chart.generateLegend());
 
             //Band Chart
             var band_c = document.getElementById('bands');
-            new Chart(band_c, {
+            var band_chart = new Chart(band_c, {
                 type: 'doughnut',
                 data: {
                     labels: data.band_label,
@@ -217,9 +231,25 @@ $(document).ready(function() {
                             minFontSize: 1,
                             maxFontSize: 20,
                         }
+                    },
+                    legend: false,
+                    legendCallback: function(chart) {
+                        var legendHtml = [];
+                        legendHtml.push('<dl class="row my-0">');
+                        var item = chart.data.datasets[0];
+                        for (var i=0; i < item.data.length; i++) {
+                            if (item.data[i] > 9) {
+                                legendHtml.push('<dt class="col-sm-8">' + chart.data.labels[i] + '</dt>');
+                                legendHtml.push('<dd class="col-sm-4 my-0">' + item.data[i] + '</dd>');
+                            }
+                        }
+            
+                        legendHtml.push('</dl>');
+                        return legendHtml.join('');
                     }
                 }
             });
+            $('#bands-footer').html(band_chart.generateLegend());
 
             //HUD Stats
             $('#stats-alive').html(data.transmitters_alive);

db/templates/base/stats.html

@@ -52,6 +52,7 @@
   <!-- Dashboard panel -->
   <div class="tab-pane fade show active" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
     <div class="container-fluid">
+      <div class="row px-2 pb-2 text-sm">Please note that for performance reasons, some statistics may not be real time.</div>
       <div class="row">
         <div class="col-xs-12 col-md-4">
           <div class="small-box small-box-satnogs">
@@ -108,6 +109,7 @@
             <div class="card-body">
               <canvas id="modes" width="300" height="300"></canvas>
             </div>
+            <div class="card-footer text-sm" id="modes-footer"></div>
           </div>
         </div>
         <div class="col-xs-12 col-md-4">
@@ -118,6 +120,7 @@
             <div class="card-body">
               <canvas id="bands" width="300" height="300"></canvas>
             </div>
+            <div class="card-footer text-sm" id="bands-footer"></div>
           </div>
         </div>
       </div>
@@ -134,6 +137,7 @@
             <th>Norad ID</th>
             <th>Name</th>
             <th>Data</th>
+            <th>Decoded</th>
             <th>Latest</th>
           </tr>
         </thead>
@@ -148,6 +152,7 @@
             <td>{{sat.name}}</td>
             {% endif %}
             <td>{{sat.count}}</td>
+            <td>{{sat.decoded}}</td>
             <td>{{sat.latest_payload|date:"Y-m-d H:i:s"}}</td>
           </tr>
           {% endif %}