de235c02a7
* 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>
66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
{% load helpers %}
|
|
|
|
<div id="map-chart" class="relative"></div>
|
|
<script>
|
|
// Colors
|
|
const lightBlue = "#C4B5FD";
|
|
const highlightBlue = "#8B5CF6";
|
|
const white = "#ffffff";
|
|
|
|
// Data maps
|
|
const countryMapData = {};
|
|
const countryMapColors = {};
|
|
const countryMap = {
|
|
{% for country in countries %}"{{country.country|safe|datamap_id}}": {{country.count}},
|
|
{% endfor %}
|
|
};
|
|
|
|
// Max session count will be full opacity
|
|
const maxSessionCount = Math.max(...Object.values(countryMap));
|
|
|
|
// Color scale starts from opacity 0.1 - 1.0, 0 sessions gets opacity 0
|
|
const minPercentage = 0.1
|
|
|
|
// Loop over country map and transform data for Datamaps use
|
|
const keys = Object.keys(countryMap);
|
|
const length = keys.length;
|
|
for (let i = 0; i < length; i++) {
|
|
countryMapData[keys[i]] = {
|
|
sessionCount: countryMap[keys[i]],
|
|
color: `rgba(124, 58, 237, ${countryMap[keys[i]] === 0 ? 0 : minPercentage + (countryMap[keys[i]] / maxSessionCount * (1 - minPercentage))})`
|
|
};
|
|
countryMapColors[keys[i]] = countryMapData[keys[i]].color;
|
|
}
|
|
|
|
// Create datamap
|
|
var geoMap = new Datamap({
|
|
element: document.getElementById('map-chart'),
|
|
projection: 'mercator',
|
|
responsive: true,
|
|
geographyConfig: {
|
|
borderColor: lightBlue,
|
|
highlightBorderColor: highlightBlue,
|
|
highlightBorderWidth: 1.5,
|
|
highlightFillColor: (geography) => geography.color || white,
|
|
highlightFillOpacity: 0.9,
|
|
popupTemplate: (geography, data) => '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong>: ' + data.sessionCount + ' sessions</div>'
|
|
|
|
},
|
|
fills: {
|
|
defaultFill: white
|
|
},
|
|
data: countryMapData,
|
|
aspectRatio: 0.68
|
|
});
|
|
geoMap.updateChoropleth(countryMapColors);
|
|
|
|
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> |