14d2d69120
* 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
85 lines
3 KiB
TypeScript
85 lines
3 KiB
TypeScript
"use client";
|
|
import { FC, Fragment } from "react";
|
|
import { observer } from "mobx-react";
|
|
// plane ui
|
|
import { useTranslation } from "@plane/i18n";
|
|
import { TCycleEstimateType } from "@plane/types";
|
|
import { Loader } from "@plane/ui";
|
|
// components
|
|
import ProgressChart from "@/components/core/sidebar/progress-chart";
|
|
import { EstimateTypeDropdown, validateCycleSnapshot } from "@/components/cycles";
|
|
// helpers
|
|
import { getDate } from "@/helpers/date-time.helper";
|
|
// hooks
|
|
import { useCycle } from "@/hooks/store";
|
|
|
|
type ProgressChartProps = {
|
|
workspaceSlug: string;
|
|
projectId: string;
|
|
cycleId: string;
|
|
};
|
|
export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
|
|
const { workspaceSlug, projectId, cycleId } = props;
|
|
|
|
// hooks
|
|
const { getEstimateTypeByCycleId, getCycleById, fetchCycleDetails, fetchArchivedCycleDetails, setEstimateType } =
|
|
useCycle();
|
|
const { t } = useTranslation();
|
|
|
|
// derived data
|
|
const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
|
|
const cycleStartDate = getDate(cycleDetails?.start_date);
|
|
const cycleEndDate = getDate(cycleDetails?.end_date);
|
|
const totalEstimatePoints = cycleDetails?.total_estimate_points || 0;
|
|
const totalIssues = cycleDetails?.total_issues || 0;
|
|
const estimateType = getEstimateTypeByCycleId(cycleId);
|
|
|
|
const chartDistributionData =
|
|
estimateType === "points" ? cycleDetails?.estimate_distribution : cycleDetails?.distribution || undefined;
|
|
|
|
const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
|
|
|
|
if (!workspaceSlug || !projectId || !cycleId) return null;
|
|
|
|
const isArchived = !!cycleDetails?.archived_at;
|
|
|
|
// handlers
|
|
const onChange = async (value: TCycleEstimateType) => {
|
|
setEstimateType(cycleId, value);
|
|
if (!workspaceSlug || !projectId || !cycleId) return;
|
|
try {
|
|
if (isArchived) {
|
|
await fetchArchivedCycleDetails(workspaceSlug, projectId, cycleId);
|
|
} else {
|
|
await fetchCycleDetails(workspaceSlug, projectId, cycleId);
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
setEstimateType(cycleId, estimateType);
|
|
}
|
|
};
|
|
return (
|
|
<div>
|
|
<div className="relative flex items-center justify-between gap-2 pt-4">
|
|
<EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycleId} projectId={projectId} />
|
|
</div>
|
|
<div className="py-4">
|
|
<div>
|
|
{cycleStartDate && cycleEndDate && completionChartDistributionData ? (
|
|
<Fragment>
|
|
<ProgressChart
|
|
distribution={completionChartDistributionData}
|
|
totalIssues={estimateType === "points" ? totalEstimatePoints : totalIssues}
|
|
plotTitle={estimateType === "points" ? t("points") : t("work_items")}
|
|
/>
|
|
</Fragment>
|
|
) : (
|
|
<Loader className="w-full h-[160px] mt-4">
|
|
<Loader.Item width="100%" height="100%" />
|
|
</Loader>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|