mirror of
https://github.com/makeplane/plane.git
synced 2025-12-25 08:09:33 +01:00
9cfde896b3
* [WEB-5134] refactor: update `web` ESLint configuration and refactor imports to use type imports - Enhanced ESLint configuration by adding new rules for import consistency and type imports. - Refactored multiple files to replace regular imports with type imports for better clarity and performance. - Ensured consistent use of type imports across the application to align with TypeScript best practices. * refactor: standardize type imports across components - Updated multiple files to replace regular imports with type imports for improved clarity and consistency. - Ensured adherence to TypeScript best practices in the rich filters and issue layouts components.
87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
"use client";
|
|
import type { FC } from "react";
|
|
import { Fragment } from "react";
|
|
import { observer } from "mobx-react";
|
|
// plane imports
|
|
import { useTranslation } from "@plane/i18n";
|
|
import type { TCycleEstimateType } from "@plane/types";
|
|
import { Loader } from "@plane/ui";
|
|
import { getDate } from "@plane/utils";
|
|
// components
|
|
import ProgressChart from "@/components/core/sidebar/progress-chart";
|
|
import { validateCycleSnapshot } from "@/components/cycles/analytics-sidebar/issue-progress";
|
|
import { EstimateTypeDropdown } from "@/components/cycles/dropdowns";
|
|
// hooks
|
|
import { useCycle } from "@/hooks/store/use-cycle";
|
|
|
|
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>
|
|
);
|
|
});
|