Show cohort bucket and participant count in PersonView

bluedotimpact · Oct 15, 2024 · a9cb30d · a9cb30d
1 parent a841400
commit a9cb30d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/frontend/index.tsx b/frontend/index.tsx
@@ -31,6 +31,7 @@ export type Preset = {
   cohortsTableStartDateField?: string;
   cohortsTableEndDateField?: string;
   cohortsIterationField?: string;
+  cohortsBucketField?: string;
 };
 
 const createPreset = (name: string) => ({

diff --git a/frontend/setup.tsx b/frontend/setup.tsx
@@ -444,6 +444,13 @@ const SetupPage = () => {
                   globalConfigKey={[...path, "cohortsIterationField"]}
                 />
               </FormField>
+              <FormField label="Bucket field">
+                <FieldPickerSynced
+                  table={cohortsTable}
+                  allowedTypes={[FieldType.MULTIPLE_RECORD_LINKS, FieldType.MULTIPLE_LOOKUP_VALUES]}
+                  globalConfigKey={[...path, "cohortsBucketField"]}
+                />
+              </FormField>
             </div>
           )}
         </div>

diff --git a/frontend/view.tsx b/frontend/view.tsx
@@ -44,6 +44,8 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
       preset.cohortsTableStartDateField,
       preset.cohortsTableEndDateField,
       preset.cohortsIterationField,
+      preset.cohortsBucketField,
+      personType.cohortsTableField,
     ],
   });
   const cohortsWithTimes = rawCohorts.flatMap((cohort) => {
@@ -63,6 +65,8 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
       name: cohort.name,
       iteration: cohort.getCellValueAsString(preset.cohortsIterationField!),
       timeAv: meetingDates.map((d) => fromDate(d)) as Interval,
+      bucket: preset.cohortsBucketField ? cohort.getCellValueAsString(preset.cohortsBucketField) : "Unknown",
+      participantCount: (cohort.getCellValue(personType.cohortsTableField!) as string[])?.length,
     };
   });
 
@@ -121,6 +125,8 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
         <div className="w-full rounded border border-solid border-gray-200 max-h-72 overflow-auto">
           <div className="flex bg-slate-100 p-1 font-medium">
             <div style={{ flex: "4 1 0" }}>Cohort</div>
+            <div style={{ flex: "2 1 0" }}>Bucket</div>
+            <div style={{ flex: "1 1 0" }}># participants</div>
             <div style={{ flex: "1 1 0" }}>Meeting time</div>
           </div>
           <div className="w-full bg-white divide-y divide-gray-200">
@@ -142,6 +148,10 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
                     >
                       <CohortBlob name={cohort.name} />
                     </div>
+                    <div style={{ flex: "2 1 0" }}>
+                      {cohort.bucket}
+                    </div>
+                    <div style={{ flex: "1 1 0" }}>{cohort.participantCount}</div>
                     <div style={{ flex: "1 1 0" }}>
                       {format(cohort.timeAv).replace(" ", " – ")}
                     </div>