refactor: analytics

web/components/analytics/custom-analytics/custom-analytics.tsx

@@ -1,24 +1,20 @@
 import { useRouter } from "next/router";
-import useSWR, { mutate } from "swr";
-import { Control, UseFormSetValue, useForm } from "react-hook-form";
-// hooks
-import useProjects from "hooks/use-projects";
+import useSWR from "swr";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+
+// services
+import analyticsService from "services/analytics.service";
 // components
-import { AnalyticsGraph, AnalyticsSelectBar, AnalyticsSidebar, AnalyticsTable } from "components/analytics";
-// ui
-import { Button, Loader } from "@plane/ui";
-// helpers
-import { convertResponseToBarGraphData } from "helpers/analytics.helper";
+import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "components/analytics";
 // types
-import { IAnalyticsParams, IAnalyticsResponse, IUser } from "types";
+import { IAnalyticsParams } from "types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
-// services
-import analyticsService from "services/analytics.service";
 
 type Props = {
+  additionalParams?: Partial<IAnalyticsParams>;
   fullScreen: boolean;
-  user?: IUser | undefined;
 };
 
 const defaultValues: IAnalyticsParams = {
@@ -28,17 +24,20 @@ const defaultValues: IAnalyticsParams = {
   project: null,
 };
 
-export const CustomAnalytics: React.FC<Props> = ({ fullScreen, user }) => {
+export const CustomAnalytics: React.FC<Props> = observer((props) => {
+  const { additionalParams, fullScreen } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
+  const { control, watch, setValue } = useForm({ defaultValues });
 
   const params: IAnalyticsParams = {
     x_axis: watch("x_axis"),
     y_axis: watch("y_axis"),
     segment: watch("segment"),
-    project: watch("project"),
+    project: projectId ? [projectId.toString()] : watch("project"),
+    ...additionalParams,
   };
 
   const { data: analytics, error: analyticsError } = useSWR(
@@ -48,80 +47,29 @@ export const CustomAnalytics: React.FC<Props> = ({ fullScreen, user }) => {
 
   const isProjectLevel = projectId ? true : false;
 
-  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
-  const barGraphData = convertResponseToBarGraphData(analytics?.distribution, params);
-
-  const { projects } = useProjects();
-
   return (
     <div className={`overflow-hidden flex flex-col-reverse ${fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""}`}>
       <div className="col-span-3 flex flex-col h-full overflow-hidden">
-        <AnalyticsSelectBar
+        <CustomAnalyticsSelectBar
           control={control}
           setValue={setValue}
-          projects={projects ?? []}
           params={params}
           fullScreen={fullScreen}
           isProjectLevel={isProjectLevel}
         />
-        {!analyticsError ? (
-          analytics ? (
-            analytics.total > 0 ? (
-              <div className="h-full overflow-y-auto">
-                <AnalyticsGraph
-                  analytics={analytics}
-                  barGraphData={barGraphData}
-                  params={params}
-                  yAxisKey={yAxisKey}
-                  fullScreen={fullScreen}
-                />
-                <AnalyticsTable analytics={analytics} barGraphData={barGraphData} params={params} yAxisKey={yAxisKey} />
-              </div>
-            ) : (
-              <div className="grid h-full place-items-center p-5">
-                <div className="space-y-4 text-custom-text-200">
-                  <p className="text-sm">No matching issues found. Try changing the parameters.</p>
-                </div>
-              </div>
-            )
-          ) : (
-            <Loader className="space-y-6 p-5">
-              <Loader.Item height="300px" />
-              <Loader className="space-y-4">
-                <Loader.Item height="30px" />
-                <Loader.Item height="30px" />
-                <Loader.Item height="30px" />
-                <Loader.Item height="30px" />
-              </Loader>
-            </Loader>
-          )
-        ) : (
-          <div className="grid h-full place-items-center p-5">
-            <div className="space-y-4 text-custom-text-200">
-              <p className="text-sm">There was some error in fetching the data.</p>
-              <div className="flex items-center justify-center gap-2">
-                <Button
-                  variant="primary"
-                  onClick={() => {
-                    if (!workspaceSlug) return;
-
-                    mutate(ANALYTICS(workspaceSlug.toString(), params));
-                  }}
-                >
-                  Refresh
-                </Button>
-              </div>
-            </div>
-          </div>
-        )}
+        <CustomAnalyticsMainContent
+          analytics={analytics}
+          error={analyticsError}
+          fullScreen={fullScreen}
+          params={params}
+        />
       </div>
-      <AnalyticsSidebar
+      <CustomAnalyticsSidebar
         analytics={analytics}
         params={params}
         fullScreen={fullScreen}
         isProjectLevel={isProjectLevel}
-        user={user}
       />
     </div>
   );
-};
+});

web/components/analytics/custom-analytics/graph/index.tsx

@@ -6,7 +6,7 @@ import { CustomTooltip } from "./custom-tooltip";
 import { BarGraph } from "components/ui";
 // helpers
 import { findStringWithMostCharacters } from "helpers/array.helper";
-import { generateBarColor } from "helpers/analytics.helper";
+import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
 
@@ -21,21 +21,7 @@ type Props = {
   fullScreen: boolean;
 };
 
-export const AnalyticsGraph: React.FC<Props> = ({
-  analytics,
-  barGraphData,
-  params,
-  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 || "?";
-  };
-
+export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey, fullScreen }) => {
   const generateYAxisTickValues = () => {
     if (!analytics) return [];
 
@@ -110,7 +96,7 @@ export const AnalyticsGraph: React.FC<Props> = ({
                       <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
                         {params.x_axis === "assignees__id"
                           ? datum.value && datum.value !== "None"
-                            ? renderAssigneeName(datum.value)[0].toUpperCase()
+                            ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
                             : "?"
                           : datum.value && datum.value !== "None"
                           ? `${datum.value}`.toUpperCase()[0]
@@ -119,7 +105,13 @@ export const AnalyticsGraph: React.FC<Props> = ({
                     </g>
                   );
               }
-            : undefined,
+            : (datum) => (
+                <g transform={`translate(${datum.x},${datum.y})`}>
+                  <text x={0} y={21} textAnchor="middle" fontSize={10}>
+                    {generateDisplayName(datum.value, analytics, params, "x_axis")}
+                  </text>
+                </g>
+              ),
       }}
       theme={{
         axis: {},

web/components/analytics/custom-analytics/index.ts

@@ -1,6 +1,7 @@
 export * from "./graph";
-export * from "./create-update-analytics-modal";
+export * from "./select";
 export * from "./custom-analytics";
+export * from "./main-content";
 export * from "./select-bar";
 export * from "./sidebar";
 export * from "./table";