Add ability to toggle between map chart and country/session table (#153)

* Add ability to toggle between geo map and table view

* Add back haaavk's bar visualisation for countries table

* Change text/location of map/table toggle buttons

* Add some common css to reusable class

* CSS consistency

* Use button, not span for interactive elements

Co-authored-by: R. Miles McCain <oci@sendmiles.email>

shynet/dashboard/static/dashboard/css/global.css

@@ -11,11 +11,6 @@
     max-height: 400px;
 }
 
-.force-limited-height {
-    max-height: 400px;
-    overflow: hidden;
-}
-
 .rf {
     text-align: right !important;
 }
@@ -28,6 +23,22 @@
     max-width: 0;
 }
 
+.min-w-48 {
+    min-width: 48px;
+}
+
+.geo-table {
+    display: none;
+}
+
+.geo-card--use-table-view .geo-map {
+    display: none;
+}
+
+.geo-card--use-table-view .geo-table {
+    display: inline-block;
+}
+
 :root {
     --color-neutral-000: white;
     --color-neutral-50: #F8FAFC;

shynet/dashboard/templates/dashboard/includes/map_chart.html

@@ -33,7 +33,7 @@
     }
 
     // Create datamap
-    const map = new Datamap({
+    var geoMap = new Datamap({
         element: document.getElementById('map-chart'),
         projection: 'mercator',
         responsive: true,
@@ -52,8 +52,15 @@
         data: countryMapData,
         aspectRatio: 0.68
     });
-    map.updateChoropleth(countryMapColors);
+    geoMap.updateChoropleth(countryMapColors);
     
-    // Handle resize. TODO: debounce?
-    window.onresize = () => map.resize();
+    let debounceTimeout
+    const debounce = (func, debounce) => {
+        return function(event){
+            if(debounceTimeout) clearTimeout(debounceTimeout);
+            debounceTimeout = setTimeout(func,debounce,event);
+        };
+    }
+
+    window.addEventListener("resize",debounce(() => geoMap.resize(), 100))
 </script>

shynet/dashboard/templates/dashboard/pages/service.html

@@ -97,7 +97,7 @@
     {% include 'dashboard/includes/time_chart.html' with data=stats.chart_data tooltip_format=stats.chart_tooltip_format granularity=stats.chart_granularity click_zoom=True %}
 </div>
 {% endif %}
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+<div id="card-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
     <div class="card ~neutral !low limited-height py-2">
         <table class="table">
             <thead class="text-sm">
@@ -118,7 +118,7 @@
                     <td>
                         <div class="flex justify-end items-center">
                             {{location.count|intcomma}}
-                            <span class="text-xs rf" style="min-width: 48px">
+                            <span class="text-xs rf min-w-48">
                                 ({{location.count|percent:stats.hit_count}})
                             </span>
                         </div>
@@ -132,10 +132,54 @@
             </tbody>
         </table>
     </div>
-    <div class="card ~neutral !low force-limited-height py-2 overflow-y-hidden">
-        <p class="text-sm font-semibold mx-2 p-2 border-b mb-2">Sessions by Geography</p>
+    <div class="geo-map card ~neutral !low py-2 overflow-y-hidden">
+        <p class="text-sm font-semibold p-2 border-b mb-2" style="color: var(--color-title)">
+            Sessions by Geography &nbsp
+            <button onclick="document.getElementById('card-grid').classList.add('geo-card--use-table-view')" class="text-xs select-none p-0 button ~urge !low">
+                (view table)
+            </button>
+        </p>
         {% include 'dashboard/includes/map_chart.html' with countries=stats.countries %}
     </div>
+    <div class="geo-table card ~neutral !low limited-height py-2">
+        <table class="table">
+            <thead class="text-sm">
+                <tr>
+                    <th>
+                        Country &nbsp
+                        <button onclick="document.getElementById('card-grid').classList.remove('geo-card--use-table-view'); geoMap.resize()" class="text-xs select-none p-0 button ~urge !low">
+                            (view map)
+                        </button>
+                    </th>
+                    <th class="rf">Sessions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for country in stats.countries %}
+                <tr>
+                    <td class="truncate w-full max-w-0 relative" title="{{country.country|country_name}}">
+                        {% include 'dashboard/includes/bar.html' with count=country.count max=stats.countries.0.count total=stats.session_count %}
+                        <div class="relative flex items-center">
+                            <span class="flex-none {{country.country|flag_class}}"></span> <span class="truncate">{{country.country|country_name}}</span>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="flex justify-end items-center">
+                            {{country.count|intcomma}}
+                            <span class="text-xs rf min-w-48">
+                                ({{country.count|percent:stats.session_count}})
+                            </span>
+                        </div>
+                    </td>
+                </tr>
+                {% empty %}
+                <tr>
+                    <td><span class="text-gray-600">No data yet...</span></td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
     <div class="card ~neutral !low limited-height py-2">
         <table class="table">
             <thead class="text-sm">
@@ -156,7 +200,7 @@
                     <td>
                         <div class="flex justify-end items-center">
                             {{referrer.count|intcomma}}
-                            <span class="text-xs rf" style="min-width: 48px">
+                            <span class="text-xs rf min-w-48">
                                 ({{referrer.count|percent:stats.session_count}})
                             </span>
                         </div>
@@ -190,7 +234,7 @@
                     <td>
                         <div class="flex justify-end items-center">
                             {{os.count|intcomma}}
-                            <span class="text-xs rf" style="min-width: 48px">
+                            <span class="text-xs rf min-w-48">
                                 ({{os.count|percent:stats.session_count}})
                             </span>
                         </div>
@@ -225,7 +269,7 @@
                     <td>
                         <div class="flex justify-end items-center">
                             {{browser.count|intcomma}}
-                            <span class="text-xs rf" style="min-width: 48px">
+                            <span class="text-xs rf min-w-48">
                                 ({{browser.count|percent:stats.session_count}})
                             </span>
                         </div>
@@ -259,7 +303,7 @@
                     <td>
                         <div class="flex justify-end items-center">
                             {{device_type.count|intcomma}}
-                            <span class="text-xs rf" style="min-width: 48px">
+                            <span class="text-xs rf min-w-48">
                                 ({{device_type.count|percent:stats.session_count}})
                             </span>
                         </div>