Skip to content

Commit

Permalink
Add ability to toggle between map chart and country/session table (#153)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@CasperVerswijvelt @milesmcc
CasperVerswijvelt and milesmcc authored Jul 20, 2021
1 parent 31cb616 commit de235c0
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 17 deletions.
21 changes: 16 additions & 5 deletions shynet/dashboard/static/dashboard/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,6 @@
max-height: 400px;
}

.force-limited-height {
max-height: 400px;
overflow: hidden;
}

.rf {
text-align: right !important;
}
Expand All @@ -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;
Expand Down
15 changes: 11 additions & 4 deletions shynet/dashboard/templates/dashboard/includes/map_chart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}

// Create datamap
const map = new Datamap({
var geoMap = new Datamap({
element: document.getElementById('map-chart'),
projection: 'mercator',
responsive: true,
Expand All @@ -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>
60 changes: 52 additions & 8 deletions shynet/dashboard/templates/dashboard/pages/service.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit de235c0

Please sign in to comment.