[WEB-4438] fix: epics label in y axis of epics(analytics-modal) #7644

apps/web/core/components/analytics/select/analytics-params.tsx

@@ -16,10 +16,11 @@ type Props = {
   params: IAnalyticsParams;
   workspaceSlug: string;
   classNames?: string;
+  isEpic?: boolean;
 };
 
 export const AnalyticsSelectParams: React.FC<Props> = observer((props) => {
-  const { control, params, classNames } = props;
+  const { control, params, classNames, isEpic } = props;
   const xAxisOptions = useMemo(
     () => ANALYTICS_X_AXIS_VALUES.filter((option) => option.value !== params.group_by),
     [params.group_by]
@@ -42,7 +43,10 @@ export const AnalyticsSelectParams: React.FC<Props> = observer((props) => {
                 onChange(val);
               }}
               options={ANALYTICS_Y_AXIS_VALUES}
-              hiddenOptions={[ChartYAxisMetric.ESTIMATE_POINT_COUNT]}
+              hiddenOptions={[
+                ChartYAxisMetric.ESTIMATE_POINT_COUNT,
+                isEpic ? ChartYAxisMetric.WORK_ITEM_COUNT : ChartYAxisMetric.EPIC_WORK_ITEM_COUNT,
+              ]}
             />
           )}
         />

apps/web/core/components/analytics/work-items/customized-insights.tsx

@@ -10,17 +10,13 @@ import AnalyticsSectionWrapper from "../analytics-section-wrapper";
 import { AnalyticsSelectParams } from "../select/analytics-params";
 import PriorityChart from "./priority-chart";
 
-const defaultValues: IAnalyticsParams = {
+const CustomizedInsights = observer(({ peekView, isEpic }: { peekView?: boolean; isEpic?: boolean }) => {
-  x_axis: ChartXAxisProperty.PRIORITY,
-  y_axis: ChartYAxisMetric.WORK_ITEM_COUNT,
-};
-
-const CustomizedInsights = observer(({ peekView }: { peekView?: boolean }) => {
   const { t } = useTranslation();
   const { workspaceSlug } = useParams();
   const { control, watch, setValue } = useForm<IAnalyticsParams>({
     defaultValues: {
-      ...defaultValues,
+      x_axis: ChartXAxisProperty.PRIORITY,
+      y_axis: isEpic ? ChartYAxisMetric.EPIC_WORK_ITEM_COUNT : ChartYAxisMetric.WORK_ITEM_COUNT,
     },
   });
 
@@ -41,6 +37,7 @@ const CustomizedInsights = observer(({ peekView }: { peekView?: boolean }) => {
           setValue={setValue}
           params={params}
           workspaceSlug={workspaceSlug.toString()}
+          isEpic={isEpic}
         />
       }
     >

apps/web/core/components/analytics/work-items/modal/content.tsx

@@ -17,10 +17,11 @@ type Props = {
   projectDetails: IProject | undefined;
   cycleDetails: ICycle | undefined;
   moduleDetails: IModule | undefined;
+  isEpic?: boolean;
 };
 
 export const WorkItemsModalMainContent: React.FC<Props> = observer((props) => {
-  const { projectDetails, cycleDetails, moduleDetails, fullScreen } = props;
+  const { projectDetails, cycleDetails, moduleDetails, fullScreen, isEpic } = props;
   const { updateSelectedProjects, updateSelectedCycle, updateSelectedModule, updateIsPeekView } = useAnalytics();
   const [isModalConfigured, setIsModalConfigured] = useState(false);
 
@@ -72,7 +73,7 @@ export const WorkItemsModalMainContent: React.FC<Props> = observer((props) => {
       <div className="flex flex-col gap-14 overflow-y-auto p-6">
         <TotalInsights analyticsType="work-items" peekView={!fullScreen} />
         <CreatedVsResolved />
-        <CustomizedInsights peekView={!fullScreen} />
+        <CustomizedInsights peekView={!fullScreen} isEpic={isEpic} />
         <WorkItemsInsightTable />
       </div>
     </Tab.Group>

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

@@ -61,6 +61,7 @@ export const WorkItemsModal: React.FC<Props> = observer((props) => {
             projectDetails={projectDetails}
             cycleDetails={cycleDetails}
             moduleDetails={moduleDetails}
+            isEpic={isEpic}
           />
         </div>
       </div>

packages/constants/src/analytics/common.ts

@@ -174,6 +174,10 @@ export const ANALYTICS_Y_AXIS_VALUES: { value: ChartYAxisMetric; label: string }
     value: ChartYAxisMetric.ESTIMATE_POINT_COUNT,
     label: "Estimate",
   },
+  {
+    value: ChartYAxisMetric.EPIC_WORK_ITEM_COUNT,
+    label: "Epic",
+  },
 ];
 
 export const ANALYTICS_V2_DATE_KEYS = ["completed_at", "target_date", "start_date", "created_at"];

packages/types/src/analytics.ts

@@ -28,6 +28,7 @@ export enum ChartYAxisMetric {
   WORK_ITEM_DUE_THIS_WEEK_COUNT = "WORK_ITEM_DUE_THIS_WEEK_COUNT",
   WORK_ITEM_DUE_TODAY_COUNT = "WORK_ITEM_DUE_TODAY_COUNT",
   BLOCKED_WORK_ITEM_COUNT = "BLOCKED_WORK_ITEM_COUNT",
+  EPIC_WORK_ITEM_COUNT = "EPIC_WORK_ITEM_COUNT",
 }
 
 export type TAnalyticsTabsBase = "overview" | "work-items";