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,96 +21,112 @@ 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 }) => {
-  <div className="flow-root">
+  const renderAssigneeName = (assigneeId: string): string => {
-    <div className="overflow-x-auto">
+    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
-      <div className="inline-block min-w-full align-middle">
+
-        <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
+    if (!assignee) return "No assignee";
-          <thead className="bg-custom-background-80">
+
-            <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
+    return assignee.assignees__display_name || "No assignee";
-              <th scope="col" className="py-3 px-2.5 text-left font-medium">
+  };
-                {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
+
-              </th>
+  return (
-              {params.segment ? (
+    <div className="flow-root">
-                barGraphData.xAxisKeys.map((key) => (
+      <div className="overflow-x-auto">
-                  <th
+        <div className="inline-block min-w-full align-middle">
-                    key={`segment-${key}`}
+          <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
-                    scope="col"
+            <thead className="bg-custom-background-80">
-                    className={`px-2.5 py-3 text-left font-medium ${
+              <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
-                      params.segment === "priority" || params.segment === "state__group"
+                <th scope="col" className="py-3 px-2.5 text-left font-medium">
+                  {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
+                </th>
+                {params.segment ? (
+                  barGraphData.xAxisKeys.map((key) => (
+                    <th
+                      key={`segment-${key}`}
+                      scope="col"
+                      className={`px-2.5 py-3 text-left font-medium ${
+                        params.segment === "priority" || params.segment === "state__group"
+                          ? "capitalize"
+                          : ""
+                      }`}
+                    >
+                      <div className="flex items-center gap-2">
+                        {params.segment === "priority" ? (
+                          getPriorityIcon(key)
+                        ) : (
+                          <span
+                            className="h-3 w-3 flex-shrink-0 rounded"
+                            style={{
+                              backgroundColor: generateBarColor(key, analytics, params, "segment"),
+                            }}
+                          />
+                        )}
+                        {params.segment === "assignees__id"
+                          ? renderAssigneeName(key)
+                          : DATE_KEYS.includes(params.segment ?? "")
+                          ? renderMonthAndYear(key)
+                          : key}
+                      </div>
+                    </th>
+                  ))
+                ) : (
+                  <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
+                    {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-custom-border-200">
+              {barGraphData.data.map((item, index) => (
+                <tr
+                  key={`table-row-${index}`}
+                  className="divide-x divide-custom-border-200 text-xs text-custom-text-200"
+                >
+                  <td
+                    className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
+                      params.x_axis === "priority" || params.x_axis === "state__group"
                         ? "capitalize"
                         : ""
                     }`}
                   >
-                    <div className="flex items-center gap-2">
+                    {params.x_axis === "priority" ? (
-                      {params.segment === "priority" ? (
+                      getPriorityIcon(`${item.name}`)
-                        getPriorityIcon(key)
+                    ) : (
-                      ) : (
+                      <span
-                        <span
+                        className="h-3 w-3 rounded"
-                          className="h-3 w-3 flex-shrink-0 rounded"
+                        style={{
-                          style={{
+                          backgroundColor: generateBarColor(
-                            backgroundColor: generateBarColor(key, analytics, params, "segment"),
+                            `${item.name}`,
-                          }}
+                            analytics,
-                        />
+                            params,
-                      )}
+                            "x_axis"
-                      {DATE_KEYS.includes(params.segment ?? "") ? renderMonthAndYear(key) : key}
+                          ),
-                    </div>
+                        }}
-                  </th>
+                      />
-                ))
+                    )}
-              ) : (
+                    {params.x_axis === "assignees__id"
-                <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
+                      ? renderAssigneeName(`${item.name}`)
-                  {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
+                      : addSpaceIfCamelCase(`${item.name}`)}
-                </th>
+                  </td>
-              )}
+                  {params.segment ? (
-            </tr>
+                    barGraphData.xAxisKeys.map((key, index) => (
-          </thead>
+                      <td
-          <tbody className="divide-y divide-custom-border-200">
+                        key={`segment-value-${index}`}
-            {barGraphData.data.map((item, index) => (
+                        className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
-              <tr
+                      >
-                key={`table-row-${index}`}
+                        {item[key] ?? 0}
-                className="divide-x divide-custom-border-200 text-xs text-custom-text-200"
+                      </td>
-              >
+                    ))
-                <td
-                  className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
-                    params.x_axis === "priority" || params.x_axis === "state__group"
-                      ? "capitalize"
-                      : ""
-                  }`}
-                >
-                  {params.x_axis === "priority" ? (
-                    getPriorityIcon(`${item.name}`)
                   ) : (
-                    <span
+                    <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
-                      className="h-3 w-3 rounded"
-                      style={{
-                        backgroundColor: generateBarColor(
-                          `${item.name}`,
-                          analytics,
-                          params,
-                          "x_axis"
-                        ),
-                      }}
-                    />
                   )}
-                  {addSpaceIfCamelCase(`${item.name}`)}
+                </tr>
-                </td>
+              ))}
-                {params.segment ? (
+            </tbody>
-                  barGraphData.xAxisKeys.map((key, index) => (
+          </table>
-                    <td
+        </div>
-                      key={`segment-value-${index}`}
-                      className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
-                    >
-                      {item[key] ?? 0}
-                    </td>
-                  ))
-                ) : (
-                  <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
-                )}
-              </tr>
-            ))}
-          </tbody>
-        </table>
       </div>
     </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;