feat: Integrate API into area swiped pie chart

hotosm · Sep 20, 2024 · 668b58c · 668b58c
1 parent 74d0888
commit 668b58c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/frontend/src/components/partnerMapswipeStats/swipesByProjectType.js b/frontend/src/components/partnerMapswipeStats/swipesByProjectType.js
@@ -5,7 +5,7 @@ import Chart from 'chart.js/auto';
 import { CHART_COLOURS } from '../../config';
 import messages from './messages';
 
-export const SwipesByProjectType = () => {
+export const SwipesByProjectType = ({ areaSwipedByProjectType = [] }) => {
   const chartRef = useRef(null);
   const chartInstance = useRef(null);
 
@@ -21,14 +21,14 @@ export const SwipesByProjectType = () => {
     chartInstance.current = new Chart(context, {
       type: 'doughnut',
       data: {
-        labels: ['Find', 'Validate'],
+        labels: ['Find', 'Compare', 'Validate'],
         datasets: [
           {
-            data: [75, 25],
+            data: areaSwipedByProjectType.map(c => c.totalArea),
             backgroundColor: [
               CHART_COLOURS.orange, // Orange for Find
-              CHART_COLOURS.green, // Green for Validate
               CHART_COLOURS.blue, // Blue for Compare
+              CHART_COLOURS.green, // Green for Validate
             ],
             borderColor: '#fff',
             borderWidth: 2,

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