Added visually more appealing way of presenting the tuple frequencies

Author: mhkuu

stats/templates/stats/descriptive.html

@@ -7,6 +7,12 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css">
 
+<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
+<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
+
+<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.21/datatables.min.css"/>
+<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.21/datatables.js"></script>
+
 <style>
   .chart {
     height: 300px;
@@ -25,6 +31,13 @@
   #tables {
     clear: both;
   }
+
+  .dot {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    display: inline-block;
+  }
 </style>
 {% endblock %}
 
@@ -95,23 +108,30 @@ <h3>
         {% endfor %}
         </tbody>
     </table>
-</div>
 
 <h3>
     Tuple frequency
 </h3>
 
-<table class="table table-striped">
+<input id="toggle-text" type="checkbox" data-toggle="toggle"> Show text
+<table id="tuples-table" class="table table-striped">
     <thead>
         <tr>
-            <th>Tuple</th>
+            {% for language in languages %}
+            <th>{{ language.title }}</th>
+            {% endfor %}
             <th>Count</th>
         </tr>
     </thead>
     <tbody>
         {% for t, c in tuples %}
         <tr>
-            <td>{{ t|join:", " }} </td>
+            {% for tense in t %}
+            <td>
+                <span class="dot" title="{{ tense }}"></span>
+                <span class="txt">{{ tense }}</span>
+            </td>
+            {% endfor %}
             <td>{{ c }}</td>
         </tr>
         {% endfor %}
@@ -171,6 +191,25 @@ <h3>
   }
 
   Object.keys(counters).sort().forEach(graphLanguage);
+
+  $('.dot').each(function() {
+    $(this).css('background-color', colors[$(this).attr('title')]);
+  });
+
+  $('.txt').hide();
+
+  $('#toggle-text').change(function() {
+    $('.dot').toggle();
+    $('.txt').toggle();
+  });
+
+  var indexLastColumn = $('#tuples-table').find('tr')[0].cells.length - 1;
+  $('#tuples-table').DataTable({
+    order: [[ indexLastColumn, 'desc' ]],
+    paging: false,
+    info: false,
+  });
+
 </script>
 
 {% endblock %}

stats/views.py

@@ -287,12 +287,12 @@ def get_context_data(self, **kwargs):
 
         cache = prepare_label_cache(self.object.corpus)
 
-        for l in languages:
+        for language in languages:
             c_tenses = Counter()
             c_tensecats = Counter()
             n = 0
             labels = set()
-            for t in tenses[l.iso]:
+            for t in tenses[language.iso]:
                 tense_labels, tense_color, tense_category = get_tense_properties_from_cache(t, cache, len(labels))
 
                 # multiple labels are expected, handle single tense labels
@@ -310,12 +310,12 @@ def get_context_data(self, **kwargs):
                 c_tensecats.update([tense_category])
                 n += 1
 
-            counters_tenses[l] = c_tenses.most_common()
-            counters_tensecats[l] = c_tensecats
+            counters_tenses[language] = c_tenses.most_common()
+            counters_tensecats[language] = c_tensecats
 
         tensecat_table = defaultdict(list)
-        for l in languages:
-            tensecat_counts = counters_tensecats[l]
+        for language in languages:
+            tensecat_counts = counters_tensecats[language]
             for tensecat in distinct_tensecats:
                 if tensecat in list(tensecat_counts.keys()):
                     tensecat_table[tensecat].append(tensecat_counts[tensecat])