import React, { Fragment, useEffect } 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 trackEventServices from "services/track-event.service"; // layouts import { WorkspaceAuthorizationLayout } from "layouts/auth-layout"; // components import { CustomAnalytics, ScopeAndDemand } from "components/analytics"; // ui import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // types import { IAnalyticsParams } from "types"; // fetch-keys import { ANALYTICS } from "constants/fetch-keys"; const defaultValues: IAnalyticsParams = { x_axis: "priority", y_axis: "issue_count", segment: null, project: null, }; const tabsList = ["Scope and Demand", "Custom Analytics"]; const Analytics = () => { const router = useRouter(); const { workspaceSlug } = router.query; 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"), }; const { data: analytics, error: analyticsError } = useSWR( workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null, workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null ); const trackAnalyticsEvent = (tab: string) => { const eventPayload = { workspaceSlug: workspaceSlug?.toString(), }; const eventType = tab === "Scope and Demand" ? "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS" : "WORKSPACE_CUSTOM_ANALYTICS"; trackEventServices.trackAnalyticsEvent(eventPayload, eventType); }; useEffect(() => { if (!workspaceSlug) return; trackEventServices.trackAnalyticsEvent( { workspaceSlug: workspaceSlug?.toString() }, "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS" ); }, [workspaceSlug]); return ( } // right={ // { // const e = new KeyboardEvent("keydown", { key: "p" }); // document.dispatchEvent(e); // }} // > // // Save Analytics // // } >
{tabsList.map((tab) => ( `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${ selected ? "bg-brand-surface-2" : "" }` } onClick={() => trackAnalyticsEvent(tab)} > {tab} ))}
); }; export default Analytics;