[WEB-4230] refactor: Analytics code refacor, Removal of nivo charts dependencies and translations (#7131)

* chore: added code split for the analytics store * chore: done some refactor * refactor: update entity keys in analytics and translations * chore: updated the translations * refactor: simplify AnalyticsStoreV2 class by removing unnecessary constructor * feat: add AnalyticsStoreV2 class and interface for enhanced analytics functionality * feat: enhance WorkItemsModal and analytics store with isEpic functionality * feat: integrate isEpic state into TotalInsights and WorkItemsModal components * refactor: remove isEpic state from WorkItemsModalMainContent component * refactor: removed old analytics components and related services * refactor: new analytics * refactor: removed all nivo chart dependencies * chore: resolved coderabbit comments * fix: update processUrl to handle custom-work-items in peek view * feat: implement CSV export functionality in InsightTable component * feat: enhance analytics service with filter parameters and improve data handling in InsightTable * feat: add new translation keys for various statuses across multiple languages * [WEB-4246] fix: enhance analytics components to include 'isEpic' parameter for improved data fetching * chore: update yarn.lock to remove deprecated @nivo packages and clean up unused dependencies
2025-06-06 01:53:38 +05:30 · 2025-06-06 01:53:38 +05:30 · 14d2d69120
commit 14d2d69120
parent 570a9e319e
151 changed files with 1144 additions and 4800 deletions
--- a/web/core/components/analytics/total-insights.tsx
+++ b/web/core/components/analytics/total-insights.tsx
@ -0,0 +1,102 @@
+// plane package imports
+import { observer } from "mobx-react-lite";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+import { IInsightField, insightsFields } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IAnalyticsResponse, TAnalyticsTabsBase } from "@plane/types";
+//hooks
+import { cn } from "@/helpers/common.helper";
+import { useAnalytics } from "@/hooks/store/use-analytics";
+//services
+import { AnalyticsService } from "@/services/analytics.service";
+// plane web components
+import InsightCard from "./insight-card";
+
+const analyticsService = new AnalyticsService();
+
+const getInsightLabel = (
+  analyticsType: TAnalyticsTabsBase,
+  item: IInsightField,
+  isEpic: boolean | undefined,
+  t: (key: string, options?: any) => string
+) => {
+  if (analyticsType === "work-items") {
+    return isEpic
+      ? t(item.i18nKey, { entity: t("common.epics") })
+      : t(item.i18nKey, { entity: t("common.work_items") });
+  }
+
+  // Get the base translation with entity
+  const baseTranslation = t(item.i18nKey, {
+    ...item.i18nProps,
+    entity: item.i18nProps?.entity && t(item.i18nProps?.entity),
+  });
+
+  // Add prefix if available
+  const prefix = item.i18nProps?.prefix ? `${t(item.i18nProps.prefix)} ` : "";
+
+  // Add suffix if available
+  const suffix = item.i18nProps?.suffix ? ` ${t(item.i18nProps.suffix)}` : "";
+
+  // Combine prefix, base translation, and suffix
+  return `${prefix}${baseTranslation}${suffix}`;
+};
+
+const TotalInsights: React.FC<{
+  analyticsType: TAnalyticsTabsBase;
+  peekView?: boolean;
+}> = observer(({ analyticsType, peekView }) => {
+  const params = useParams();
+  const workspaceSlug = params.workspaceSlug.toString();
+  const { t } = useTranslation();
+  const {
+    selectedDuration,
+    selectedProjects,
+    selectedDurationLabel,
+    selectedCycle,
+    selectedModule,
+    isPeekView,
+    isEpic,
+  } = useAnalytics();
+  const { data: totalInsightsData, isLoading } = useSWR(
+    `total-insights-${analyticsType}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isEpic}`,
+    () =>
+      analyticsService.getAdvanceAnalytics<IAnalyticsResponse>(
+        workspaceSlug,
+        analyticsType,
+        {
+          // date_filter: selectedDuration,
+          ...(selectedProjects?.length > 0 ? { project_ids: selectedProjects.join(",") } : {}),
+          ...(selectedCycle ? { cycle_id: selectedCycle } : {}),
+          ...(selectedModule ? { module_id: selectedModule } : {}),
+          ...(isEpic ? { epic: true } : {}),
+        },
+        isPeekView
+      )
+  );
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 gap-8 sm:grid-cols-2 md:gap-10",
+        !peekView
+          ? insightsFields[analyticsType]?.length % 5 === 0
+            ? "gap-10 lg:grid-cols-5"
+            : "gap-8 lg:grid-cols-4"
+          : "grid-cols-2"
+      )}
+    >
+      {insightsFields[analyticsType]?.map((item) => (
+        <InsightCard
+          key={`${analyticsType}-${item.key}`}
+          isLoading={isLoading}
+          data={totalInsightsData?.[item.key]}
+          label={getInsightLabel(analyticsType, item, isEpic, t)}
+          versus={selectedDurationLabel}
+        />
+      ))}
+    </div>
+  );
+});
+
+export default TotalInsights;