feat: Integrate API into swipes by organization pie chart

hotosm · Sep 20, 2024 · 90a45bc · 90a45bc
1 parent 668b58c
commit 90a45bc
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 10 deletions.
diff --git a/frontend/src/components/partnerMapswipeStats/swipesByOrganisation.js b/frontend/src/components/partnerMapswipeStats/swipesByOrganisation.js
@@ -5,7 +5,7 @@ import Chart from 'chart.js/auto';
 import { CHART_COLOURS } from '../../config';
 import messages from './messages';
 
-export const SwipesByOrganisation = () => {
+export const SwipesByOrganisation = ( { contributionsByOrganization = [] } ) => {
   const chartRef = useRef(null);
   const chartInstance = useRef(null);
 
@@ -21,16 +21,10 @@ export const SwipesByOrganisation = () => {
     chartInstance.current = new Chart(context, {
       type: 'doughnut',
       data: {
-        labels: [
-          'American Red Cross',
-          'Arizona State University',
-          'HOT',
-          'Médecins Sans Frontières',
-          'Others',
-        ],
+        labels: contributionsByOrganization.map(c => c.organizationName),
         datasets: [
           {
-            data: [35, 25, 20, 15, 5],
+            data: contributionsByOrganization.map(c => c.totalcontributions),
             backgroundColor: [
               CHART_COLOURS.red, // Orange for American Red Cross
               CHART_COLOURS.orange, // Yellow for Arizona State University

diff --git a/frontend/src/views/partnersMapswipeStats.js b/frontend/src/views/partnersMapswipeStats.js
@@ -139,7 +139,7 @@ export const PartnersMapswipeStats = () => {
 
             <div className="mt3 flex items-center justify-between">
               <SwipesByProjectType areaSwipedByProjectType={data?.areaSwipedByProjectType} />
-              <SwipesByOrganisation />
+              <SwipesByOrganisation contributionsByOrganization={data?.contributionsByorganizationName} />
             </div>
 
             <div className="mt3">