[WEB-3781] Analytics page enhancements (#7005)

* chore: analytics endpoint * added anlytics v2 * updated status icons * added area chart in workitems and en translations * active projects * chore: created analytics chart * chore: validation errors * improved radar-chart , added empty states , added projects summary * chore: added a new graph in advance analytics * integrated priority chart * chore: added csv exporter * added priority dropdown * integrated created vs resolved chart * custom x and y axis label in bar and area chart * added wrapper styles to legends * added filter components * fixed temp data imports * integrated filters in priority charts * added label to priority chart and updated duration filter * refactor * reverted to void onchange * fixed some contant exports * fixed type issues * fixed some type and build issues * chore: updated the filtering logic for analytics * updated default value to last_30_days * percentage value whole number and added some rules for axis options * fixed some translations * added - custom tick for radar, calc of insight cards, filter labels * chore: opitmised the analytics endpoint * replace old analytics path with new , updated labels of insight card, done some store fixes * chore: updated the export request * Enhanced ProjectSelect to support multi-select, improved state management, and optimized data fetching and component structure. * fix: round completion percentage calculation in ActiveProjectItem * added empty states in project insights * Added loader and empty state in created/resolved chart * added loaders * added icons in filters * added custom colors in customised charts * cleaned up some code * added some responsiveness * updated translations * updated serrchbar for the table * added work item modal in project analytics * fixed some of the layput issues in the peek view * chore: updated the base function for viewsets * synced tab to url * code cleanup * chore: updated the export logic * fixed project_ids filter * added icon in projectdropdown * updated export button position * export csv and emptystates icons * refactor * code refactor * updated loaders, moved color pallete to contants, added nullish collasece operator in neccessary places * removed uneccessary cn * fixed formatting issues * fixed empty project_ids in payload * improved null checks * optimized charts * modified relevant variables to observable.ref * fixed the duration type * optimized some code * updated query key in project-insight * updated query key in project-insight * updated formatting * chore: replaced analytics route with new one and done some optimizations * removed the old analytics --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
2025-08-07 19:59:33 +00:00 · 2025-05-12 20:50:33 +05:30
parent 0d5c7c6653
commit 75d81f9e95
103 changed files with 3919 additions and 162 deletions
--- a/packages/constants/src/analytics-v2/common.ts
+++ b/packages/constants/src/analytics-v2/common.ts
@@ -0,0 +1,105 @@
+import { TAnalyticsTabsV2Base } from "@plane/types";
+import { ChartXAxisProperty, ChartYAxisMetric } from "../chart";
+
+export const insightsFields: Record<TAnalyticsTabsV2Base, string[]> = {
+  overview: [
+    "total_users",
+    "total_admins",
+    "total_members",
+    "total_guests",
+    "total_projects",
+    "total_work_items",
+    "total_cycles",
+    "total_intake",
+  ],
+  "work-items": [
+    "total_work_items",
+    "started_work_items",
+    "backlog_work_items",
+    "un_started_work_items",
+    "completed_work_items",
+  ],
+};
+
+export const ANALYTICS_V2_DURATION_FILTER_OPTIONS = [
+  {
+    name: "Yesterday",
+    value: "yesterday",
+  },
+  {
+    name: "Last 7 days",
+    value: "last_7_days",
+  },
+  {
+    name: "Last 30 days",
+    value: "last_30_days",
+  },
+  {
+    name: "Last 3 months",
+    value: "last_3_months",
+  },
+];
+
+export const ANALYTICS_V2_X_AXIS_VALUES: { value: ChartXAxisProperty; label: string }[] = [
+  {
+    value: ChartXAxisProperty.STATES,
+    label: "State name",
+  },
+  {
+    value: ChartXAxisProperty.STATE_GROUPS,
+    label: "State group",
+  },
+  {
+    value: ChartXAxisProperty.PRIORITY,
+    label: "Priority",
+  },
+  {
+    value: ChartXAxisProperty.LABELS,
+    label: "Label",
+  },
+  {
+    value: ChartXAxisProperty.ASSIGNEES,
+    label: "Assignee",
+  },
+  {
+    value: ChartXAxisProperty.ESTIMATE_POINTS,
+    label: "Estimate point",
+  },
+  {
+    value: ChartXAxisProperty.CYCLES,
+    label: "Cycle",
+  },
+  {
+    value: ChartXAxisProperty.MODULES,
+    label: "Module",
+  },
+  {
+    value: ChartXAxisProperty.COMPLETED_AT,
+    label: "Completed date",
+  },
+  {
+    value: ChartXAxisProperty.TARGET_DATE,
+    label: "Due date",
+  },
+  {
+    value: ChartXAxisProperty.START_DATE,
+    label: "Start date",
+  },
+  {
+    value: ChartXAxisProperty.CREATED_AT,
+    label: "Created date",
+  },
+];
+
+export const ANALYTICS_V2_Y_AXIS_VALUES: { value: ChartYAxisMetric; label: string }[] = [
+  {
+    value: ChartYAxisMetric.WORK_ITEM_COUNT,
+    label: "Work item",
+  },
+  {
+    value: ChartYAxisMetric.ESTIMATE_POINT_COUNT,
+    label: "Estimate",
+  },
+];
+
+export const ANALYTICS_V2_DATE_KEYS = ["completed_at", "target_date", "start_date", "created_at"];
--- a/packages/constants/src/analytics-v2/index.ts
+++ b/packages/constants/src/analytics-v2/index.ts
@@ -0,0 +1 @@
+export * from "./common"
--- a/packages/constants/src/chart.ts
+++ b/packages/constants/src/chart.ts
@@ -1,2 +1,157 @@
+import { TChartColorScheme } from "@plane/types";
+
 export const LABEL_CLASSNAME = "uppercase text-custom-text-300/60 text-sm tracking-wide";
 export const AXIS_LABEL_CLASSNAME = "uppercase text-custom-text-300/60 text-sm tracking-wide";
+
+
+export enum ChartXAxisProperty {
+  STATES = "STATES",
+  STATE_GROUPS = "STATE_GROUPS",
+  LABELS = "LABELS",
+  ASSIGNEES = "ASSIGNEES",
+  ESTIMATE_POINTS = "ESTIMATE_POINTS",
+  CYCLES = "CYCLES",
+  MODULES = "MODULES",
+  PRIORITY = "PRIORITY",
+  START_DATE = "START_DATE",
+  TARGET_DATE = "TARGET_DATE",
+  CREATED_AT = "CREATED_AT",
+  COMPLETED_AT = "COMPLETED_AT",
+  CREATED_BY = "CREATED_BY",
+  WORK_ITEM_TYPES = "WORK_ITEM_TYPES",
+  PROJECTS = "PROJECTS",
+  EPICS = "EPICS",
+}
+
+export enum ChartYAxisMetric {
+  WORK_ITEM_COUNT = "WORK_ITEM_COUNT",
+  ESTIMATE_POINT_COUNT = "ESTIMATE_POINT_COUNT",
+  PENDING_WORK_ITEM_COUNT = "PENDING_WORK_ITEM_COUNT",
+  COMPLETED_WORK_ITEM_COUNT = "COMPLETED_WORK_ITEM_COUNT",
+  IN_PROGRESS_WORK_ITEM_COUNT = "IN_PROGRESS_WORK_ITEM_COUNT",
+  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",
+}
+
+
+export enum ChartXAxisDateGrouping {
+  DAY = "DAY",
+  WEEK = "WEEK",
+  MONTH = "MONTH",
+  YEAR = "YEAR",
+}
+
+export const TO_CAPITALIZE_PROPERTIES: ChartXAxisProperty[] = [
+  ChartXAxisProperty.PRIORITY,
+  ChartXAxisProperty.STATE_GROUPS,
+];
+
+export const CHART_X_AXIS_DATE_PROPERTIES: ChartXAxisProperty[] = [
+  ChartXAxisProperty.START_DATE,
+  ChartXAxisProperty.TARGET_DATE,
+  ChartXAxisProperty.CREATED_AT,
+  ChartXAxisProperty.COMPLETED_AT,
+];
+
+
+export enum EChartModels {
+  BASIC = "BASIC",
+  STACKED = "STACKED",
+  GROUPED = "GROUPED",
+  MULTI_LINE = "MULTI_LINE",
+  COMPARISON = "COMPARISON",
+  PROGRESS = "PROGRESS",
+}
+
+export const CHART_COLOR_PALETTES: {
+  key: TChartColorScheme;
+  i18n_label: string;
+  light: string[];
+  dark: string[];
+}[] = [
+    {
+      key: "modern",
+      i18n_label: "dashboards.widget.color_palettes.modern",
+      light: [
+        "#6172E8",
+        "#8B6EDB",
+        "#E05F99",
+        "#29A383",
+        "#CB8A37",
+        "#3AA7C1",
+        "#F1B24A",
+        "#E84855",
+        "#50C799",
+        "#B35F9E",
+      ],
+      dark: [
+        "#6B7CDE",
+        "#8E9DE6",
+        "#D45D9E",
+        "#2EAF85",
+        "#D4A246",
+        "#29A7C1",
+        "#B89F6A",
+        "#D15D64",
+        "#4ED079",
+        "#A169A4",
+      ],
+    },
+    {
+      key: "horizon",
+      i18n_label: "dashboards.widget.color_palettes.horizon",
+      light: [
+        "#E76E50",
+        "#289D90",
+        "#F3A362",
+        "#E9C368",
+        "#264753",
+        "#8A6FA0",
+        "#5B9EE5",
+        "#7CC474",
+        "#BA7DB5",
+        "#CF8640",
+      ],
+      dark: [
+        "#E05A3A",
+        "#1D8A7E",
+        "#D98B4D",
+        "#D1AC50",
+        "#3A6B7C",
+        "#7D6297",
+        "#4D8ACD",
+        "#569C64",
+        "#C16A8C",
+        "#B77436",
+      ],
+    },
+    {
+      key: "earthen",
+      i18n_label: "dashboards.widget.color_palettes.earthen",
+      light: [
+        "#386641",
+        "#6A994E",
+        "#A7C957",
+        "#E97F4E",
+        "#BC4749",
+        "#9E2A2B",
+        "#80CED1",
+        "#5C3E79",
+        "#526EAB",
+        "#6B5B95",
+      ],
+      dark: [
+        "#497752",
+        "#7BAA5F",
+        "#B8DA68",
+        "#FA905F",
+        "#CD585A",
+        "#AF3B3C",
+        "#91DFE2",
+        "#6D4F8A",
+        "#637FBC",
+        "#7C6CA6",
+      ],
+    },
+  ];
--- a/packages/constants/src/index.ts
+++ b/packages/constants/src/index.ts
@@ -33,3 +33,4 @@ export * from "./page";
 export * from "./emoji";
 export * from "./subscription";
 export * from "./icon";
+export * from "./analytics-v2";
--- a/packages/constants/src/state.ts
+++ b/packages/constants/src/state.ts
@@ -1,3 +1,4 @@
+"use client"
 export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";

 export type TDraggableData = {
@@ -77,4 +78,5 @@ export const PROGRESS_STATE_GROUPS_DETAILS = [
  },
 ];

+
 export const DISPLAY_WORKFLOW_PRO_CTA = false;