Misc improvements to queues-stats-metrics

docs/docs/feature-library/queues-stats-metrics.md

@@ -6,13 +6,21 @@ title: queues-stats-metrics
 ## Overview
 The Flex Real Time Queues view can be enhanced by adding columns with other queue metrics to the [Queues Data Table](https://www.twilio.com/docs/flex/developer/ui/queues-view-programmability#modify-the-queuesdatatable).
 
+This feature can be configured to add the following additional metrics columns:
+- Assigned
+  - The number of active tasks that are assigned
+- In wrap up
+  - The number of active tasks that are wrapping
+- Activity
+  - Displays the number of agents per activity, rather than per availability, unlike the out of box column
+
 Natively Flex displays the Active tasks count per queue. The Active task count is the sum of _Assigned_ Tasks and _Wrapping_ Tasks. Displaying these metrics separately may give Supervisors additional insight into how their agents are performing.
 
+You may also use this feature as a starting point to implement your own custom metrics.
+
 ## Setup
 This feature can be enabled via the `flex-config` attributes. Just set the `queues_stats_metrics` `enabled` flag to `true` and enable the new columns as needed.
 
-The `agent_activity_stats_column` shows a Data icon that can be clicked to pop-up a small window to display the agent count per activity for that queue.
-
 ```json
       "queues_stats_metrics": {
         "enabled": false,

plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueueActivityStats/QueueActivityStats.tsx

@@ -2,35 +2,28 @@ import { Icon } from '@twilio/flex-ui';
 import { ActivityStatistic } from '@twilio/flex-ui/src/state/QueuesState';
 import * as React from 'react';
 import { Text } from '@twilio-paste/core/text';
-import { Heading } from '@twilio-paste/core/heading';
-import { Separator } from '@twilio-paste/core/separator';
 import { PopoverContainer, PopoverButton, Popover } from '@twilio-paste/core/popover';
 
 interface ComponentProps {
-  queueName: string;
   activityStats: ActivityStatistic[];
 }
 
 const QueueActivityStats = (props: ComponentProps) => {
-  const { queueName, activityStats } = props;
+  const { activityStats } = props;
   let total = 0;
   activityStats.forEach((ac: ActivityStatistic) => {
     total += ac.workers;
   });
 
   return (
-    <PopoverContainer baseId="activity-summary">
+    <PopoverContainer baseId="activity-summary" placement="left">
       <PopoverButton variant="secondary_icon" disabled={total === 0}>
         <Icon icon="Data" />
       </PopoverButton>
       <Popover aria-label="Popover">
-        <Heading as="h3" variant="heading30">
-          {queueName}
-        </Heading>
-        <Separator orientation="horizontal" verticalSpacing="space50" />
         {activityStats.map((ac: ActivityStatistic) => {
-          if (ac.workers > 0) return <Text as="p">{`${ac.friendly_name}: ${ac.workers}`}</Text>;
-          return <Text as="span" />;
+          if (ac.workers > 0) return <Text as="p" key={ac.sid}>{`${ac.friendly_name}: ${ac.workers}`}</Text>;
+          return <Text as="span" key={ac.sid} />;
         })}
       </Popover>
     </PopoverContainer>

plugin-flex-ts-template-v2/src/feature-library/queues-stats-metrics/flex-hooks/components/QueuesDataTableColumns.tsx

@@ -28,6 +28,9 @@ export const componentHook = function addQueuesDataTableColumns(flex: typeof Fle
           const assignedTasks = queue.tasks_by_status?.assigned || 0;
           return <span>{assignedTasks}</span>;
         }}
+        sortingFn={(a: WorkerQueue, b: WorkerQueue) =>
+          (a.tasks_by_status?.assigned || 0) > (b.tasks_by_status?.assigned || 0) ? 1 : -1
+        }
         {...props}
       />,
       { sortOrder: 0 },
@@ -47,6 +50,9 @@ export const componentHook = function addQueuesDataTableColumns(flex: typeof Fle
           const wrappingTasks = queue.tasks_by_status?.wrapping || 0;
           return <span>{wrappingTasks}</span>;
         }}
+        sortingFn={(a: WorkerQueue, b: WorkerQueue) =>
+          (a.tasks_by_status?.wrapping || 0) > (b.tasks_by_status?.wrapping || 0) ? 1 : -1
+        }
         {...props}
       />,
       { sortOrder: 0 },
@@ -63,7 +69,7 @@ export const componentHook = function addQueuesDataTableColumns(flex: typeof Fle
         header={(manager.strings as any)[StringTemplates.AgentActivityHeader]}
         subHeader={manager.strings.QueuesStatsSubHeaderNow}
         content={(queue: WorkerQueue) => {
-          return <QueueActivityStats queueName={queue.friendly_name} activityStats={queue.activity_statistics} />;
+          return <QueueActivityStats activityStats={queue.activity_statistics} />;
         }}
         {...props}
       />,