feat: add isEpic state to epic analytics sidebar

web/core/components/analytics-v2/overview/project-insights.tsx

@@ -27,19 +27,30 @@ const ProjectInsights = observer(() => {
   const params = useParams();
   const { t } = useTranslation();
   const workspaceSlug = params.workspaceSlug.toString();
-  const { selectedDuration, selectedDurationLabel, selectedProjects, selectedCycle, selectedModule, isPeekView } =
-    useAnalyticsV2();
+  const {
+    selectedDuration,
+    selectedDurationLabel,
+    selectedProjects,
+    selectedCycle,
+    selectedModule,
+    isPeekView,
+    isEpic,
+  } = useAnalyticsV2();
   const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/analytics-v2/empty-chart-radar" });
 
   const { data: projectInsightsData, isLoading: isLoadingProjectInsight } = useSWR(
     `radar-chart-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}`,
     () =>
-      analyticsV2Service.getAdvanceAnalyticsCharts<TChartData<string, string>[]>(workspaceSlug, "projects", {
-        // date_filter: selectedDuration,
-        ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }),
-        ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
-        ...(selectedModule ? { module_id: selectedModule } : {}),
-      },
+      analyticsV2Service.getAdvanceAnalyticsCharts<TChartData<string, string>[]>(
+        workspaceSlug,
+        "projects",
+        {
+          // date_filter: selectedDuration,
+          ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }),
+          ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
+          ...(selectedModule ? { module_id: selectedModule } : {}),
+          ...(isEpic ? { epic: true } : {}),
+        },
         isPeekView
       )
   );

web/core/components/analytics-v2/total-insights.tsx

