From 28c4d789cfbb7d5d7201feb7acc2206646f651d4 Mon Sep 17 00:00:00 2001
From: Arnav Angarkar <arnav.angarkar20@gmail.com>
Date: Mon, 10 Nov 2025 00:20:42 +0530
Subject: [PATCH] feat: Add GeoChart visualization for volunteers by region

- Add chart_type field to volunteer breakdown data structure
- Implement conditional rendering: GeoChart for regions, Bar Chart for others
- Update Google Charts loader to include geochart package
- Add comprehensive test coverage for chart_type field
- Fixes #230
---
 portal/common.py                          |  3 +
 templates/portal/stats.html               |  2 +-
 templates/volunteer/volunteer_charts.html | 72 +++++++++++++++--------
 tests/portal/test_common.py               | 41 +++++++++++++
 4 files changed, 92 insertions(+), 26 deletions(-)

diff --git a/portal/common.py b/portal/common.py
index f532fab4..b85abf5c 100644
--- a/portal/common.py
+++ b/portal/common.py
@@ -455,6 +455,7 @@ def get_volunteer_breakdown():
                 "columns": ["Chapter", "Volunteers"],
                 "data": result,
                 "chart_id": "volunteer_by_chapter",
+                "chart_type": "bar",
             }
         )
 
@@ -471,6 +472,7 @@ def get_volunteer_breakdown():
                 "columns": ["Region", "Volunteers"],
                 "data": result,
                 "chart_id": "volunteers_by_region",
+                "chart_type": "geo",
             }
         )
 
@@ -489,6 +491,7 @@ def get_volunteer_breakdown():
                 "columns": ["Language", "Volunteers"],
                 "data": result,
                 "chart_id": "volunteers_by_languages",
+                "chart_type": "bar",
             }
         )
 
diff --git a/templates/portal/stats.html b/templates/portal/stats.html
index 2b5a5b5f..a6c3d469 100644
--- a/templates/portal/stats.html
+++ b/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" %}
diff --git a/templates/volunteer/volunteer_charts.html b/templates/volunteer/volunteer_charts.html
index 9be08da8..1ea5660d 100644
--- a/templates/volunteer/volunteer_charts.html
+++ b/templates/volunteer/volunteer_charts.html
@@ -1,27 +1,49 @@
 {% for breakdown in stats.volunteer_breakdown %}
