diff --git a/packages/constants/src/analytics/common.ts b/packages/constants/src/analytics/common.ts index cf0624e9137..4ac8995238e 100644 --- a/packages/constants/src/analytics/common.ts +++ b/packages/constants/src/analytics/common.ts @@ -11,7 +11,7 @@ export interface IInsightField { }; } -export const insightsFields: Record = { +export const ANALYTICS_INSIGHTS_FIELDS: Record = { overview: [ { key: "total_users", diff --git a/packages/i18n/src/locales/ru/translations.json b/packages/i18n/src/locales/ru/translations.json index d4067bd7254..4dcb5d0e67f 100644 --- a/packages/i18n/src/locales/ru/translations.json +++ b/packages/i18n/src/locales/ru/translations.json @@ -881,7 +881,8 @@ "completed": "Завершено", "in_progress": "В процессе", "planned": "Запланировано", - "paused": "На паузе" + "paused": "На паузе", + "no_of": "Количество {entity}" }, "chart": { "x_axis": "Ось X", diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx index e3dbe1d8c26..8826a55cf77 100644 --- a/packages/propel/src/charts/bar-chart/root.tsx +++ b/packages/propel/src/charts/bar-chart/root.tsx @@ -124,8 +124,8 @@ export const BarChart = React.memo((props: T value: yAxis.label, angle: -90, position: "bottom", - offset: -24, - dx: -16, + offset: yAxis.offset ?? -24, + dx: yAxis.dx ?? -16, className: AXIS_LABEL_CLASSNAME, }} tick={(props) => } diff --git a/packages/types/src/analytics.d.ts b/packages/types/src/analytics.d.ts index dbcf52f36d1..80c773fa2af 100644 --- a/packages/types/src/analytics.d.ts +++ b/packages/types/src/analytics.d.ts @@ -4,6 +4,12 @@ import { Row } from "@tanstack/react-table"; export type TAnalyticsTabsBase = "overview" | "work-items"; export type TAnalyticsGraphsBase = "projects" | "work-items" | "custom-work-items"; +export interface AnalyticsTab { + key: TAnalyticsTabsBase; + label: string; + content: React.FC; + isDisabled: boolean; +} export type TAnalyticsFilterParams = { project_ids?: string; cycle_id?: string; diff --git a/web/app/(all)/[workspaceSlug]/(projects)/analytics/page.tsx b/web/app/(all)/[workspaceSlug]/(projects)/analytics/page.tsx index 389a80a9018..7e9e0ac9e96 100644 --- a/web/app/(all)/[workspaceSlug]/(projects)/analytics/page.tsx +++ b/web/app/(all)/[workspaceSlug]/(projects)/analytics/page.tsx @@ -14,7 +14,7 @@ import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state"; // hooks import { useCommandPalette, useEventTracker, useProject, useUserPermissions, useWorkspace } from "@/hooks/store"; import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path"; -import { ANALYTICS_TABS } from "@/plane-web/components/analytics/tabs"; +import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs"; const AnalyticsPage = observer(() => { const router = useRouter(); @@ -40,17 +40,20 @@ const AnalyticsPage = observer(() => { EUserPermissionsLevel.WORKSPACE ); + const ANALYTICS_TABS = useMemo(() => getAnalyticsTabs(t), [t]); + const tabs = useMemo( () => ANALYTICS_TABS.map((tab) => ({ key: tab.key, - label: t(tab.i18nKey), + label: tab.label, content: , onClick: () => { router.push(`?tab=${tab.key}`); }, + isDisabled: tab.isDisabled, })), - [router, t] + [ANALYTICS_TABS, router] ); const defaultTab = searchParams.get("tab") || ANALYTICS_TABS[0].key; diff --git a/web/ce/components/analytics/tabs.ts b/web/ce/components/analytics/tabs.ts deleted file mode 100644 index 6f978a3c689..00000000000 --- a/web/ce/components/analytics/tabs.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TAnalyticsTabsBase } from "@plane/types"; -import { Overview } from "@/components/analytics/overview"; -import { WorkItems } from "@/components/analytics/work-items"; -export const ANALYTICS_TABS: { - key: TAnalyticsTabsBase; - i18nKey: string; - content: React.FC; - isExtended?: boolean; -}[] = [ - { key: "overview", i18nKey: "common.overview", content: Overview }, - { key: "work-items", i18nKey: "sidebar.work_items", content: WorkItems }, -]; diff --git a/web/ce/components/analytics/tabs.tsx b/web/ce/components/analytics/tabs.tsx new file mode 100644 index 00000000000..eb8344c0545 --- /dev/null +++ b/web/ce/components/analytics/tabs.tsx @@ -0,0 +1,8 @@ +import { AnalyticsTab } from "@plane/types"; +import { Overview } from "@/components/analytics/overview"; +import { WorkItems } from "@/components/analytics/work-items"; + +export const getAnalyticsTabs = (t: (key: string, params?: Record) => string): AnalyticsTab[] => [ + { key: "overview", label: t("common.overview"), content: Overview, isDisabled: false }, + { key: "work-items", label: t("sidebar.work_items"), content: WorkItems, isDisabled: false }, +]; diff --git a/web/core/components/analytics/analytics-wrapper.tsx b/web/core/components/analytics/analytics-wrapper.tsx index d6193a2b324..c86edb950fb 100644 --- a/web/core/components/analytics/analytics-wrapper.tsx +++ b/web/core/components/analytics/analytics-wrapper.tsx @@ -1,19 +1,20 @@ import React from "react"; // plane package imports +import { useTranslation } from "@plane/i18n"; import { cn } from "@plane/utils"; type Props = { - title: string; + i18nTitle: string; children: React.ReactNode; className?: string; }; const AnalyticsWrapper: React.FC = (props) => { - const { title, children, className } = props; - + const { i18nTitle, children, className } = props; + const { t } = useTranslation(); return (
-

{title}

+

{t(i18nTitle)}

{children}
); diff --git a/web/core/components/analytics/insight-table/data-table.tsx b/web/core/components/analytics/insight-table/data-table.tsx index 35dc3b365ec..8b1c1bab285 100644 --- a/web/core/components/analytics/insight-table/data-table.tsx +++ b/web/core/components/analytics/insight-table/data-table.tsx @@ -131,7 +131,7 @@ export function DataTable({ columns, data, searchPlaceholder, act {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( - + {header.isPlaceholder ? null : (flexRender(header.column.columnDef.header, header.getContext()) as any)} diff --git a/web/core/components/analytics/overview/root.tsx b/web/core/components/analytics/overview/root.tsx index 3856353aa54..b10bf32de7e 100644 --- a/web/core/components/analytics/overview/root.tsx +++ b/web/core/components/analytics/overview/root.tsx @@ -5,7 +5,7 @@ import ActiveProjects from "./active-projects"; import ProjectInsights from "./project-insights"; const Overview: React.FC = () => ( - +
diff --git a/web/core/components/analytics/total-insights.tsx b/web/core/components/analytics/total-insights.tsx index 61f3e7205b3..a5412dca383 100644 --- a/web/core/components/analytics/total-insights.tsx +++ b/web/core/components/analytics/total-insights.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite"; import { useParams } from "next/navigation"; import useSWR from "swr"; -import { IInsightField, insightsFields } from "@plane/constants"; +import { IInsightField, ANALYTICS_INSIGHTS_FIELDS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { IAnalyticsResponse, TAnalyticsTabsBase } from "@plane/types"; //hooks @@ -80,13 +80,13 @@ const TotalInsights: React.FC<{ className={cn( "grid grid-cols-1 gap-8 sm:grid-cols-2 md:gap-10", !peekView - ? insightsFields[analyticsType]?.length % 5 === 0 + ? ANALYTICS_INSIGHTS_FIELDS[analyticsType]?.length % 5 === 0 ? "gap-10 lg:grid-cols-5" : "gap-8 lg:grid-cols-4" : "grid-cols-2" )} > - {insightsFields[analyticsType]?.map((item) => ( + {ANALYTICS_INSIGHTS_FIELDS[analyticsType]?.map((item) => ( { }} yAxis={{ key: "count", - label: t("no_of", { entity: isEpic ? t("epics") : t("work_items") }), - offset: -30, - dx: -22, + label: t("common.no_of", { entity: isEpic ? t("epics") : t("work_items") }), + offset: -60, + dx: -24, }} legend={{ align: "left", diff --git a/web/core/components/analytics/work-items/priority-chart.tsx b/web/core/components/analytics/work-items/priority-chart.tsx index 354044bda7b..5c00699783c 100644 --- a/web/core/components/analytics/work-items/priority-chart.tsx +++ b/web/core/components/analytics/work-items/priority-chart.tsx @@ -216,8 +216,8 @@ const PriorityChart = observer((props: Props) => { }} yAxis={{ key: "count", - label: t("no_of", { entity: yAxisLabel.replace("_", " ") }), - offset: -40, + label: t("common.no_of", { entity: yAxisLabel.replace("_", " ") }), + offset: -60, dx: -26, }} /> diff --git a/web/core/components/analytics/work-items/root.tsx b/web/core/components/analytics/work-items/root.tsx index 80e8aef6207..c30a36d5944 100644 --- a/web/core/components/analytics/work-items/root.tsx +++ b/web/core/components/analytics/work-items/root.tsx @@ -6,7 +6,7 @@ import CustomizedInsights from "./customized-insights"; import WorkItemsInsightTable from "./workitems-insight-table"; const WorkItems: React.FC = () => ( - +