chore: x-axis tick values for assignees (#1060)

* style: new custom analytics ui

* fix: x-axis assignee tick values

* chore: assignee names in the custom analytics table

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

@@ -68,7 +68,50 @@ export const AnalyticsGraph: React.FC<Props> = ({
       customYAxisTickValues={generateYAxisTickValues()}
       tooltip={(datum) => <CustomTooltip datum={datum} params={params} />}
       height={fullScreen ? "400px" : "300px"}
-      margin={{ right: 20, bottom: longestXAxisLabel.length * 5 + 20 }}
+      margin={{
+        right: 20,
+        bottom: params.x_axis === "assignees__email" ? 50 : longestXAxisLabel.length * 5 + 20,
+      }}
+      axisBottom={{
+        tickSize: 0,
+        tickPadding: 10,
+        tickRotation: barGraphData.data.length > 7 ? -45 : 0,
+        renderTick:
+          params.x_axis === "assignees__email"
+            ? (datum) => {
+                const avatar = analytics.extras.assignee_details?.find(
+                  (a) => a.assignees__email === datum.value
+                )?.assignees__avatar;
+
+                console.log(avatar);
+
+                if (avatar && avatar !== "")
+                  return (
+                    <g transform={`translate(${datum.x},${datum.y})`}>
+                      <image
+                        x={-8}
+                        y={10}
+                        width={16}
+                        height={16}
+                        xlinkHref={avatar}
+                        style={{ clipPath: "circle(50%)" }}
+                      />
+                    </g>
+                  );
+                else
+                  return (
+                    <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"
+                          ? `${datum.value}`.toUpperCase()[0]
+                          : "?"}
+                      </text>
+                    </g>
+                  );
+              }
+            : undefined,
+      }}
       theme={{
         background: "rgb(var(--color-bg-base))",
         axis: {},

apps/app/components/analytics/custom-analytics/select-bar.tsx

@@ -23,9 +23,9 @@ export const AnalyticsSelectBar: React.FC<Props> = ({
   isProjectLevel,
 }) => (
   <div
-    className={`grid items-center gap-4 p-5 pb-0.5 ${
+    className={`grid items-center gap-4 px-5 py-2.5 ${
       isProjectLevel ? "grid-cols-3" : "grid-cols-2"
-    } ${fullScreen ? "lg:grid-cols-4" : ""}`}
+    } ${fullScreen ? "lg:grid-cols-4 md:py-5" : ""}`}
   >
     {!isProjectLevel && (
       <div>

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

@@ -108,9 +108,9 @@ export const AnalyticsSidebar: React.FC<Props> = ({
 
   return (
     <div
-      className={`p-5 pb-0 flex flex-col space-y-2 md:space-y-4 overflow-hidden ${
+      className={`p-5 pb-0 flex flex-col space-y-2 ${
         fullScreen
-          ? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base"
+          ? "pb-5 border-l border-brand-base md:h-full md:pb-5 md:border-l md:border-brand-base md:space-y-4 overflow-hidden"
           : ""
       }`}
     >
@@ -176,7 +176,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
             {projectId ? (
               cycleId && cycleDetails ? (
                 <div className="hidden md:block h-full overflow-y-auto">
-                  <h4 className="font-medium break-all">{cycleDetails.name}</h4>
+                  <h4 className="font-medium break-all">Analytics for {cycleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-brand-secondary">Lead</h6>
@@ -204,7 +204,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                 </div>
               ) : moduleId && moduleDetails ? (
                 <div className="hidden md:block h-full overflow-y-auto">
-                  <h4 className="font-medium break-all">{moduleDetails.name}</h4>
+                  <h4 className="font-medium break-all">Analytics for {moduleDetails.name}</h4>
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-brand-secondary">Lead</h6>

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

@@ -21,7 +21,19 @@ 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 = (email: string): string => {
+    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__email === email);
+
+    if (!assignee) return "No assignee";
+
+    if (assignee.assignees__first_name !== "")
+      return assignee.assignees__first_name + " " + assignee.assignees__last_name;
+
+    return email;
+  };
+
+  return (
     <div className="flow-root">
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full align-middle">
@@ -53,7 +65,11 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                             }}
                           />
                         )}
-                      {DATE_KEYS.includes(params.segment ?? "") ? renderMonthAndYear(key) : key}
+                        {DATE_KEYS.includes(params.segment ?? "")
+                          ? renderMonthAndYear(key)
+                          : params.segment === "assignees__email"
+                          ? renderAssigneeName(key)
+                          : key}
                       </div>
                     </th>
                   ))
@@ -92,7 +108,9 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                         }}
                       />
                     )}
-                  {addSpaceIfCamelCase(`${item.name}`)}
+                    {params.x_axis === "assignees__email"
+                      ? renderAssigneeName(`${item.name}`)
+                      : addSpaceIfCamelCase(`${item.name}`)}
                   </td>
                   {params.segment ? (
                     barGraphData.xAxisKeys.map((key, index) => (
@@ -113,4 +131,5 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
         </div>
       </div>
     </div>
-);
+  );
+};

apps/app/components/analytics/scope-and-demand/demand.tsx

@@ -37,7 +37,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
               </div>
               <p className="text-brand-secondary">{percentage}%</p>
             </div>
-            <div className="bar relative h-1 w-full rounded bg-brand-base">
+            <div className="bar relative h-1 w-full rounded bg-brand-surface-2">
               <div
                 className="absolute top-0 left-0 h-1 rounded duration-300"
                 style={{

apps/app/components/analytics/scope-and-demand/leaderboard.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 type Props = {
   users: {
     avatar: string | null;
+    email: string | null;
     firstName: string;
     lastName: string;
     count: number;
@@ -14,8 +15,8 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
   <div className="p-3 border border-brand-base rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     <div className="mt-3 space-y-3">
-      {users.map((user, index) => (
+      {users.map((user) => (
-        <div key={`user-${index}`} className="flex items-start justify-between gap-4 text-xs">
+        <div key={user.email ?? "None"} className="flex items-start justify-between gap-4 text-xs">
           <div className="flex items-center gap-2">
             {user && user.avatar && user.avatar !== "" ? (
               <div className="rounded-full h-4 w-4 flex-shrink-0">
@@ -24,7 +25,7 @@ export const AnalyticsLeaderboard: React.FC<Props> = ({ users, title }) => (
                   height="100%"
                   width="100%"
                   className="rounded-full"
-                  alt={user.firstName + " " + user.lastName}
+                  alt={user.email ?? "None"}
                 />
               </div>
             ) : (

apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx

@@ -56,6 +56,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
               <AnalyticsLeaderboard
                 users={defaultAnalytics.most_issue_created_user.map((user) => ({
                   avatar: user.created_by__avatar,
+                  email: user.created_by__email,
                   firstName: user.created_by__first_name,
                   lastName: user.created_by__last_name,
                   count: user.count,
@@ -65,6 +66,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
               <AnalyticsLeaderboard
                 users={defaultAnalytics.most_issue_closed_user.map((user) => ({
                   avatar: user.assignees__avatar,
+                  email: user.assignees__email,
                   firstName: user.assignees__first_name,
                   lastName: user.assignees__last_name,
                   count: user.count,

apps/app/components/analytics/select/project.tsx

@@ -30,7 +30,6 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
           : "All projects"
       }
       optionsClassName="min-w-full"
-      position="right"
       noChevron
       multiple
     />

apps/app/components/analytics/select/segment.tsx

@@ -1,3 +1,5 @@
+import { useRouter } from "next/router";
+
 // ui
 import { CustomSelect } from "components/ui";
 // types
@@ -11,7 +13,11 @@ type Props = {
   params: IAnalyticsParams;
 };
 
-export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
+export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
+  return (
     <CustomSelect
       value={value}
       label={
@@ -28,6 +34,8 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
       <CustomSelect.Option value={null}>No value</CustomSelect.Option>
       {ANALYTICS_X_AXIS_VALUES.map((item) => {
         if (params.x_axis === item.value) return null;
+        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
+        if (moduleId && item.value === "issue_module__module__name") return null;
 
         return (
           <CustomSelect.Option key={item.value} value={item.value}>
@@ -36,4 +44,5 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
         );
       })}
     </CustomSelect>
-);
+  );
+};

apps/app/components/analytics/select/x-axis.tsx

@@ -1,16 +1,22 @@
+import { useRouter } from "next/router";
+
 // ui
 import { CustomSelect } from "components/ui";
 // types
-import { IAnalyticsParams, TXAxisValues, TYAxisValues } from "types";
+import { TXAxisValues } from "types";
 // constants
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
+import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TXAxisValues;
   onChange: (val: string) => void;
 };
 
-export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => (
+export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => {
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
+  return (
     <CustomSelect
       value={value}
       label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
@@ -18,10 +24,16 @@ export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => (
       width="w-full"
       maxHeight="lg"
     >
-    {ANALYTICS_X_AXIS_VALUES.map((item) => (
+      {ANALYTICS_X_AXIS_VALUES.map((item) => {
+        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
+        if (moduleId && item.value === "issue_module__module__name") return null;
+
+        return (
           <CustomSelect.Option key={item.value} value={item.value}>
             {item.label}
           </CustomSelect.Option>
-    ))}
+        );
+      })}
     </CustomSelect>
-);
+  );
+};

apps/app/components/analytics/select/y-axis.tsx

@@ -1,7 +1,7 @@
 // ui
 import { CustomSelect } from "components/ui";
 // types
-import { IAnalyticsParams, TYAxisValues } from "types";
+import { TYAxisValues } from "types";
 // constants
 import { ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 

apps/app/types/analytics.d.ts

@@ -3,6 +3,12 @@ export interface IAnalyticsResponse {
   distribution: IAnalyticsData;
   extras: {
     colors: IAnalyticsExtra[];
+    assignee_details: {
+      assignees__avatar: string | null;
+      assignees__email: string;
+      assignees__first_name: string;
+      assignees__last_name: string;
+    }[];
   };
 }
 
@@ -59,6 +65,7 @@ export interface IExportAnalyticsFormData {
 
 export interface IDefaultAnalyticsUser {
   assignees__avatar: string | null;
+  assignees__email: string | null;
   assignees__first_name: string;
   assignees__last_name: string;
   count: number;
@@ -69,6 +76,7 @@ export interface IDefaultAnalyticsResponse {
   most_issue_closed_user: IDefaultAnalyticsUser[];
   most_issue_created_user: {
     created_by__avatar: string | null;
+    created_by__email: string | null;
     created_by__first_name: string;
     created_by__last_name: string;
     count: number;