Added GeoCharts to visualize where the volunteers are from

portal/common.py

@@ -496,11 +496,24 @@ def get_volunteer_breakdown():
             .values("region")
             .annotate(count=Count("id"))
         )
-        result = [[data["region"], data["count"]] for data in volunteers_by_region]
+        # Map continents to representative countries for GeoChart
+        continent_to_country = {
+            "North America": "United States",
+            "South America": "Brazil", 
+            "Europe": "Germany",
+            "Africa": "Nigeria",
+            "Asia": "India",
+            "Oceania": "Australia",
+        }
+        result = []
+        for data in volunteers_by_region:
+            region = data["region"]
+            country = continent_to_country.get(region, region)  # fallback to region name if not found
+            result.append([country, data["count"]])
         volunteer_breakdown.append(
             {
                 "title": "Volunteers By Region",
-                "columns": ["Region", "Volunteers"],
+                "columns": ["Country", "Volunteers"],
                 "data": result,
                 "chart_id": "volunteers_by_region",
             }

templates/portal/stats.html

@@ -6,7 +6,7 @@
     <!--Google Charts-->
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
-    google.charts.load('current', { 'packages': ['corechart', 'bar'] });
+    google.charts.load('current', { 'packages': ['corechart', 'bar', 'geochart'] });
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
         {% include "sponsorship/sponsorship_charts.html" %}

templates/volunteer/volunteer_charts.html

@@ -5,6 +5,24 @@
         ['{{ data.0 }}', {{ data.1 }},],
     {% endfor %}
     ]);
+
+    {% if breakdown.chart_id == 'volunteers_by_region' %}
+    // GeoChart for volunteers by region
+    var options = {
+        title: '{{ breakdown.title }}',
+        colorAxis: {colors: ['#e3f2fd', '#2196f3', '#0d47a1']},
+        backgroundColor: '#f5f5f5',
+        datalessRegionColor: '#ffffff',
+        defaultColor: '#f5f5f5',
+        height: 500,
+        width: '100%',
+        region: 'world',  // Focus on world view
+        resolution: 'countries'
+    };
+    var chart = new google.visualization.GeoChart(document.getElementById('{{ breakdown.chart_id }}'));
+    chart.draw(data, options);
+    {% else %}
+    // Bar chart for other breakdowns
     var paddingHeight = 120;
     var rowHeight = 40;
     var chartHeight = Math.max(500, (data.getNumberOfRows() * rowHeight) + paddingHeight);
@@ -24,4 +42,5 @@
     };
     var chart = new google.charts.Bar(document.getElementById('{{ breakdown.chart_id }}'));
     chart.draw(data, google.charts.Bar.convertOptions(options));
+    {% endif %}
 {% endfor %}