Add percentage unit in surveys table

aqualinkorg · Jan 15, 2025 · c30c1d8 · c30c1d8
1 parent ca8e1bf
commit c30c1d8
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/colDefs/bleaching.colDef.ts b/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/colDefs/bleaching.colDef.ts
@@ -4,12 +4,32 @@ import type { ColumnDef } from '../ReefCheckSurveyTable';
 
 export const bleachingColumns: ColumnDef<ReefCheckOrganism>[] = [
   { field: 'organism', header: 'Bleaching and Coral Diseases Type' },
-  { field: 's1', header: 's1 (0-20m)', align: 'center', width: 200 },
-  { field: 's2', header: 's2 (25-45m)', align: 'center', width: 200 },
-  { field: 's3', header: 's3 (50-70m)', align: 'center', width: 200 },
-  { field: 's4', header: 's4 (75-95m)', align: 'center', width: 200 },
   {
-    field: (row) => mean([row.s1, row.s2, row.s3, row.s4]),
+    field: ({ s1 }) => `${s1}%`,
+    header: 's1 (0-20m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: ({ s2 }) => `${s2}%`,
+    header: 's2 (25-45m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: ({ s3 }) => `${s3}%`,
+    header: 's3 (50-70m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: ({ s4 }) => `${s4}%`,
+    header: 's4 (75-95m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: (row) => `${mean([row.s1, row.s2, row.s3, row.s4])}%`,
     header: 'Average % per 100m²',
     align: 'center',
     width: 200,

diff --git a/...kSurveys/colDefs/reefStructure.coldDef.ts → ...ckSurveys/colDefs/reefStructure.colDef.ts b/...kSurveys/colDefs/reefStructure.coldDef.ts → ...ckSurveys/colDefs/reefStructure.colDef.ts
@@ -23,12 +23,32 @@ export const reefStructureColumns: ColumnDef<ReefCheckSubstrate>[] = [
     field: ({ substrateCode }) => substrateCodesMap[substrateCode],
     header: 'Reef Structure and Composition Type',
   },
-  { field: 's1', header: 's1 (0-20m)', align: 'center', width: 200 },
-  { field: 's2', header: 's2 (25-45m)', align: 'center', width: 200 },
-  { field: 's3', header: 's3 (50-70m)', align: 'center', width: 200 },
-  { field: 's4', header: 's4 (75-95m)', align: 'center', width: 200 },
   {
-    field: (row) => mean([row.s1, row.s2, row.s3, row.s4]),
+    field: ({ s1 }) => `${s1}%`,
+    header: 's1 (0-20m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: ({ s2 }) => `${s2}%`,
+    header: 's2 (25-45m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: ({ s3 }) => `${s3}%`,
+    header: 's3 (50-70m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: ({ s4 }) => `${s4}%`,
+    header: 's4 (75-95m)',
+    align: 'center',
+    width: 200,
+  },
+  {
+    field: (row) => `${mean([row.s1, row.s2, row.s3, row.s4])}%`,
     header: 'Average % per 100m²',
     align: 'center',
     width: 200,

diff --git a/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/index.tsx b/packages/website/src/routes/SiteRoutes/ReefCheckSurveys/index.tsx
@@ -13,7 +13,7 @@ import { invertebratesColumns } from './colDefs/invertables.colDef';
 import { impactColumns } from './colDefs/impact.colDef';
 import { rareAnimalsColumns } from './colDefs/rareAnimals.colDef';
 import { bleachingColumns } from './colDefs/bleaching.colDef';
-import { reefStructureColumns } from './colDefs/reefStructure.coldDef';
+import { reefStructureColumns } from './colDefs/reefStructure.colDef';
 import { ReefCheckSurveyOrganismsTable } from './ReefCheckSurveyOrganismsTable';
 import { ReefCheckSurveySummary } from './ReefCheckSurveySummary';
 import { ReefCheckSurveyDetails } from './ReefCheckSurveyDetails';