import React, { Fragment, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // react-hook-form import { useForm } from "react-hook-form"; // headless ui import { Tab } from "@headlessui/react"; // services import analyticsService from "services/analytics.service"; import projectService from "services/project.service"; import cyclesService from "services/cycles.service"; import modulesService from "services/modules.service"; import trackEventServices from "services/track-event.service"; // components import { CustomAnalytics, ScopeAndDemand } from "components/analytics"; // icons import { ArrowsPointingInIcon, ArrowsPointingOutIcon, XMarkIcon, } from "@heroicons/react/24/outline"; // types import { IAnalyticsParams, IWorkspace } from "types"; // fetch-keys import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys"; import useUserAuth from "hooks/use-user-auth"; type Props = { isOpen: boolean; onClose: () => void; }; const defaultValues: IAnalyticsParams = { x_axis: "priority", y_axis: "issue_count", segment: null, project: null, }; const tabsList = ["Scope and Demand", "Custom Analytics"]; export const AnalyticsProjectModal: React.FC = ({ isOpen, onClose }) => { const [fullScreen, setFullScreen] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { user } = useUserAuth(); const { control, watch, setValue } = useForm({ defaultValues }); const params: IAnalyticsParams = { x_axis: watch("x_axis"), y_axis: watch("y_axis"), segment: watch("segment"), project: projectId ? [projectId.toString()] : watch("project"), cycle: cycleId ? cycleId.toString() : null, module: moduleId ? moduleId.toString() : null, }; const { data: analytics, error: analyticsError } = useSWR( workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null, workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null ); const { data: projectDetails } = useSWR( workspaceSlug && projectId && !(cycleId || moduleId) ? PROJECT_DETAILS(projectId.toString()) : null, workspaceSlug && projectId && !(cycleId || moduleId) ? () => projectService.getProject(workspaceSlug.toString(), projectId.toString()) : null ); const { data: cycleDetails } = useSWR( workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null, workspaceSlug && projectId && cycleId ? () => cyclesService.getCycleDetails( workspaceSlug.toString(), projectId.toString(), cycleId.toString() ) : null ); const { data: moduleDetails } = useSWR( workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null, workspaceSlug && projectId && moduleId ? () => modulesService.getModuleDetails( workspaceSlug.toString(), projectId.toString(), moduleId.toString() ) : null ); const trackAnalyticsEvent = (tab: string) => { const eventPayload: any = { workspaceSlug: workspaceSlug?.toString(), }; if (projectDetails) { const workspaceDetails = projectDetails.workspace as IWorkspace; eventPayload.workspaceId = workspaceDetails.id; eventPayload.workspaceName = workspaceDetails.name; eventPayload.projectId = projectDetails.id; eventPayload.projectIdentifier = projectDetails.identifier; eventPayload.projectName = projectDetails.name; } if (cycleDetails || moduleDetails) { const details = cycleDetails || moduleDetails; eventPayload.workspaceId = details?.workspace_detail?.id; eventPayload.workspaceName = details?.workspace_detail?.name; eventPayload.projectId = details?.project_detail.id; eventPayload.projectIdentifier = details?.project_detail.identifier; eventPayload.projectName = details?.project_detail.name; } if (cycleDetails) { eventPayload.cycleId = cycleDetails.id; eventPayload.cycleName = cycleDetails.name; } if (moduleDetails) { eventPayload.moduleId = moduleDetails.id; eventPayload.moduleName = moduleDetails.name; } const eventType = tab === "Scope and Demand" ? "SCOPE_AND_DEMAND_ANALYTICS" : "CUSTOM_ANALYTICS"; trackEventServices.trackAnalyticsEvent( eventPayload, cycleId ? `CYCLE_${eventType}` : moduleId ? `MODULE_${eventType}` : `PROJECT_${eventType}`, user ); }; const handleClose = () => { onClose(); }; return (

Analytics for{" "} {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}

{tabsList.map((tab) => ( `rounded-3xl border border-custom-border-300 px-4 py-2 text-xs hover:bg-custom-background-80 ${ selected ? "bg-custom-background-80" : "" }` } onClick={() => trackAnalyticsEvent(tab)} > {tab} ))} {/*

Analytics for

*/}
); };