import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // 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"; // hooks import useProjects from "hooks/use-projects"; import useToast from "hooks/use-toast"; // ui import { PrimaryButton, SecondaryButton } from "components/ui"; // icons import { ArrowDownTrayIcon, ArrowPathIcon, CalendarDaysIcon, UserGroupIcon, } from "@heroicons/react/24/outline"; import { ContrastIcon, LayerDiagonalIcon } from "components/icons"; // helpers import { renderShortDate } from "helpers/date-time.helper"; import { renderEmoji } from "helpers/emoji.helper"; import { truncateText } from "helpers/string.helper"; // types import { IAnalyticsParams, IAnalyticsResponse, ICurrentUserResponse, IExportAnalyticsFormData, IWorkspace, } from "types"; // fetch-keys import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys"; // constants import { NETWORK_CHOICES } from "constants/project"; type Props = { analytics: IAnalyticsResponse | undefined; params: IAnalyticsParams; fullScreen: boolean; isProjectLevel: boolean; user: ICurrentUserResponse | undefined; }; export const AnalyticsSidebar: React.FC = ({ analytics, params, fullScreen, isProjectLevel = false, user, }) => { const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { projects } = useProjects(); const { setToastAlert } = useToast(); 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 trackExportAnalytics = () => { const eventPayload: any = { workspaceSlug: workspaceSlug?.toString(), params: { x_axis: params.x_axis, y_axis: params.y_axis, group: params.segment, project: params.project, }, }; 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; } trackEventServices.trackAnalyticsEvent( eventPayload, cycleId ? "CYCLE_ANALYTICS_EXPORT" : moduleId ? "MODULE_ANALYTICS_EXPORT" : projectId ? "PROJECT_ANALYTICS_EXPORT" : "WORKSPACE_ANALYTICS_EXPORT", user ); }; const exportAnalytics = () => { if (!workspaceSlug) return; const data: IExportAnalyticsFormData = { x_axis: params.x_axis, y_axis: params.y_axis, }; if (params.segment) data.segment = params.segment; if (params.project) data.project = params.project; analyticsService .exportAnalytics(workspaceSlug.toString(), data) .then((res) => { setToastAlert({ type: "success", title: "Success!", message: res.message, }); trackExportAnalytics(); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "There was some error in exporting the analytics. Please try again.", }) ); }; const selectedProjects = params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id); return (
{analytics ? analytics.total : "..."} Issues
{isProjectLevel && (
{renderShortDate( (cycleId ? cycleDetails?.created_at : moduleId ? moduleDetails?.created_at : projectDetails?.created_at) ?? "" )}
)}
{fullScreen ? ( <> {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (

Selected Projects

{selectedProjects.map((projectId) => { const project = projects?.find((p) => p.id === projectId); if (project) return (
{project.emoji ? ( {renderEmoji(project.emoji)} ) : project.icon_prop ? (
{renderEmoji(project.icon_prop)}
) : ( {project?.name.charAt(0)} )}

{truncateText(project.name, 20)}

({project.identifier})
Total members
{project.total_members}
Total cycles
{project.total_cycles}
Total modules
{project.total_modules}
); })}
)} {projectId ? ( cycleId && cycleDetails ? (

Analytics for {cycleDetails.name}

Lead
{cycleDetails.owned_by?.display_name}
Start Date
{cycleDetails.start_date && cycleDetails.start_date !== "" ? renderShortDate(cycleDetails.start_date) : "No start date"}
Target Date
{cycleDetails.end_date && cycleDetails.end_date !== "" ? renderShortDate(cycleDetails.end_date) : "No end date"}
) : moduleId && moduleDetails ? (

Analytics for {moduleDetails.name}

Lead
{moduleDetails.lead_detail?.display_name}
Start Date
{moduleDetails.start_date && moduleDetails.start_date !== "" ? renderShortDate(moduleDetails.start_date) : "No start date"}
Target Date
{moduleDetails.target_date && moduleDetails.target_date !== "" ? renderShortDate(moduleDetails.target_date) : "No end date"}
) : (
{projectDetails?.emoji ? (
{renderEmoji(projectDetails.emoji)}
) : projectDetails?.icon_prop ? (
{renderEmoji(projectDetails.icon_prop)}
) : ( {projectDetails?.name.charAt(0)} )}

{projectDetails?.name}

Network
{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}
) ) : null} ) : null}
{ if (!workspaceSlug) return; mutate(ANALYTICS(workspaceSlug.toString(), params)); }} >
Refresh
Export as CSV
); };