Update Engagement analytics logic (#4426)

* update engagement % counting to use members instead of total speakers * engagement performance uses percentage data * update engagement table to use % for performance comparison * update engagement caption to use % for required fields * update copy
yldio · Oct 24, 2024 · d7c4b09 · d7c4b09
1 parent 618b01d
commit d7c4b09
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 26 deletions.
diff --git a/apps/asap-cli/src/scripts/algolia/performance/engagement.ts b/apps/asap-cli/src/scripts/algolia/performance/engagement.ts
@@ -12,8 +12,8 @@ import {
 type EngagementHit = Hit & {
   eventCount: number;
   totalSpeakerCount: number;
-  uniqueAllRolesCount: number;
-  uniqueKeyPersonnelCount: number;
+  uniqueAllRolesCountPercentage: number;
+  uniqueKeyPersonnelCountPercentage: number;
 };
 
 export const processEngagementPerformance = async (index: SearchIndex) => {
@@ -28,8 +28,8 @@ export const processEngagementPerformance = async (index: SearchIndex) => {
         attributesToRetrieve: [
           'eventCount',
           'totalSpeakerCount',
-          'uniqueAllRolesCount',
-          'uniqueKeyPersonnelCount',
+          'uniqueAllRolesCountPercentage',
+          'uniqueKeyPersonnelCountPercentage',
         ],
         page,
         hitsPerPage: 50,
@@ -44,10 +44,10 @@ export const processEngagementPerformance = async (index: SearchIndex) => {
           hits.map((hit) => hit.totalSpeakerCount),
         ),
         uniqueAllRoles: getPerformanceMetrics(
-          hits.map((hit) => hit.uniqueAllRolesCount),
+          hits.map((hit) => hit.uniqueAllRolesCountPercentage),
         ),
         uniqueKeyPersonnel: getPerformanceMetrics(
-          hits.map((hit) => hit.uniqueKeyPersonnelCount),
+          hits.map((hit) => hit.uniqueKeyPersonnelCountPercentage),
         ),
         __meta: {
           range,

diff --git a/apps/asap-cli/src/scripts/algolia/performance/tests/engagement.test.ts b/apps/asap-cli/src/scripts/algolia/performance/tests/engagement.test.ts
@@ -55,8 +55,8 @@ describe('processEngagementPerformance', () => {
         attributesToRetrieve: [
           'eventCount',
           'totalSpeakerCount',
-          'uniqueAllRolesCount',
-          'uniqueKeyPersonnelCount',
+          'uniqueAllRolesCountPercentage',
+          'uniqueKeyPersonnelCountPercentage',
         ],
         page: expect.any(Number),
         hitsPerPage: 50,

diff --git a/apps/crn-server/src/utils/analytics/engagement.ts b/apps/crn-server/src/utils/analytics/engagement.ts
@@ -80,12 +80,12 @@ export const getEngagementItems = (
       eventCount: events.size || 0,
       totalSpeakerCount,
       uniqueAllRolesCount,
-      uniqueAllRolesCountPercentage: totalSpeakerCount
-        ? Math.round((uniqueAllRolesCount / totalSpeakerCount) * 100)
+      uniqueAllRolesCountPercentage: memberCount
+        ? Math.round((uniqueAllRolesCount / memberCount) * 100)
         : 0,
       uniqueKeyPersonnelCount,
-      uniqueKeyPersonnelCountPercentage: totalSpeakerCount
-        ? Math.round((uniqueKeyPersonnelCount / totalSpeakerCount) * 100)
+      uniqueKeyPersonnelCountPercentage: memberCount
+        ? Math.round((uniqueKeyPersonnelCount / memberCount) * 100)
         : 0,
     };
   });

diff --git a/apps/crn-server/test/fixtures/analytics.fixtures.ts b/apps/crn-server/test/fixtures/analytics.fixtures.ts
@@ -849,9 +849,9 @@ export const getEngagementResponse: () => EngagementResponse = () => ({
   eventCount: 2,
   totalSpeakerCount: 3,
   uniqueAllRolesCount: 2,
-  uniqueAllRolesCountPercentage: 67,
+  uniqueAllRolesCountPercentage: 50,
   uniqueKeyPersonnelCount: 1,
-  uniqueKeyPersonnelCountPercentage: 33,
+  uniqueKeyPersonnelCountPercentage: 25,
 });
 
 export const getListEngagementResponse = (): ListEngagementResponse => ({

diff --git a/apps/crn-server/test/utils/analytics/engagement.test.ts b/apps/crn-server/test/utils/analytics/engagement.test.ts
@@ -451,7 +451,7 @@ describe('getEngagementItems', () => {
           eventCount: 1,
           totalSpeakerCount: 1,
           uniqueAllRolesCount: 1,
-          uniqueAllRolesCountPercentage: 100,
+          uniqueAllRolesCountPercentage: 25,
           uniqueKeyPersonnelCount: 0,
           uniqueKeyPersonnelCountPercentage: 0,
         },
@@ -498,9 +498,9 @@ describe('getEngagementItems', () => {
           eventCount: 1,
           totalSpeakerCount: 1,
           uniqueAllRolesCount: 1,
-          uniqueAllRolesCountPercentage: 100,
+          uniqueAllRolesCountPercentage: 25,
           uniqueKeyPersonnelCount: 1,
-          uniqueKeyPersonnelCountPercentage: 100,
+          uniqueKeyPersonnelCountPercentage: 25,
         },
       ]);
     });
@@ -545,9 +545,9 @@ describe('getEngagementItems', () => {
           eventCount: 1,
           totalSpeakerCount: 1,
           uniqueAllRolesCount: 1,
-          uniqueAllRolesCountPercentage: 100,
+          uniqueAllRolesCountPercentage: 25,
           uniqueKeyPersonnelCount: 1,
-          uniqueKeyPersonnelCountPercentage: 100,
+          uniqueKeyPersonnelCountPercentage: 25,
         },
       ]);
     });

diff --git a/packages/react-components/src/molecules/CaptionItem.tsx b/packages/react-components/src/molecules/CaptionItem.tsx
@@ -32,6 +32,7 @@ export type CaptionItemProps = {
   averageMax: number;
   aboveAverageMin: number;
   aboveAverageMax: number;
+  percentage?: boolean;
 };
 
 const CaptionItem: React.FC<CaptionItemProps> = ({
@@ -42,11 +43,12 @@ const CaptionItem: React.FC<CaptionItemProps> = ({
   averageMax,
   aboveAverageMin,
   aboveAverageMax,
+  percentage = false,
 }) => {
   // Sometimes belowAverageMax can be negative, in this case,
   // below average will not have any number
   const getCaption = (min: number, max: number) =>
-    min < 0 ? `- - -` : `${min} - ${max}`;
+    min < 0 ? `- - -` : percentage ? `${min}% - ${max}%` : `${min} - ${max}`;
 
   return (
     <div css={containerStyles}>

diff --git a/packages/react-components/src/molecules/__tests__/CaptionItem.test.tsx b/packages/react-components/src/molecules/__tests__/CaptionItem.test.tsx
@@ -64,3 +64,21 @@ it('renders above average without numbers when range is negative', () => {
   expect(screen.getByTitle('Above Average')).toBeInTheDocument();
   expect(screen.getByText('- - -')).toBeVisible();
 });
+
+it('renders percentage when percentage is enabled', () => {
+  render(
+    <CaptionItem
+      label="ASAP % Output"
+      percentage
+      belowAverageMin={0}
+      belowAverageMax={10}
+      averageMin={11}
+      averageMax={40}
+      aboveAverageMin={41}
+      aboveAverageMax={100}
+    />,
+  );
+  expect(screen.getByText('0% - 10%')).toBeVisible();
+  expect(screen.getByText('11% - 40%')).toBeVisible();
+  expect(screen.getByText('41% - 100%')).toBeVisible();
+});
diff --git a/packages/react-components/src/organisms/EngagementTable.tsx b/packages/react-components/src/organisms/EngagementTable.tsx
@@ -424,7 +424,7 @@ const EngagementTable: React.FC<EngagementTableProps> = ({
               <p css={rowValueStyles}>
                 {`${row.uniqueAllRolesCount} (${row.uniqueAllRolesCountPercentage}%)`}{' '}
                 {getPerformanceIcon(
-                  row.uniqueAllRolesCount,
+                  row.uniqueAllRolesCountPercentage,
                   performance.uniqueAllRoles,
                 )}
               </p>
@@ -435,7 +435,7 @@ const EngagementTable: React.FC<EngagementTableProps> = ({
               <p css={rowValueStyles}>
                 {`${row.uniqueKeyPersonnelCount} (${row.uniqueKeyPersonnelCountPercentage}%)`}{' '}
                 {getPerformanceIcon(
-                  row.uniqueKeyPersonnelCount,
+                  row.uniqueKeyPersonnelCountPercentage,
                   performance.uniqueKeyPersonnel,
                 )}
               </p>

diff --git a/packages/react-components/src/templates/AnalyticsEngagementPageBody.tsx b/packages/react-components/src/templates/AnalyticsEngagementPageBody.tsx
@@ -93,17 +93,21 @@ const AnalyticsEngagementPageBody: React.FC<
       <>
         <CaptionItem label="Events" {...performance.events} />
         <CaptionItem label="Total Speakers" {...performance.totalSpeakers} />
-        <CaptionItem label="U.S.: All Roles" {...performance.uniqueAllRoles} />
+        <CaptionItem
+          label="U.S.: All Roles"
+          percentage
+          {...performance.uniqueAllRoles}
+        />
         <CaptionItem
           label="U.S.: Key Personnel"
+          percentage
           {...performance.uniqueKeyPersonnel}
         />
         <div css={captionLegend}>
           <PercentageIcon title="percentage" color={lead.rgb} />
           <Paragraph>
-            'Unique Speakers: All Roles' percentage is based on 'Total Speakers'
-            and 'Unique Speakers: Key Personnel' is based on 'Unique Speakers:
-            All Roles'
+            'Unique Speakers: All Roles' and 'Unique Speakers: Key Personnel'
+            percentage is based on 'Members'
           </Paragraph>
         </div>
       </>