fix: analytics showing user id instead of display name (#1812)

* fix: replacing first, last name and email with display name

* fix: different endpoint for workspace & project member

* fix: falling back to email if display_name doesn't exist

* fix: analytics showing user id instead of display name

apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx

@@ -14,6 +14,14 @@ type Props = {
 export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) => {
   let tooltipValue: string | number = "";
 
+  const renderAssigneeName = (assigneeId: string): string => {
+    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
+
+    if (!assignee) return "No assignee";
+
+    return assignee.assignees__display_name || "No assignee";
+  };
+
   if (params.segment) {
     if (DATE_KEYS.includes(params.segment)) tooltipValue = renderMonthAndYear(datum.id);
     else tooltipValue = datum.id;
@@ -41,7 +49,10 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
             : ""
         }`}
       >
-        {tooltipValue}:
+        {params.segment === "assignees__id"
+          ? renderAssigneeName(tooltipValue.toString())
+          : tooltipValue}
+        :
       </span>
       <span>{datum.value}</span>
     </div>

apps/app/components/analytics/custom-analytics/graph/index.tsx

@@ -29,6 +29,14 @@ export const AnalyticsGraph: React.FC<Props> = ({
   yAxisKey,
   fullScreen,
 }) => {
+  const renderAssigneeName = (assigneeId: string): string => {
+    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
+
+    if (!assignee) return "?";
+
+    return assignee.assignees__display_name || "?";
+  };
+
   const generateYAxisTickValues = () => {
     if (!analytics) return [];
 
@@ -101,7 +109,11 @@ export const AnalyticsGraph: React.FC<Props> = ({
                     <g transform={`translate(${datum.x},${datum.y})`}>
                       <circle cy={18} r={8} fill="#374151" />
                       <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
-                        {datum.value && datum.value !== "None"
+                        {params.x_axis === "assignees__id"
+                          ? datum.value && datum.value !== "None"
+                            ? renderAssigneeName(datum.value)[0].toUpperCase()
+                            : "?"
+                          : datum.value && datum.value !== "None"
                           ? `${datum.value}`.toUpperCase()[0]
                           : "?"}
                       </text>

apps/app/components/analytics/custom-analytics/table.tsx

@@ -21,7 +21,16 @@ type Props = {
   yAxisKey: "count" | "estimate";
 };
 
-export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
+export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => {
+  const renderAssigneeName = (assigneeId: string): string => {
+    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
+
+    if (!assignee) return "No assignee";
+
+    return assignee.assignees__display_name || "No assignee";
+  };
+
+  return (
     <div className="flow-root">
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full align-middle">
@@ -53,7 +62,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                             }}
                           />
                         )}
-                      {DATE_KEYS.includes(params.segment ?? "") ? renderMonthAndYear(key) : key}
+                        {params.segment === "assignees__id"
+                          ? renderAssigneeName(key)
+                          : DATE_KEYS.includes(params.segment ?? "")
+                          ? renderMonthAndYear(key)
+                          : key}
                       </div>
                     </th>
                   ))
@@ -92,7 +105,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                         }}
                       />
                     )}
-                  {addSpaceIfCamelCase(`${item.name}`)}
+                    {params.x_axis === "assignees__id"
+                      ? renderAssigneeName(`${item.name}`)
+                      : addSpaceIfCamelCase(`${item.name}`)}
                   </td>
                   {params.segment ? (
                     barGraphData.xAxisKeys.map((key, index) => (
@@ -114,3 +129,4 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
       </div>
     </div>
   );
+};

apps/app/components/issues/select/assignee.tsx

@@ -34,7 +34,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
     content: (
       <div className="flex items-center gap-2">
         <Avatar user={member.member} />
-        {member.member.display_name}
+        {member.member.is_bot ? member.member.first_name : member.member.display_name}
       </div>
     ),
   }));

apps/app/types/analytics.d.ts

@@ -4,6 +4,7 @@ export interface IAnalyticsResponse {
   extras: {
     colors: IAnalyticsExtra[];
     assignee_details: {
+      assignees__id: string | null;
       assignees__display_name: string | null;
       assignees__avatar: string | null;
       assignees__first_name: string;