@@ -20,8 +20,15 @@ const TotalInsights: React.FC<{ analyticsType: TAnalyticsTabsV2Base; peekView?:
     const params = useParams();
     const workspaceSlug = params.workspaceSlug.toString();
     const { t } = useTranslation();
-    const { selectedDuration, selectedProjects, selectedDurationLabel, selectedCycle, selectedModule, isPeekView } =
-      useAnalyticsV2();
+    const {
+      selectedDuration,
+      selectedProjects,
+      selectedDurationLabel,
+      selectedCycle,
+      selectedModule,
+      isPeekView,
+      isEpic,
+    } = useAnalyticsV2();
 
     const { data: totalInsightsData, isLoading } = useSWR(
       `total-insights-${analyticsType}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}`,
@@ -34,6 +41,7 @@ const TotalInsights: React.FC<{ analyticsType: TAnalyticsTabsV2Base; peekView?:
             ...(selectedProjects?.length > 0 ? { project_ids: selectedProjects.join(",") } : {}),
             ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
             ...(selectedModule ? { module_id: selectedModule } : {}),
+            ...(isEpic ? { epic: true } : {}),
           },
           isPeekView
         )

web/core/components/analytics-v2/work-items/created-vs-resolved.tsx

@@ -19,8 +19,15 @@ import { ChartLoader } from "../loaders";
 
 const analyticsV2Service = new AnalyticsV2Service();
 const CreatedVsResolved = observer(() => {
-  const { selectedDuration, selectedDurationLabel, selectedProjects, selectedCycle, selectedModule, isPeekView } =
-    useAnalyticsV2();
+  const {
+    selectedDuration,
+    selectedDurationLabel,
+    selectedProjects,
+    selectedCycle,
+    selectedModule,
+    isPeekView,
+    isEpic,
+  } = useAnalyticsV2();
   const params = useParams();
   const { t } = useTranslation();
   const workspaceSlug = params.workspaceSlug.toString();
@@ -28,12 +35,16 @@ const CreatedVsResolved = observer(() => {
   const { data: createdVsResolvedData, isLoading: isCreatedVsResolvedLoading } = useSWR(
     `created-vs-resolved-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}`,
     () =>
-      analyticsV2Service.getAdvanceAnalyticsCharts<IChartResponseV2>(workspaceSlug, "work-items", {
-        // date_filter: selectedDuration,
-        ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }),
-        ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
-        ...(selectedModule ? { module_id: selectedModule } : {}),
-      },
+      analyticsV2Service.getAdvanceAnalyticsCharts<IChartResponseV2>(
+        workspaceSlug,
+        "work-items",
+        {
+          // date_filter: selectedDuration,
+          ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }),
+          ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
+          ...(selectedModule ? { module_id: selectedModule } : {}),
+          ...(isEpic ? { epic: true } : {}),
+        },
         isPeekView
       )
   );

web/core/components/analytics-v2/work-items/modal/index.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane package imports
 import { ICycle, IModule, IProject } from "@plane/types";
+import { useAnalyticsV2 } from "@/hooks/store";
 // plane web components
 import { WorkItemsModalMainContent } from "./content";
 import { WorkItemsModalHeader } from "./header";
@@ -13,17 +14,22 @@ type Props = {
   projectDetails?: IProject | undefined;
   cycleDetails?: ICycle | undefined;
   moduleDetails?: IModule | undefined;
+  isEpic?: boolean;
 };
 
 export const WorkItemsModal: React.FC<Props> = observer((props) => {
-  const { isOpen, onClose, projectDetails, moduleDetails, cycleDetails } = props;
-
+  const { isOpen, onClose, projectDetails, moduleDetails, cycleDetails, isEpic } = props;
+  const { updateIsEpic } = useAnalyticsV2();
   const [fullScreen, setFullScreen] = useState(false);
 
   const handleClose = () => {
     onClose();
   };
 
+  useEffect(() => {
+    updateIsEpic(isEpic ?? false);
+  }, [isEpic, updateIsEpic]);
+
   return (
     <Transition.Root appear show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>

web/core/components/analytics-v2/work-items/priority-chart.tsx

@@ -46,7 +46,7 @@ const PriorityChart = observer((props: Props) => {
   const { t } = useTranslation();
   const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/analytics-v2/empty-chart-bar" });
   // store hooks
-  const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView } = useAnalyticsV2();
+  const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView, isEpic } = useAnalyticsV2();
   const { workspaceStates } = useProjectState();
   const { resolvedTheme } = useTheme();
   // router
@@ -65,6 +65,8 @@ const PriorityChart = observer((props: Props) => {
           ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }),
           ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
           ...(selectedModule ? { module_id: selectedModule } : {}),
+          ...(isEpic ? { epic: true } : {}),
+
           ...props,
         },
         isPeekView

web/core/components/analytics-v2/work-items/workitems-insight-table.tsx

@@ -27,7 +27,7 @@ const WorkItemsInsightTable = observer(() => {
   const { t } = useTranslation();
   // store hooks
   const { getProjectById } = useProject();
-  const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView } = useAnalyticsV2();
+  const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView, isEpic } = useAnalyticsV2();
   const { data: workItemsData, isLoading } = useSWR(
     `insights-table-work-items-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}`,
     () =>
@@ -39,6 +39,7 @@ const WorkItemsInsightTable = observer(() => {
           ...(selectedProjects?.length > 0 ? { project_ids: selectedProjects.join(",") } : {}),
           ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
           ...(selectedModule ? { module_id: selectedModule } : {}),
+          ...(isEpic ? { epic: true } : {}),
         },
         isPeekView
       )

web/core/store/analytics-v2.store.ts

@@ -13,7 +13,7 @@ export interface IAnalyticsStoreV2 {
   selectedCycle: string;
   selectedModule: string;
   isPeekView?: boolean;
-
+  isEpic?: boolean;
   //computed
   selectedDurationLabel: DurationType | null;
 
@@ -23,6 +23,7 @@ export interface IAnalyticsStoreV2 {
   updateSelectedCycle: (cycle: string) => void;
   updateSelectedModule: (module: string) => void;
   updateIsPeekView: (isPeekView: boolean) => void;
+  updateIsEpic: (isEpic: boolean) => void;
 }
 
 export class AnalyticsStoreV2 implements IAnalyticsStoreV2 {
@@ -33,6 +34,7 @@ export class AnalyticsStoreV2 implements IAnalyticsStoreV2 {
   selectedCycle: string = "";
   selectedModule: string = "";
   isPeekView: boolean = false;
+  isEpic: boolean = false;
   constructor() {
     makeObservable(this, {
       // observables
@@ -42,6 +44,7 @@ export class AnalyticsStoreV2 implements IAnalyticsStoreV2 {
       selectedCycle: observable.ref,
       selectedModule: observable.ref,
       isPeekView: observable.ref,
+      isEpic: observable.ref,
       // computed
       selectedDurationLabel: computed,
       // actions
@@ -50,6 +53,7 @@ export class AnalyticsStoreV2 implements IAnalyticsStoreV2 {
       updateSelectedCycle: action,
       updateSelectedModule: action,
       updateIsPeekView: action,
+      updateIsEpic: action,
     });
   }
 
@@ -96,4 +100,10 @@ export class AnalyticsStoreV2 implements IAnalyticsStoreV2 {
       this.isPeekView = isPeekView;
     });
   };
+
+  updateIsEpic = (isEpic: boolean) => {
+    runInAction(() => {
+      this.isEpic = isEpic;
+    });
+  };
 }