import { useRouter } from "next/router"; 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 { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "components/analytics"; // types import { IAnalyticsParams } from "types"; // fetch-keys import { ANALYTICS } from "constants/fetch-keys"; type Props = { additionalParams?: Partial<IAnalyticsParams>; fullScreen: boolean; }; const defaultValues: IAnalyticsParams = { x_axis: "priority", y_axis: "issue_count", segment: null, project: null, }; const analyticsService = new AnalyticsService(); 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({ defaultValues }); const params: IAnalyticsParams = { x_axis: watch("x_axis"), y_axis: watch("y_axis"), segment: watch("segment"), project: projectId ? [projectId.toString()] : watch("project"), ...additionalParams, }; const { data: analytics, error: analyticsError } = useSWR( workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null, workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null ); const isProjectLevel = projectId ? true : false; return ( <div className={`flex flex-col-reverse overflow-hidden ${fullScreen ? "md:grid md:h-full md:grid-cols-4" : ""}`}> <div className="col-span-3 flex h-full flex-col overflow-hidden"> <CustomAnalyticsSelectBar control={control} setValue={setValue} params={params} fullScreen={fullScreen} isProjectLevel={isProjectLevel} /> <CustomAnalyticsMainContent analytics={analytics} error={analyticsError} fullScreen={fullScreen} params={params} /> </div> <CustomAnalyticsSidebar analytics={analytics} params={params} fullScreen={fullScreen} isProjectLevel={isProjectLevel} /> </div> ); });