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
2023-05-16 15:11:40 +05:30 · 2023-05-16 15:11:40 +05:30 · d575e8ec6b
commit d575e8ec6b
parent c060f7db30
12 changed files with 233 additions and 140 deletions
--- a/apps/app/components/analytics/custom-analytics/graph/index.tsx
+++ b/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: {},
--- a/apps/app/components/analytics/custom-analytics/select-bar.tsx
+++ b/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>
--- a/apps/app/components/analytics/custom-analytics/sidebar.tsx
+++ b/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>
--- a/apps/app/components/analytics/custom-analytics/table.tsx
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@ -21,96 +21,115 @@ type Props = {
  yAxisKey: "count" | "estimate";
 };

-export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
-  <div className="flow-root">
-    <div className="overflow-x-auto">
-      <div className="inline-block min-w-full align-middle">
-        <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
-          <thead className="bg-brand-surface-2">
-            <tr className="divide-x divide-brand-base text-sm text-brand-base">
-              <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"
+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">
+          <table className="min-w-full divide-y divide-brand-base whitespace-nowrap border-y border-brand-base">
+            <thead className="bg-brand-surface-2">
+              <tr className="divide-x divide-brand-base text-sm text-brand-base">
+                <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"),
+                            }}
+                          />
+                        )}
+                        {DATE_KEYS.includes(params.segment ?? "")
+                          ? renderMonthAndYear(key)
+                          : params.segment === "assignees__email"
+                          ? renderAssigneeName(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-brand-base">
+              {barGraphData.data.map((item, index) => (
+                <tr
+                  key={`table-row-${index}`}
+                  className="divide-x divide-brand-base text-xs text-brand-secondary"
+                >
+                  <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.segment === "priority" ? (
-                        getPriorityIcon(key)
-                      ) : (
-                        <span
-                          className="h-3 w-3 flex-shrink-0 rounded"
-                          style={{
-                            backgroundColor: generateBarColor(key, analytics, params, "segment"),
-                          }}
-                        />
-                      )}
-                      {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-brand-base">
-            {barGraphData.data.map((item, index) => (
-              <tr
-                key={`table-row-${index}`}
-                className="divide-x divide-brand-base text-xs text-brand-secondary"
-              >
-                <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}`)
+                    {params.x_axis === "priority" ? (
+                      getPriorityIcon(`${item.name}`)
+                    ) : (
+                      <span
+                        className="h-3 w-3 rounded"
+                        style={{
+                          backgroundColor: generateBarColor(
+                            `${item.name}`,
+                            analytics,
+                            params,
+                            "x_axis"
+                          ),
+                        }}
+                      />
+                    )}
+                    {params.x_axis === "assignees__email"
+                      ? renderAssigneeName(`${item.name}`)
+                      : addSpaceIfCamelCase(`${item.name}`)}
+                  </td>
+                  {params.segment ? (
+                    barGraphData.xAxisKeys.map((key, index) => (
+                      <td
+                        key={`segment-value-${index}`}
+                        className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
+                      >
+                        {item[key] ?? 0}
+                      </td>
+                    ))
                  ) : (
-                    <span
-                      className="h-3 w-3 rounded"
-                      style={{
-                        backgroundColor: generateBarColor(
-                          `${item.name}`,
-                          analytics,
-                          params,
-                          "x_axis"
-                        ),
-                      }}
-                    />
+                    <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
                  )}
-                  {addSpaceIfCamelCase(`${item.name}`)}
-                </td>
-                {params.segment ? (
-                  barGraphData.xAxisKeys.map((key, index) => (
-                    <td
-                      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>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
      </div>
    </div>
-  </div>
-);
+  );
+};
--- a/apps/app/components/analytics/scope-and-demand/demand.tsx
+++ b/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={{
--- a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/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) => (
-        <div key={`user-${index}`} className="flex items-start justify-between gap-4 text-xs">
+      {users.map((user) => (
+        <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>
            ) : (
--- a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/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,
--- a/apps/app/components/analytics/select/project.tsx
+++ b/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
    />
--- a/apps/app/components/analytics/select/segment.tsx
+++ b/apps/app/components/analytics/select/segment.tsx
@ -1,3 +1,5 @@
+import { useRouter } from "next/router";
+
 // ui
 import { CustomSelect } from "components/ui";
 // types
@ -11,29 +13,36 @@ type Props = {
  params: IAnalyticsParams;
 };

-export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => (
-  <CustomSelect
-    value={value}
-    label={
-      <span>
-        {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
-          <span className="text-brand-secondary">No value</span>
-        )}
-      </span>
-    }
-    onChange={onChange}
-    width="w-full"
-    maxHeight="lg"
-  >
-    <CustomSelect.Option value={null}>No value</CustomSelect.Option>
-    {ANALYTICS_X_AXIS_VALUES.map((item) => {
-      if (params.x_axis === item.value) return null;
+export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;

-      return (
-        <CustomSelect.Option key={item.value} value={item.value}>
-          {item.label}
-        </CustomSelect.Option>
-      );
-    })}
-  </CustomSelect>
-);
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <span>
+          {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label ?? (
+            <span className="text-brand-secondary">No value</span>
+          )}
+        </span>
+      }
+      onChange={onChange}
+      width="w-full"
+      maxHeight="lg"
+    >
+      <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}>
+            {item.label}
+          </CustomSelect.Option>
+        );
+      })}
+    </CustomSelect>
+  );
+};
--- a/apps/app/components/analytics/select/x-axis.tsx
+++ b/apps/app/components/analytics/select/x-axis.tsx
@ -1,27 +1,39 @@
+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 }) => (
-  <CustomSelect
-    value={value}
-    label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
-    onChange={onChange}
-    width="w-full"
-    maxHeight="lg"
-  >
-    {ANALYTICS_X_AXIS_VALUES.map((item) => (
-      <CustomSelect.Option key={item.value} value={item.value}>
-        {item.label}
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);
+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>}
+      onChange={onChange}
+      width="w-full"
+      maxHeight="lg"
+    >
+      {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>
+  );
+};
--- a/apps/app/components/analytics/select/y-axis.tsx
+++ b/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";

--- a/apps/app/types/analytics.d.ts
+++ b/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;