From 8d5c087eeaa8f91b46572ac803ee162bc53c6ad8 Mon Sep 17 00:00:00 2001
From: bshankar <ebhavanishankar@gmail.com>
Date: Sun, 22 Sep 2024 09:05:01 +0530
Subject: [PATCH] feat: swipes by org doughnut: group low swipers into others

---
 .../swipesByOrganisation.js                   | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/partnerMapswipeStats/swipesByOrganisation.js b/frontend/src/components/partnerMapswipeStats/swipesByOrganisation.js
index a285857439..e83150e880 100644
--- a/frontend/src/components/partnerMapswipeStats/swipesByOrganisation.js
+++ b/frontend/src/components/partnerMapswipeStats/swipesByOrganisation.js
@@ -5,9 +5,23 @@ import Chart from 'chart.js/auto';
 import { CHART_COLOURS } from '../../config';
 import messages from './messages';
 
-export const SwipesByOrganisation = ( { contributionsByOrganization = [] } ) => {
+function withGroupedLowContributors(contributionsByOrganization, keepTop = 4) {
+  if (contributionsByOrganization.length <= keepTop) {
+    return contributionsByOrganization;
+  }
+
+  contributionsByOrganization.sort((a, b) => b.totalcontributions - a.totalcontributions)
+  const topContributors = contributionsByOrganization.slice(0, keepTop)
+  const others = contributionsByOrganization.slice(keepTop)
+    .reduce((acc, c) => ({ ...acc, totalcontributions: acc.totalcontributions + c.totalcontributions }),
+      { organizationName: 'Others', totalcontributions: 0 })
+  topContributors.push(others)
+  return topContributors
+}
+export const SwipesByOrganisation = ({ contributionsByOrganization = [] }) => {
   const chartRef = useRef(null);
   const chartInstance = useRef(null);
+  contributionsByOrganization = withGroupedLowContributors(contributionsByOrganization)
 
   useEffect(() => {
     if (chartInstance.current) {
@@ -26,11 +40,11 @@ export const SwipesByOrganisation = ( { contributionsByOrganization = [] } ) =>
           {
             data: contributionsByOrganization.map(c => c.totalcontributions),
             backgroundColor: [
-              CHART_COLOURS.red, // Orange for American Red Cross
-              CHART_COLOURS.orange, // Yellow for Arizona State University
-              CHART_COLOURS.green, // Green for HOT
-              CHART_COLOURS.blue, // Blue for Médecins Sans Frontières
-              CHART_COLOURS.gray, // Gray for Others
+              CHART_COLOURS.red,
+              CHART_COLOURS.orange,
+              CHART_COLOURS.green,
+              CHART_COLOURS.blue,
+              CHART_COLOURS.gray,
             ],
             borderColor: '#fff',
             borderWidth: 2,