-    var data = google.visualization.arrayToDataTable([
-    ['{{ breakdown.columns.0 }}', '{{ breakdown.columns.1 }}'],
-    {% for data in breakdown.data %}
-        ['{{ data.0 }}', {{ data.1 }},],
-    {% endfor %}
-    ]);
-    var paddingHeight = 120;
-    var rowHeight = 40;
-    var chartHeight = Math.max(500, (data.getNumberOfRows() * rowHeight) + paddingHeight);
-    document.getElementById('{{ breakdown.chart_id }}').style.height = chartHeight + 'px';
-    var options = {
-    chart: {
-    'title':'{{ breakdown.title }}'
-    },
-    hAxis: {title: '{{ breakdown.columns.1 }}', minValue: 0, format:'0'},
-    vAxis: {title: '{{ breakdown.columns.0 }}'},
-    height: chartHeight,
-    chartArea: {
-    width: '75%',
-    height: '85%'
-    },
-    bars: 'horizontal'
-    };
-    var chart = new google.charts.Bar(document.getElementById('{{ breakdown.chart_id }}'));
-    chart.draw(data, google.charts.Bar.convertOptions(options));
+    {% if breakdown.chart_type == 'geo' %}
+        {# GeoChart for regional data #}
+        var data_{{ breakdown.chart_id }} = google.visualization.arrayToDataTable([
+        ['{{ breakdown.columns.0 }}', '{{ breakdown.columns.1 }}'],
+        {% for data in breakdown.data %}
+            ['{{ data.0 }}', {{ data.1 }},],
+        {% endfor %}
+        ]);
+        var options_{{ breakdown.chart_id }} = {
+        title: '{{ breakdown.title }}',
+        colorAxis: {colors: ['#e8f4f8', '#0d6efd']},
+        backgroundColor: '#f8f9fa',
+        datalessRegionColor: '#e9ecef',
+        defaultColor: '#f5c6cb',
+        legend: 'none',
+        tooltip: {textStyle: {fontSize: 12}},
+        };
+        var chart_{{ breakdown.chart_id }} = new google.visualization.GeoChart(document.getElementById('{{ breakdown.chart_id }}'));
+        chart_{{ breakdown.chart_id }}.draw(data_{{ breakdown.chart_id }}, options_{{ breakdown.chart_id }});
+    {% else %}
+        {# Bar chart for other data #}
+        var data_{{ breakdown.chart_id }} = google.visualization.arrayToDataTable([
+        ['{{ breakdown.columns.0 }}', '{{ breakdown.columns.1 }}'],
+        {% for data in breakdown.data %}
+            ['{{ data.0 }}', {{ data.1 }},],
+        {% endfor %}
+        ]);
+        var paddingHeight = 120;
+        var rowHeight = 40;
+        var chartHeight = Math.max(500, (data_{{ breakdown.chart_id }}.getNumberOfRows() * rowHeight) + paddingHeight);
+        document.getElementById('{{ breakdown.chart_id }}').style.height = chartHeight + 'px';
+        var options_{{ breakdown.chart_id }} = {
+        chart: {
+        'title':'{{ breakdown.title }}'
+        },
+        hAxis: {title: '{{ breakdown.columns.1 }}', minValue: 0, format:'0'},
+        vAxis: {title: '{{ breakdown.columns.0 }}'},
+        height: chartHeight,
+        chartArea: {
+        width: '75%',
+        height: '85%'
+        },
+        bars: 'horizontal'
+        };
+        var chart_{{ breakdown.chart_id }} = new google.charts.Bar(document.getElementById('{{ breakdown.chart_id }}'));
+        chart_{{ breakdown.chart_id }}.draw(data_{{ breakdown.chart_id }}, google.charts.Bar.convertOptions(options_{{ breakdown.chart_id }}));
+    {% endif %}
 {% endfor %}
diff --git a/tests/portal/test_common.py b/tests/portal/test_common.py
index 09dcc9ba..8d64b109 100644
--- a/tests/portal/test_common.py
+++ b/tests/portal/test_common.py
@@ -12,6 +12,7 @@
     get_sponsorship_to_goal_percent_cache,
     get_sponsorship_total_count_stats_cache,
     get_stats_cached_values,
+    get_volunteer_breakdown,
     get_volunteer_signup_stat_cache,
 )
 from portal.constants import (
@@ -269,3 +270,43 @@ def test_get_sponsorship_to_goal_percent_cache(self):
 
         result = get_sponsorship_to_goal_percent_cache()
         assert result == 20
+
+
+@pytest.mark.django_db
+class TestGetVolunteerBreakdown:
+
+    def test_get_volunteer_breakdown_includes_chart_type(self):
+        """Test that volunteer breakdown includes chart_type field."""
+        from portal.constants import CACHE_KEY_VOLUNTEER_BREAKDOWN
+
+        cache.delete(CACHE_KEY_VOLUNTEER_BREAKDOWN)
+
+        result = get_volunteer_breakdown()
+
+        # Should have 3 breakdowns: chapter, region, and languages
+        assert len(result) == 3
+
+        # Find the region breakdown
+        region_breakdown = next(
+            (b for b in result if b["chart_id"] == "volunteers_by_region"), None
+        )
+        assert region_breakdown is not None
+        assert region_breakdown["chart_type"] == "geo"
+        assert region_breakdown["title"] == "Volunteers By Region"
+        assert region_breakdown["columns"] == ["Region", "Volunteers"]
+
+        # Find the chapter breakdown
+        chapter_breakdown = next(
+            (b for b in result if b["chart_id"] == "volunteer_by_chapter"), None
+        )
+        assert chapter_breakdown is not None
+        assert chapter_breakdown["chart_type"] == "bar"
+        assert chapter_breakdown["title"] == "Volunteers By Chapter"
+
+        # Find the languages breakdown
+        languages_breakdown = next(
+            (b for b in result if b["chart_id"] == "volunteers_by_languages"), None
+        )
+        assert languages_breakdown is not None
+        assert languages_breakdown["chart_type"] == "bar"
+        assert languages_breakdown["title"] == "Volunteers By Languages"